bootstap的初體驗-02自適應的行和列

bootstrap的核心理念就是響應式設計。

這個響應式設計有點抽象，望文卻生不了義。

什麼叫響應式設計？

就是一套源代碼能夠自適應各種不同分辨率的屏幕，如智能手機，平板，PC。

因爲要做到自適應各種分辨率的屏幕，所以bootstrap要做：

自適應的佈局

自適應的圖片

自適應的腳本

現在先來看看bootstrap怎麼做到自適應的佈局。這要歸功於bootstrap的柵格系統。

什麼是柵格系統？

柵格系統就是bootstrap自定義的行和列，利用這套行和列就能自適應於各種屏幕。

柵格系統把一行分成均等的12列。每一列寬度隨着屏幕的大小變化而變化。

每一列最小寬度叫col-xx-1，這裏的xx可以是md，sm，xm和lg，分別代表中等屏幕，小屏幕，極小屏幕和大屏幕。

那要怎麼用？

先設置一個class爲container的div表示一個容器，可以把這個容器想象成一張表格，有行有列。

然後在這個div裏再設置class爲row的div表示一行。

最後在上面表示行的div嵌套各個列。如：

<div class="row">
      <div class="col-md-1">md1</div>
      <div class="col-md-1">md1</div>
      <div class="col-md-1">md1</div>
      <div class="col-md-1">md1</div>
      <div class="col-md-1">md1</div>
      <div class="col-md-1">md1</div>
      <div class="col-md-1">md1</div>
      <div class="col-md-1">md1</div>
      <div class="col-md-1">md1</div>
      <div class="col-md-1">md1</div>
      <div class="col-md-1">md1</div>
      <div class="col-md-1">md1</div>
</div>
          

就是一行12列的中等屏幕的行。

而下面這個

<div class="row">
      <div class="col-md-8 col-sm-6">md8</div>
      <div class="col-md-4 col-sm-6">md4</div>
</div>

就是一行2列的中等屏幕的行，第一列8格，第二列4格。並且這裏還做了自適應，當屏幕縮小到小屏幕的時候，就會變成兩個列都是6格的列。

不管上面兩行怎麼定義，當屏幕縮小到極小屏幕的時候，都會變成每一列一行的樣子，這是爲了自適應小屏幕。

中等屏幕截圖

小屏幕截圖

 

極小屏幕截圖

（全文完）