下拉菜单 dropdown
下拉菜单由一个按钮触发 按钮用类.dropdown-toggle修饰 使用data-toggle="dropdown"触发器
下拉选项是一个列表 用类.dropdown-menu修饰 例如
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
下拉菜单<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">选项一</a></li>
<li><a href="#">选项二</a></li>
<li class="divider"></li>
<li><a href="#">选项三</a></li>
</ul>
</div>
按钮组 btn-group默认是水平的 还有垂直的btn-group-vertical 还有两端对齐的btn-group-justified(适用于<a>而不是<button>) 另外按钮组还可以嵌套
<!--水平-->
<div class="btn-group">
<button type="button" class="btn btn-default">button1</button>
<button type="button" class="btn btn-default">button2</button>
</div>
<!--垂直-->
<div class="btn-group-vertical">...</div>
<!--水平对齐 这里只能用<a> 不能用<button>-->
<div class="btn-group-justified">
<a type="button" class="btn btn-default">button1</a>
<a type="button" class="btn btn-default">button2</a>
</div>
<!--按钮嵌套 按钮组里嵌套一个下拉菜单-->
<div class="btn-group">
<button type="button" class="btn btn-default">button1</button>
<button type="button" class="btn btn-default">button2</button>
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
button3<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">button31</a> </li>
<li><a href="#">button32</a> </li>
</ul>
</div>
</div>
input控件组 input-group 常见的有按钮(input-group-btn)+表单 还有不可单击的按钮(input-group-add)+表单 例如
<div class="input-group">
<input type="text" class="form-control">
<span class="input-group-btn">
<button type="button" class="btn btn-default">搜索</button>
</span>
</div>
<div class="input-group">
<input type="text" class="form-control">
<span class="input-group-addon">输入完成后回车</span>
</div>
列表组 list-group 其中每项还可用list-group-item来修饰 例如
<ul class="list-group">
<li class="list-group-item"><span class="badge">52</span>中国队金牌</li>
<li class="list-group-item"><span class="badge">48</span>美国队金牌</li>
</ul>
分页 pagination 还有大号 pagination-lg 和小号 pagination-sm
在使用大号小号时 也要用类.pagination修饰 例如
<ul class="pagination pagination-sm">
<li class="disabled"><a href="#">«</a> </li>
<li class="active"><a href="#">1</a> </li>
<li><a href="#">2</a> </li>
<li><a href="#">3</a> </li>
<li><a href="#">»</a> </li>
</ul>
分页还有上下分页pager
<ul class="pager">
<li><a href="#">上一页</a> </li>
<li><a href="#">下一页</a> </li>
</ul>
标签与徽章 label 有六种形式 label-default label-primary label-success label-info label-waring label-danger
每一种形式有不同的颜色 例如
<span class="label label-default">Default</span> <span class="label label-danger">Danger</span>
按钮 btn 大号按钮btn-lg 小号按钮 btn-sm 与标签类似有六种形式 btn-default btn-primary btn-success btn-info btn-warning btn -danger
<button type="button" class="btn btn-default">默认</button> <button type="button" class="btn btn-primary">主要</button> <button type="button" class="btn btn-success">成功</button>
进度条 progress 也有五种形式progress-bar-primary progress-bar-success progress-bar-info progress-bar-danger progress-bar-warning
其中primary和default 相同 使用类.progress-bar-striped可以给进度条加上条纹效果 例如
<div class="progress">
<div class="progress-bar progress-bar-striped" role="progressbar" style="width: 60%"></div>
</div>
<div class="progress progress-striped">
<div class="progress-bar progress-bar-success" role="progressbar" style="width: 40%"></div>
</div>
面板 panel 和进度条类似有五种情况 panel-primary panel-success panel-info panel-warning panel-danger
面板分为头部panel-heading和内容panel-body 例如
<div class="panel panel-primary">
<div class="panel-heading">面板头部</div>
<div class="panel-body">primary面板内容</div>
</div>
<div class="panel panel-success">
<div class="panel-heading">面板头部</div>
<div class="panel-body">success面板内容</div>
</div>