### 輸入框組件
文本輸入框就是可以在`<input>`元素前后加上文字或按鈕，可以實現對表單控件的擴
展。
**在左側添加文字**
~~~html
<div class="input-group">
<span class="input-group-addon">@</span>
<input type="text" class="form-control">
</div>
~~~
**在右側添加文字**
~~~html
<div class="input-group">
<input type="text" class="form-control">
<span class="input-group-addon">@163.com</span>
</div>
~~~
**在兩側添加文字**
~~~html
<div class="input-group">
<span class="input-group-addon">$</span>
<input type="text" class="form-control">
<span class="input-group-addon">.00</span>
</div>
~~~
**設置尺寸，另外三種分別是默認、xs、sm。**
`<div class="input-group input-group-lg">`
**左側使用復選框和單選框**
~~~html
<div class="input-group">
<span class="input-group-addon">
<input type="checkbox">
</span>
<input type="text" class="form-control">
</div>
<div class="input-group">
<span class="input-group-addon">
<input type="radio">
</span>
<input type="text" class="form-control">
</div>
~~~
**左側使用按鈕**
~~~html
<div class="input-group">
<span class="input-group-btn">
<button type="button" class="btn btn-default">按鈕</button>
</span>
<input type="text" class="form-control">
</div>
~~~
**左側使用下拉菜單或分列式**
~~~html
<div class="input-group">
<span class="input-group-btn">
<button class="btn btn-default dropdown-toggle" 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>
</span>
<input type="text" class="form-control"> </div>
~~~
### 導航組件
Bootstrap 提供了一組導航組件，用于實現 Web 頁面的欄目操作。
**基本導航標簽頁**
~~~html
<ul class="nav nav-tabs">
<li class="active"><a href="#">首頁</a></li>
<li><a href="#">資訊</a></li>
<li><a href="#">產品</a></li>
<li class="disabled"><a href="#">關于</a></li>
</ul>
~~~
**膠囊式導航**
~~~html
<ul class="nav nav-pills">
~~~
**垂直膠囊式導航**
~~~html
<ul class="nav nav-pills nav-stacked">
~~~
**導航兩端對齊**
~~~html
<ul class="nav nav-pills nav-justified">
~~~
**帶下拉菜單的導航**
~~~html
<ul class="nav nav-tabs">
<li class="active"><a href="#">首頁</a></li>
<li><a href="#">資訊</a></li>
<li><a href="#">產品</a></li>
<li class="disabled"><a href="#">關于</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
下拉菜單
</a>
<ul class="dropdown-menu">
<li class="dropdown-header">下拉標題</li>
<li><a href="#">首頁</a></li>
<li class="divider">
<li><a href="#">資訊</a></li>
<li><a href="#">產品</a></li>
<li class="disabled"><a href="#">關于</a></li>
</ul>
</li>
</ul>
~~~
### 導航條組件
導航條是在應用或網站中作為導航頁頭的響應式基礎組件。它們在移動設備上可以折疊（并且可開可關），且在視口（viewport）寬度增加時逐漸變為水平展開模式。
導航條是網站中作為導航頁頭的響應式基礎組件。
**基本格式**
~~~html
<nav class="navbar navbar-default">
...
</nav>
~~~
**反色調導航**
~~~html
<nav class="navbar navbar-inverse">
...
</nav>
~~~
**基本導航條，包含標題和列表**
~~~html
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a href="#" class="navbar-brand">標題</a>
</div>
<ul class="nav navbar-nav">
<li><a href="#">首頁</a></li>
<li><a href="#">資訊</a></li>
<li><a href="#">產品</a></li>
<li class="disabled">
<a href="#">關于</a></li>
</ul>
</div>
</nav>
~~~
**導航條中使用表單**
~~~html
<form action="" class="navbar-form navbar-right">
<div class="input-group">
<input type="text" class="form-control"/>
<span class="input-group-btn">
<button type="submit" class="btn btn-default">
提交
</button>
</span>
</div>
</form>
~~~
**導航中使用按鈕**
~~~html
<button class="btn btn-default navbar-btn navbar-right">按鈕</button>
~~~
**導航中使用對齊方式，left 和 right **
~~~html
<button class="btn btn-default navbar-btn navbar-right">按鈕</button>
~~~
**導航中使用一段文本**
~~~html
<p class="navbar-text">我是一段文本</p>
~~~
**非導航鏈接，一般需要置入文本區域內**
~~~html
<a href="#" class="navbar-link">非導航鏈接</a>
~~~
**將導航固定在頂部，下面的內容會自動上移**
~~~html
<nav class="navbar navbar-default navbar-fixed-top">
~~~
**將導航補丁在底部**
~~~html
<nav class="navbar navbar-default navbar-fixed-bottom">
~~~
**靜態導航，和頁面等寬的導航條，去掉了圓角**
~~~html
<nav class="navbar navbar-default navbar-static-top">
~~~
