bootstrap如何響應式佈局

 Bootstrap響應式佈局是利用其柵格系統，對於不同的螢幕採用不同的類別屬性。

在開發中可以只寫一套程式碼在手機平板，PC端都能使用，而不用考慮使用媒體查詢（針對不同的裝置分別寫不同的代碼）。 （推薦學習：Bootstrap影片教學）

Bootstrap的官方解釋：Bootstrap提供了一套響應式、行動裝置優先的串流閘格系統，隨著螢幕或視窗（viewport）尺寸的增加，系統會自動分成做多12列。 柵格系統用於透過一系列的行（row）與列（column）的組合來建立頁面佈局。

使用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">
        <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相關技術文章，請造訪Bootstrap教學欄位進行學習！

以上是bootstrap如何響應式佈局的詳細內容。更多資訊請關注PHP中文網其他相關文章！