Bootstrap-06(/2019/6/2)
Bootstrap
Bootstrap 特点
1、简洁、直观、强悍的前端开发框架， html、 css、 javascript 工具集，让
web 开发更迅速、简单。
2、基于 html5、 css3 的 bootstrap，具有大量的诱人特性：友好的学习曲线，
卓越的兼容性，响应式设计， 12 列格网，样式向导文档。
3、自定义 JQuery 插件，完整的类库， bootstrap3 基于 Less， bootstrap4
基于 Sass 的 CSS 预处理技术
4、 Bootstrap 响应式布局设计,让一个网站可以兼容不同分辨率的设备。
Bootstrap 响应式布局设计，给用户提供更好的视觉使用体验。
5、丰富的组件
一.使用Bootstrap
html 中模板为
Bootstrap 的 HTML 标准模板 - 锐客网 Hello, world!说明：
（1） ViewPort 标记用于指定用户是否可以缩放 Web 页面
（2） width 和 height 指令分别指定视区的逻辑宽度和高度。他们的值
要么是以像素为单位的数字，要么是一个特殊的标记符号。
（3） width 指令使用 device-width 标记可以指示视区宽度应为设备
的屏幕宽度。
（4） height 指令使用 device-height 标记指示视区高度为设备的屏
幕高度。
（5） initial-scale 指令用于设置 Web 页面的初始缩放比例。默认的
初始缩放比例值因智能手机浏览器的不同而有所差异。通常情况下设备会在
浏览器中呈现出整个 Web 页面，设为 1.0 则将显示未经缩放的 Web 文档。
二、 布局容器
Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器。我们
提供了两个作此用处的类。注意，由于 padding 等属性的原因，这两种 容器
类不能互相嵌套。
1、 .container 类用于固定宽度并支持响应式布局的容器。
...
2、 .container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。
...
布局容器 - 锐客网 三、 栅格网格系统(Grid System) Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕 或视口（viewport）尺寸的增加，系统会自动分为最多 12 列。栅格系统用于通 过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以 放入这些创建好的布局中。 网格系统的实现原理非常简单，仅仅是通过定义容器大小，平分 12 份(也有 平分成 24 份或 32 份，但 12 份是最常见的)，再调整内外边距，最后结合媒体 查询，就制作出了强大的响应式网格系统。 Bootstrap 框架中的网格系统就是 将容器平分成 12 份。
注意: 网格系统必须使用到 css
container、 row 、 xs (xsmall phones), sm (small tablets), md
(middle desktops) lg (larger desktops) 即: 超小屏(自动)，小屏
(750px)，中屏(970px)和大屏(1170px)
数据行(.row)必须包含在容器（.container）中， 以便为其赋予合适的对
齐方式和内距(padding)。
在行(.row)中可以添加列(.column), 只有列（column）才可以作为行容
器(.row)的直接子元素，但列数之和不能超过平分的总列数，比如 12。如果大于
12,则自动换到下一行。
具体内容应当放置在列容器（column）之内
4 列
8 列
文章图片
image.png 1、 列组合
列组合简单理解就是更改数字来合并列（原则：列总和数不能超 12， 大于
12,则自动换到下一行。 ），有点类似于表格的 colspan 属性。
2、 列偏移、列排序
（1）列偏移
如果我们不希望相邻的两个列紧靠在一起，但又不想使用 margin
或者其他的技术手段来。这个时候就可以使用列偏移（offset）功能来实现。使用列偏
移也非常简单，只需要在列元素上添加类名"col-md-offset-*"(其中星号代表
要偏移的列组合数)，那么具有这个类名的列就会向右偏移。例如，你在列元素
上添加"col-md-offset-8"，表示该列向右移动 8 个列的宽度(要保证列与偏移
列的总数不超过 12，不然会致列断行|换行显示)。
（2） 列排序
列排序其实就是改变列的方向，就是改变左右浮动，并且设置浮动的距离。
在 Bootstrap 框 架 的 网 格 系 统 中 是 通 过 添 加 类 名
"col-md-push-*" 和
"col-md-pull-*" (其中星号代表移动的列组合数)。往前 pull，往后 push。
3、 列嵌套
Bootstrap 框架的网格系统还支持列的嵌套。你可以在一个列中添加一个或
者多个行（row）容器，然后在这个行容器中插入列.
栅格网格系统 - 锐客网 1
2
8
21
2
8
24
2
14
2
14
2
14
2
164
4
46四、 排版
1、标题
Bootstrap 和普通的 HTML 页面一样，定义标题都是使用标签到,
只不过 Bootstrap 覆盖了其默认的样式，使用其在所有浏览器下显示的效果一
样。为了让非标题元素和标题使用相同的样式，还特意定义了.h1~.h6
六个类名。
同时后面可以紧跟着一行小的副标题或使用.small
2、段落
段落是排版中另一个重要元素之一。通过.lead 来突出强调内容(其作用就
是增大文本字号，加粗文本，而且对行高和 margin 也做相应的处理。可以使用
以下标签给文本做突出样式处理：
:小号字
:加粗
:斜体
3、引用
：标签定义摘自另一个源的块引用，
使用.blockquote-reverse，实现右对齐。