上QQ阅读APP看书，第一时间看更新
2.5 实战：一个Bootstrap实现的响应式页面
Bootstrap 4默认就引入了响应式设计，有以下两点特色：
● 拥抱各种屏幕大小（大屏幕、小屏手机、大屏手机等），列会根据屏幕大小自动重新排列。
● 设计了表现不同的栅格类，对栅格类的命名规则也做了很大的修改，更为复杂，但使用更为灵活，能适应更多的场景。
Bootstrap 3采用col-type-*这样命名的前缀，其中type可以取xs（超小屏）、sm（小屏）、md（中屏）、lg（大屏）4个值。这方面Bootstrap 4做了调整，Bootstrap 3和Bootstrap 4最大的区别在于Bootstrap 4使用Flexbox（弹性盒子），而不是浮动的。Flexbox的一大优势是没有指定宽度的网格列将自动设置为等宽与等高列。Bootstrap 4的网格宽度可以是col-、col-sm-、col-md-、col-lg-和col-xl-。
说明
具体的栅格或布局相关，在第3章会详细介绍，这里简单测试即可。
通过表2.1可以详细查看Bootstrap的栅格系统是如何在多种屏幕设备上工作的。
表2.1 Bootstrap的响应式布局区间
【代码2-6】一个Bootstrap实现的响应式页面（详见源代码ch02目录中ch02.firstBootstap.html文件）
下面尝试使用手机的屏幕尺寸来显示该页面（可以通过浏览器插件Responsive Web Design Test来实现）。图2.11是Portrait样式，图2.12是Landscape样式。
图2.11 Bootstrap中的Portrait响应式页面
图2.12 Bootstrap中的Landscape响应式页面