我的bootstrap日记（二）

<!-- glyphicon字体图标 glyphicon字体图标 -->
<span class="glyphicon glyphicon-search"></span> <!-- 空span标签 -->

<!-- 下拉菜单 下拉菜单 下拉菜单 下拉菜单 下拉菜单 下拉菜单 -->
<div class="dropdown">下拉菜单</div>
<div class="dropup">上弹菜单</div>
<!-- 在想要点击的按钮上面添加样式 -->
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown">按钮文本</button>
<span class="caret"></span> <!-- 按钮后面的三角形图标 -->
<!-- 在下单列表项添加的样式 -->
<ul class="dropdown-menu">...</ul> <!-- dropdown-menu是必须类，dropdown-menu-right是可选类 -->
<li class="dropdown-header">...</li> <!-- .disabled .divider -->

<!-- 按钮组 按钮组 按钮组 按钮组 按钮组 按钮组 -->
<!-- 按钮组基本类 -->
<div class="btn-group">
<button class="btn btn-default"></button> <!-- .btn-primary .btn-success ... -->
</div>
<!-- 按钮工具栏 -->
<div class="btn-toolbar"> <!-- 按钮工具栏类 -->
<div class="btn-group"></div> <!-- 里面放置多个按钮组类 -->
</div>
<!-- 尺寸 -->
<div class="btn-group btn-group-lg">...</div> <!-- .btn-group-lg/sm/xs -->
<!-- 垂直排列 -->
<div class="btn-group-vertica"></div>
<!-- 两端对齐 -->
<!-- a标签这样即可了，button标签必须将每个按钮包裹进一个按钮组中 -->
<div class="btn-group btn-group-justified">...</div>

<!-- 按钮下拉菜单 按钮下拉菜单 按钮下拉菜单 -->
<div class="btn-group">
<button class="btn btn-default dropdown" data-toggle="dropdown">...</button>
<ul class="dropdown-menu">...</ul>
</div>
<!-- 分裂式下拉菜单 -->
<div class="btn-group">
<button class="btn btn-default"></button>
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown"></button>
<ul class="dropdown-menu"></ul>
</div>
<!-- 尺寸 -->
<button class="btn-default-lg"></button> <!-- 添加在button标签上面 -->

<!-- 输入框组 输入框组 输入框组 输入框组 -->
<!-- 在文本输入框 <input> 前面、后面或是两边加上文字或按钮，可以实现对表单控件的扩展 -->
<div class="input-group">
<span class="input-group-addon"></span> <!-- .input-group-btn -->
<input type="text" class="form-control">
</div>

<!-- 导航 导航 导航 导航 导航 导航 导航 -->
<ul class="nav nav-tabs">标签页</ul> <!-- 必须基于.nav类 -->
<ul class="nav nav-pills"胶囊式></ul> <!-- 必须基于.nav类 -->
<ul class="nav nav-pills nav-stacked">垂直排列</ul> <!-- nav-stacked -->
<ul class="nav nav-tabs nav-justified">两端对齐</ul> <!-- nav-justified -->
<!-- 状态 -->
disabled 禁用 active 激活
<!-- 添加下拉菜单 -->
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown"></a>
<ul class="dropdown-menu">...</ul>
</li>

<!-- 导航条 导航条 导航条 导航条 导航条 导航条 -->
<!--
.navbar 设置nav元素微导航条组件
.navbar-default 指定导航条组件为默认主题
.navbar-inverse 指定导航条组件为黑色主题
.navbar-fixed-top 设置导航条组件固定在顶部
.navbar-fixed-buttom 设置导航条组件固定在底部
.navbar-static-top 设置导航条组件静止在顶部
.container-fluid 设置宽度充满父元素，即100%
.navbar-header 主要指定div元素微导航条组件包裹品牌图标及切换按钮
.navbar-brand 设置导航条组件内的品牌图标或者文字
.navbar-toggle 设置button元素微导航条组件的切换按钮
.navbar-collapse 设置div元素为导航条组件各列表项的父元素
.collapse 设置div元素为视口大于768px时显示
.collapsed 设置div元素为视口小于768px时显示
.navbar-nav 设置ul为导航条组件内的列表元素
.navbar-left 设置导航条内元素向左对齐
.navbar-right 设置导航条内元素向右对齐
.navbar-form 为导航条组件内部的表单组件
.navbar-btn 为导航条组件内部的按钮样式
.navbar-text 为导航条组件内部的文本样式
.navbar-link 在标准导航组件外添加标准连接
.breadcrumb 设置列表元素显示为路径导航组件 -->

<!-- 路径导航 路径导航 路径导航 路径导航 路径导航-->
<ol class="breakcrumb">
<li><a href="#"></a></li> <!-- 为前面的几个列表添加a -->
...
<li class="active"></li> <!-- 最后一个列表添加actice -->
</ol>

