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

本篇內(nèi)容介紹了“如何使用Bootstrap響應(yīng)式布局”的有關(guān)知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

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

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

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

3、我們在使用的時候內(nèi)容需要放置在列（column）中，而且只有列（column）才可以作為我們行（row）的直接子元素。

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

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

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

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

二、使用Bootstrap響應(yī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">

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

我們根據(jù)這個系統(tǒng)來看下面的代碼和運(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">
        <h4 class="form-signin-heading">用戶登錄</h4>
        <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="請輸入郵箱">
              <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="請輸入密碼">
              <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>

“如何使用Bootstrap響應(yīng)式布局”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實用文章！