[學習筆記] bootstrap(五) : 輸入框組和簡單導航元素

輸入框組

簡單版

<div class="input-group">
    <span class="input-group-addon">@</span>
    <input type="text" placeholder="Email" class="form-control">
</div>

<div class="input-group">
    <span class="input-group-addon">$</span>
    <input type="number" step="0.1" placeholder="Money" class="form-control">
    <span class="input-group-addon">.00</span>
</div>

按鈕版

<div class="input-group">
    <span class="input-group-btn">
        <button class="btn">^_^</button>
    </span>
    <input placeholder="UserName" class="form-control">
    <span class="input-group-btn">
        <button class="btn">GO</button>
    </span>
</div>

下拉按鈕版(以及分割按鈕)

<div class="input-group">
    <div class="input-group-btn">
        <button class="btn btn-default">下拉菜單</button>
        <button class="btn dropdown-toggle" data-toggle="dropdown"><span class="caret"/></button>
        <ul class="dropdown-menu">
            <li> <a href="#"> 菜單1 </a> </li>
            <li> <a href="#"> 菜單2 </a> </li>
            <li> <a href="#"> 菜單3 </a> </li>
            <li> <a href="#"> 菜單4 </a> </li>
        </ul>
    </div>
    <input placeholder="Type Words" class="form-control">
</div>

闡述一下最後這個複雜版:由一個輸入框組爲最大容器,裏面包含了一個按鈕組和一個input輸入框,其中按鈕組由2個按鈕(其中一個用於觸發下拉),一個下拉菜單構成!

導航元素

tabs:

<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>
    <li> <a href="#" > 幫助 </a> </li>
    <li> <a href="#" > 關於 </a> </li>
    <li> <a href="#" > 聯繫我們 </a> </li>
</ul>

pills膠囊式:

<ul class="nav nav-pills">
    <li class="active"> <a href="#" > 首頁 </a> </li>
    <li> <a href="#" > 分類 </a> </li>
    <li> <a href="#" > 服務 </a> </li>
    <li> <a href="#" > 廣告 </a> </li>
    <li> <a href="#" > 幫助 </a> </li>
    <li> <a href="#" > 關於 </a> </li>
    <li> <a href="#" > 聯繫我們 </a> </li>
</ul>

一個樣式變成垂直的(.nav-stacked)

<ul class="nav nav-pills nav-stacked">
    <li class="active"> <a href="#" > 首頁 </a> </li>
    <li> <a href="#" > 分類 </a> </li>
    <li> <a href="#" > 服務 </a> </li>
    <li> <a href="#" > 廣告 </a> </li>
    <li> <a href="#" > 幫助 </a> </li>
    <li> <a href="#" > 關於 </a> </li>
    <li> <a href="#" > 聯繫我們 </a> </li>
</ul>

帶下拉,禁用,real tabs(Tab切換)

<ul class="nav nav-tabs">
    <li class="active"> <a data-toggle="tab"  href="#home" > 首頁 </a> </li>
    <li> 
        <a data-toggle="dropdown" href="#" > 分類 <span class="caret"></span> </a>
        <ul class="dropdown-menu">
            <li> <a href="#" > 分類一 </a> </li>
            <li> <a href="#" > 分類2 </a> </li>
            <li> <a href="#" > 分類3 </a> </li>
            <li> <a href="#" > 分類4 </a> </li>
        </ul>
    </li>
    <li class="disabled"> <a href="#" > 服務 </a> </li>
    <li> <a  data-toggle="tab" href="#adv" > 廣告 </a> </li>
    <li> <a  data-toggle="tab" href="#help" > 幫助 </a> </li>
    <li> <a  data-toggle="tab" href="#about" > 關於 </a> </li>
    <li> <a  data-toggle="tab" href="#phone" > 聯繫我們 </a> </li>
</ul>
<div class="tab-content">
    <div id="home" class="tab-pane fade in active">
        <h3>說出來你不信,我是主頁</h3>
        <p>我是主頁內容</p>
    </div>
    <div id="help" class="tab-pane fade">
        <h3>說出來你不信,我是幫助</h3>
        <p>我是幫助:求人不如求幾!谷歌一下你就知道!</p>
    </div>
    <div id="about" class="tab-pane fade">
        <h3>說出來你不信,我不是幫助</h3>
        <p>我是關於:關於我是個好人的問題!已經有...</p>
    </div>
    <div id="phone" class="tab-pane fade">
        <h3>說出來你不信,我是聯繫方式</h3>
        <p>我是聯繫方式:求人不如求幾!谷歌一下你就知道!</p>
    </div>
</div>

上面的導航欄由一個.nav-tabs的ul構成;其中有首頁(默認激活),分類(下拉按鈕):直接在li中添加一個下拉菜單,用a標籤觸發即可; 而對於可切換的tab:使用.tab-content和.tab-pane配合實現:由.tab-content的div中有多個帶id的div,每個div必須帶有樣式.tab-pane,對應導航中a標籤的href指向