下拉菜單
特別聲明：因為Bootstrap的組件交互效果都是依賴於jQuery庫寫的插件，所以在使用bootstrap.min.js之前一定要先加載jquery.min.js才會生效果。
<div><button type="button" id="dropdownMenu1" data-toggle="dropdown">下拉菜單<span></span></button><ul role="menu" aria-labelledby="dropdownMenu1"><li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜單項</a></li><li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜單項</a></li><li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜單項</a></li><li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜單項</a></li></ul></div> <!--jquery一定要在bootstrap之前導入,後者是在前者的基礎上面實現的--><script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script><script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
效果圖:
實現原理:
在剛開始的時候,其中class中有一個display:none;下面看一下css
.dropdown-menu {position: absolute;/*設置絕對定位，相對於父元素div.dropdown*/top: 100%;/*讓下拉菜單項在父菜單項底部，如果父元素不設置相對定位，該元素相對於body元素*/left: 0;z-index: 1000;/*讓下拉菜單項不被其他元素遮蓋住*/display: none;/*默認隱藏下拉菜單項*/float: left;min-width: 160px;padding: 5px 0;margin: 2px 0 0;font-size: 14px;list-style: none;background-color: #fff;background-clip: padding-box;border: 1px solid #ccc;border: 1px solid rgba(0, 0, 0, .15);border-radius: 4px;-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);box-shadow: 0 6px 12px rgba(0, 0, 0, .175);}然後利用點擊事件,控制標籤class的移除和添加,用來實現顯示和隱藏
通過js技術手段，給父容器“div.dropdown”添加或移除類名“open”來控制下拉菜單顯示或隱藏。也就是說，默認情況，
“div.dropdown”沒有類名“open”，當用戶第一次點擊時，“div.dropdown”會添加類名“open”；當用戶再次點擊時，“div.dropdown”容器中的類名“open”又會被移除。我們可以通過瀏覽器的firebug查看整個過程：
默認情況：
用戶第一次點擊：
用戶再次點擊：
open的css
.open > .dropdown-menu {display: block;}下拉菜單分割線
還是上面的例子,再貼上代碼!看看效果,還是要引入js文件!後面就不多少了!
<div><button type="button" id="dropdownMenu1" data-toggle="dropdown">下拉菜單<span></span></button><ul role="menu" aria-labelledby="dropdownMenu1"><li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜單項</a></li><li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜單項</a></li><li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜單項</a></li><li role="presentation"></li><li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜單項</a></li></ul></div>
效果圖:
實際上就多了這麼一行代碼
<li role="presentation"></li>
下拉菜單菜單標題
直接上代碼
<div><button type="button" id="dropdownMenu1" data-toggle="dropdown">下拉菜單<span></span></button><ul role="menu" aria-labelledby="dropdownMenu1"><li role="presentation">第一部分菜單頭部</li><li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜單項</a></li><li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜單項</a></li><li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜單項</a></li><li role="presentation"></li><li role="presentation">第二部分菜單頭部</li><li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜單項</a></li><li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜單項</a></li><li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜單項</a></li></ul></div>
效果圖:
其實也就增加了一個代碼:
<li role="presentation">第二部分菜單頭部</li>
下拉菜單對齊方式
<h4>使用pull-right類使下拉菜單與父容器右邊對齊</h4><div style="float: left;"><button type="button" id="dropdownMenu1" data-toggle="dropdown">
下拉菜單
<span></span></button><ul role="menu" aria-labelledby="dropdownMenu1"><li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜單項</a></li><li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜單項</a></li><li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜單項</a></li><li role="presentation"></li><li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜單項</a></li></ul></div><br /><br /><h4>使用dropdown-menu-right類使下拉菜單與父容器右邊對齊</h4><div style="float: left;"><button type="button" id="dropdownMenu1" data-toggle="dropdown">
下拉菜單
<span></span></button><ul role="menu" aria-labelledby="dropdownMenu1"><li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜單項</a></li><li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜單項</a></li><li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜單項</a></li><li role="presentation"></li><li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜單項</a></li></ul></div><br /><br /><h4>下拉菜單與父容器左邊對齊</h4><div style="float: left;"><button type="button" id="dropdownMenu1" data-toggle="dropdown">
下拉菜單
<span></span></button><ul role="menu" aria-labelledby="dropdownMenu1"><li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜單項</a></li><li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜單項</a></li><li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜單項</a></li><li role="presentation"></li><li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜單項</a></li></ul></div>
實際上是在“dropdown-menu”上添加一個“pull-right”或者“dropdown-menu-right”類名,其中css的樣式代碼
.dropdown-menu.pull-right {right: 0;left: auto;}.dropdown-menu-right {right: 0;left: auto;}下拉菜單（菜單項狀態）
下拉菜單項的默認的狀態（不用設置）有懸浮狀態（:hover）和焦點狀態（:focus）
下拉菜單項除了上面兩種狀態，還有當前狀態（.active）和禁用狀態（.disabled）。
<div><button type="button" id="dropdownMenu1" data-toggle="dropdown">下拉菜單<span></span></button><ul role="menu" aria-labelledby="dropdownMenu1"><li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜單項</a></li><li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜單項</a></li><li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜單項</a></li><li role="presentation"></li><li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜單項</a></li></ul></div>
鼠標放上去,在禁用的上面會顯示一個禁止的標誌,截圖不能截進去!
按鈕（按鈕組）
單個按鈕在Web頁面中的運用有時候並不能滿足我們的業務需求，常常會看到將多個按鈕組合在一起使用，比如富文本編輯器裡的一組小圖標按鈕等
<div><button type="button"><span></span></button><button type="button"><span></span></button><button type="button"><span></span></button><button type="button"><span></span></button><button type="button"><span></span></button><button type="button"><span></span></button><button type="button"><span></span></button><button type="button"><span></span></button><button type="button"><span></span></button></div>
效果圖:
在這裡可以根據不同的圖標生成不同的圖標按鈕!可以在此網址查看:http://getbootstrap.com/components/#glyphicons
按鈕（按鈕工具欄）
在富文本編輯器中，將按鈕組分組排列在一起，比如說複製、剪切和粘貼一組；左對齊、中間對齊、右對齊和兩端對齊一組，如下圖所示：
那麼Bootstrap框架按鈕工具欄也提供了這樣的製作方法，你只需要將按鈕組“btn-group”按組放在一個大的容器“btn-toolbar”中，如下所示：
<div><div><button type="button"><span></span></button><button type="button"><span></span></button><button type="button"><span></span></button><button type="button"><span></span></button></div><div><button type="button"><span></span></button><button type="button"><span></span></button></div><div><button type="button"><span></span></button><button type="button"><span></span></button><button type="button"><span></span></button></div><div><button type="button"><span></span></button><button type="button"><span></span></button></div></div>
效果圖:
圖上的第二組圖圖標是加上了一個class:
btn-group-lg:大按鈕組
btn-group-sm:小按鈕組
btn-group-xs:超小按鈕組
只需要在“.btn-group”類名上追加對應的類名，就可以得到不同大小的按鈕組。
按鈕（嵌套分組）
很多時候，我們常把下拉菜單和普通的按鈕組排列在一起，實現類似於導航菜單的效果
使用的時候，只需要把當初製作下拉菜單的“dropdown”的容器換成“btn-group”，並且和普通的按鈕放在同一級。
<div><button type="button">首頁</button><button type="button">產品展示</button><button type="button">案例分析</button><button type="button">聯繫我們</button><div><button data-toggle="dropdown" type="button">關於我們<span></span></button><ul><li><a href="##">公司簡介</a></li><li><a href="##">企業文化</a></li><li><a href="##">組織結構</a></li><li><a href="##">客服服務</a></li></ul></div></div>
效果圖:
按鈕（垂直分組）
前面看到的示例，按鈕組都是水平顯示的。但在實際運用當中，總會碰到垂直顯示的效果。在Bootstrap框架中也提供了這樣的風格。我們只需要把水平分組的“btn-group”類名換成“btn-group-vertical”即可
<div><button type="button">首頁</button><button type="button">產品展示</button><button type="button">案例分析</button><button type="button">聯繫我們</button><div><button data-toggle="dropdown" type="button">關於我們<span></span></button><ul><li><a href="##">公司簡介</a></li><li><a href="##">企業文化</a></li><li><a href="##">組織結構</a></li><li><a href="##">客服服務</a></li></ul></div></div>
效果圖:
按鈕（等分按鈕）
等分按鈕的效果在移動端上特別的實用。整個按鈕組寬度是容器的100%，而按鈕組裡面的每個按鈕平分整個容器寬度。例如，如果你按鈕組裡面有五個按鈕，那麼每個按鈕是20%的寬度，如果有四個按鈕，那麼每個按鈕是25%寬度，以此類推。
等分按鈕也常被稱為是自適應分組按鈕，其實現方法也非常的簡單，只需要在按鈕組“btn-group”上追加一個“btn-group-justified”類名，如下所示：
<div><div><a href="#">首頁</a><a href="#">產品展示</a><a href="#">案例分析</a><a href="#">聯繫我們</a></div></div>
修改一下屏幕的寬度
特別聲明：在製作等分按鈕組時，請盡量使用<a>標籤元素來製作按鈕，因為使用<button>標籤元素時，使用display:table在部分瀏覽器下支持並不友好。
按鈕的向下向上三角形
按鈕的向下三角形，我們是通過在標籤中添加一個“”標籤元素，並且命名為“caret”:
有的時候我們的下拉菜單會向上彈起（接下來一個小節會介紹），這個時候我們的三角方向需要朝上顯示，實現方法：需要在“.btn-group”類上追加“dropup”類名（這也是做向上彈起下拉菜單要用的類名）。
<div><button data-toggle="dropdown" type="button">按鈕下拉菜單<span></span></button><ul><li><a href="##">按鈕下拉菜單項</a></li><li><a href="##">按鈕下拉菜單項</a></li><li><a href="##">按鈕下拉菜單項</a></li><li><a href="##">按鈕下拉菜單項</a></li></ul></div>
效果圖:
導航（基礎樣式）
導航對於一位前端人員來說並不陌生。可以說導航是一個網站重要的元素組件之一，可以便於用戶查找網站所提供的各項功能服務。導航的製作方法也是千奇百怪，五花八門。
Bootstrap框架中製作導航條主要通過“.nav”樣式。默認的“.nav”樣式不提供默認的導航樣式，必須附加另外一個樣式才會有效，比如“nav-tabs”、“nav-pills”之類。比如右側代碼編輯器中就有一個tab導航條的例子，他的實現方法就是為ul標籤加入.nav和nav-tabs兩個類樣式。
<ul><li><a href="##">Home</a></li><li><a href="##">CSS3</a></li><li><a href="##">Sass</a></li><li><a href="##">jQuery</a></li><li><a href="##">Responsive</a></li></ul>
導航（標籤形tab導航）
標籤形導航，也稱為選項卡導航。特別是在很多內容分塊顯示的時，使用這種選項卡來分組十分適合。
標籤形導航是通過“nav-tabs”樣式來實現。在製作標籤形導航時需要在原導航“nav”上追加此類名
<ul><li><a href="##">Home</a></li><li><a href="##">CSS3</a></li><li><a href="##">Sass</a></li><li><a href="##">jQuery</a></li><li><a href="##">Responsive</a></li></ul>
其實上例的效果和我們平時看到的選項卡效果並不一致。一般情況之下，選項卡教會有一個當前選中項。其實在Bootstrap框架也相應提供了。假設我們想讓“Home”項為當前選中項，只需要在其標籤上添加類名“class=”active””即可
<ul><li><a href="##">Home</a></li><li><a href="##">CSS3</a></li><li><a href="##">Sass</a></li><li><a href="##">jQuery</a></li><li><a href="##">Responsive</a></li></ul>
效果圖:
除了當前項之外，有的選項卡還帶有禁用狀態，實現這樣的效果，只需要在標籤項上添加“class=”disabled””即可：
<ul><li><a href="##">Home</a></li><li><a href="##">CSS3</a></li><li><a href="##">Sass</a></li><li><a href="##">jQuery</a></li><li><a href="##">Responsive</a></li></ul>
效果圖:
導航（膠囊形(pills)導航）
膠囊形（pills）導航聽起來有點彆扭，因為其外形看起來有點像膠囊形狀。但其更像我們平時看到的大眾形導航。當前項高亮顯示，並帶有圓角效果。其實現方法和“nav-tabs”類似，同樣的結構，只需要把類名“nav-tabs”換成“nav-pills”即可：
<ul><li><a href="##">Home</a></li><li><a href="##">CSS3</a></li><li><a href="##">Sass</a></li><li><a href="##">jQuery</a></li><li><a href="##">Responsive</a></li></ul>
效果圖:
和上面說的是一樣的!
導航（垂直堆疊的導航）
在實際運用當中，除了水平導航之外，還有垂直導航，就類似前面介紹的垂直排列按鈕一樣。製作垂直堆疊導航只需要在“nav-pills”的基礎上添加一個“nav-stacked”類名即可
<ul><li><a href="##">Home</a></li><li><a href="##">CSS3</a></li><li><a href="##">Sass</a></li><li><a href="##">jQuery</a></li><li><a href="##">Responsive</a></li></ul>
效果圖:
在下拉菜單一節中，下拉菜單組與組之間有一個分隔線。其實在垂直堆疊導航也具有這樣的效果，只需要添加在導航項之間添加“
”即可：
<ul><li><a href="##">Home</a></li><li><a href="##">CSS3</a></li><li><a href="##">Sass</a></li><li><a href="##">jQuery</a></li><li></li><li><a href="##">Responsive</a></li></ul>
效果圖:
自適應導航（使用）
自適應導航指的是導航佔據容器全部寬度，而且菜單項可以像表格的單元格一樣自適應寬度。自適應導航和前面使用“btn-group-justified”製作的自適應按鈕組是一樣的。只不過在製作自適應導航時更換了另一個類名“nav-justified”。當然他需要和“nav-tabs”或者“nav-pills”配合在一起使用。如：
<ul><li><a href="##">Home</a></li><li><a href="##">CSS3</a></li><li><a href="##">Sass</a></li><li><a href="##">jQuery</a></li><li><a href="##">Responsive</a></li></ul>
效果圖:
這是不同屏幕
導航加下拉菜單（二級導航）
前面介紹的都是使用Bootstrap框架製作一級導航，但很多時候，在Web頁面中是離不開二級導航的效果。那麼在Bootstrap框架中製作二級導航就更容易了。只需要將li當作父容器，使用類名“dropdown”，同時在li中嵌套另一個列表ul，使用前面介紹下拉菜單的方法就可以：
<ul><li><a href="##">首頁</a></li><li><a href="##" data-toggle="dropdown">教程<span></span></a><ul><li><a href="##">CSS3</a></li><li><a href="##">Sass</a></li><li><a href="##">jQuery</a></li><li><a href="##">Responsive</a></li></ul></li><li><a href="##">關於我們</a></li></ul>
效果圖:
通過瀏覽器調試工具，不難發現，點擊有二級導航的菜單項，會自動添加“open”類名，再次點擊就會刪除添加的“open”類名和那個下拉菜單的實現原理是一樣的!
那麼在二級導航中使用分割線,只需要添加“<li class=”nav-divider”></li>”這樣的一個空標籤就可以了。
麵包屑式導航
麵包屑(Breadcrumb)一般用於導航，主要是起的作用是告訴用戶現在所處頁面的位置（當前位置）
<ol><li><a href="#">首頁</a></li><li><a href="#">我的書</a></li><li>《圖解CSS3》</li></ol>
效果圖: