今日完成任務---網頁佈局

1. bootStrap柵格系統

響應式web佈局是讓使用者通過不同尺寸的瀏覽器都可以獲得良好視覺的一種方法。是目前比較流行的一種佈局方法。
通過CSS3 Media Queries（媒體查詢），媒體查詢是讓頁面內容在不同的媒體環境下執行時可以展示不同的樣式。@media是CSS3中規定的屬性，它可以實現針對不同媒體裝置來設定不同的樣式的目的。而且就算是在同一裝置中它也可以在你重置瀏覽器大小的過程中，頁面也會根據瀏覽器的寬度和高度重新渲染頁面。

2. bootStrap柵格系統工作原理

Bootstrap內建了一套響應式、移動裝置優先的流式柵格系統，隨著螢幕裝置或視口（viewport）尺寸的增加，系統會自動分為最多12列

類字首：.cd-xs- * (手機<768px) .cd-sm- * (平板>=768px) .cd- md-* (中屏>=992px) .col-lg-* (大屏>=1200px)

2.1 HTML基本結構：

row（.row）必須位於container的內部，column（如.col-md-6）必須位於row的內部。也就是說，container、row、column必須保持特定的層級關係，柵格系統才可以正常工作。

<div class="container">
     <div class="row">
 

          <div class="col-md-6"></div>
          <div class="col-md-6"></div>
     </div>
</div>    

2.2 Container

Container這個容器class為.container類。

在響應式寬度上提供寬度約束。響應式尺寸的改變其實改變的是Container，行(rows)和列(columns)都是基於百分比的所以它們不需要做任何改變；提供padding以至於內容不直接緊貼於瀏覽器邊緣，兩邊都是15px。如圖所示：

注意：在一個Container中不要再巢狀另一個Container！

2.3 Row

行(Row)Class為.row的容器；

行（Row）為列（column）提供了空間，一般一行分了12列。Row 的兩側都擁有15px水平負外邊距，如下圖中棕色部分。被當作為row的div被約束在container內邊界與粉色區域重疊。這負的15pxmargin值把row推出了container的15pxpadding，並與之重疊。

注意：Row在Container外面使用是無效的。

2.4 Column

列(col)有15px padding值，如下圖中黃顏色部分。Container的正padding值造成了15px的留空，Row用負margin值反的延伸回去，所以現在col的padding值與container的padding重疊了。

注意：在row外使用col是無效的。