響應式網站設計---Bootstrap

響應式佈局能夠幫助咱們實現網站佈局隨屏幕大小自動調整的需求，實現不一樣屏幕分辨率的終端上瀏覽網頁的不一樣展現方式，使得網頁在PC端和手機端都可以完美的展示其內容，具備自適應性。

使用基於Bootstrap的柵格系統

     Bootstrap響應式佈局是利用其柵格系統，對於不一樣的屏幕採用不一樣的類屬性。在開發中能夠只寫一套代碼在手機平板，PC端都能使用，而不用考慮使用媒體查詢（針對不一樣的設備分別寫不一樣的代碼）。Bootstrap的官方解釋：Bootstrap提供了一套響應式、移動設備優先的流式柵格系統，隨着屏幕或視口（viewport）尺寸的增長，系統會自動分爲作多12列。柵格系統用於經過一系列的行（row）與列（column）的組合來建立頁面佈局。

 

1. 柵格系統的工做原理

（1）行（row）必須包含在.container(固定寬度)或.container-fluid(100%寬度)中，以便爲其賦予合適的排列內補（padding）。 
（2）經過行（row）在水平方向建立一組列（column）。 
（3）本身內容應當放置於列（column）內，而且，只有列能夠做爲行（row）的直接子元素。 
（4）相似.row和.col-xs-4這種預約義的類，能夠用來快速建立柵格佈局。
（5）經過爲列設置padding屬性，從而建立列與列之間的間隔（gutter）。經過爲.row元素設置負值margin從而抵消爲.container元素設置的padding，也就間接爲行（row）所包含的列（column）抵消掉了padding。 
（6）柵格系統的列是經過指定1到12的值來表示其跨越範圍。例如三個等寬的列可使用三個.col-xs-4來建立。 
（7）若是一行（row）中包含了的列（column）大於12，多餘的列所在的元素將做爲一個總體另起一行排列。 
（8）柵格類適用於與屏幕寬度大於或等於分界點大小的設備，而且針對小屏幕覆蓋柵格類。 

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