ブートストラップのレスポンシブ レイアウトを作成する方法

 Bootstrap响应式布局是利用其栅格系统，对于不同的屏幕采用不同的类属性。

在开发中可以只写一套代码在手机平板，PC端都能使用，而不用考虑使用媒体查询（针对不同的设备分别写不同的代码）。（推荐学习：Bootstrap视频教程）

Bootstrap的官方解释：Bootstrap提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为做多12列。 栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局。

使用Bootstrap响应式布局，

首先需要在head中引入meta标签，添加viewpirt属性，content属性，其content中宽度等于设备宽度， initial-scale:页面首次被显示可见区域的缩放级别，取值1则页面按实际尺寸显示，无任何缩放；maximum-scale:允许用户缩放到的最小比例；user-scalable:用户是否可以手动缩放。

代码如下：

<meta> 
<link>

下面为使用bootstrap布局的页面（登录表单界面），针对的是手机超小屏幕（iphone5s）和PC屏幕（>=1200px)。col-xs-12:小屏幕占12列大小，col-lg-5：大屏幕占5列大小，col-lg-offset-3:大屏幕缩进3列大小。

这是一个比较简单的实例，想要适应其他屏幕如平板可添加col-md-* 属性，大屏手机可添加col-sm-*属性。

<div>
  <div>
    <div>
      <form>
        <h3 id="用户登录">用户登录</h3>
        <div>
          <label>邮箱</label>
          <div>
            <input>
              <span></span>
            </div>
        </div>
        <div>
          <label>密码</label>
          <div>
            <input>
              <span></span>
            </div>
        </div>
        <div>
          <div>
            <div>
              <label>
                <input>记住我 </label>
            </div>
          </div>
          <div>
            <a>忘记密码？</a>
          </div>
        </div>
        <div>
          <div>
            <button>登录</button>
          </div>
        </div>
      </form>
    </div>
  </div>
<p>更多Bootstrap相关技术文章，请访问<a href="http://www.php.cn/bootstrap/" target="_self">Bootstrap教程</a>栏目进行学习！</p>
</div>

以上がブートストラップのレスポンシブ レイアウトを作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。