bootstrap 導航欄、輸入框按鈕組、柵格系統

柵格系統

文檔地址：http://v3.bootcss.com/css/#grid

柵格系統的強大之處在於靈活的處理不一樣分辨率下的頁面佈局，對於我這種理科思惟而且是前端弱雞的人來講，優勢在於可預見、可控，同時最大限度的減小了頁面佈局過程當中的代碼量，實乃神器。

舉例說明：

<div class="container-fluid">
        <div class="row">
             <!-- 
            PC-laptop-pad 端爲 2-8-2 佈局
            手機端爲 0-12-0 佈局
                -->
            <div class="col-lg-2 col-sm-2 col-md-2"></div>
            <div class="col-lg-8 col-sm-8 col-md-8 col-xs-12"></div>
            <div class="col-lg-2 col-sm-2 col-md-2"></div>
        </div>
    </div>

以上代碼就覆蓋了全部設備的適配問題，非專業前端，就不要要求那麼高了。

導航欄

文檔地址：http://v3.bootcss.com/components/#navbar

參照着文檔代碼，就能夠寫出不少類型的導航條，今天在開發中遇到的問題是，PC 端使用的導航欄，在手機端就會變成一鍋粥。百思不得其解，後來發現 bootstrap 文檔網頁也是用 bt 開發的，參照着網頁代碼來不久對了麼，因而能夠看到：

PC 端導航條：

在手機端就變成了：

從直列式變爲了下拉式，簡直神奇。

再回過頭去仔細看文檔，完完整整理解第一段代碼就能夠本身寫出這樣的效果了。

<div class="navbar-header">
<!-- ######################################  -->
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
<!-- ######################################  -->
      <a class="navbar-brand" href="#">Brand</a>
    </div>

# 號包裹的這一段代碼就是響應式下拉布局的關鍵啦。

輸入框按鈕

爲了獲得這樣的效果：

輸入框與按鈕天然的融爲一體，須要這麼寫

<div class="input-group">
    <input type="text" class="form-control" placeholder="輸入轉換數字">
    <span class="input-group-btn">
        <button class="btn btn-success">轉換</button>
    </span>
</div>

對於咱們這樣的後端程序員來講，能用好框架就夠了麼？仍是須要去探索 CSS HTML 的真諦。