Bootstrap学习（一）入门
Date: 2018-10-17
1、Bootstrap网格系统
Bootstrap网格系统定义：
【Bootstrap学习（一）入门】Bootstrap 包含了一个响应式的、移动设备优先的、不固定的网格系统，可以随着设备或视口的大小的增加而适当地扩展到12列。它包含了用于简单的布局选项的预定义类，也包含了用于生成更多语义布局的功能强大的混合类。移动设备优先策略：
响应式网格系统随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。
文章图片
Bootstrap网格系统布局 Bootstrap网格系统工作原理：
- 行必须放置在 .container class 内，以便获得适当的对齐（alignment）和内边距（padding）。
- 使用行来创建列的水平组。
- 内容应该放置在列内，且唯有列可以是行的直接子元素。
- 预定义的网格类，比如 .row 和 .col-xs-4，可用于快速创建网格布局。LESS 混合类可用于更多语义布局。
- 列通过内边距（padding）来创建列内容之间的间隙。该内边距是通过 .rows 上的外边距（margin）取负，表示第一列和最后一列的行偏移。
- 网格系统是通过指定您想要横跨的十二个可用的列来创建的。例如，要创建三个相等的列，则使用三个 .col-xs-4。
下面是 Bootstrap 网格的基本结构：
...
......2、Bootstrap排版 Bootstrap 使用 Helvetica Neue、 Helvetica、 Arial 和 sans-serif 作为其默认的字体栈。
基本元素：
- 标题：h1~h6
- 内联子标题：用
或者添加 .small class
- 内联子标题：用
- 强调：默认强调标签
（设置文本为父文本大小的 85%）、（设置文本为更粗的文本）、（设置文本为斜体） - 列表：
- 有序列表：
- 无序列表：
- 定义列表：
和元素。代表 定义术语，就像字典。接着，是的描述。.dl-horizontal 可以让
- 有序列表：
文章图片
更多排版类
3、Bootstrap表格 表格元素
Bootstrap 支持的一些表格元素：
文章图片
表格元素 表格类
文章图片
表格类
下表的类可用于表格的行或者单元格：
文章图片
行或单元格的类
推荐阅读
- 一个人的旅行，三亚
- 一个小故事，我的思考。
- 《真与假的困惑》???|《真与假的困惑》??? ——致良知是一种伟大的力量
- 开学第一天（下）
- 一个人的碎碎念
- 2018年11月19日|2018年11月19日 星期一 亲子日记第144篇
- 遇到一哭二闹三打滚的孩子，怎么办┃山伯教育
- 第326天
- Y房东的后半生14
- 奔向你的城市