Bootstrap之CSS篇(1)

本篇我们来学习bootstrap在CSS布局中的使用。

Bootstrap CSS概述

Bootstrap的开发中使用了HTML5元素和CSS属性，为了保证在浏览器中的兼容性，强列建议在所有的Bootstrap项目中使用HTML5的文档类型，否则将不能确保项目的效果。

Bootstrap 3对移动设备进行了优化，以前需要引入一个移动设备的CSS资源，新的版本默认就可以支持移动设备。

移动设备优先适配，其次才是面桌设备，这个特点让Bootstrap更适合开发移动设备网页应用。

Bootstrap开发移动设备网站时，需要在head中声明viewport meta标签

width属性，控制设备宽度，确保它能正确呈现在不同的设备上

initial-scale=1.0 以1：1比例呈现，无缩放效果

我们能过viewport meta标签来，禁止移动设备浏览器使用缩放功能，让网站拥有原生应用一样的效果只能上下滑动。

为img标签添加img-responsive这个类，即可让图像拥有非常友好的响应式布局支持。

分析.img-responsive这个class包含的CSS属性

.img-responsive {     display:block;     height:auto;     max-width:100%; }

img元素将以block块级元素显示，并且高度为浏览器自适应，最大宽度为100%，这些属性可以让图像按比例缩放不超过父级标签，从而非常友好的支持响应式布局。

如果图像需要水平居中，可以在追加.center-block类，因为display:block所以不能使用.text-center来实现居中

Bootstrap默认的全局样式

body{     font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;     font-size: 14px;     line-height: 1.428571429;     color: #333333;     background-color: #ffffff; }

我们还可以通过body{margin:0}来取消body默认8px的边距

Bootstrap默认的排版样式

@font-family-base @font-size-base @line-height-base

以上三个属性设置了基本的排版样式

Bootstrap默认的链接样式

为链接设置了基本颜色@link-color，并且当链接处于:hover状态时才添加下划线

a:hover, a:focus {   color: #2a6496;   text-decoration: underline; } a:focus {   outline: thin dotted #333;   outline: 5px auto -webkit-focus-ring-color;   outline-offset: -2px; }

上述的几个基本样式都可以在scaffolding.less文件中找到

Normalize.css是一个很小的css文件，它在HTML元素样式上提供了跨浏览器的高度一致性。

Normalize.css它是为HTML5准备的，是CSS reset优质的替代方案。

-- Bootstrap使用Normalize来建立跨浏览器一致性

保护有用的浏览器样式

为大部份html元素提供一般化的样式

修复浏览器自身的bug

通常在Bootstrap中我们使用Container class来放置网页的主体内容

......