标签：
输入框组
添加额外元素.input-group-addon
外包元素.input-group>input-group-addon+form-control
<div class="input-group"> <span class="input-group-addon">额外元素</span> <input type="text" class="form-control"/> </div>
输入框组尺寸
控制类.input-group-*: .input-group-lg/.input-group-sm
<div class="input-group input-group-lg"> <span class="input-group-addon" id="sizing-addon1">额外元素</span> <input type="text" class="form-control"> </div>
额外元素添加单选或多选
在额外元素中嵌套单选或多选按钮元素
<div class="input-group"> <span class="input-group-addon"> <input type="radio" /> </span> <input type="text" class="form-control" /> </div>
额外元素为按钮
额外按钮类.input-group-btn
<div class="input-group"> <span class="input-group-btn"> <button class="btn btn-default">额外元素按钮</button> </span> <input type="text"class="form-control" /> </div>
额外元素为下拉按钮菜单
.input-group-btn包含下拉按钮菜单元素(包括触发器和下拉菜单)
<div class="input-group"> <div class="input-group-btn"> <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">button <span class="caret"></span></button> <ul class="dropdown-menu"> <li><a href="">item1</a></li> <li><a href="">item2</a></li> </ul> </div> <input type="text" class="form-control" /> </div>
额外元素为分裂式按钮下拉菜单
额外元素包含分裂式按钮下拉菜单(按钮，触发器和下拉菜单)
<div class="input-group"> <div class="input-group-btn"> <button class="btn btn-default dropdown-toggle">button</button> <button class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button> <ul class="dropdown-menu"> <li><a href="">item1</a></li> <li><a href="">item2</a></li> </ul> </div> <input type="text" class="form-control" /> </div>
导航
基类.nav {padding-left/margin-bottom/list-style}
标签页导航
标签页类.nav-tabs 活动选项类.active 选项添加role="presentation"
<ul class="nav nav-tabs"> <li role="presentation" class="active"><a href="#home">Home</a></li> <li role="presentation"><a href="#profile">Profile</a></li> <li role="presentation"><a href="#messages">Messages</a></li> </ul>
胶囊式标签导航.nav-pills
<ul class="nav nav-pills"> <li role="presentation" class="active"><a href="#home">Home</a></li> <li role="presentation"><a href="#profile">Profile</a></li> <li role="presentation"><a href="#messages">Messages</a></li> </ul>
胶囊式标签导航(堆叠状).nav-stacked
<ul class="nav nav-pills nav-stacked"> <li role="presentation" class="active"><a href="#home">Home</a></li> <li role="presentation"><a href="#profile">Profile</a></li> <li role="presentation"><a href="#messages">Messages</a></li> </ul>
禁用的链接
对选项添加类.disabled
<ul class="nav nav-tabs"> <li role="presentation" class="active"><a href="#">Home</a></li> <li role="presentation" class="disabled"><a href="#">Profile</a></li> <li role="presentation"><a href="#">Messages</a></li> </ul>
带下拉菜单的标签页面
在某一个选项中添加下拉菜单组件
<ul class="nav nav-*"> <li role="presentation" class="active"><a href="#">Home</a></li> <li role="presentation"><a href="#">Profile</a></li> <li role="presentation" class="dropdown"> <a href="" class="dropdown-toggle" data-toggle="dropdown"> Messages <span class="caret"></span> </a> <ul class="dropdown-menu"> <li> <a href="">item1</a> <a href="">item2</a> </li> </ul> </li> </ul>
下拉导航页面
外包元素>{[导航ul(基类.nav＋样式类.*s)>选项li(基本选项role="persentation"＋下拉选项)]＋[选项对应内容]}
<div> <ul class="nav nav-*s" role="tablist"> <li role="presentation" class="active"><a href="#item1" data-toggle="*">item1</a></li> <li role="presentation"><a href="#item2" data-toggle="*">item2</a></li> <li role="presentation"><a href="#item3" data-toggle="*">item3</a></li> <li role="presentation" class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> item4 <span class="caret"></span> </a> <ul class="dropdown-menu"> <li><a href="#item4-1" data-toggle="*">item4-1</a></li> <li><a href="#item4-2" data-toggle="*">item4-2</a></li> <li><a href="#item4-3" data-toggle="*">item4-3</a></li> </ul> </li> </ul> <div class="tab-content"> <div role="tabpanel" class="tab-pane active" id="item1">item1-content</div> <div role="tabpanel" class="tab-pane" id="item2">item2-content</div> <div role="tabpanel" class="tab-pane" id="item3">item3-content</div> <div role="tabpanel" class="tab-pane" id="item4-1">item4-1-content</div> <div role="tabpanel" class="tab-pane" id="item4-2">item4-2-content</div> <div role="tabpanel" class="tab-pane" id="item4-3">item4-3-content</div> </div> </div>
标签：
原文地址：http://www.cnblogs.com/bsj2016/p/5483095.html
