Bootstrap页面响应式设计
关键词：viewport、栅格布局、媒体查询（Media Queries）
一、关于栅格布局的说明：
1、基本图解
extra small devices phones 超小型设备手机
small devices tablets 小型设备平板电脑
medium devices desktops 中型设备台式机
large devices desktops 大型设备台式机
2、混用案例说明
如：
HTML代码：
<div class="col-xs-12 col-sm-9 col-md-6 col-lg-3">
</div>
当屏幕尺寸
小于 768px 的时候，用 col-xs-12 类对应的样式；
在 768px 到 992px 之间的时候，用 col-sm-9 类对应的样式；
在 992px 到 1200px 之间的时候，用 col-md-6 类对应的样式；
大于 1200px 的时候，用 col-lg-3 类对应的样式；
二、制作登录页面
效果：
代码：
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN"><head runat="server"><meta charset="utf-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /><meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" /><link href="style/bootstrap-3.3.7/css/bootstrap.min.css" rel="stylesheet" /><link href="style/bootstrap-3.3.7/css/bootstrap-theme.min.css" rel="stylesheet" /><link href="style/MediaTest2.css" rel="stylesheet" /><script src="js/jquery-1.11.3.min.js"></script><script src="js/bootstrap-3.3.7/bootstrap.min.js"></script><script src="js/verify/verify.min.js"></script><link href="style/verify/verify.css" rel="stylesheet" /><title>登录页</title></head><body><div class="container"><!--<h1>Twitter bootstrap tutorial</h1>--><nav class="navbar navbar-inverse"><!-- Brand and toggle get grouped for better mobile display --><div class="navbar-header"><button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-menu" aria-expanded="false"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a id="logo" class="navbar-brand" href="#"></a></div><div id="navbar-menu" class="collapse navbar-collapse"><ul class="nav navbar-nav"><li class="active"><a href="#">首页</a></li><li><a href="#">礼品兑换</a></li><li><a href="#">个人中心</a></li></ul></div></nav><div id="carousel-example-generic" class="carousel slide" data-ride="carousel"><ol class="carousel-indicators"><li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li><li data-target="#carousel-example-generic" data-slide-to="1"></li></ol><!-- 轮播（Carousel）项目内容 --><div class="carousel-inner" role="listbox"><!-- 默认显示图片 --><div class="item active"><img src="/image/buyshow-1.jpg" alt="" /><!-- 图片描述内容 --><div class="carousel-caption"></div></div><div class="item"><img src="/image/02.png" alt="" /><div class="carousel-caption"></div></div></div><!-- 轮播（Carousel）导航(控制左右移动) --><a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span><span class="sr-only">Previous</span> </a><a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span><span class="sr-only">Next</span> </a></div><div id="content" class="row-fluid divInterval "><!--<div class="col-md-9">Main Content SectionMain Content SectionMain Content SectionMain Content Section</div><div class="col-md-3"><h2>Sidebar</h2><ul class="nav nav-tabs nav-stacked"><li><a href='#'>Another Link 1</a></li><li><a href='#'>Another Link 2</a></li><li><a href='#'>Another Link 3</a></li></ul></div>--><div class="col-md-12"><div class="input-group input-group-lg"><span class="input-group-addon" id="sizing-addon1">账号：</span><input type="text" class="form-control" placeholder="请输入账号" aria-describedby="sizing-addon1" /></div><div class="input-group input-group-lg divInterval"><span class="input-group-addon" id="Span2">密码：</span><input type="text" class="form-control" placeholder="请输入密码" aria-describedby="sizing-addon1" /></div><div id="mpanel1" class="divInterval"></div><div class="divInterval"><button type="button" class="btn btn-primary btn-lg btn-block">开始登录</button></div></div></div></div><script type="text/javascript">$('#mpanel1').slideVerify({type: 1,vOffset: 5, //误差量，根据需求自行调整barSize: {width: '100%',height: '40px',},ready: function () {},success: function () {alert('验证成功！');//......后续操作},error: function () {alert('验证失败！');}});</script></body></html> CSS
.divInterval {margin-top:1rem;}.navbar-inverse {border-radius: 4px 4px 0px 0px;}.navbar {margin-bottom: 0px; }#logo { background:url("/image/logo.png"); width: 50px; margin-left: 0.5rem;}.container { padding-right: 0px; padding-left: 0px; margin-right: auto; margin-left: auto;}/*四种响应式类型：（超小屏，小屏，中屏和大屏），其断点是768px,992px,1220px*/@media (max-width: 768px) {.container {width: auto;}}@media (min-width: 768px) {.container {width: 100%;}}@media (min-width: 992px) {.container {width: 100%;}}@media (min-width: 1200px) {.container {width: 100%;}}.container-fluid { padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto;}/*所有列左浮动*/.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {float: left; }#content { background-color:#fff;}
三、网站内容页面
效果：
代码：
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN"><head id="Head1" runat="server"><meta charset="utf-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /><meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" /><link href="/style/bootstrap-3.3.7/css/bootstrap.min.css" rel="stylesheet" /><link href="/style/bootstrap-3.3.7/css/bootstrap-theme.min.css" rel="stylesheet" /><link href="/style/member.css" rel="stylesheet" /><script src="/js/jquery-1.11.3.min.js"></script><script src="/js/bootstrap-3.3.7/bootstrap.min.js"></script><title>会员中心首页</title></head><body><div class="container"><!--<h1>Twitter bootstrap tutorial</h1>--><nav class="navbar navbar-inverse"><!-- Brand and toggle get grouped for better mobile display --><div class="navbar-header"><button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-menu" aria-expanded="false"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a id="logo" class="navbar-brand" href="#"></a></div><div id="navbar-menu" class="collapse navbar-collapse"><ul class="nav navbar-nav"><li class="active"><a href="#">首页</a></li><li><a href="#">礼品兑换</a></li><li><a href="#">个人中心</a></li></ul></div></nav></div><div id="content" class="row-fluid divInterval "><div class="col-xs-12 col-sm-8 col-md-8 col-lg-8">Main Content SectionMain Content SectionMain Content SectionMain Content Section</div><div class="col-xs-12 col-sm-4 col-md-4 col-lg-4"><h2>Sidebar</h2><ul class="nav nav-tabs nav-stacked"><li><a href='#'>Another Link 1</a></li><li><a href='#'>Another Link 2</a></li><li><a href='#'>Another Link 3</a></li></ul></div><!--响应式效果测试<div class="col-xs-12 col-sm-6 col-md-6 col-lg-3">one</div><div class="col-xs-12 col-sm-6 col-md-6 col-lg-3">two</div><div class="col-xs-12 col-sm-6 col-md-6 col-lg-3">three</div><div class="col-xs-12 col-sm-6 col-md-6 col-lg-3">four</div>--></div></body></html>
CSS
.container {padding-right: 0px;padding-left: 0px;margin-right: auto;margin-left: auto; }@media (max-width: 768px) {.container {width: auto;}}@media (min-width: 768px) {.container {width: 100%;}}@media (min-width: 992px) {.container {width: 100%;}}@media (min-width: 1200px) {.container {width: 100%;}}.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 { position: relative; min-height: 1px; padding-right: 15px; padding-left: 15px; border:1px solid #ff6a00;}.navbar-inverse {border-radius: 4px 4px 0px 0px;}.navbar {margin-bottom: 0px; }
参考：
https://www.cnblogs.com/haogj/p/4980353.html
https://www.cnblogs.com/sdusrz/p/7170564.html
https://www.cnblogs.com/jnslove/p/5430481.html
https://www.cnblogs.com/ATtuing/p/5424227.html
http://www.jqhtml.com/bootstraps-syntaxhigh/index.html（Bootstrap手册）
更多：
https://v3.bootcss.com/components/ （Bootstrap中文网）
作者：skybirdzw
来源链接：https://www.cnblogs.com/zhaow/p/9732788.html
版权声明：
1、JavaClub（https://www.javaclub.cn）以学习交流为目的，由作者投稿、网友推荐和小编整理收藏优秀的IT技术及相关内容，包括但不限于文字、图片、音频、视频、软件、程序等,其均来自互联网，本站不享有版权，版权归原作者所有。
2、本站提供的内容仅用于个人学习、研究或欣赏，以及其他非商业性或非盈利性用途，但同时应遵守著作权法及其他相关法律的规定，不得侵犯相关权利人及本网站的合法权利。
3、本网站内容原作者如不愿意在本网站刊登内容，请及时通知本站（javaclubcn@163.com），我们将第一时间核实后及时予以删除。
