开发手册 欢迎您!
软件开发者资料库

Bootstrap - CSS概述

Bootstrap CSS概述 - 从概述,环境设置,基本结构,全局样式,网格系统,流体网格系统,布局,响应式设计,排版,表格,按钮,图像,图标,下拉列表,按钮开始,从简单而简单的步骤学习Bootstrap组,导航元素,导航栏,面包屑,分页,标签,徽章,版式,缩略图,警报,进度栏,媒体对象,Javascript插件像过渡,模态,下拉列表,Scrollspy,选项卡,工具提示,弹出,警报,按钮,折叠, Carousel,Typeahead,Affix,Glyphicons,Jumbotron,Demos。

本章概述了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">  ... 

查看 bootstrap.css 文件中的 .container 类 :

.container {   padding-right: 15px;   padding-left: 15px;   margin-right: auto;   margin-left: auto;}

请注意,由于填充和固定宽度,默认情况下容器不可嵌套.

看一下 bootstrap.css 文件 :

@media (min-width: 768px) {   .container {      width: 750px;   }}

在这里你可以看到CSS对宽度的容器有媒体查询.这有助于应用响应性,并且在容器类中相应地修改容器类以正确地呈现网格系统.