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 的真諦。