亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

directory search
Bootstrap 基礎(chǔ)教程 Bootstrap 環(huán)境安裝 Bootstrap 教程 Bootstrap CSS Bootstrap CSS 概覽 Bootstrap 按鈕 Bootstrap 表單 Bootstrap 表格 Bootstrap 代碼 Bootstrap 輔助類 Bootstrap 排版 Bootstrap 圖片 Bootstrap 網(wǎng)格系統(tǒng) Bootstrap 網(wǎng)格系統(tǒng)實例：堆疊的水平 Bootstrap 網(wǎng)格系統(tǒng)實例：手機、平板電腦、臺式電腦 Bootstrap 網(wǎng)格系統(tǒng)實例：中型和大型設(shè)備 Bootstrap 響應(yīng)式實用工具 Bootstrap 布局組件 Bootstrap Well Bootstrap 按鈕下拉菜單 Bootstrap 按鈕組 Bootstrap 標簽 Bootstrap 超大屏幕（Jumbotron） Bootstrap 導(dǎo)航欄 Bootstrap 導(dǎo)航元素 Bootstrap 多媒體對象（Media Object） Bootstrap 分頁 Bootstrap 徽章（Badges） Bootstrap 進度條 Bootstrap 警告（Alerts） Bootstrap 列表組 Bootstrap 面板（Panels） Bootstrap 面包屑導(dǎo)航（Breadcrumbs） Bootstrap 輸入框組 Bootstrap 縮略圖 Bootstrap 下拉菜單（Dropdowns） Bootstrap 頁面標題（Page Header） Bootstrap 字體圖標(Glyphicons) Bootstrap 插件 Bootstrap 按鈕（Button） Bootstrap 標簽頁（Tab） Bootstrap 插件概覽 Bootstrap 彈出框（Popover） Bootstrap 附加導(dǎo)航（Affix） Bootstrap 滾動監(jiān)聽（Scrollspy） Bootstrap 過渡效果（Transition） Bootstrap 警告框（Alert） Bootstrap 輪播（Carousel） Bootstrap 模態(tài)框（Modal）插件 Bootstrap 提示工具（Tooltip） Bootstrap 下拉菜單（Dropdown） Bootstrap 折疊（Collapse） Bootstrap 附錄 Bootstrap CSS編碼規(guī)范 Bootstrap HTML編碼規(guī)范 Bootstrap UI 編輯器
characters

Bootstrap 下拉菜單（Dropdowns）

本章將重點介紹 Bootstrap 下拉菜單。下拉菜單是可切換的，是以列表格式顯示鏈接的上下文菜單。這可以通過與 下拉菜單（Dropdown） JavaScript 插件 的互動來實現(xiàn)。

如需使用下列菜單，只需要在 class .dropdown 內(nèi)加上下拉菜單即可。下面的實例演示了基本的下拉菜單：

<!DOCTYPE?html>
<html>
<head>
???<title>Bootstrap?實例?-?下拉菜單（Dropdowns）</title>
???<link?href="/bootstrap/css/bootstrap.min.css"?rel="stylesheet">
???<script?src="/scripts/jquery.min.js"></script>
???<script?src="/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>

<div?class="dropdown">
???<button?type="button"?class="btn?dropdown-toggle"?id="dropdownMenu1"?
??????data-toggle="dropdown">
??????主題
??????<span?class="caret"></span>
???</button>
???<ul?class="dropdown-menu"?role="menu"?aria-labelledby="dropdownMenu1">
??????<li?role="presentation">
?????????<a?role="menuitem"?tabindex="-1"?href="#">Java</a>
??????</li>
??????<li?role="presentation">
?????????<a?role="menuitem"?tabindex="-1"?href="#">數(shù)據(jù)挖掘</a>
??????</li>
??????<li?role="presentation">
?????????<a?role="menuitem"?tabindex="-1"?href="#">
????????????數(shù)據(jù)通信/網(wǎng)絡(luò)
?????????</a>
??????</li>
??????<li?role="presentation"?class="divider"></li>
??????<li?role="presentation">
?????????<a?role="menuitem"?tabindex="-1"?href="#">分離的鏈接</a>
??????</li>
???</ul>
</div>


</body>
</html>

結(jié)果如下所示：

基本的下拉菜單（Dropdowns）

選項

對齊

通過向 .dropdown-menu 添加 class .pull-right 來向右對齊下拉菜單。下面的實例演示了這點：

<!DOCTYPE?html>
<html>
<head>
???<title>Bootstrap?實例?-?向右對齊下拉菜單</title>
???<link?href="/bootstrap/css/bootstrap.min.css"?rel="stylesheet">
???<script?src="/scripts/jquery.min.js"></script>
???<script?src="/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>

<div?class="dropdown">
???<button?type="button"?class="btn?dropdown-toggle"?id="dropdownMenu1"?
??????data-toggle="dropdown">主題
??????<span?class="caret"></span>
???</button>
???<ul?class="dropdown-menu?pull-right"?role="menu"?
??????aria-labelledby="dropdownMenu1">
??????<li?role="presentation">
?????????<a?role="menuitem"?tabindex="-1"?href="#">Java</a>
??????</li>
??????<li?role="presentation">
?????????<a?role="menuitem"?tabindex="-1"?href="#">數(shù)據(jù)挖掘</a>
??????</li>
??????<li?role="presentation">
?????????<a?role="menuitem"?tabindex="-1"?href="#">
????????????數(shù)據(jù)通信/網(wǎng)絡(luò)
?????????</a>
??????</li>
??????<li?role="presentation"?class="divider"></li>
??????<li?role="presentation">
?????????<a?role="menuitem"?tabindex="-1"?href="#">分離的鏈接</a>
??????</li>
???</ul>
</div>


</body>
</html>

結(jié)果如下所示：

向右對齊下拉菜單

標題

您可以使用 class dropdown-header 向下拉菜單的標簽區(qū)域添加標題。下面的實例演示了這點：

<!DOCTYPE?html>
<html>
<head>
???<title>Bootstrap?實例?-?下拉菜單標題</title>
???<link?href="/bootstrap/css/bootstrap.min.css"?rel="stylesheet">
???<script?src="/scripts/jquery.min.js"></script>
???<script?src="/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>

<div?class="dropdown">
???<button?type="button"?class="btn?dropdown-toggle"?id="dropdownMenu1"?
??????data-toggle="dropdown">
??????主題
??????<span?class="caret"></span>
???</button>
???<ul?class="dropdown-menu"?role="menu"?aria-labelledby="dropdownMenu1">
??????<li?role="presentation"?class="dropdown-header">下拉菜單標題</li>
??????<li?role="presentation"?>
?????????<a?role="menuitem"?tabindex="-1"?href="#">Java</a>
??????</li>
??????<li?role="presentation">
?????????<a?role="menuitem"?tabindex="-1"?href="#">數(shù)據(jù)挖掘</a>
??????</li>
??????<li?role="presentation">
?????????<a?role="menuitem"?tabindex="-1"?href="#">
????????????數(shù)據(jù)通信/網(wǎng)絡(luò)
?????????</a>
??????</li>
??????<li?role="presentation"?class="divider"></li>
??????<li?role="presentation"?class="dropdown-header">下拉菜單標題</li>
??????<li?role="presentation">
?????????<a?role="menuitem"?tabindex="-1"?href="#">分離的鏈接</a>
??????</li>
???</ul>
</div>


</body>
</html>

結(jié)果如下所示：

下拉菜單標題
Previous article： Next article：