Bootstrap等学习总结（更新中。。。）

1、data-toggle="tab"：通过 data 属性：您需要添加 data-toggle="tab" 或 data-toggle="pill" 到锚文本链接中。添加 nav 和 nav-tabs 类到 ul 中，将会应用 Bootstrap 标签样式，添加 nav 和 nav-pills 类到 ul 中，将会应用 Bootstrap 胶囊式样式。

<ul class="nav nav-tabs">
	<li><a href="#identifier" data-toggle="tab">Home</a></li>
	...
</ul>

2、nav：Bootstrap中用于定义导航元素的一些选项，

表格导航或标签

创建一个标签式的导航菜单：（1）以一个带有 class .nav 的无序列表开始。（2）添加 class .nav-tabs。

实例：

< p > 标签式的导航菜单 </ p >

< ul class = " nav nav-tabs " >  

< li class = " active " > < a href = " # " > Home </ a > </ li >  

< li > < a href = " # " > SVN </ a > </ li >  

< li > < a href = " # " > iOS </ a > </ li >  

< li > < a href = " # " > VB.Net </ a > </ li >  

< li > < a href = " # " > Java </ a > </ li >  

< li > < a href = " # " > PHP </ a > </ li >

</ ul >

结果样式如下：

胶囊式的导航菜单

基本的胶囊式导航菜单

需要使用 class .nav-pills 代替 .nav-tabs，其他的步骤与上面相同。

结果如下所示：

垂直的胶囊式导航菜单

使用 class .nav、.nav-pills 的同时使用 class .nav-stacked，让胶囊垂直堆叠。

结果如下所示：

两端对齐的导航

您可以在屏幕宽度大于 768px 时，通过在分别使用 .nav、.nav-tabs 或 .nav、.nav-pills 的同时使用 class .nav-justified，让标签式或胶囊式导航菜单与父元素等宽。在更小的屏幕上，导航链接会堆叠。

实例：<ulclass="nav nav-pills nav-justified">

结果如下所示：

禁用链接

对每个 .nav class，如果添加了 .disabled class，则会创建一个灰色的链接，同时禁用了该链接的 :hover 状态，该 class 只会改变 <a> 的外观，不会改变它的功能。在这里，您需要使用自定义的 JavaScript 来禁用链接。

实例

< p > 导航元素中的禁用链接 </ p >

< ul class = " nav nav-pills " >  

< li class = " active " > < a href = " # " > Home </ a > </ li >  

< li > < a href = " # " > SVN </ a > </ li >  

< li class = " disabled " > < a href = " # " > iOS（禁用链接） </ a > </ li >  

< li > < a href = " # " > VB.Net </ a > </ li >  

< li > < a href = " # " > Java </ a > </ li >  

< li > < a href = " # " > PHP </ a > </ li >

</ ul >

结果如下所示：

下拉菜单

导航菜单与下拉菜单使用相似的语法。默认情况下，列表项的锚与一些数据属性协同合作来触发带有 .dropdown-menu class 的无序列表。

带有下拉菜单的标签

向标签添加下拉菜单的步骤如下：（1）以一个带有 class .nav 的无序列表开始。（2）添加 class .nav-tabs。（3）添加带有 .dropdown-menu class 的无序列表。

实例

< p > 带有下拉菜单的标签 </ p >  

< ul class = " nav nav-tabs " >  

< li class = " active " > < a href = " # " > Home </ a > </ li >  

< li > < a href = " # " > SVN </ a > </ li >  

< li > < a href = " # " > iOS </ a > </ li >  

< li > < a href = " # " > VB.Net </ a > </ li >  

< li class = " dropdown " >  

< a class = " dropdown-toggle " data-toggle = " dropdown " href = " # " >  

Java < span class = " caret " > </ span >  

</ a >  

< ul class = " dropdown-menu " >  

< li > < a href = " # " > Swing </ a > </ li >  

< li > < a href = " # " > jMeter </ a > </ li >  

< li > < a href = " # " > EJB </ a > </ li >  

< li class = " divider " > </ li >  

< li > < a href = " # " > 分离的链接 </ a > </ li >  

</ ul >  

</ li >  

< li > < a href = " # " > PHP </ a > </ li >  

</ ul >

结果如下所示：

3、清除浮动

如需清除元素的浮动，请使用 .clearfix class。

实例

< div class = " clearfix " style = " background: #D8D8D8;border: 1px solid #000;padding: 10px; " >  

< div class = " pull-left " style = " background:#58D3F7; " > 向左快速浮动   </ div >  

< div class = " pull-right " style = " background: #DA81F5; " > 向右快速浮动 </ div >

</ div >

结果显示

结果如下所示：

4、 按钮组

.btn-group：该 class 用于形成基本的按钮组。在 .btn-group 中放置一系列带有 class .btn 的按钮。

实例

< div class = " btn-group " >  

< button type = " button " class = " btn btn-default " > 按钮 1 </ button >  

< button type = " button " class = " btn btn-default " > 按钮 2 </ button >  

< button type = " button " class = " btn btn-default " > 按钮 3 </ button >

</ div >

结果如下所示：

5、 按钮

.btn：为按钮添加基本样式。

.btn-default：默认/标准按钮

实例

< p > < button type = " button " class = " btn btn-primary btn-lg " > 大的原始按钮 </ button >  

< button type = " button " class = " btn btn-default btn-lg " > 大的按钮 </ button > </ p >

< p >   < button type = " button " class = " btn btn-primary " > 默认大小的原始按钮 </ button >  

< button type = " button " class = " btn btn-default " > 默认大小的按钮 </ button > </ p >

< p > < button type = " button " class = " btn btn-primary btn-sm " > 小的原始按钮 </ button >  

< button type = " button " class = " btn btn-default btn-sm " > 小的按钮 </ button > </ p >

< p > < button type = " button " class = " btn btn-primary btn-xs " > 特别小的原始按钮 </ button >  

< button type = " button " class = " btn btn-default btn-xs " > 特别小的按钮 </ button > </ p >

< p > < button type = " button " class = " btn btn-primary btn-lg btn-block " > 块级的原始按钮 </ button >  

< button type = " button " class = " btn btn-default btn-lg btn-block " > 块级的按钮 </ button > </ p >

结果如下所示：

更多导航元素组件实例详细请见网址：http://www.runoob.com/bootstrap/bootstrap-navigation-elements.html