第 8 章 輸入框和導航組件

學習要點：

1.輸入框組件
2.導航組件
3.導航條組件

主講教師：李炎恢

本節課我們主要學習一下Bootstrap的兩個個組件功能： 輸入框組件和導航導航條組件。

一．輸入框組件
文本輸入框就是可以在<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>
    </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">