bootstrap中如何实现响应式布局

这篇文章给大家介绍bootstrap中如何实现响应式布局，内容非常详细，感兴趣的小伙伴们可以参考借鉴，希望对大家能有所帮助。

响应式布局：

Responsive design，意在实现不同屏幕分辨率的终端上浏览网页的不同展示方式。通过响应式设计能使网站在手机和平板电脑上有更好的浏览阅读体验。屏幕尺寸不一样展示给用户的网页内容也不一样，我们利用媒体查询可以检测到屏幕的尺寸（主要检测宽度），并设置不同的CSS样式，就可以实现响应式的布局。

我们利用响应式布局可以满足不同尺寸的终端设备非常完美的展现网页内容，使得用户体验得到了很大的提升，但是为了实现这一目的我们不得不利用媒体查询写很多冗余的代码，使整体网页的体积变大，应用在移动设备上就会带来严重的性能问题。

响应式布局常用于企业的官网、博客、新闻资讯类型网站，这些网站以浏览内容为主，没有复杂的交互。

使用Bootstrap响应式布局

实现方式：通过查询screen的宽度来指定某个宽度区间的网页布局。

超小屏幕  （移动设备）         w<768px

小屏设备    768px-992px          768 <= w <992

中等屏幕    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">        <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="请输入邮箱">              <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中如何实现响应式布局就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。