输入框组
简单版
<div class="input-group">
<span class="input-group-addon">@</span>
<input type="text" placeholder="Email" class="form-control">
</div>
<div class="input-group">
<span class="input-group-addon">$</span>
<input type="number" step="0.1" placeholder="Money" class="form-control">
<span class="input-group-addon">.00</span>
</div>
按钮版
<div class="input-group">
<span class="input-group-btn">
<button class="btn">^_^</button>
</span>
<input placeholder="UserName" class="form-control">
<span class="input-group-btn">
<button class="btn">GO</button>
</span>
</div>
下拉按钮版(以及分割按钮)
<div class="input-group">
<div class="input-group-btn">
<button class="btn btn-default">下拉菜单</button>
<button class="btn dropdown-toggle" data-toggle="dropdown"><span class="caret"/></button>
<ul class="dropdown-menu">
<li> <a href="#"> 菜单1 </a> </li>
<li> <a href="#"> 菜单2 </a> </li>
<li> <a href="#"> 菜单3 </a> </li>
<li> <a href="#"> 菜单4 </a> </li>
</ul>
</div>
<input placeholder="Type Words" class="form-control">
</div>
导航元素
tabs:
<ul class="nav nav-tabs">
<li class="active"> <a href="#" > 首页 </a> </li>
<li> <a href="#" > 分类 </a> </li>
<li> <a href="#" > 服务 </a> </li>
<li> <a href="#" > 广告 </a> </li>
<li> <a href="#" > 帮助 </a> </li>
<li> <a href="#" > 关于 </a> </li>
<li> <a href="#" > 联系我们 </a> </li>
</ul>
pills胶囊式:
<ul class="nav nav-pills">
<li class="active"> <a href="#" > 首页 </a> </li>
<li> <a href="#" > 分类 </a> </li>
<li> <a href="#" > 服务 </a> </li>
<li> <a href="#" > 广告 </a> </li>
<li> <a href="#" > 帮助 </a> </li>
<li> <a href="#" > 关于 </a> </li>
<li> <a href="#" > 联系我们 </a> </li>
</ul>
一个样式变成垂直的(.nav-stacked)
<ul class="nav nav-pills nav-stacked">
<li class="active"> <a href="#" > 首页 </a> </li>
<li> <a href="#" > 分类 </a> </li>
<li> <a href="#" > 服务 </a> </li>
<li> <a href="#" > 广告 </a> </li>
<li> <a href="#" > 帮助 </a> </li>
<li> <a href="#" > 关于 </a> </li>
<li> <a href="#" > 联系我们 </a> </li>
</ul>
带下拉,禁用,real tabs(Tab切换)
<ul class="nav nav-tabs">
<li class="active"> <a data-toggle="tab" href="#home" > 首页 </a> </li>
<li>
<a data-toggle="dropdown" href="#" > 分类 <span class="caret"></span> </a>
<ul class="dropdown-menu">
<li> <a href="#" > 分类一 </a> </li>
<li> <a href="#" > 分类2 </a> </li>
<li> <a href="#" > 分类3 </a> </li>
<li> <a href="#" > 分类4 </a> </li>
</ul>
</li>
<li class="disabled"> <a href="#" > 服务 </a> </li>
<li> <a data-toggle="tab" href="#adv" > 广告 </a> </li>
<li> <a data-toggle="tab" href="#help" > 帮助 </a> </li>
<li> <a data-toggle="tab" href="#about" > 关于 </a> </li>
<li> <a data-toggle="tab" href="#phone" > 联系我们 </a> </li>
</ul>
<div class="tab-content">
<div id="home" class="tab-pane fade in active">
<h3>说出来你不信,我是主页</h3>
<p>我是主页内容</p>
</div>
<div id="help" class="tab-pane fade">
<h3>说出来你不信,我是帮助</h3>
<p>我是帮助:求人不如求几!谷歌一下你就知道!</p>
</div>
<div id="about" class="tab-pane fade">
<h3>说出来你不信,我不是帮助</h3>
<p>我是关于:关于我是个好人的问题!已经有...</p>
</div>
<div id="phone" class="tab-pane fade">
<h3>说出来你不信,我是联系方式</h3>
<p>我是联系方式:求人不如求几!谷歌一下你就知道!</p>
</div>
</div>
上面的导航栏由一个.nav-tabs的ul构成;其中有首页(默认激活),分类(下拉按钮):直接在li中添加一个下拉菜单,用a标签触发即可; 而对于可切换的tab:使用.tab-content和.tab-pane配合实现:由.tab-content的div中有多个带id的div,每个div必须带有样式.tab-pane,对应导航中a标签的href指向