bootstrap笔记

表单作用：表单能够包含 input 元素，比如文本字段、复选框、单选框、提交按钮等等。表单用于向服务器传输数据。用户在浏览器中的注册页面添加信息后,点击提交,此时是将这些信息提交至某个服务器，服务器根据提交的信息将注册信息保存. 这个过程就需要使用form标签了

对输入元素使用form-control 可以去除阴影，边框附带淡蓝色，输入状态更加柔和。

Bootstrap 3 的 container class 用于包裹页面上的内容。

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

通过上面的代码，把 container 的左右外边距（margin-right、margin-left）交由浏览器决定。

请注意，由于内边距（padding）是固定宽度，默认情况下容器是不可嵌套的。

Bootstrap 网格系统（Grid System）的工作原理

网格系统通过一系列包含内容的行和列来创建页面布局。下面列出了 Bootstrap 网格系统是如何工作的：

行必须放置在 .container class 内，以便获得适当的对齐（alignment）和内边距（padding）。

网格系统是通过指定您想要横跨的十二个可用的列来创建的。例如，要创建三个相等的列，则使用三个 .col-xs-4。

1

Bootstrap 中用到一些 HTML元素和CSS属性需要将页面设置为 HTML5 文档类型，即在页面顶部添加“”

2

布局容器：Bootstrap 需要为页面内容和栅格系统包裹一个 .container或container-fluid（占据全部视口viewport的容器）容器。

3

栅格系统，Bootstrap 提供了一套最多12列的流式栅格系统，通过 .row表示行 和 .col-xs-4 这种表示宽度的列快速创建栅格布局。

4

Bootstrap 排版、链接样式设置了基本的全局样式。

font-size 设置为 14px，line-height 设置为 1.428。

（段落）元素还被设置了等于 1/2 行高（即 10px）的底部外边距（margin）。 基础样式 【排版】， 1. 标题，可以用来.h1 到 .h6 类给内联属性的文本赋予标题样式，标题内通过 标签或带.small 类的元素标记副标题。 主体文本：.lead 类让段落突出显示。 2. 内联文本，使用 标签表示标注文本，删除，无用，插入，下划线，小号（父容器字体大小的 85%），着重，斜体。 3. 文本对齐类，text-left，text-center，text-right，text-justify，text-nowrap 4. 文本大小写类，text-lowercase，text-uppercase，text-capitalize 5. 缩略语类，为 元素设置 title属性并使用.initialism 类让 font-size 变得稍微小些。例：ATTR 6. 地址，以日常使用的格式呈现，在行结尾加 保留需要的样式即可。 7. 引用，将 HTML 元素包裹在

中即可表现为引用样式。对于直接引用，建议用

标签。 8. 列表，list-unstyled类移除默认 list-style 样式和左侧外边距的一组元素（只针对直接子元素）。list-inline类通过设置 display: inline-block; 并添加少量的内补（padding），将所有元素放置于同一行。dl-horizontal类让

内的短语及其描述排在一行。 【代码】 标签包裹内联样式的代码片段， 标签标记用户通过键盘输入的内容，