# 第 8 章 輸入框和導航組件 **學習要點：** 1.輸入框組件 2.導航組件 3.導航條組件 主講教師：李炎恢 本節課我們主要學習一下Bootstrap的兩個個組件功能： 輸入框組件和導航導航條組件。 **一．輸入框組件** 文本輸入框就是可以在&lt;input&gt;元素前后加上文字或按鈕，可以實現對表單控件的擴展。 //在左側添加文字 ``` <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> </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"> ```