引:Bootstrap采用的是一个“响应式”设计。响应式Web 设计是一个让用户通过各种尺寸的设备浏览网站获得良好的视觉效果的方法。例如,您先在计算机显示器上浏览一个网站,然后再智能手机上浏览,智能手机的屏幕 尺寸远小于计算机显示器,但是你却没有感觉到任何差别,两者的用户体验几乎一样,这说明这个网站在响应式设计方面做得很好(响应式:简单可以理解为不同的 设备屏幕的大小是不同的,但是页面中的内容是固定的,为了让用户在不同大小屏幕看到的内容更加友好,页面的内容或排版需要更随屏幕的变化而变化)。
一个简单的列子:问题分析,我们需要做一个网站,而且需要让网页中的内容居中显示(90%的网站都是如此)。
1440*900分辨率效果如下:
通过firebug工具查看到container的内容宽度为1150,内边距为15(左边、右边)*2,所占总宽度为1150+15*2=1180px。
接下来,请尝试拖动浏览器让浏览器的宽度变小,注意当浏览器的宽度小于1200px的时候你会发现container的宽度变为了970(内容宽度940+内边距为15(左边、右边)*2)
通过浏览器宽度修改而导致container的宽度变化的这个细节,我们可以看出bootstrap内部感知的了这个小细节,并且做出了一定的响应。那么Bootstrap到底使用了什么高端的技术来实现这个功能的。
CSS3 Media Queries(媒体(设备)查询)
Media Queries含义:为不同的媒体类型添加某些条件,检测设备并采用不同的样式表。
简单例子:
图为普通屏幕和打印分别定义样式
普通页面显示内容为:
打印预览页面显示内容为 (firefox打印预览显示:文件--->打印预览)
通过以上的一个简单的例子你已经知道Media Queries(媒体查询)到底能干什么了,页面内容在不同的媒体环境运行时,会自动查询应用我们编写的特定样式。
Bootstrap中也是使用了Media Queries(媒体查询)来实现了响应式布局 ,bootstrap.css中定义如下代码:
以上代码实现了随浏览器宽度的变化container容器的宽度也进行变化。
@media部分代表任何媒体
(min-width: 1200px)部分代表条件,min-width指媒体(浏览器)宽度不小于(大于)1200条件成立。 比如:浏览器的宽度为1250,条件成立使用该样式。浏览器的宽度为1119,条件不成立。
bootstrap.css中很多地方都使用了@media(media queries媒体查询),比如工具条、栅格(网格)系统。建议各位读者打开bootstrap.css文件,搜索“@media”,对这些样式进行分 析,这对学习bootstrap非常有帮助。
关注作者:
相关推荐
【Java技术】教你用Bootstrap开发漂亮的前端界面
基于Bootstrap的前端界面含主页,注册,新闻详情页,全是静态页面,需要自各拿走。模仿大公新闻网做的前端界面。
Bootstrap写的前端页面
Bootstrap开发精解 原理 技术 工具及最佳实践 随书代码
bootstrap后台管理前端模板,自适应,界面美观,可复用强
HTML+CSS+JavaScript+jQuery+Bootstrap等前端框架实现的前端案例.zip
bootstrap自适应版旅游前端网页bootstrap自适应版旅游前端网页bootstrap自适应版旅游前端网页bootstrap自适应版旅游前端网页
《疯狂前端开发讲义 jQuery+AngularJS+Bootstrap前端开发实战》源码
疯狂前端开发讲义:jQuery+AngularJS+Bootstrap前端开发实战
本文实例讲述了Bootstrap实现前端登录页面带验证码功能。分享给大家供大家参考,具体如下: Bootstrap有自定义的验证码样式,在前端页面可以直接使用,他的css、js在使用前要在开头引入 上代码: <!DOCTYPE ...
bootstrap 前端模板
前端开发通过HTML,CSS及JavaScript以及衍生出来的各种技术、框架、解决方案,来实现互联网产品的用户界面交互。 熟悉掌握HTML、服务器端脚本语言、CSS和JavaScript之后,学习Web框架可以加快Web开发速度,节约时间...
Bootstrap是目前最为流行的前端开发框架,由Twitter的两位工程师设计推出。学习本套课程,可以快速的建立HTML5的响应式前端页面。 适用人群 对前端框架感性兴趣、已经学完HTML5第一季视频教程的同学 课程简介 ...
Vue.js 结合bootstrap 前端实现分页效果
用bootstrap做的前端页面框架,适合用作门户、网购、官网、博客等网站
本压缩包包含 BootStrap用户登录界面的实现,并且通过 jquery validate验证信息
Bootstrap开发框架本文档主要介绍《基于 Metronic 的 Bootstrap 开发框架》 的基础上,通过分析各个模块相关的代码、各种常见组件的使用、特殊应用场景的处理, 熟悉掌握框架里面相关代码和组件的使用,以便能够更...
一套好用的bootstrap 界面框架,基于Bootstrap3.3.6最新版本开发的扁平化主题,采用了主流的左右两栏式布局,使用了Html5+CSS3等现代技术,提供了诸多的强大的可以重新组合的UI组件
很好的html模板,用到了国外大火的bootstrap技术,适合初学者去增进您的技术,特别是他自带的开发文档是很优雅的
疯狂前端开发讲义 jQuery AngularJS Bootstrap前端开发实战