### 輸入框組件 文本輸入框就是可以在`<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"> ~~~