輸入框和導(dǎo)航組件

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

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

//在兩側(cè)添加文字
<div class="input-group">
<span class="input-group-addon">$</span>
<input type="text" class="form-control">
<span class="input-group-addon">.00</span>
</div>

//設(shè)置尺寸，另外三種分別是默認(rèn)、xs、sm
<div class="input-group input-group-lg">

//左側(cè)使用復(fù)選框和單選框
<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>

//左側(cè)使用按鈕
<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>

//左側(cè)使用下拉菜單或分列式
<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">網(wǎng)站導(dǎo)航</li>
<li><a href="#">首頁(yè)</a></li>
<li><a href="#">資訊</a></li>
<li class="divider"><a href="#">產(chǎn)品</a></li>
<li class="disabled"><a href="#">關(guān)于</a></li>
</ul>
</span>
<input type="text" class="form-control">
</div>

二．導(dǎo)航組件
Bootstrap 提供了一組導(dǎo)航組件，用于實(shí)現(xiàn) Web 頁(yè)面的欄目操作。
//基本導(dǎo)航標(biāo)簽頁(yè)
<ul class="nav nav-tabs">
<li class="active"><a href="#">首頁(yè)</a></li>
<li><a href="#">資訊</a></li>
<li><a href="#">產(chǎn)品</a></a></li>
<li><a href="#">關(guān)于</a></li>
</ul>

//膠囊式導(dǎo)航
<ul class="nav nav-pills">

//垂直膠囊式導(dǎo)航
<ul class="nav nav-pills nav-stacked">

//導(dǎo)航兩端對(duì)齊
<ul class="nav nav-tabs nav-justified">

//禁用導(dǎo)航中的項(xiàng)目
<li class="disabled"><a href="#">關(guān)于</a></li>

//帶下拉菜單的導(dǎo)航
<ul class="nav nav-tabs">
<li class="active"><a href="#">首頁(yè)</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>

三．導(dǎo)航條組件
導(dǎo)航條是網(wǎng)站中作為導(dǎo)航頁(yè)頭的響應(yīng)式基礎(chǔ)組件。
//基本格式
<nav class="navbar navbar-default">
...
</nav>

//反色調(diào)導(dǎo)航
<nav class="navbar navbar-inverse">
...
</nav>

//基本導(dǎo)航條，包含標(biāo)題和列表
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a href="#" class="navbar-brand">標(biāo)題</a>
</div>

<ul class="nav navbar-nav">
<li class="active"><a href="#">首頁(yè)</a></li>
<li><a href="#">資訊</a></li>
<li class="disabled"><a href="#">產(chǎn)品</a></li>
<li><a href="#">關(guān)于</a></li>
</ul>
</div>
</nav>

//導(dǎo)航條中使用表單
<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>

//導(dǎo)航中使用按鈕
<button class="btn btn-default navbar-btn">按鈕</button>

//導(dǎo)航中使用對(duì)齊方式，left 和 right
<button class="btn btn-default navbar-btn navbar-right">按鈕</button>

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

//非導(dǎo)航鏈接，一般需要置入文本區(qū)域內(nèi)
<a href="#" class="navbar-link">非導(dǎo)航鏈接</a>

//將導(dǎo)航固定在頂部，下面的內(nèi)容會(huì)自動(dòng)上移
<nav class="navbar navbar-default navbar-fixed-top">

//將導(dǎo)航補(bǔ)丁在底部
<nav class="navbar navbar-default navbar-fixed-bottom">

//靜態(tài)導(dǎo)航，和頁(yè)面等寬的導(dǎo)航條，去掉了圓角
<nav class="navbar navbar-default navbar-static-top">