響應式網站設計(Responsive Web design)

 

頁面的設計與開發應當根據用戶行爲以及設備環境(系統平臺、屏幕尺寸、屏幕定向等)進行相應的響應和調整。具體的實踐方式由多方面組成，包括彈性網格和佈局、圖片、CSS media query的使用等。不管用戶正在使用筆記本仍是iPad，咱們的頁面都應該可以自動切換分辨率、圖片尺寸及相關腳本功能等，以適應不一樣設備；換句話說，頁面應該有能力去自動響應用戶的設備環境。響應式網頁設計就是一個網站可以兼容多個終端——而不是爲每一個終端作一個特定的版本。這樣，咱們就能夠沒必要爲不斷到來的新設備作專門的版本設計和開發了。

Bootstrap，來自 Twitter，是目前最受歡迎的前端框架。Bootstrap 是基於 HTML、CSS、JAVASCRIPT 的，它簡潔靈活，使得 Web 開發更加快捷。

官方文檔 (https://v3.bootcss.com/)

Bootstrap 提供了一套響應式、移動設備優先的流式網格系統，隨着屏幕或視口（viewport）尺寸的增長，系統會自動分爲最多12列。

什麼是網格（Grid）？

在平面設計中，網格是一種由一系列用於組織內容的相交的直線（垂直的、水平的）組成的結構（一般是二維的）。它普遍應用於打印設計中的設計佈局和內容結構。在網頁設計中，它是一種用於快速建立一致的佈局和有效地使用 HTML 和 CSS 的方法。 簡單地說，網頁設計中的網格用於組織內容，讓網站易於瀏覽，並下降用戶端的負載。

什麼是 Bootstrap 網格系統（Grid System）？ Bootstrap 官方文檔中有關網格系統的描述：

Bootstrap 包含了一個響應式的、移動設備優先的、不固定的網格系統，能夠隨着設備或視口大小的增長而適當地擴展到 12 列。它包含了用於簡單的佈局選項的預約義類，也包含了用於生成更多語義佈局的功能強大的混合類。 讓咱們來理解一下上面的語句。Bootstrap 3 是移動設備優先的，在這個意義上，Bootstrap 代碼從小屏幕設備（好比移動設備、平板電腦）開始，而後擴展到大屏幕設備（好比筆記本電腦、臺式電腦）上的組件和網格。

Bootstrap 網格系統（Grid System）的工做原理 網格系統經過一系列包含內容的行和列來建立頁面佈局。下面列出了 Bootstrap 網格系統是如何工做的：

行必須放置在 .container class 內，以便得到適當的對齊（alignment）和內邊距（padding）。 使用行來建立列的水平組。 內容應該放置在列內，且惟有列能夠是行的直接子元素。 預約義的網格類，好比 .row 和 .col-xs-4，可用於快速建立網格佈局。LESS 混合類可用於更多語義佈局。 列經過內邊距（padding）來建立列內容之間的間隙。該內邊距是經過 .rows 上的外邊距（margin）取負，表示第一列和最後一列的行偏移。 網格系統是經過指定您想要橫跨的十二個可用的列來建立的。例如，要建立三個相等的列，則使用三個 .col-xs-4

樣例代碼

<div class="container">

            <h1>Hello, world!</h1>

            <div class="row">

               <div class="col-md-3" style="background-color: #dedef8;box-shadow: 
                  inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
                  <h4>第一列</h4>
                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
               </div>

               <div class="col-md-9" style="background-color: #dedef8;box-shadow: 
                  inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
                  <h4>第二列 - 分爲四個盒子</h4>
                  <div class="row">
                     <div class="col-md-6" style="background-color: #B18904;
                        box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
                        <p>Consectetur art party Tonx culpa semiotics. Pinterest 
                           assumenda minim organic quis.
                        </p>
                     </div>
                     <div class="col-md-6" style="background-color: #B18904;
                        box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
                        <p> sed do eiusmod tempor incididunt ut labore et dolore magna 
                           aliqua. Ut enim ad minim veniam, quis nostrud exercitation 
                           ullamco laboris nisi ut aliquip ex ea commodo consequat.
                        </p>
                     </div>
                  </div>

                  <div class="row">
                     <div class="col-md-6" style="background-color: #B18904;
                        box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
                        <p>quis nostrud exercitation ullamco laboris nisi ut 
                           aliquip ex ea commodo consequat.
                        </p>
                     </div>   
                     <div class="col-md-6" style="background-color: #B18904;
                        box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
                           sed do eiusmod tempor incididunt ut labore et dolore magna 
                           aliqua. Ut enim ad minim.</p>
                     </div>
                  </div>

               </div>

            </div>

         </div>