bootstrap中怎樣實現應式布局

本篇文章為大家展示了bootstrap中怎樣實現應式布局，內容簡明扼要并且容易理解，絕對能使你眼前一亮，通過這篇文章的詳細介紹希望你能有所收獲。

使用Bootstrap響應式布局，

首先需要在head中引入meta標簽，添加viewpirt屬性，content屬性，其content中寬度等于設備寬度， initial-scale:頁面首次被顯示可見區域的縮放級別，取值1則頁面按實際尺寸顯示，無任何縮放；maximum-scale:允許用戶縮放到的最小比例；user-scalable:用戶是否可以手動縮放。

代碼如下：

<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布局的頁面（登錄表單界面），針對的是手機超小屏幕（iphone5s）和PC屏幕（>=1200px)。col-xs-12:小屏幕占12列大小，col-lg-5：大屏幕占5列大小，col-lg-offset-3:大屏幕縮進3列大小。

這是一個比較簡單的實例，想要適應其他屏幕如平板可添加col-md-* 屬性，大屏手機可添加col-sm-*屬性。

<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中怎樣實現應式布局，你們學到知識或技能了嗎？如果還想學到更多技能或者豐富自己的知識儲備，歡迎關注億速云行業資訊頻道。