Bootstrap的组件使用(三)

感谢Jie’ blog http://ilog.vip/ ,谢谢他让我有了继续写下去的信念。愿一起坚持，在路上…
上一章简单介绍了Boostrap的组件使用(二),如果没有看过，请观看上一章

一.导航

需要使用一个.nav, 需要在最上层的div上添加一个role=“navigation”.

<div role="navigation">
			<ul class="nav nav-tabs">
				<li role="presentation" class="active"><a href="#">Home</a></li>
				<li role="presentation"><a href="#">Profile</a></li>
				<li role="presentation"><a href="#">Messages</a></li>
			</ul>
		</div>

如果是胶囊式的，用nav nav-pills，默认胶囊式的是水平的，如果设置成竖直的，需要添加 nav-stacked

<ul class="nav nav-pills nav-stacked">
  ...
</ul>

如果设置成两端对齐，用nav-justifed ,这个已经被弃用了。
如果让导航不可用，可以将li设置成disabled.

 <li role="presentation" class="disabled"><a href="#">Disabled link</a></li>

在导航栏中添加下拉菜单

<div role="navigation">
			<ul class="nav nav-tabs">
				<li class="active"><a href="#">Home</a></li>
				<li class="disabled"><a href="#">Profile</a></li>
				<!-- 添加下拉菜单  -->
				<li role="presentation" class="dropdown">
					<a
						class="dropdown-toggle" data-toggle="dropdown" href="#"
						role="button" aria-haspopup="true" aria-expanded="false">
							Dropdown <span class="caret"></span>
					</a>
					<ul class="dropdown-menu">
						<li><a href="#">A</a></li>
						<li><a href="#">B</a></li>
						<li><a href="#">C</a></li>
						<li><a href="#">D</a></li>
					</ul>
				</li>
				<li><a href="#">Messages</a></li>
			</ul>
		</div>

二. 导航条

导航条，用. navbar

设置品牌图标

<nav class="navbar navbar-default">
			<!-- 设置布局填充 -->
			<div class="container-fluid">
				<!-- 设置头 -->
				<div class="navbar-header">
					<a class="navbar-brand" href="#"> 
						<img alt="Brand" src="...">
					</a>
				</div>
			</div>
		</nav>

设置表单

<form class="navbar-form navbar-left" role="search">
			<!-- 输入框 -->
			<div class="form-group">
				<input type="text" class="form-control" placeholder="Search">
			</div>
			<button type="submit" class="btn btn-default">Submit</button>
		</form>

添加普通按钮

<button type="button" class="btn btn-default navbar-btn">Sign in</button>

添加普通文本

<p class="navbar-text">Signed in as Mark Otto</p>

添加非导航的链接,用navbar-link

<p class="navbar-text navbar-right">Signed in as <a href="#" class="navbar-link">Mark Otto</a></p>

将nav 固定在顶部需要将其放置在class="container"上面。
用navbar-fixed-top

<nav class="navbar navbar-default navbar-fixed-top">
	 <div class="container">
	    123412
	  </div>
</nav>

将其固定在底部，用navbar-fixed-bottom.
将其静态在顶部，用navbar-static-top.
将其颜色反转，用navbar-inverse.

三. 路径导航

用breadcrumb,也叫做面包导航

<ol class="breadcrumb">
	  <li><a href="#">Home</a></li>
	  <li><a href="#">Library</a></li>
	  <li class="active">Data</li>
	</ol>

点击Home时进入一个页面，点击Library时进入一个页面，点击Data时进入一个页面。

四.分页

<!-- 设置成导航 -->
	<nav aria-label="Page navigation">
		<!-- 设置样式为pagination, 分布 -->
		<ul class="pagination">
			<!-- 上一页 -->
			<li><a href="#" aria-label="Previous"> <span
					aria-hidden="true">&laquo;</span>
			</a></li>
			<li><a href="#">1</a></li>
			<li><a href="#">2</a></li>
			<li><a href="#">3</a></li>
			<li><a href="#">4</a></li>
			<li><a href="#">5</a></li>
			<!-- 下一页 -->
			<li><a href="#" aria-label="Next"> <span aria-hidden="true">&raquo;</span>
			</a></li>
		</ul>
	</nav>

设置禁用或者激活。如果是激活,在li中设置class=“active”, 如果是禁用，则设置 class=“disabled”
设置尺寸，在ul 中设置 pagination-lg, pagination-sm, 默认为pagination-md, 可以不写。
如果是翻页形式的，可以设置成:

<nav aria-label="...">
		<ul class="pager">
			<li><a href="#">Previous</a></li>
			<li><a href="#">Next</a></li>
		</ul>
	</nav>

将翻页设置成左右对齐链接：需要在li中设置previous和next

<nav aria-label="...">
		<ul class="pager">
			<!-- previous为最左边 -->
			<li class="previous"><a href="#"><span aria-hidden="true">&larr;</span>
					Older</a></li>
			<!-- next为最右边 -->
			<li class="next"><a href="#">Newer <span aria-hidden="true">&rarr;</span></a></li>
		</ul>
	</nav>

可用，不可用。如果可用，在li中添加active,默认为active. 如果不可用，则设置为disabled.

<li class="previous disabled"><a href="#"><span aria-hidden="true">&larr;</span> Older</a></li>

四.标签

标签，用span进行包括起来。用的主要的是.label

<span class="label label-default">Default</span>

可以设置背景色，有label-default,label-primary,label-success,label-info,label-warning,label-danger

五.徽章

在普通标签里面添加数字，常用于提示消息数目等。
设置关键字为 .badge
1.链接徽章:

<a href="#">Inbox <span class="badge">42</span></a>

按钮徽章:

<button class="btn btn-primary" type="button">
  Messages <span class="badge">4</span>
</button>

导航徽章

<ul class="nav nav-pills" role="tablist">
  <li role="presentation" class="active"><a href="#">Home <span class="badge">42</span></a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li role="presentation"><a href="#">Messages <span class="badge">3</span></a></li>
</ul>

六.巨幕

用.jumbotron.

<div class="jumbotron">
  <h1>Hello, world!</h1>
  <p>...</p>
  <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
</div>

如果需要让巨幕组件的宽度与浏览器宽度一致并且没有圆角，请把此组件放在所有 .container 元素的外面，并在组件内部添加一个 .container 元素。

<div class="jumbotron">
  <div class="container">
    ...
  </div>
</div>

七页头

利用 .page-header, 添加一个下划线

<div class="page-header">
<!-- 在h1下面会有一条线 -->
  <h1>Example page header <small>Subtext for header</small></h1>
</div>

八. 缩略图

利用.thumbnail，可以设置图文混排。

<div class="row">
			<div class="col-sm-6 col-md-4">
				<div class="thumbnail">
					<!-- 设置图片 -->
					<img src="..." alt="...">
					<!-- 添加图片的解释说明 -->
					<div class="caption">
						<h3>Thumbnail label</h3>
						<p>...</p>
						<p>
								<!-- 相关操作链接 -->
								<a href="#" class="btn btn-primary" role="button">Button</a> <a
								href="#" class="btn btn-default" role="button">Button</a>
						</p>
					</div>
				</div>
			</div>
		</div>

在这里插入图片描述

谢谢!!