Bootstrap学习笔记1

Bootstrap在线手册 http://v3.bootcss.com，这里有详细的说明、参考、示例。

Bootstrap为许多前端常用的功能都做了封装、预定义，可以直接使用。

Bootstrap支持一些定制，可以根据需要做一些参数调整、功能选择，然后下载使用。这种方式方便以后升级到新版本（如果直接修改代码，就不方便升级了）。

1、HTML5文档类型

Bootstrap使用到的某些HTML元素和CSS属性需要将页面设置为HTML5文档类型。在你项目中的每个页面都要参照下面的格式进行设置。

<!DOCTYPE html>

<html lang="zh-cn">

  ...

</html>

2、也就是说，Bootstrap是移动设备优先的。针对移动设备的样式融合进了框架的每个角落，而不是一个单一的文件。

为了确保适当的绘制和触屏缩放，需要在<head>之中添加viewport元数据标签。

<metaname="viewport"content="width=device-width, initial-scale=1.0">

在移动设备浏览器上，通过为viewport meta标签添加user-scalable=no可以禁用其缩放（zooming）功能。这样禁用缩放功能后，用户只能滚动屏幕，就能让你的网站看上去更像原生应用的感觉。

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

3、响应式图片

通过添加.img-responsive class可以让Bootstrap 3中的图片对响应式布局的支持更友好。其实质是为图片赋予了max-width: 100%; 和height: auto;属性，可以让图片按比例缩放，不超过其父元素的尺寸。

<img src="..." class="img-responsive" alt="Responsive image">

4、排版和链接

Bootstrap设置了全局样式，包括显示、排版和链接。尤其是，我们还：

为body标签设置了background-color: #fff;样式
设置了排版的基本属性@font-family-base、@font-size-base和@line-height-base
Set the global link color via @link-color and apply link underlines only on :hover

这些样式可以在scaffolding.less文件中找到。

5、栅格系统

栅格系统用于通过一系列的行（row）与列（column）的组合创建页面布局，你的内容就可以放入创建好的布局中。下面就介绍以下Bootstrap栅格系统的工作原理：

“行（row）”必须包含在.container中，以便为其赋予合适的排列（aligment）和内补（padding）。
使用“行（row）”在水平方向创建一组“列（column）”。
你的内容应当放置于“列（column）”内，而且，只有“列（column）”可以作为行（row）”的直接子元素。
类似Predefined grid classes like .row and .col-xs-4 这些预定义的栅格class可以用来快速创建栅格布局。Bootstrap源码中定义的mixin也可以用来创建语义化的布局。
通过设置padding从而创建“列（column）”之间的间隔（gutter）。然后通过为第一和最后一样设置负值的margin从而抵消掉padding的影响。
栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如，三个等宽的列可以使用三个.col-xs-4来创建。

6、排版

对于页面上的标题、强调、缩略语、地址、引用、列表等都定义了样式

表格

为任意<table>标签添加.table可以为其赋予基本的样式—少量的内补（padding）和水平方向的分隔线。这种方式看起来很多余！？但是我们觉得，表格元素使用的很广泛，如果我们为其赋予默认样式可能会影响例如日历和日期选择之类的插件，所以我们选择将其样式独立出来。

秒客网