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中文网）
Bootstrap页面响应式设计的更多相关文章
- Bootstrap 响应式设计
本教程讲解如何在网页布局中应用响应式设计.在课程中,您将学到响应式 Web 设计.随着移动设备的普及,如何让用户通过移动设备浏览您的网站获得良好的视觉效果,已经是一个不可避免的问题了.响应式 Web ...
- bootstrap响应式设计简单实践。
首先需要熟悉Boostrap提供的响应式设施:http://getbootstrap.com/css/#responsive-utilities,BootStrap的响应式设施主要是利用媒体查询对元素 ...
- 超棒的HTML5/CSS3单页面响应式模板（支持Bootstrap）
在线演示 使用Bootstrap实现的响应式单页面模板. 桌面效果: 移动设备效果: 阅读全文:超棒的HTML5/CSS3单页面响应式模板(支持Bootstrap)
- Metronic – 超赞！基于 Bootstrap 的响应式后台管理模板
Metronic 是一套精美的响应式后台管理模板,基于强大的 Twitter Bootstrap 框架实现.Metronic 拥有简洁优雅的 Metro UI 风格界面,6 种颜色可选,76 个模板页 ...
- paip.自适应网页设计 跟 响应式 设计方法与工具补充（2）o54
paip.自适应网页设计 跟 响应式 设计方法与工具补充(2)o54 #-----响应式 设计框架 Bootstrap比较热门. Foundation 号称是世界上最先进的响应式前端框架. #---绝 ...
- CSS 响应式设计
响应式设计是指在不同分辨率的设备中,网页布局可以自适应的调整.这种弹性化的布局使网站在不同设备中的布局都比较合理,可以为不同终端的用户提供更加舒适的界面和更好的用户体验,其根本理念是使原本 PC 上的 ...
- CSS3知识点整理（五）----响应式设计及其他属性
介绍Media Queries与Responsive设计以及外轮廓属性.resize属性.CSS3生成内容等 学会如何使用CSS3中的Media Queries模块来让一个页面适应不同的终端(或屏幕尺 ...
- Bootstrap的响应式后台管理模板推荐
1.Admin LTE 该模版开源免费.已用到项目中,客户评价说UI很好看... AdminLTE - 是一个完全响应式管理模板.基于Bootstrap3的框架.高度可定制的,易于使用.支持很多的屏幕 ...
- css响应式设计
响应式设计是指在不同分辨率的设备中,网页布局可以自适应的调整.这种弹性化的布局使网站在不同设备中的布局都比较合理,可以为不同终端的用户提供更加舒适的界面和更好的用户体验,其根本理念是使原本 PC 上的 ...
随机推荐
- Linux系统是否被植入木马的排查流程梳理
在日常繁琐的运维工作中,对linux服务器进行安全检查是一个非常重要的环节.今天,分享一下如何检查linux系统是否遭受了入侵? 一.是否入侵检查 1)检查系统日志 1 2 检查系统错误登陆日志,统计 ...
- mapReduce的优化-combiner
mr的合成器,本质上就是reduce,在map端执行,称之为map端reduce,或者预聚合. 例子: job.setCombinerClass(WordCountCombiner.class);
- vue如何动态绑定v-model
如图所示有三个字段要从弹出的输入框取值点击字段会弹出上面的弹窗,输入input会响应变化,比如点击身高,弹出输入框,输入值后身高后面会跟着一个同样的值点击体重,弹出输入框,输入值后体重后面会跟着一个同 ...
- MySQL有四种BLOB类型
先说明一下Blob的类型,直接从网上摘抄了!!!1.MySQL有四种BLOB类型: ·tinyblob:仅255个字符 ·blob:最大限制到65K字节 ·mediumblob:限制到16M字节 ·l ...
- cefsharp wpf
github 安装 PM> Install-Package CefSharp.Wpf 解决方案->属性->配置属性->活动解决方案平台-新建-x64 在需要使用的窗体上引用xm ...
- NoSQL的种类
https://www.zhihu.com/question/30219620
- Myeclipse 启动tomcat项目报Out of memory: java heap space
问题: 在Myeclipse中启动tomcat,程序启动过程中报内存不足,java.lang.OutOfMemoryError: Java heap space 从错误可以看出是堆内存太小,需要配置j ...
- Qt 字符映射表 显示图标
一.利用字符映射表segmdl2.ttf,窗体显示字符图片. 在win10里面搜“字符映射表”,选择字体segmdl2.ttf,查看图标对应得16进制值.把此字体拷贝到程序的目录下. 二.使用 #if ...
- python3 速查参考- python基础 7 -> 函数编程之 装饰器、生成器
装饰器 1.速查笔记 #-- 函数装饰器:是它后边的函数的运行时的声明 由@符号以及后边紧跟的"元函数"(metafunction)组成 @staticmethod def sme ...
- 【FFMPEG】使用ffmpeg类库打开流媒体
版权声明:本文为博主原创文章,未经博主允许不得转载. 使用ffmpeg类库进行开发的时候,打开流媒体(或本地文件)的函数是avformat_open_input(). 其中打开网络流的话,前面要加上函 ...