上QQ阅读APP看书，第一时间看更新
2.5 实战：一个Bootstrap实现的响应式页面
Bootstrap 3默认就引入了响应式设计，相比2.x版本，它有两点比较大的变化：
● 拥抱大屏幕，移除了小屏手机和大屏手机（480～768像素）这个媒介查询区间，768像素以下的统一归为小屏幕设备。
● 设计了表现不同的栅格类，对栅格类的命名规则也做了很大的修改，更复杂，但使用也更灵活，能适应更多的场景。
在Bootstrap 2中，栅格全部采用span*作为前缀。而在Bootstrap 3中采用了col-type-*这样命名的前缀，其中type可以取xs（超小屏）、sm（小屏）、md（中屏）、lg（大屏）4个值。
通过表2.1可以详细查看Bootstrap的栅格系统是如何在多种屏幕设备上工作的。
表2.1 Bootstrap 3的响应式布局区间
【代码2-6】一个Bootstrap实现的响应式页面（详见源代码ch02目录中ch02.firstBootstap.html文件）:
01 <! DOCTYPE html>
02 <html lang="en">
03 <head>
04 <meta charset="UTF-8">
05 <link href="../bootstrap/css/bootstrap.css" rel="stylesheet">
06 <title>Bootstrap - first page</title>
07 </head>
08 <body style="margin:20px">
09 <div class="container">
10 <div class="row">
11 <div class="col-xs-12 col-sm-3 col-md-5 col-lg-4"> <! -- 左
侧边栏-->
12 <h1>News</h1>
13 <h1>Blog</h1>
14 <h1>About</h1>
15 </div>
16 <div class="col-xs-12 col-sm-9 col-md-7 col-lg-8"> <! -- 右
侧边栏-->
17 <p>This is a first Bootstrap page.Please tests this page in
various screen size.</p>
18 </div>
19 </div>
20 </div>
21 <script src="../js/jquery.js"></script> <! --jQuery应该放在前面优
先加载-->
22 <script src="../bootstrap/js/bootstrap.js"></script>
23 </body>
24 </html>
根据表2.1中的介绍来看这个示例，可以发现在窗口尺寸大于1200px时，左侧边栏占据4列宽度，右侧边栏占据8列宽度；尺寸在992px～1200px时，左侧边栏占据5列宽度，右侧边栏占据7列宽度；而当尺寸在768px～992px时，左侧边栏占据3列宽度，右侧边栏占据9列宽度。小于768px时，则左右侧边栏都占据100%宽度，堆叠起来。
下面，尝试使用手机的屏幕尺寸来显示该页面（可以通过浏览器插件Responsive Web Design Test来实现），图2.11是“Portrait”样式。
图2.11 Bootstrap中的“Portrait”响应式页面
图2.12是“Landscape”样式。
图2.12 Bootstrap中的“Landscape”响应式页面