<!-- 分页 分页 分页 分页 分页 分页-->
<nav>
<ul class="pagination"> <!-- pagination -->
<li><a href="#">&laquo;</a></li> <!-- 禁用状态，为li添加.disabled类 -->
<li><a href="#">1~9</a></li> <!-- 激活状态，为li添加.active类 -->
...
<li><a href="#">&raquo;</a></li>
</ul>
</nav>
<!-- 尺寸 -->
<nav><ul class="pagination pagination-lg">...</ul></nav> <!-- lg/sm -->
<!-- 翻页 -->
<nav>
<ul class="pager"> <!-- pager类，翻页 -->
<li class="a" href="#">Previous</li> <!-- .previous类 左对齐 -->
<li class="a" href="#">Next</li> <!-- .next类 右对齐 -->
</ul>
</nav>

<!-- 标签 标签 标签 标签 标签 标签 标签 标签 -->
<span class="label label-success">success</span> <!-- default/primary/info/warning/danger -->

<!-- 徽章 徽章 徽章 徽章 徽章 徽章 徽章 -->
<span class="badge">5</span>

<!-- 巨幕 巨幕 巨幕 巨幕 巨幕 巨幕 -->
<div class="jumbotron">...</div> <!-- 带圆角的巨幕，宽度与父元素一致 -->

<div class="jumbotron"> <!-- 组件放在所有 .container 元素的外面，并在组件内部添加一个 .container 元素 -->
<div class="container">...</div> <!-- 不带圆角的巨幕，宽度与浏览器宽度一致 -->
</div>

<!-- 缩略图 缩略图 缩略图 缩略图 -->
<div class="row">
<div class="col-xs-6 col-md-3">
<a href="" class="thumbnail"><img src="" alt=""></a>
<!-- 如果需要在每个图片下面添加说明的话，在这里使用div.caption -->
</div>
...
</div>

<!-- 警告框 警告框 警告框 警告框 警告框 -->
<div class="alert alert-success">...</div> <!-- alert-danger/alert-warning -->
<!-- 为警告框添加一个可选的 .alert-dismissible 类和一个关闭按钮 -->
<div class="alert alert-danger alert-dismissable">
<button class="close" data-dismiss="alert">&times;</button> <!-- &times;就是X的转译符 -->
<a class="alert-link">...</a> <!-- 如果要在警告框内添加链接的话，需要使用alert-link类 -->
</div>

<!-- 进度条 进度条 进度条 进度条 进度条 -->
<div class="progress">
<div class="progress-bar" style="width:60%;">60%</div> <!-- 如果有提示标签的话， 最好加上min-width:20px这样的属性 -->
</div>
<!-- 不同颜色风格进度条 -->
<div class="progress-bar progress-bar-info" style="width:30%;">info/success/danger/primary</div>
<!-- 条纹效果 -->
<div class="progress-bar progress-bar-striped" style="width:70%"> 静止条纹效果</div>
<div class="progress-bar progress-bar-striped active" style="width:70%"> active动态条纹效果</div>
<!-- 堆叠效果 -->
<!-- 把多个进度条放入同一个 .progress 中，使它们呈现堆叠的效果。 -->

<!-- 媒体对象 -->
<ul class="media-list">
<li class="media">
a.media-left
</li>
...
</ul>
<!-- .media——指定该元素包裹媒体对象组件；
.media-left——设置媒体对象的多媒体内容居左；
.media-right——设置媒体对象的多媒体内容居右；
.media-middle——设置媒体对象的多媒体内容上下居中；
.media-bottom——设置媒体对象的多媒体内容居底；
.media-body——设置媒体对象的文本内容部分；
.meida-heading——设置h4元素为文本内容的标题；
.media-list——用来设置包裹媒体对象的列表元素 -->

<!-- 列表组 -->
<ul class="list-group">
<li class="list-group-item">列表内容</li>
...
</ul>
<!-- 带链接的列表组 -->
<div class="list-group">
<a href="" class="list-group-item"></a>
</div>
<!-- 列表组情景 -->
.disable .active list-group-item-success
<!-- 定制内容 -->
<div class="list-group">
<a href="" class="list-group-item">
<h4 class="list-group-item-heading"></h4>
<p class="list-group-item-text"></p>
</a>
</div>

<!-- 面板 面板 面板 面板 面板 -->
<div class="panel panel-success">
<div class="panel-heading"><h3 class="panel-title">Panel title</h3></div>
<div class="panel-body"></div>
<div class="paner-footer"></div>
</div>

<!-- Well -->
<!-- 是一种会引起内容凹陷显示或插图效果的容器 <div> -->
<div class="well">...</div>