bootstrap中如何實(shí)現(xiàn)響應(yīng)式布局

這篇文章給大家介紹bootstrap中如何實(shí)現(xiàn)響應(yīng)式布局，內(nèi)容非常詳細(xì)，感興趣的小伙伴們可以參考借鑒，希望對(duì)大家能有所幫助。

響應(yīng)式布局：

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

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

響應(yīng)式布局常用于企業(yè)的官網(wǎng)、博客、新聞資訊類型網(wǎng)站，這些網(wǎng)站以瀏覽內(nèi)容為主，沒有復(fù)雜的交互。

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

實(shí)現(xiàn)方式：通過查詢screen的寬度來指定某個(gè)寬度區(qū)間的網(wǎng)頁布局。

超小屏幕  （移動(dòng)設(shè)備）         w<768px

小屏設(shè)備    768px-992px          768 <= w <992

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

寬屏設(shè)備    1200px以上      w>=1200

首先需要在head中引入meta標(biāo)簽，添加viewpirt屬性，content中寬度等于設(shè)備寬度， initial-scale:頁面首次被顯示可見區(qū)域的縮放級(jí)別，取值1則頁面按實(shí)際尺寸顯示，無任何縮放；maximum-scale:允許用戶縮放到的最小比例；user-scalable:用戶是否可以手動(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布局的頁面（登錄表單界面），針對(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-*屬性。

<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="請(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>

關(guān)于bootstrap中如何實(shí)現(xiàn)響應(yīng)式布局就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到。