輸入框和導航組件

一．輸入框組件
文本輸入框就是可以在<input>元素前后加上文字或按鈕，可以實現對表單控件的擴
展。
//在左側添加文字
<div class="input-group">
<span class="input-group-addon">@</span>
<input type="text" class="form-control">
</div>

//在右側添加文字
<div class="input-group">
<input type="text" class="form-control">
<span class="input-group-addon">@163.com</span>
</div>

//在兩側添加文字
<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">

//左側使用復選框和單選框
<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>

//左側使用按鈕
<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>

//左側使用下拉菜單或分列式
<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 頁面的欄目操作。
//基本導航標簽頁
<ul class="nav nav-tabs">
<li class="active"><a href="#">首頁</a></li>
<li><a href="#">資訊</a></li>
<li><a href="#">產品</a></a></li>
<li><a href="#">關于</a></li>
</ul>

//膠囊式導航
<ul class="nav nav-pills">

//垂直膠囊式導航
<ul class="nav nav-pills nav-stacked">

//導航兩端對齊
<ul class="nav nav-tabs nav-justified">

//禁用導航中的項目
<li class="disabled"><a href="#">關于</a></li>

//帶下拉菜單的導航
<ul class="nav nav-tabs">
<li class="active"><a href="#">首頁</a></li>
<li><a href="#">資訊</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
下拉菜單
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="#">菜單一</a></li>
<li><a href="#">菜單二</a></li>
</ul>
</li>
</ul>

三．導航條組件
導航條是網站中作為導航頁頭的響應式基礎組件。
//基本格式
<nav class="navbar navbar-default">
...
</nav>

//反色調導航
<nav class="navbar navbar-inverse">
...
</nav>

//基本導航條，包含標題和列表
<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 class="active"><a href="#">首頁</a></li>
<li><a href="#">資訊</a></li>
<li class="disabled"><a href="#">產品</a></li>
<li><a href="#">關于</a></li>
</ul>
</div>
</nav>

//導航條中使用表單
<form action="" class="navbar-form navbar-left">
<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>

//導航中使用按鈕
<button class="btn btn-default navbar-btn">按鈕</button>

//導航中使用對齊方式，left 和 right
<button class="btn btn-default navbar-btn navbar-right">按鈕</button>

//導航中使用一段文本
<p class="navbar-text">我是一段文本</p>

//非導航鏈接，一般需要置入文本區域內
<a href="#" class="navbar-link">非導航鏈接</a>

//將導航固定在頂部，下面的內容會自動上移
<nav class="navbar navbar-default navbar-fixed-top">

//將導航補丁在底部
<nav class="navbar navbar-default navbar-fixed-bottom">

//靜態導航，和頁面等寬的導航條，去掉了圓角
<nav class="navbar navbar-default navbar-static-top">