Bootstrap響應(yīng)式布局原理分享！

在前段開(kāi)發(fā)中，我們都可以了解到什么是Bootstrap，那么今天我們就來(lái)說(shuō)說(shuō)有關(guān)于 Bootstrap響應(yīng)式布局原理這個(gè)問(wèn)題吧！下面是小編整理的相關(guān)內(nèi)容，希望對(duì)大家的學(xué)習(xí)和了解有所幫助。 

首先我們需要了解這個(gè)框架的實(shí)現(xiàn)原理，它是通過(guò)定義容器大小來(lái)平分的，然后在通過(guò)對(duì)內(nèi)外邊距，之后在通過(guò)我們的媒體查詢(xún)就可以里，這樣我們就完成了個(gè)強(qiáng)大的響應(yīng)性網(wǎng)格系統(tǒng)。

1、在這個(gè)系統(tǒng)中我們的?行（row）?必須包含在我們的?固定寬（.container）?或者滿(mǎn)屏寬度即寬度達(dá)到100%，這樣可以方便我們?yōu)槠涮砑雍线m的?排列（aligment）?和?內(nèi)補(bǔ)（padding）?。

2、通過(guò)?行（row）?的特點(diǎn)我們可以在水平方向創(chuàng)建一組?列（column）?。

3、我們?cè)谑褂玫臅r(shí)候內(nèi)容需要放置在?列（column）?中，而且只有?列（column）?才可以作為我們?行（row）?的直接子元素。

4、對(duì)于 ?.row?和?col-xs-4?這種類(lèi)的話(huà)我們是可以用來(lái)快速創(chuàng)建柵格布局的，不僅如此在?bootstrap?源碼中定義的mixin也可以用來(lái)創(chuàng)建語(yǔ)義化布局。

5、在這是用這個(gè)布局的時(shí)候我們還可以通過(guò)設(shè)置?padding?屬性。從而創(chuàng)建列和列之間的?間隔（gutter）?，然后再通過(guò)?.rowd?的元素設(shè)置負(fù)值從而來(lái)抵消?.container?元素設(shè)置的?padding?，這個(gè)方法也就間接的為?行（row）?所包含的?列（column）?抵消掉?padding?。

6、如果這個(gè)系統(tǒng)的列是指定1到12的值從而來(lái)表示跨越范圍。

7、系統(tǒng)中如果我們?cè)谶M(jìn)行設(shè)置的時(shí)候，如果一?行（row）?中包含了的?列（column）?大于12，多余的列所在的元素將作為一個(gè)整體另起一行排列。

8、適用于與屏幕寬度大于或等于分界點(diǎn)大小的設(shè)備截圖如下所示： 

首先我們?cè)谛碌捻?yè)面中添加下面這些代碼，如下所示：

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> 
<link rel="stylesheet" type="text/css" href="/stylesheets/bootstrap.min.css">

我們通過(guò)代碼中可以知道，我們?cè)?mate?標(biāo)簽中添加?viewpirt?屬性，?content?中寬度等于設(shè)備寬度，? initial-scale:?頁(yè)面首次被顯示可見(jiàn)區(qū)域的縮放級(jí)別，取值1則頁(yè)面按實(shí)際尺寸顯示，無(wú)任何縮放；?maximum-scale:?允許用戶(hù)縮放到的最小比例；?user-scalable:?用戶(hù)是否可以手動(dòng)縮放。

我們根據(jù)這個(gè)系統(tǒng)來(lái)看下面的代碼和運(yùn)行結(jié)果：

<div class="container-fluid login">
  <div class="row">
    <div class="col-xs-12 col-sm-12 col-md-8 col-lg-5 col-lg-offset-3">
      <form class="form-horizontal loginForm">
        <h3 class="form-signin-heading">用戶(hù)登錄</h3>
        <div class="form-group">
          <label for="email" class="col-sm-2 col-xs-3 control-label">郵箱</label>
          <div class="col-sm-8 col-xs-8">
            <input type="text" class="form-control" name="email" placeholder="請(qǐng)輸入郵箱">
              <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
            </div>
        </div>
        <div class="form-group">
          <label for="password" class="col-sm-2 col-xs-3 control-label">密碼</label>
          <div class="col-sm-8 col-xs-8">
            <input type="password" class="form-control" name="password" placeholder="請(qǐng)輸入密碼">
              <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
            </div>
        </div>
        <div class="form-group">
          <div class="col-sm-offset-2 col-sm-4 col-xs-4 ">
            <div class="checkbox">
              <label>
                <input type="checkbox">記住我 </label>
            </div>
          </div>
          <div class="col-sm-4 col-xs-4 control-label" >
            <a href="resetPwd.html" id="forget">忘記密碼？</a>
          </div>
        </div>
        <div class="form-group">
          <div class="col-sm-12 col-lg-12">
            <button type="button" class="btn btn-primary btn-block" id="submit">登錄</button>
          </div>
        </div>
      </form>
    </div>
  </div>

運(yùn)行截圖：

Bootstrap響應(yīng)式布局PC端運(yùn)行截圖：

Bootstrap響應(yīng)式布局手機(jī)端運(yùn)行截圖：

以上就是有關(guān)于“ Bootstrap響應(yīng)式布局原理分享！ ”的相關(guān)內(nèi)容，如果你有不同看法也可以提出來(lái)和大家一同解決，更多有關(guān)于bootstrap中的相關(guān)內(nèi)容和知識(shí)我們都可以在W3cschool中學(xué)習(xí)和了解！