bootstrap中css组件（除导航条）
一，小图标
用法1 <span class="glyphicon glyphicon-user"></span>
用法2 <i class="glyphicon glyphicon-user"></i>
二，下拉菜单
例1基本用法
<div class="dropdown"> //父定位relative，
<button type="button" class="btn"
data-toggle="dropdown">// data-toggle=”dropdown”与父级相关联，dropup表示向上弹出
主题
<span class="caret"></span> //下三角
</button> //点击以后加一个open样式，显示下拉菜单
<ul class="dropdown-menu pull-right">//子定位 绝对定位 ， 添加 class .pull-right 来向右对齐下拉菜单
<li class="dropdown-header">下拉菜单标题</li> //菜单标题
<li>
<a tabindex="-1" href="#">Java</a>
</li>
<li>
<a tabindex="-1" href="#">数据挖掘</a>
</li>
<li>
<a tabindex="-1" href="#">数据通信/网络</a>
</li>
<li class="divider"></li>
<li role="presentation" class="dropdown-header">下拉菜单标题</li>
<li>
<a tabindex="-1" href="#">分离的链接</a>
</li>
</ul>
</div>
例2多级嵌套
- <ul class="dropdown-menu" >
- <li><a href="#">Some action</a></li>
- <li><a href="#">Some other action</a></li>
- <li class="divider"></li>
- <li class="dropdown-submenu"> //子菜单上用dropdown-submenu
- <a tabindex="-1" href="#">Hover me for more options</a>
- <ul class="dropdown-menu"> //dropdown-menu
- <li><a tabindex="-1" href="#">Second level</a></li>
- <li class="dropdown-submenu">
- <a href="#">Even More..</a>
- <ul class="dropdown-menu">
- <li><a href="#">3rd level</a></li>
- <li><a href="#">3rd level</a></li>
- </ul>
- </li>
- <li><a href="#">Second level</a></li>
- <li><a href="#">Second level</a></li>
- </ul>
- </li>
- </ul>
三，按钮组
1.基本用法：在多个按钮外部使用一个容器，如div，再应用.btn-group样式
效果
容器四周是圆角，其余直角
2.按钮工具栏
在容器上应用.btn-toolbar
3.按钮组尺寸大小
在使用.btn-group基础上，再设置btn-group-lg,btn-group-sm,btn-group-xs
在按钮组内设置btn-sm等无效果
4.嵌套分组
将下拉菜单和普通按钮排在一起，只需要在.dropdown下拉菜单外部包装一个div容器，并应用.btn-group样式,本质上是用
.btn-group代替.dropdown样式，其也设置了相对定位样式
5.垂直分组
将容器的.btn-group样式替换为.btn-group-vertical样式
6.自适应分组
将容器的.btn-group样式替换为.btn-group-justified样式
四，按钮下拉菜单
其是普通的下拉菜单基础上封装了,btn样式,效果为单击一个按钮，显示隐藏的下拉菜单
1.普通下拉菜单
把二de下拉菜单.btn-down换成.btn-group，其余不变
2.分离式下拉菜单
把按钮和箭头分离，即将箭头设置成一个单独的按钮
五，输入框组
1.基本用法
将文本输入框和文字或小icon组合在一起进行显示，我们称其为addon
使用方法
<div class="input-group">//在容器上添加input-group样式，尾部添加-lg等控制大小
<input type="text" class="form-control">//.form-control样式必须添加，否则会变成下图
<span class="input-group-addon">.00</span>//个性元素上添加.input-group-addon样式
</div>
2.复选框与单选框作为addon
在.input-group-addon样式中，不仅可以放置label,icon,checkbox和radio。
例<div class="input-group">
<span class="input-group-addon"> <input type="radio"></span>
<input type="text" class="form-control">
</div>
3.按钮作为addon
把.input-group-addon换为.input-group-btn，在里面放按钮
4.下拉菜单作为addon
在普通的.btn按钮上，应用一个data-toggle='dropdown'属性就可作为addon，这特么..
例
<div class="input-group">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">下拉菜单 <span class="caret"></span> </button>
<ul class="dropdown-menu"> <li> <a href="#">功能</a> </li> <li> <a href="#">另一个功能</a> </li> <li> <a href="#">其他</a> </li> <li class="divider"></li> <li> <a href="#">分离的链接</a> </li> </ul>
</div><!-- /btn-group -->
<input type="text" class="form-control">
</div><!-- /input-group -->
5.分段按钮作为addon
在input-group-btn中放多个按钮
六，标签
添加.label样式可以实现高亮，并且有hover和focus效果
和按钮元素类似，label样式也提供了多种颜色的支持，分别是成功绿，警告黄，危险红，信息蓝，用来改变背景颜色
<span class="label label-default">默认标签</span>
<span class="label label-primary">主要标签</span>
<span class="label label-success">成功标签</span>