Bootstrap學習之二：柵格化佈局

 

@(Bootstrap)

導言

前面咱們講了如何安裝使用bootstrap框架，下面咱們將會學習bootstrap的各類框架結構，佈局。在這篇文章中將講述如何使用柵格化佈局

[TOC]

1.什麼是柵格化佈局

Bootstrap內置了一套響應式、移動設備優先的流式柵格系統，隨着屏幕設備或視口（viewport）尺寸的增長，系統會自動分爲最多12列。
我在這裏是把Bootstrap中的柵格系統叫作佈局。它就是經過一系列的行（row）與列（column）的組合建立頁面佈局，而後你的內容就能夠放入到你建立好的佈局當中。下面就簡單介紹一下Bootstrap柵格系統的工做原理：
網格系統的實現原理很是簡單，僅僅是經過定義容器大小，平分12份(也有平分紅24份或32份，但12份是最多見的)，再調整內外邊距，最後結合媒體查詢，就製做出了強大的響應式網格系統。Bootstrap框架中的網格系統就是將容器平分紅12份。

2.開始柵格化佈局

a建立一個容器

咱們要先建立一個容器來存放咱們的內容，這個容器的名字加containner,咱們來看一下bootstrap文檔中的源碼，這個樣式在bootstrap.css文件中,下面是bootstrap中的源碼

.container {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}
@media (min-width: 768px) {
  .container {
    width: 750px;
  }
}
@media (min-width: 992px) {
  .container {
    width: 970px;
  }
}
@media (min-width: 1200px) {
  .container {
    width: 1170px;
  }

margin-left和magin-right都設置爲auto，文檔會居中顯示並適配各類設備

b.建立合適的柵格系統

咱們看下bootstrap官網給的解釋

Three equal columns
Get three equal-width columns starting at desktops and scaling to large desktops. On mobile devices, tablets and below, the columns will automatically stack.

row表明行，bootstrap將劃分爲12等分，用col-md-num表示，其中num是本身定義的最大爲12，而且要保證本身設置的col總和不能超過12
下面咱們給個實例，部分源碼

<h1>Hello,World!</h1>
<div class="container">
    <div class="row">
        <div class="col-md-1">王</div>
        <div class="col-md-1">文</div>
        <div class="col-md-1">杜</div>
        <div class="col-md-1">是</div>
        <div class="col-md-1">個</div>
        <div class="col-md-1">大</div>
        <div class="col-md-1">傻</div>
        <div class="col-md-1">逼</div>
        <div class="col-md-1">嗎</div>
        <div class="col-md-1">？</div>
        <div class="col-md-1">是</div>
        <div class="col-md-1">的</div>
    </div>
</div>
<div class="container"> 
    <div class="row">
        <div class="col-md-4">I</div>
        <div class="col-md-4">LOVE</div>
        <div class="col-md-4">YOU</div>
    </div>
</div>

下面爲網頁效果

c.進行列的嵌套

例如咱們已經建立一個num爲8的列，咱們能夠在列裏繼續嵌套列爲6的列，這樣就爲原來的3/8，官方解釋以下

d.單元格的其餘類

　　　.c0l-xs-　　不管屏幕寬度如何，單元格都在一行，寬度按照百分比設置；試用於手機；
　　　.col-sm-　　屏幕大於768px時，單元格在一行顯示；屏幕小於768px時，獨佔一行；試用於平板；
　　　.col-md-　　屏幕大於992px時，單元格在一行顯示；屏幕小於992px時，獨佔一行；試用於桌面顯示器；
　　　.col-lg-　　屏幕大於1200px時，單元格在一行顯示；屏幕小於1200px時，獨佔一行；適用於大型桌面顯示器

e.列偏移

五、列偏移
有的時候，咱們不但願相鄰的兩個列緊靠在一塊兒，但又不想使用margin或者其餘的技術手段來。這個時候就可使用列偏移（offset）功能來實現。使用列偏移也很是簡單，只須要在列元素上添加類名「col-md-offset-*」(其中星號表明要偏移的列組合數)，那麼具備這個類名的列就會向右偏移。例如，你在列元素上添加「col-md-offset-4」，表示該列向右移動4個列的寬度。

以上就是柵格化佈局的內容

參考文檔：bootstrap官方文檔關於柵格化佈局的參考
腳本之家：Bootstrap天天必學之柵格系統（佈局）
Jerry_Tao的博客園