開始bootstrap的學習_ZenDei技術網路在線

終於過完雙十一，伺服器頂住了壓力，不知道為啥，突然的輕鬆，反而感覺有點無所適從，好久沒寫博客了，竟然發現還有人回我，很是開心，問題都是關於阿裡雲的，阿裡雲的吭確實多，其實關鍵在於，官方文檔還是少，出了問題，很多都要靠自己去嘗試，自己去找方法。好了，今天開始學習bootstrap，自己本身是後端出身 ...

終於過完雙十一，伺服器頂住了壓力，不知道為啥，突然的輕鬆，反而感覺有點無所適從，好久沒寫博客了，竟然發現還有人回我，很是開心，問題都是關於阿裡雲的，阿裡雲的吭確實多，其實關鍵在於，官方文檔還是少，出了問題，很多都要靠自己去嘗試，自己去找方法。

好了，今天開始學習bootstrap，自己本身是後端出身，java,php,nodejs都做過幾個網站，目前負責白菜哦的全部技術，android和ios的app有時也需要自己去修改一些bug，瞬間感覺自己全能，有木有，不過直到現在，才發現之前一直鄙視的在mobile上的html5技術還是有某些方面的優勢的，簡單說下，目前我們的網站分成了 web, wap, ios,android，後端甚至都是分開的，ios和android 會共用 api的調用邏輯，其他的都是分開的，相當於，要維護大量的重覆的東西，這樣帶來的好處是，當你遇到某個具體bug時，你比較容易找到地方，去debug，去修正，壞處是當你修改了一個bug，你可能要分別去其他幾個地方去看看，是否有bug，是否要去修改其他地方的問題，所以，要是再給我一次機會，這些是一定要復用的，及時判斷邏輯變得更複雜，那也是必須要做的事情。這點，希望大家在以後寫程式的時候去體會。

越來越覺得響應式佈局這個概念是多麼的前衛，為什麼一定要這樣去設計，因為，這樣可能就能讓你少維護一個平臺，比如wap和web，你打開的是同一個頁面，但是看到的是個性化的東西，很酷，很炫，對不對？哈哈，當然需要功力。

首先說下最基本的佈局：

meta：

移動設備優先，且禁止縮放

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

Viewport 基礎

一個常用的針對移動網頁優化過的頁面的 viewport meta 標簽大致如下：

width：控制 viewport 的大小，可以指定的一個值，如果 600，或者特殊的值，如 device-width 為設備的寬度（單位為縮放為 100% 時的 CSS 的像素）。
height：和 width 相對應，指定高度。
initial-scale：初始縮放比例，也即是當頁面第一次 load 的時候縮放比例。
maximum-scale：允許用戶縮放到的最大比例。
minimum-scale：允許用戶縮放到的最小比例。
user-scalable：用戶是否可以手動縮放

佈局容器

Bootstrap 需要為頁面內容和柵格系統包裹一個 .container 容器。我們提供了兩個作此用處的類。註意，由於 padding 等屬性的原因，這兩種容器類不能互相嵌套。

.container 類用於固定寬度並支持響應式佈局的容器。

<div class="container">
  ...
</div>

.container-fluid 類用於 100% 寬度，占據全部視口（viewport）的容器。

<div class="container-fluid">
  ...
</div>

柵格系統用於通過一系列的行（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-* 不存在，也影響大屏幕設備。（沒看懂）

最後一條沒看明白，但是在做了個試驗，下麵用個例子來說明這個問題：

<div class="row">
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
  <!-- Optional: clear the XS cols if their content doesn't match in height -->
  <div class="clearfix visible-xs-block"></div>
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
</div>
在一個div class裡面有兩個類 col-xs-6 和 col-sm-4，

col-sm-4在屏幕超過768px的地方纔會生效。col-xs-6會在屏幕小的地方生效，這種思路可以得到擴展，自己在做設計的時候，要解決一些相容問題，可以往這個思路去考慮。

隨便粘幾個例子，在例子裡面去體會：

<!-- 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>


響應式的大家根據自己的需求去嘗試，下麵是經常需要用的，當我們有嵌套時，且不想把所有格子占滿時，怎麼寫

這種效果,

<div class="col-sm-9">
      Level 1: .col-sm-9
      <div class="row show-grid">
        <div class="col-xs-8 col-sm-5 col-sm-offset-1">
          Level 2: .col-xs-8 .col-sm-6
        </div>
        <div class="col-xs-4 col-sm-5">
          Level 2: .col-xs-4 .col-sm-6
        </div>
      </div>
    </div>

通過使用 .col-md-push-* 和 .col-md-pull-* 類就可以很容易的改變列（column）的順序

<div class="row">
  <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
  <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
</div>