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如何响应式布局的详细内容，更多内容请关注技术你好其它相关文章！