bootstrap響應式佈局怎麼實現-Bootstrap教程-PHP中文網

bootstrap響應式佈局怎麼實現

尚

發布： 2019-07-26 10:02:59

原創

4425 人瀏覽過

bootstrap響應式佈局怎麼實現

響應式版面：

Responsive design，意在實作不同螢幕解析度的終端機上瀏覽網頁的不同展示方式。透過響應式設計能讓網站在手機和平板電腦上有更好的瀏覽閱讀體驗。螢幕尺寸不一樣展示給使用者的網頁內容也不一樣，我們利用媒體查詢可以偵測到螢幕的尺寸（主要偵測寬度），並設定不同的CSS樣式，就可以實現響應式的佈局。

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

響應式佈局常用於企業的官網、部落格、新聞資訊類型網站，這些網站以瀏覽內容為主，沒有複雜的互動。

使用Bootstrap響應式佈局

實作方式：透過查詢screen的寬度來指定某個寬度區間的網頁版面。

超小螢幕（行動裝置） w<768px

小螢幕裝置 768px-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">
        <h3 class="form-signin-heading">用户登录</h3>
        <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響應式佈局怎麼實現的詳細內容。更多資訊請關注PHP中文網其他相關文章！