簡潔靈活的前端框架------BootStrap

  前  言

 

　Bootstrap，來自 Twitter，是目前很受歡迎的前端框架。Bootstrap 是基於 HTML、CSS、JAVASCRIPT 的，它簡潔靈活，使得 Web 開發更加快捷。[1]  它由Twitter的設計師Mark Otto和Jacob Thornton合做開發，是一個CSS/HTML框架。Bootstrap提供了優雅的HTML和CSS規範，它便是由動態CSS語言Less寫成。Bootstrap一經推出後頗受歡迎，一直是GitHub上的熱門開源項目，包括NASA的MSNBC（微軟全國廣播公司）的Breaking News都使用了該項目。國內一些移動開發者較爲熟悉的框架，如WeX5前端開源框架等，也是基於Bootstrap源碼進行性能優化而來。

 

1. 全局css樣式

 

1.1    柵格系統

Bootstrap 提供了一套響應式、移動設備優先的流式柵格系統，隨着屏幕或視口（viewport）尺寸的增長，系統會自動分爲最多12列。它包含了易於使用的預約義類，還有強大的mixin 用於生成更具語義的佈局。

柵格系統用於經過一系列的行（row）與列（column）的組合來建立頁面佈局，你的內容就能夠放入這些建立好的佈局中。下面就介紹一下 Bootstrap 柵格系統的工做原理：

• 「行（row）」必須包含在 .container （固定寬度）或 .container-fluid （100% 寬度）中，以便爲其賦予合適的排列（aligment）和內補（padding）。
• 經過「行（row）」在水平方向建立一組「列（column）」。
• 你的內容應當放置於「列（column）」內，而且，只有「列（column）」能夠做爲行（row）」的直接子元素。
• 相似 .row 和 .col-xs-4 這種預約義的類，能夠用來快速建立柵格佈局。Bootstrap 源碼中定義的 mixin 也能夠用來建立語義化的佈局。
• 經過爲「列（column）」設置 padding 屬性，從而建立列與列之間的間隔（gutter）。經過爲 .row 元素設置負值 margin 從而抵消掉爲 .container 元素設置的 padding，也就間接爲「行（row）」所包含的「列（column）」抵消掉了padding。
• 負值的 margin就是下面的示例爲何是向外突出的緣由。在柵格列中的內容排成一行。
• 柵格系統中的列是經過指定1到12的值來表示其跨越的範圍。例如，三個等寬的列能夠使用三個 .col-xs-4 來建立。
• 若是一「行（row）」中包含了的「列（column）」大於 12，多餘的「列（column）」所在的元素將被做爲一個總體另起一行排列。
• 柵格類適用於與屏幕寬度大於或等於分界點大小的設備 ， 而且針對小屏幕設備覆蓋柵格類。 所以，在元素上應用任何 .col-md-*柵格類適用於與屏幕寬度大於或等於分界點大小的設備 ， 而且針對小屏幕設備覆蓋柵格類。 所以，在元素上應用任何 .col-lg-*不存在， 也影響大屏幕設備。

經過研究後面的實例，能夠將這些原理應用到你的代碼中。

 

柵格參數

實例：從堆疊到水平排列

使用單一的一組 .col-md-* 柵格類，就能夠建立一個基本的柵格系統，在手機和平板設備上一開始是堆疊在一塊兒的（超小屏幕到小屏幕這一範圍），在桌面（中等）屏幕設備上變爲水平排列。全部「列（column）必須放在 」 .row 內。

實現上述樣式代碼以下：

<div class="row">
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
</div>
<div class="row">
  <div class="col-md-8">.col-md-8</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-6">.col-md-6</div>
  <div class="col-md-6">.col-md-6</div>
</div>

實例：移動設備和桌面屏幕

是否不但願在小屏幕設備上全部列都堆疊在一塊兒？那就使用針對超小屏幕和中等屏幕設備所定義的類吧，即 .col-xs-* 和 .col-md-*。請看下面的實例，研究一下這些是如何工做的。

實現上述樣式代碼以下：

<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
  <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
  <div class="col-xs-6">.col-xs-6</div>
  <div class="col-xs-6">.col-xs-6</div>
</div>

 

1.2列表

列表樣式中較爲經常使用的是內聯列表。

經過設置 display: inline-block; 並添加少許的內補（padding），將全部元素放置於同一行。

 

<ul class="list-inline">
  <li>...</li>
</ul>

 

1.3按鈕

按鈕

可做爲按鈕使用的標籤或元素

爲 <a>、<button> 或 <input> 元素添加按鈕類（button class）便可使用 Bootstrap 提供的樣式。

實現上述樣式的代碼：

<a class="btn btn-default" href="#" role="button">Link</a>
<button class="btn btn-default" type="submit">Button</button>
<input class="btn btn-default" type="button" value="Input">
<input class="btn btn-default" type="submit" value="Submit">

 

1.2 BootStrap組件

 

導航條

默認樣式的導航條

導航條是在您的應用或網站中做爲導航頁頭的響應式基礎組件。它們在移動設備上能夠摺疊（而且可開可關），且在視口（viewport）寬度增長時逐漸變爲水平

展開模式。

導航條內所包含元素溢出

因爲 Bootstrap 並不知道你在導航條內放置的元素須要佔據多寬的空間，你可能會遇到導航條中的內容折行的狀況（也就是導航條佔據兩行）。解決辦法以下：

1. 減小導航條內全部元素所佔據的寬度。
2. 在某些尺寸的屏幕上（利用 響應式工具類）隱藏導航條內的一些元素。
3. 修改導航條在水平排列和摺疊排列互相轉化時，觸發這個轉化的最小屏幕寬度值。能夠經過修改 @grid-float-breakpoint變量實現，或者本身重寫相關的媒體查詢代碼，覆蓋 Bootstrap 的默認值

實現上述樣式代碼以下：

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <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>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
      <form class="navbar-form navbar-left">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
      </form>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

Bootstrap的功能強大，全部功能添加相應類名便可實現，方便易懂。

下面是Bootrap包含的基本內容：

• 基本結構：Bootstrap 提供了一個帶有網格系統、連接樣式、背景的基本結構。這將在Bootstrap 基本結構部分詳細講解。
• CSS：Bootstrap 自帶如下特性：全局的 CSS設置、定義基本的 HTML 元素樣式、可擴展的 class，以及一個先進的網格系統。這將在Bootstrap CSS部分詳細講解。
• 組件：Bootstrap 包含了十幾個可重用的組件，用於建立圖像、下拉菜單、導航、警告框、彈出框等等。這將在佈局組件部分詳細講解。
• JavaScript 插件：Bootstrap包含了十幾個自定義的jQuery 插件。能夠直接包含全部的插件，也能夠逐個包含這些插件。這將在Bootstrap插件部分詳細講解。
• 定製：您能夠定製Bootstrap的組件、LESS 變量和jQuery 插件來獲得本身的版本