Bootstrap輸入框和導航元件
一.下拉菜單
下拉菜單，就是點選一個元素或按鈕，觸發隐藏的清單顯示出來。
按鈕和菜單需要包裹在.dropdown 的容器裡，而作為被點選的元素按鈕需要設定datatoggle=”dropdown”才能有效。對于菜單部分，設定 class=”dropdown-menu”才能自動隐藏并添加強定樣式。設定 class=”caret”表示箭頭，可上可下。
示例效果:
代碼：
<body>
<!-- 下拉菜單 -->
<div class="dropdown"> <!-- 加上open會預設顯示下拉菜單選項的内容 -->
<!-- <div class="btn-group dropup"> 向上彈出式 -->
<button class="btn btn-default" data-toggle="dropdown">
下拉菜單
<span class="caret"></span> <!-- 三角符号：當dropdown換成dropup時候，三角符号箭頭會向上 -->
</button>
<ul class="dropdown-menu"> <!-- dropdown-menu-right 設定對齊方式：下拉菜單顯示在右邊，預設是左邊 -->
<li> <a href="#">首頁</a></li>
<li> <a href="#">咨訊</a></li>
<li> <a href="#">産品</a></li>
<li> <a href="#">關于</a></li>
</ul>
</div>
<br><!-- 導航其他選項使用 -->
<div class="dropdown">
<button class="btn btn-default" data-toggle="dropdown">
下拉菜單
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li class="dropdown-header">網站導航</li> <!-- 設定菜單标題不加超連結 -->
<li> <a href="#">首頁</a></li>
<li> <a href="#">咨訊</a></li>
<li class="divider"> <a href="#">産品</a></li><!-- 設定菜單分割線 -->
<li class="disabled"> <a href="#">關于</a></li> <!-- 設定菜單禁用項 -->
</ul>
</div>
</body>
二．輸入框元件
文本輸入框就是可以在
<input>
元素前後加上文字或按鈕，可以實作對表單控件的擴充。
例如實作下列的效果：
代碼示例：
<body>
<!-- 輸入框元件 -->
<!-- 左側添加文字 -->
<div class="input-group">
<span class="input-group-addon">@</span>
<input type="text" class="form-control">
</div>
<br><!-- 右側添加文字 -->
<div class="input-group">
<input type="text" class="form-control">
<span class="input-group-addon">@</span>
</div>
<br><!-- 兩側添加文字,并設定為最大号的輸入框 -->
<div class="input-group input-group-lg">
<span class="input-group-addon">￥</span>
<input type="text" class="form-control">
<span class="input-group-addon">.00</span>
</div>
<br><!-- 加複選框 -->
<div class="input-group">
<span class="input-group-addon"><input type="checkbox"></span>
<input type="text" class="form-control">
</div>
<br><!-- 加單選框 -->
<div class="input-group">
<span class="input-group-addon"><input type="radio"></span>
<input type="text" class="form-control">
</div>
<br><!-- 使用按鈕 -->
<div class="input-group">
<input class="form-control">
<span class="input-group-btn">
<button class="btn btn-default">送出</button>
</span>
</div>
<br><!-- 右側使用下拉菜單或分頁式 -->
<div class="input-group">
<input ttype="text" class="form-control">
<div class="input-group-btn">
<button class="btn btn-default" data-toggle="dropdown">
下拉菜單
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li> <a href="#">首頁</a></li>
<li> <a href="#">咨訊</a></li>
<li> <a href="#">産品</a></li>
<li> <a href="#">關于</a></li>
</ul>
</div>
</input>
</div>
</body>
三. 導覽列元件
導航元件，用于實作 Web 頁面的欄目操作,導覽列是網站中作為導航頁頭的響應式基礎元件。
示例效果：
代碼：
<body>
<!-- 導覽列元件 -->
<!-- navbar-inverse 反轉的樣式（背景是黑色）-->
<!-- navbar-fixed-top導覽列固定在頂部，拉動滾動條是始終早頂部顯示導覽列， navbar-fixed-bottom固定在底部 -->
<!-- navbar-static-top 靜态導航，随着滾動條滾動，導覽列會看不見 -->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<!-- 基本導覽列包含标題和清單 -->
<div class="navbar-header">
<a href="#" class="navbar-brand">标題</a>
</div>
<ul class="nav navbar-nav">
<li class="active"> <a href="#">首頁</a></li>
<li> <a href="#">咨訊</a></li>
<li> <a href="#">産品</a></li>
<li> <a href="#">關于</a></li>
</ul>
<!-- 導覽列中使用按鈕 -->
<button class="btn btn-default navbar-btn navbar-right">注冊</button>
<!-- 導覽列中使用表單 -->
<form class="navbar-form navbar-right"><!-- navbar-right 設定搜尋框靠右顯示 -->
<div class="input-group">
<input type="text" class="form-control">
<div class="input-group-btn">
<button class="btn btn-default">搜尋</button>
</div>
</div>
</form>
<!-- 導覽列中使用文本 -->
<button class="btn btn-default navbar-btn navbar-left">登入</button>
<p class="navbar-text">我是一段文字<a href="#" class="navbar-link">連結位址</a></p>
</div>
</nav>
<br><br><!-- 面包屑導航（路徑元件） -->
<ol class="breadcrumb">
<li><a href="#">首頁</a></li>
<li><a href="#">産品清單</a></li>
<li class="active">時尚春款新裝</li>
</ol>
</body>
四. 分頁元件
分頁元件可以提供帶有展示頁面的功能。
使用示範：
<!-- 分頁元件 -->
<ul class="pagination pagination-lg"> <!-- 可設定的尺寸：lg ,預設，sm 和 xs -->
<li><a href="#">«</a></li>
<li class="active"><a href="#">1</a></li> <!-- 設定為首選項 -->
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li class="disabled"><a href="#">5</a></li> <!-- 設定為禁用項 -->
<li><a href="#">»</a></li>
</ul>
<br><!-- 分頁效果 -->
<ul class="pager"> <!-- 預設會自動居中顯示 -->
<li><a href="#">上一頁</a></li>
<li><a href="#">下一頁</a></li>
</ul>
<br>
<ul class="pager"> <!-- 設定分頁按鈕對齊分頁連接配接 -->
<li class="previous"><a href="#">上一頁</a></li>
<li class="next"><a href="#">下一頁</a></li>
</ul>
五. 标簽元件
<!-- 标簽元件 -->
<!-- 在文本後面帶上标簽, 标簽的樣式有6中：defualt,primary,success,info,warning,danger -->
<h3>标簽<span class="label label-default">new</span></h3>
六. 徽章元件
<!-- 徽章 -->
<a href="#">未讀資訊資訊<span class="badge">10</span></a>
<br><!-- 按鈕中使用徽章 -->
<button class="btn btn-success">
送出<span class="badge">5</span>
</button>
<br><!-- 激活狀态自動切換色調 -->
<ul class="nav nav-pills">
<li><a href="active">首頁<span class="badge">2</span></a></li>
<li><a href="">咨訊</a></li>
</ul>