bootstrap的响应式布局
响应式布局
响应式开发原理
就是使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备的目的
超小屏幕（手机）：<768px
小屏设备(平板):>=768px ~<992px
中等屏幕（桌面显示器）:>=992px ~<1200px
宽屏设备（大桌面显示器）：>=1200px
响应式布局容器
响应式需要一个父级作为布局容器，来配合子级元素来实现变化效果
原理就是在不同屏幕下，通过媒体查询来改变这个布局容器的大小，在改变里面子元素的排列方式和大小，从而实现不同屏幕下，看到不同的页面布局和样式变化
平时我们的响应式尺寸划分
超小屏幕（手机，小于768px）:设置宽度为100%
小屏幕（平板，大于等于768px）:设置宽度为750px
中等屏幕（桌面显示器，大于等于992px）：宽度设置为970px
大屏幕（大桌面显示器，大于等于1200px）：宽度设置为1170px
Bootstrap简介
Bootstrap来自Twitter(推特)，是目前最受欢迎的前端框架。Bootstrap是基于HTML,CSS和JAVASCRIPT的，它简介灵活，使得Web开发更加快捷。
框架：顾名思义就是一套架构，它有一套比较完整的网页功能解决方案，而且控制权在框架本身，有预制样式库，组件和插件。使用者要按照框架所规定的某种规范进行开发。
优点：标准化的html+css编码规范，提供了一套简介、直观、强悍的组件，有自己的生态圈，不断的更新迭代，让开发更简单，提高了开发的效率
版本：2.x.x：停止维护，兼容性好，代码不够简介，功能不够完善。3.x.x:目前使用最多，稳定，但是放弃了IE6-IE7.对IE8支持但是界面效果不好，偏向用于开发响应式布局、移动设备有限的WEB项目。4.x.x：最新版，目前还不是很流行。
使用方法
创建HTML股骨架结构
<!--视口的设置：视口的宽度和设备一致，默认的缩放比例和PC端一直，用户不能自行缩放-->
<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=0">
<!--要求当前网页使用IE浏览器最高版本的内核来渲染-->
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!--[if lt IE 9]>
<!--解决ie9一下浏览器对html5新增标签的不识别，并导致CSS不起作用的问题-->
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<!--解决ie9一下浏览器对CSS3 Media Query的不识别-->
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
然后引入bootstarp的样式文件
<link rel="stylesheet" href="./bootstrap/css/bootstrap.min.css">按钮
<button class="btn btn-default" type="submit">Button</button>
<div class="btn btn-success login">登录</div>布局容器
Bootstrap需要为页面内容和栅格系统包裹一个.container容器，Bootstrap余弦定义好了这个类，叫.container它提供了两个做此用处的类
1.container类
<div class="container"></div>
响应式布局的容器 固定宽度
大屏（>=1200px）宽度定位1170px
中屏（>=992px）宽度定位970px
小屏（>=768px）宽度定位750px
超小屏（100%）
2.container-fluid类
<div class="container-fluid"></div>
流式布局容器百分百宽度
占据全部视口（viewport）的容器
适合于单独做移动端开发
Bootstrap栅格系统
栅格系统
栅格系统应为为gridsystems,也有人翻译为“网格系统”，它是指将页面布局划分为等宽的列，然后通过列数的定义模块化页面布局
Bootstrap提供了一套响应式、移动设备有限的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列
Bootstrap里面container宽度是固定的，但是不同屏幕下，container的宽度不同，我们再把container划分为12等份
栅格选项参数
栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。
大屏（>=1200px）.container宽度定位1170px,类前缀:.col-lg-
中屏（>=992px）.container宽度定位970px,类前缀:.col-md-
小屏（>=768px）.container宽度定位750px,类前缀:.col-sm-
超小屏 .container（100%）,类前缀:.col-xs-
行（row）必须放到container布局容器里面
我们实现列的平均划分 需要给列添加类前缀
xs-extra small：超小；sm-small:小；md-medium：中等;lg-large:大;
列（column）大于12，多余的列（column）所在的元素将被作为一个整体另起一行排列
每一列默认有左右15像素的padding，如果加了row以后，会将这个padding值去掉
可以同时为一列指定多个设备的类名，一边划分不同的份数，例如class="col-md-4 col-sm-6"
如果孩子的份数相加小于12则会站不满整个container的宽度，会有空白，如果大于12则会另起一行
<div class="row">
<div class="col-lg-6">6</div>
<div class="col-lg-2">2</div>
<div class="col-lg-2">2</div>
<div class="col-lg-1">1</div>
</div>列嵌套
栅格系统内置的栅格系统将内容再次嵌套。简单理解就是一个列内再分成若干份小烈。我们可以通过添加一个新的.row元素和一系列.col-sm-*元素到已经存在的.col-sm-*元素内
我们列嵌套最好加一个行row这样可以取消父元素的padding值，而且高度自动和父级一样高
<div class="col-sm-4">
<div class="row">
<div class="col-sm-6">6</div>
<div class="col-sm-6">6</div>
</div>
</div>列偏移
使用.col-md-offset-*类可以将列向右侧偏移。这些类实际是通过使用*选择器为当前元素增加了左侧的边距（margin）.
<div class="container">
<div class="row">
<div class="col-md-4">左侧</div>
<div class="col-md-4 col-md-offset-4">偏移了4份，因为总共要等于12份，右侧</div>
</div>
</div>列排序
通过使用.col-md-push-*和.col-md-pull-*类就可以很容易的改变列（column）的顺序
<div class="container">
<div class="row">
<div class="col-md-4 col-md-push-8">左侧的盒子推到右边</div>
<div class="col-md-8 col-md-pull-4">右侧的盒子拉倒左边</div>
</div>
</div>响应式工具
为了加快对移动设备友好的页面开发工作，利用媒体查询功能，并使用这些工具类可以方便的针对不同设备展示或隐藏页面内容
.hidden-xs:超小屏隐藏，其他可见
.hidden-sm:小屏隐藏，其他可见
.hidden-md:中屏隐藏，其他可见
.hidden-lg:大屏隐藏，其他可见
<div class="container">
<div class="row">
<div class="col-xs-3 hidden-xs">1</div>
<div class="col-xs-3 hidden-sm">2</div>
<div class="col-xs-3 hidden-md">3</div>
<div class="col-xs-3 hidden-lg">4</div>
</div>
</div>与之相反，visible-xs等等是显示某个状态下显示
Bootstrap其他（按钮、表单、表格）参考Bootstrap文档
css
ul{
list-style: none;
margin: 0;
padding: 0;
}
a{
color: #666;
text-decoration: none;
}
a:hover{
text-decoration: none;
}
body{
background: #f5f5f5;
}
.container{
background: #fff;
}
/* 因为设计稿是1280px的，而bootstrap里面的container最大为1170px，因此我们手动修改container宽度 */
@media screen and (min-width:1280px){
.container{
width: 1280px;
}
}
/* header */
/* 如果header不设置padding-left，它本身有一个左侧内边距，因为我们需要右侧内边距,所以不能使用.row的bootstrap类样式，所以可以用这种方式 */
header{
}
.logo{
background-color: #429ad9;
}
.logo img{
display: block;
margin: 0 auto;
/* width:100%; */
max-width: 100%;
/* logo图片不需要缩放 */
}
.logo p{
height: 50px;
font-size: 22px;
text-align: center;
line-height: 50px;
color: #fff;
margin: 0;
}
.nav{
background: #eee;
border-bottom: 1px solid #ccc;
}
/* 如果屏幕进入小屏幕时，让导航栏浮动横排 */
@media screen and (max-width:991px){
.nav li{
float: left;
width: 20%;
}
article{
margin-top: 10px;
}
}
/* 如果屏幕进入超小屏幕时，让文字变小14px */
@media screen and (max-width:767px){
.nav a{
font-size: 14px!important;
padding-left: 3px!important;
}
/* 让news第一个li宽度为100%，其他为50% */
.news li:first-of-type{
width: 100%!important;
}
.news li{
width: 50%!important;
}
}
.nav a{
display: block;
height: 50px;
line-height: 50px;
padding-left: 30px;
font-size: 16px;
}
.nav a:hover{
background: #fff;
color: #222;
}
.nav a::before{
vertical-align: middle;
padding-right: 5px;
}
/* article news */
article{
padding-right: 5px!important;
}
.news li{
float: left;
width: 25%;
height: 128px;
padding-right: 10px;
margin-bottom: 10px;
}
.news li:first-of-type{
width: 50%;
height: 266px;
}
.news li:first-of-type p{
font-size: 22px;
line-height: 41px;
padding:0 10px;
}
.news li a{
display: block;
height: 100%;
width: 100%;
position: relative;
}
.news li a img{
height: 100%;
width: 100%;
}
.news li a p{
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 41px;
font-size: 12px;
color: #fff;
margin: 0;
padding:5px 10px;
background: rgba(0, 0, 0, .5);
}
/* article publish */
.publish{
padding-right: 10px;
}
.publish .row:first-of-type{
border-top: 1px solid #666;
}
.publish .row{
margin: 0;
padding: 10px 0;
border-bottom: 1px solid #666;
}
.pic img{
width: 100%;
margin-top: 10px;
}
/* aside */
aside{
padding-right: 5px!important;
}
.asidepic{
display: block;
margin-bottom: 20px;
}
.asidepic img{
width: 100%;
}
.hot{
display: block;
padding: 0 20px 0 20px;
border: 1px solid #666;
}
.hot p{
border-radius: 0;
margin-bottom: 20px;
}html
<!DOCTYPE html>
<html >
<head>
<link rel="stylesheet" href="./bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="./css/index.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- IE8 是被支持的。然而，很多 CSS3 属性和 HTML5 元素是不被支持的。例如，Bootstrap 的响应式布局是通过CSS3的媒体查询（Media Query）功能实现的，根据不同的分辨率来匹配不同的样式，IE8浏览器并不支持这一优秀的CSS3特性。Bootstrap在开发文档中已经明确指出， IE8 需要 Respond.js 配合才能实现对媒体查询（media query）的支持,其中 html5shiv.min.js 文件是让不（完全）支持html5的浏览器支持 html5 标签；respond.js 文件是让IE8实现对媒体查询（media query）的支持。
但是，在IE8浏览器中打开页面发现，兼容性问题并没有得到解决（坑、坑、坑）。通过查阅相关资料，笔者总结几点注意事项（效果实现的关键）：
本地调试需要Web Server（如IIS、Apache，Nginx），单纯地本地打开文件不能看到兼容效果；
如果你发现已经引用了 respond.js 和 Bootstrap，仍无效果，请查看你的Bootstrap是否使用了CDN文件；
Bootstrap3 需要Html5文档声明；
Jquery 版本需要在2.0以下。 -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<title>Document</title>
</head>
<body>
<div class="container">
<div class="row">
<header class="col-md-2">
<div class="logo">
<a href="#">
<!-- 如果进入超小屏幕，logo图片隐藏 -->
<img src="images/logo.png" alt="" class="hidden-xs">
<!-- 我们先准备一个盒子，在超小屏幕下显示盒子内容 -->
<p class="visible-xs">阿里百秀</p>
</a>
</div>
<div class="nav">
<ul>
<li><a href="#" class="glyphicon glyphicon-camera">生活馆</a></li>
<li><a href="#" class="glyphicon glyphicon-picture">自然汇</a></li>
<li><a href="#" class="glyphicon glyphicon-phone">科技潮</a></li>
<li><a href="#" class="glyphicon glyphicon-gift">奇趣事</a></li>
<li><a href="#" class="glyphicon glyphicon-glass">美食杰</a></li>
</ul>
</div>
</header>
<article class="col-md-7">
<!-- 新闻 -->
<div class="news clearfix">
<ul>
<li>
<a href="#">
<img src="upload/lg.png" alt="">
<p>阿里百秀</p>
</a>
</li>
<li>
<a href="#">
<img src="upload/lg.png" alt="">
<p>阿里百秀阿里百秀阿里百秀阿里百秀阿里百秀阿里百秀</p>
</a>
</li>
<li>
<a href="#">
<img src="upload/lg.png" alt="">
<p>阿里百秀</p>
</a>
</li>
<li>
<a href="#">
<img src="upload/lg.png" alt="">
<p>阿里百秀</p>
</a>
</li>
<li>
<a href="#">
<img src="upload/lg.png" alt="">
<p>阿里百秀</p>
</a>
</li>
</ul>
</div>
<!-- 发表 -->
<div class="publish">
<div class="row">
<div class="col-sm-9">
<h3>生活馆生活馆生活馆生活馆生活馆生活馆？</h3>
<p class="text-muted hidden-xs">生活馆生活馆生活馆2015-3-3</p>
<p class="hidden-xs">生活馆生活馆生活馆生活馆生活馆生活馆生活馆生活馆生活馆生活馆生活馆生活馆生活馆生活馆生活馆生活馆生活馆生活馆生活馆生活馆生活馆</p>
<p class="text-muted">生活馆生活馆生活馆生活馆生活馆生活馆生活馆/生活馆/生活馆/生活馆/生活馆/生活馆</p>
</div>
<div class="col-sm-3 pic">
<img src="./upload/3.jpg" alt="" class="hidden-xs">
</div>
</div>
</div>
</article>
<aside class="col-md-3">
<a href="#" class="asidepic">
<img src="./upload/3.jpg" alt="">
</a>
<a href="#" class="hot">
<p class="btn btn-primary">热搜</p>
<h4 class="text-primary">还应加入中国博客联盟</h4>
<p class="text-muted">生活馆生活馆生活馆生活馆生活馆生活馆生活馆生活馆生活馆生活馆生活馆..</p>
</a>
</aside>
</div>
</div>
</div>
</body>
</html>