分享:如何看懂Bootstrap3的响应式工具测试用例?

浏览:655 发布日期:2015/12/04 分类:技术分享 关键字: Bootstrap3 响应式工具 测试用例
访问Bootstrap3中文网
http://v3.bootcss.com/css/#responsive-utilities-tests
在“响应式工具”测试用例一节,你会看到这样一张图:


这张图是个什么意思呢?最开始我也是没看懂,等看明白了才感觉Bootstrap太牛B了。这图到底怎么看?很简单,把浏览器的右边框向左拖拽一小格,是不是变成下面这样了:


再拖拽一小格,这张图又变下面这样了:


浏览器边框再缩不小了,这时就是手机上显示的内容了:


神奇吧!感觉就象是javascript在操作一样,但你看一下源代码,会发现只有一个"bootstrap.min.css"被加载了,这就是Bootstrap3所说的CSS编程效果,真正实现了响应式设计,也就是浏览器自适应——随着终端设备的变化,浏览器可以自动调整页面布局和显示内容。

附件中是相关的源代码,下载下来自己看吧!
bootstrap.min.css是压缩格式
bootstrap.css是源文件
(完)

附件 html.rar ( 38.32 KB 下载:5 次 )

最佳答案
评论( 相关
后面还有条评论,点击查看>>