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

創(chuàng)新互聯(lián)公司長(zhǎng)期為數(shù)千家客戶(hù)提供的網(wǎng)站建設(shè)服務(wù)，團(tuán)隊(duì)從業(yè)經(jīng)驗(yàn)10年，關(guān)注不同地域、不同群體，并針對(duì)不同對(duì)象提供差異化的產(chǎn)品和服務(wù)；打造開(kāi)放共贏平臺(tái)，與合作伙伴共同營(yíng)造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為神池企業(yè)提供專(zhuān)業(yè)的成都網(wǎng)站設(shè)計(jì)、成都做網(wǎng)站、外貿(mào)網(wǎng)站建設(shè)，神池網(wǎng)站改版等技術(shù)服務(wù)。擁有十載豐富建站經(jīng)驗(yàn)和眾多成功案例,為您定制開(kāi)發(fā)。

響應(yīng)式布局：

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

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

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

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

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

超小屏幕  （移動(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:頁(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-*屬性。

<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">用戶(hù)登錄</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>

以上是bootstrap響應(yīng)式布局如何實(shí)現(xiàn)的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計(jì)公司行業(yè)資訊頻道！

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性?xún)r(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專(zhuān)為企業(yè)上云打造定制，能夠滿(mǎn)足用戶(hù)豐富、多元化的應(yīng)用場(chǎng)景需求。

本文標(biāo)題：bootstrap響應(yīng)式布局如何實(shí)現(xiàn)-創(chuàng)新互聯(lián)
網(wǎng)頁(yè)URL：http://www.rwnh.cn/article0/cecsio.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站改版、網(wǎng)站制作、移動(dòng)網(wǎng)站建設(shè)、關(guān)鍵詞優(yōu)化、面包屑導(dǎo)航、用戶(hù)體驗(yàn)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)