bootstrap怎么實(shí)現(xiàn)響應(yīng)式布局

這篇文章主要介紹“bootstrap怎么實(shí)現(xiàn)響應(yīng)式布局”，在日常操作中，相信很多人在bootstrap怎么實(shí)現(xiàn)響應(yīng)式布局問(wèn)題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”bootstrap怎么實(shí)現(xiàn)響應(yīng)式布局”的疑惑有所幫助！接下來(lái)，請(qǐng)跟著小編一起來(lái)學(xué)習(xí)吧！

在bootstrap中，響應(yīng)式布局是利用柵格系統(tǒng)對(duì)于不同屏幕采用不同的類(lèi)屬性實(shí)現(xiàn)的，系統(tǒng)會(huì)自動(dòng)分為12列，響應(yīng)式布局利用柵格系統(tǒng)通過(guò)一系列的行與列的組合來(lái)創(chuàng)建頁(yè)面布局。

本教程操作環(huán)境：Windows10系統(tǒng)、bootstrap3.3.7版、DELL G3電腦

bootstrap實(shí)現(xiàn)響應(yīng)式布局的原理

網(wǎng)格系統(tǒng)的實(shí)現(xiàn)原理，是通過(guò)定義容器大小，平分12份(也有平分成24份或32份，但12份是最常見(jiàn)的)，再調(diào)整內(nèi)外邊距，最后結(jié)合媒體查詢(xún)，就制作出了強(qiáng)大的響應(yīng)式網(wǎng)格系統(tǒng)

網(wǎng)格系統(tǒng)的實(shí)現(xiàn)原理，是通過(guò)定義容器大小，平分12份(也有平分成24份或32份，但12份是最常見(jiàn)的)，再調(diào)整內(nèi)外邊距，最后結(jié)合媒體查詢(xún)，就制作出了強(qiáng)大的響應(yīng)式網(wǎng)格系統(tǒng)。Bootstrap框架中的網(wǎng)格系統(tǒng)就是將容器平分成12份。

bootstrap優(yōu)缺點(diǎn)：

1.bootstap最近發(fā)布了bootstrap4，擁有了box-flex布局等更新，緊跟最新的web技術(shù)的發(fā)展

2.比較成熟，在大量的項(xiàng)目中充分的使用和測(cè)試

3.擁有完善的文檔，使用起來(lái)更方便

4.有大量的組件樣式，接受定制

缺點(diǎn)：

1.如果有自己特殊的需求，就需要重新定制樣式，如果一個(gè)網(wǎng)站中有大量的非bootstrap“風(fēng)格”的樣式存在，那么你就需要做大量的css重寫(xiě)，因此也就失去了使用框架的意義。

2.會(huì)有兼容問(wèn)題，雖然網(wǎng)上存在很多兼容IE的辦法，但需要引入其他文件，有些還不小，勢(shì)必導(dǎo)致加載速度變慢，影響用戶(hù)體驗(yàn)。

Bootstrap響應(yīng)式布局是利用其柵格系統(tǒng)，對(duì)于不同的屏幕采用不同的類(lèi)屬性。在開(kāi)發(fā)中可以只寫(xiě)一套代碼在手機(jī)平板，PC端都能使用，而不用考慮使用媒體查詢(xún)（針對(duì)不同的設(shè)備分別寫(xiě)不同的代碼）。Bootstrap的官方解釋?zhuān)築ootstrap提供了一套響應(yīng)式、移動(dòng)設(shè)備優(yōu)先的流式柵格系統(tǒng)，隨著屏幕或視口（viewport）尺寸的增加，系統(tǒng)會(huì)自動(dòng)分為做多12列。 柵格系統(tǒng)用于通過(guò)一系列的行（row）與列（column）的組合來(lái)創(chuàng)建頁(yè)面布局。

柵格系統(tǒng)的工作原理：

1.行（row）必須包含在.container(固定寬度)或.container-fluid(100%寬度)中，以便為其賦予合適的排列（aligment
）和內(nèi)補(bǔ)（padding）。
2.通過(guò)行（row）在水平方向創(chuàng)建一組列（column）。
3.自己內(nèi)容應(yīng)當(dāng)放置于列（column）內(nèi)，并且，只有列可以作為行（row）的直接子元素。
4.類(lèi)似.row和.col-xs-4這種預(yù)定義的類(lèi)，可以用來(lái)快速創(chuàng)建柵格布局。Bootstrap源碼中定義的mixin也可以用來(lái)創(chuàng)建語(yǔ)義化布局。
5.通過(guò)為列設(shè)置padding屬性，從而創(chuàng)建列與列之間的間隔（gutter）。通過(guò)為.row元素設(shè)置負(fù)值margin從而抵消為.container元素設(shè)置的padding，也就間接為行（row）所包含的列（column）抵消掉了padding。
6.柵格系統(tǒng)的列是通過(guò)指定1到12的值來(lái)表示其跨越范圍。例如三個(gè)等寬的列可以使用三個(gè).col-xs-4來(lái)創(chuàng)建。
7.如果一行（row）中包含了的列（column）大于12，多余的列所在的元素將作為一個(gè)整體另起一行排列。
8.柵格類(lèi)適用于與屏幕寬度大于或等于分界點(diǎn)大小的設(shè)備，并且針對(duì)小屏幕覆蓋柵格類(lèi)。
如下圖所示為柵格系統(tǒng)在多種屏幕上的應(yīng)用說(shuō)明。

使用Bootstrap響應(yīng)式布局，

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

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

下面為使用bootstrap布局的頁(yè)面（登錄表單界面），針對(duì)的是手機(jī)超小屏幕（iphone5s）和PC屏幕（>=1200px)。col-xs-12:小屏幕占12列大小，col-lg-5：大屏幕占5列大小，col-lg-offset-3:大屏幕縮進(jìn)3列大小。這是一個(gè)比較簡(jiǎn)單的實(shí)例，想要適應(yīng)其他屏幕如平板可添加col-md-* 屬性，大屏手機(jī)可添加col-sm-*屬性。具體的屏幕使用哪個(gè)屬性，可參考上面圖上的針對(duì)不同屏幕Bootstrap柵格系統(tǒng)的不同使用。

<p class="container-fluid login">
  <p class="row">
    <p class="col-xs-12 col-sm-12 col-md-8 col-lg-5 col-lg-offset-3">
      <form class="form-horizontal loginForm">
        <h4 class="form-signin-heading">用戶(hù)登錄</h4>
        <p class="form-group">
          <label for="email" class="col-sm-2 col-xs-3 control-label">郵箱</label>
          <p 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>
            </p>
        </p>
        <p class="form-group">
          <label for="password" class="col-sm-2 col-xs-3 control-label">密碼</label>
          <p 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>
            </p>
        </p>
        <p class="form-group">
          <p class="col-sm-offset-2 col-sm-4 col-xs-4 ">
            <p class="checkbox">
              <label>
                <input type="checkbox">記住我 </label>
            </p>
          </p>
          <p class="col-sm-4 col-xs-4 control-label" >
            <a href="resetPwd.html" id="forget">忘記密碼？</a>
          </p>
        </p>
        <p class="form-group">
          <p class="col-sm-12 col-lg-12">
            <button type="button" class="btn btn-primary btn-block" id="submit">登錄</button>
          </p>
        </p>
      </form>
    </p>
  </p>

代碼效果圖：
PC端：

手機(jī)端：

到此，關(guān)于“bootstrap怎么實(shí)現(xiàn)響應(yīng)式布局”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注億速云網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)?lái)更多實(shí)用的文章！