第 8 章 輸入框和導航元件

水之原發表於2016-04-24
元件

學習要點：

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">

相關文章