bootstrap響應式布局如何實現

小編給大家分享一下bootstrap響應式布局如何實現，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

響應式布局：

Responsive design，意在實現不同屏幕分辨率的終端上瀏覽網頁的不同展示方式。通過響應式設計能使網站在手機和平板電腦上有更好的瀏覽閱讀體驗。屏幕尺寸不一樣展示給用戶的網頁內容也不一樣，我們利用媒體查詢可以檢測到屏幕的尺寸（主要檢測寬度），并設置不同的CSS樣式，就可以實現響應式的布局。

我們利用響應式布局可以滿足不同尺寸的終端設備非常完美的展現網頁內容，使得用戶體驗得到了很大的提升，但是為了實現這一目的我們不得不利用媒體查詢寫很多冗余的代碼，使整體網頁的體積變大，應用在移動設備上就會帶來嚴重的性能問題。

響應式布局常用于企業的官網、博客、新聞資訊類型網站，這些網站以瀏覽內容為主，沒有復雜的交互。

使用Bootstrap響應式布局

實現方式：通過查詢screen的寬度來指定某個寬度區間的網頁布局。

超小屏幕  （移動設備）         w<768px

小屏設備    768px-992px          768 <= w <992

中等屏幕    992px-1200px     992 =< w <1200

寬屏設備    1200px以上      w>=1200

首先需要在head中引入meta標簽，添加viewpirt屬性，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響應式布局如何實現的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！