下拉菜单 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>
原文：https://www.cnblogs.com/kkcoolest/p/11719663.html