http://www.nessaya.com

                                                                  【大发pk拾计划】bootstrap如何响应式布局-Bootstrap教程

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

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

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

                                                                  使用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-hidde(n="true"></span>            </div>        </div>        <div cl,ass="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 h]ref="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>
                                                                                  

                                                                  郑重声明:本文版权归原作者所有,转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时间联系我们修改或删除,多谢。

                                                                  上一篇:联邦快递CEO吐露“误处理”华为包裹实情:被美国法规逼迫的
                                                                  下一篇:没有了