本章概述了Bootstrap基础架构的关键部分,包括Bootstrap实现更好,更快,更强大的Web开发的方法.
HTML5 doctype
Bootstrap使用某些需要使用HTML5 doctype的HTML元素和CSS属性.因此,在使用Bootstrap的所有项目的开头包含下面的HTML5 doctype代码.
....
Mobile First
自启动Bootstrap 3以来,Bootstrap已首先成为移动设备.这意味着可以在整个库中找到"移动优先"样式,而不是在单独的文件中找到它们.您需要将视口元标记添加到< head> 元素,以确保在移动设备上正确渲染和触摸缩放.
< meta name ="viewport"content ="width = device-width,initial-scale = 1.0">
width 属性控制设备的宽度.将其设置为设备宽度将确保它正确地在各种设备(手机,台式机,平板电脑......)上呈现.
initial-scale = 1.0 确保加载后,您的网页将以1:1的比例呈现,并且不会开箱即用.
将 user-scalable = no 添加到内容属性以禁用移动设备上的缩放功能,如图所示下面.用户只能滚动而不能使用此更改进行缩放,这会使您的网站感觉更像本机应用程序.
< meta name ="viewport"content ="width = device-width,initial-scale = 1.0,maximum-scale = 1.0,user-scalable = no">
通常 maximum-scale = 1.0 与 user-scalable = no 一起使用.如上所述 user-scalable = no 可能会为用户提供更像本机应用的体验,因此Bootstrap不建议使用此属性.
响应图像
Bootstrap 3允许您通过向< img> 标记添加类 .img-responsive 来使图像响应.此类将 max-width:100%; 和 height:auto; 应用于图像,以便它可以很好地缩放到父元素.
排版和链接
Bootstrap设置基本的全局显示(背景),排版和链接样式 :
基本全局显示 : 在< body> 元素上设置 background-color:#fff; .
排版 : 使用 @ font-family-base , @ font-size-base 和 @ line-height-base 属性作为印刷基础.
链接样式 : 通过属性 @ link-color 设置全局链接颜色,并仅在:hover 上应用链接下划线.
如果您打算使用LESS代码,您可以在 scaffolding.less 中找到所有这些代码.
Normalize
Bootstrap使用规范化来建立跨浏览器的一致性.
Normalize.css是CSS重置的现代HTML5替代方案.它是一个小的CSS文件,在HTML元素的默认样式中提供更好的跨浏览器一致性.
容器
使用类.容器包装页面的内容并轻松地将内容置于中心位置.
< div class ="container"> ...