Bootstrap UI架構

Bootstrap中文網 首頁 起步 腳手架 基本CSS樣式 組件 JavaScript外掛程式 定製 Lesscss教程 關於 組件

無數可複用的組件，包括導航、警告框、彈出框等更多功能。 下拉式功能表 按鈕組 按鈕下拉式功能表 導航 導航條 麵包屑 分頁 標籤與徽章 排版 縮圖 警告框 進度條 媒體對象 Misc 下拉式功能表 案例

用於展示可切換、有關聯的一系列連結。與下拉式功能表JavaScript外掛程式配合使用。 Action Another action Something else here Separated link

                          <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">                <li><a tabindex="-1" href="#">Action</a></li>                <li><a tabindex="-1" href="#">Another action</a></li>                <li><a tabindex="-1" href="#">Something else here</a></li>                <li class="divider"></li>                <li><a tabindex="-1" href="#">Separated link</a></li>              </ul>            

標記

以下是下拉式功能表所需的HTML。下拉式功能表的觸發器和整個下拉式功能表都需要包裹在.dropdown中，或者聲明為position: relative;的其它頁面元素中。

                          <div class="dropdown">                <!-- Link or button to toggle dropdown -->                <ul class="dropdown-menu" role="menu"  aria-labelledby="dLabel">                  <li><a tabindex="-1" href="#">Action</a></li>                  <li><a tabindex="-1" href="#">Another action</a></li>                  <li><a tabindex="-1" href="#">Something else here</a></li>                  <li class="divider"></li>                  <li><a tabindex="-1" href="#">Separated link</a></li>                </ul>              </div>            

選項

菜單可以靠右對齊，並且可以添加二級下拉式功能表。 對齊菜單

向.dropdown-menu添加.pull-right即可靠右對齊下拉式功能表。

                          <ul class="dropdown-menu pull-right" role="menu" aria-labelledby="dLabel">                ...              </ul>            

禁用菜單選項

向<li>添加.disabled即可禁用菜單中的某個連結。 Regular link Disabled link Another link

                          <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">                <li><a tabindex="-1" href="#">Regular link</a></li>                <li class="disabled"><a tabindex="-1" href="#">Disabled link</a></li>                <li><a tabindex="-1" href="#">Another link</a></li>              </ul>            

下拉式功能表的子功能表

通過添加一些簡單的標記，可以給下拉式功能表增加一個二級菜單，這個二級菜單會在滑鼠移至上方時自動展現，就像OS X中的效果。在現有的下拉式功能表中，給任意的li添加