bootstrap學習（四）輸入框、導航

輸入框組：

基本用法：

//form-control 佔滿  
//input-group:輸入框組
//input-group-addon：輸入框前加入一個前綴
　　<div class="input-group">
        <span class="input-group-addon">@</span>
        <input type="text" class="form-control">
        <span class="input-group-addon">@</span>
    </div>

 

加入小圖標：

<div class="input-group">
        <span class="input-group-addon">
            <span class="glyphicon glyphicon-plus "></span>
        </span>
        <input type="text" class="form-control">
 </div>

 

加入按鈕：

<div class="input-group">
        <span class="input-group-btn">
            <button type="button" class="btn btn-default btn-danger">按鈕</button>
        </span>
        <input type="text" class="form-control"></input>
    </div>

 

 

導航

Bootstrap 中的導航組件都依賴同一個 .nav 類，狀態類也是共用的。改變修飾類能夠改變樣式。

 標籤頁：

li：標籤內部是一個連接或按鈕

<ul class="nav nav-tabs">{#選項卡nav-tabs 只寫nav不行#} <li><a href="">111</a></li> 
        <li><a href="">222</a></li>
        <li><a href="">333</a></li>
    </ul>

 

 膠囊標籤頁：nav-pills       active默認選中

<ul class="nav nav-pills">
        <li class="active"><a href="">首頁1</a></li>
        <li><a href="">首頁2</a></li>
        <li><a href="">首頁3</a></li>
        <li><a href="">首頁4</a></li>
    </ul>

 

 

豎膠囊：nav-stacked

<ul class="nav nav-pills nav-stacked">
        <li class="active"><a href="">首頁1</a></li>
        <li class="disabled"><a href="">首頁2</a></li>
        <li><a href="">首頁3</a></li>
        <li><a href="">首頁4</a></li>
    </ul>

 

 

 

 禁用的標籤： .disable 不可選

<ul class="nav nav-pills">
        <li class="active"><a href="">首頁1</a></li>
        <li class="disabled"><a href="">首頁2</a></li>
        <li><a href="">首頁3</a></li>
        <li><a href="">首頁4</a></li>
    </ul>

 

 自適應標籤頁：nav-justfified 標籤頁自動佔滿一行

<ul class="nav nav-tabs nav-justified">
        <li class="active"><a href="">首頁1</a></li>
        <li class="disabled"><a href="">首頁2</a></li>
        <li><a href="">首頁3</a></li>
        <li><a href="">首頁4</a></li>
    </ul>

 

 

 二級導航：.caret 向下的箭頭

<ul class="nav nav-tabs nav-justified">
        <li class="active"><a href="">首頁1</a></li>
        <li>
            <a href="" class="dropdown-toggle" data-toggle="dropdown"> 首頁2 <span class="caret"></span>
            </a>
            <ul class="dropdown-menu">
                <li><a href="">item1</a></li>
                <li><a href="">item2</a></li>
                <li><a href="">item3</a></li>
            </ul>
        </li>
        <li><a href="">首頁3</a></li>
        <li><a href="">首頁4</a></li>
    </ul>

 

 

導航條：

基礎導航： navbar-brand：字體稍微大點     navbar-header：導航頭信息

<nav class="navbar navbar-default">
        <div class="navbar-header">
            <a href="" class="navbar-brand">導航</a>
            <ul class="nav navbar-nav">
                <li class="active"><a href="">item1</a></li>
                <li class="active"><a href="">item2</a></li>
                <li class="active"><a href="">item3</a></li>
            </ul>
        </div>
    </nav>

 

 

 導航中加入表單：

<nav class="navbar navbar-default">
        <div class="navbar-header">
            <a href="" class="navbar-brand">導航</a>
            <ul class="nav navbar-nav">
                <li class="active"><a href="">item1</a></li>
                <li><a href="">item2</a></li>
                <li><a href="">item3</a></li>
            </ul>
        </div>
        <form action="" class="navbar-form">
            <input type="text" class="form-control">
            <button type="button" class="btn btn-default">按鈕</button>
        </form>

    </nav>

麪包屑導航：

breadcrumb：麪包屑樣式

<ul class="breadcrumb">
        <li>首頁</li>
        <li>首頁2</li>
        <li>首頁3</li>
    </ul>

 

 分頁導航：能夠給li設置 .active設置激活狀態

<ul class="pagination">
        <li><a href="">&laquo;</a></li>
        <li><a href="">1</a></li>
        <li><a href="">1</a></li>
        <li><a href="">1</a></li>
        <li><a href="">&raquo;</a></li>
    </ul>

 

 

<ul class="pager">
        <li><a href="">上一頁</a></li>
        <li><a href="">下一頁</a></li>
    </ul>

 

 

 

 

 官方：https://v3.bootcss.com/components/#input-groups