Bootstrap基础

1、container/container-fluid的区别
容器类：
.container 类用于固定宽度并支持响应式布局的容器
.container-fluid 类用于100% 宽度，占据全部视口（viewport）的容器
网格类:
Bootstrap 4 网格系统有以下 5 个类:
.col- 针对所有设备
.col-sm- 平板 - 屏幕宽度等于或大于 576px
.col-md- 桌面显示器 - 屏幕宽度等于或大于 768px)
.col-lg- 大桌面显示器 - 屏幕宽度等于或大于 992px)
.col-xl- 超大桌面显示器 - 屏幕宽度等于或大于 1200px)

2、Bootstrap4 文字排版
Bootstrap 4 默认设置：Bootstrap 4 默认的 font-size 为 16px, line-height 为 1.5。默认的 font-family 为 “Helvetica Neue”, Helvetica, Arial, sans-serif。此外，所有的

元素 margin-top: 0 、 margin-bottom: 1rem (16px)。重要说明：rem

Bootstrap 标题 (2.5rem = 40px)

Bootstrap 标题 (2rem = 32px)

Bootstrap 标题 (1.75rem = 28px)

Bootstrap 标题 (1.5rem = 24px)

Bootstrap 标题 (1.25rem = 20px)

Bootstrap 标题 (1rem = 16px)

3、标题的样式
01、 .display-1, .display-2, .display-3, .display-4。
02、在 Bootstrap 4 中 HTML <sDisplay 标题类
mall> 元素用于创建字号更小的颜色更浅的文本
03、 Bootstrap 4 定义 为黄色背景及有一定的内边距
04、Bootstrap 4 定义 HTML 元素的样式为显示在文本底部的一条虚线边框
05、

对于引用的内容可以在

上添加 .blockquote 类
06、

Bootstrap 4 定义 HTML

元素的样式如下
07、 Bootstrap 4 定义 HTML 元素的样式如下
08、Bootstrap 4 定义 HTML 元素的样式如下
更多排版 下表提供了 Bootstrap4 更多排版类的实例：
类名 描述
.font-weight-bold 加粗文本
.font-weight-normal 普通文本
.font-weight-light 更细的文本
.font-italic 斜体文本
.lead 让段落更突出
.small 指定更小文本 (为父元素的 85% )
.text-left 左对齐
.text-center 居中
.text-right 右对齐
.text-justify 设定文本对齐,段落中超出屏幕部分文字自动换行
.text-nowrap 段落中超出屏幕部分不换行
.text-lowercase 设定文本小写
.text-uppercase 设定文本大写
.text-capitalize 设定单词首字母大写
.initialism 显示在 元素中的文本以小号字体展示，且可以将小写字母转换为大写字母
.list-unstyled 移除默认的列表样式，列表项中左对齐 (

• 和
  1. 中)。 这个类仅适用于直接子列表项 (如果需要移除嵌套的列表项，你需要在嵌套的列表中使用该样式
     .list-inline 将所有列表项放置同一行
     .pre-scrollable 使

      元素可滚动，代码块区域最大高度为340px,一旦超出这个高度,就会在Y轴出现滚动

4、bootstrap4 颜色
01、.text-muted柔和的文本, .text-primary重要的文本, .text-success执行成功的文本, .text-info代表一些提示信息的文本, .text-warning警告文本, .text-danger危险操作文本, .text-secondary副标题, .text-white白色文本, .text-dark深灰色文字 and .text-light浅灰色文本
02、背景颜色提供背景颜色的类有: .bg-primary, .bg-success, .bg-info, .bg-warning,
.bg-danger, .bg-secondary, .bg-dark 和 .bg-light。
注意背景颜色不会设置文本的颜色，在一些实例中你需要与 .text-* 类一起使用。

5、Bootstrap4 基础表格
01、Bootstrap4 通过 .table 类来设置基础表格的样式
02、.table-dark
03、Table head options 表头
04、Striped rows 隔行换色
05、Borderless table 无边框
06、Hoverable rows Add .table-hover to enable a hover state on table rows within a
07、Small table Add .table-sm to make tables more compact by cutting cell padding in half

6、bootstrap4-images 图片形状
01、圆角图片.rounded 类可以让图片显示圆角效果
02、椭圆图片.rounded-circle 类可以设置椭圆形图片
03、缩略图.img-thumbnail 类用于设置图片缩略图(图片有边框)；
04、图片对齐方式使用 .float-right 类来设置图片右对齐，使用 .float-left 类设置图片左对齐
05、响应式图片
图像有各种各样的尺寸，我们需要根据屏幕的大小自动适应。
我们可以通过在 标签中添加 .img-fluid 类来设置响应式图片。
.img-fluid 类设置了 max-width: 100%; 、 height: auto;–>

7、Bootstrap4-alert 信息提示框：
Html的信息提示框:

信息提示框

其他颜色：alert-secondary、alert-success
alert-danger、alert-warning
alert-info、alert-light、alert-dark
8、关闭提示框：
我们可以在提示框中的 div 中添加 .alert-dismissible 类，然后在关闭按钮的链接上添加 class=“close” 和 data-dismiss=“alert” 类来设置提示框的关闭操作。
提示: × (×) 是 HTML 实体字符，来表示关闭操作，而不是字母 “x”；