Bootstrap4--网格系统、文字排版、颜色、表格、图像形状相关知识点汇总

一、网格系统

1、 网格类

• .col- 针对所有设备
• .col-sm- 平板 - 屏幕宽度等于或大于 576px
• .col-md- 桌面显示器 - 屏幕宽度等于或大于 768px)
• .col-lg- 大桌面显示器 - 屏幕宽度等于或大于 992px)
• .col-xl- 超大桌面显示器 - 屏幕宽度等于或大于 1200px)

2、Bootstrap 4网格的基本结构

（1）、创建相等宽度的列，Bootstrap 自动布局
例：

<div class="col" style="background-color:lavender;">.col</div>

（2）、等宽/不等宽响应式列
在移动设备上，即屏幕宽度小于576px时，两个列将会上下堆叠排列。<div class="col-sm-数字">.文字</div>数字大的话宽度会大。
(3）、在不同显示器上所展示不同的宽度比例
例如：

 <div class="col-sm-3 col-md-6 col-lg-4 col-xl-2 bg-success">
        文字一
      </div>
      <div class="col-sm-9 col-md-6 col-lg-8 col-xl-10 bg-warning">
      文字二
      </div>

在平板、桌面、大桌面显示器、超大桌面显示器的宽度比例为分别为：25%/75%、50%/50%、33.33%/66.67%、16.67/83.33%, 在移动手机等小型设备上会堆叠显示。
（4）、偏移列
偏移列通过 offset-- 类来设置。第一个星号( * )可以是 sm、md、lg、xl，表示屏幕设备类型，第二个星号( * )可以是 1 到 11 的数字。

为了在大屏幕显示器上使用偏移，请使用 .offset-md-* 类。这些类会把一个列的左外边距（margin）增加 * 列，其中 * 范围是从 1 到 11。

例如：.offset-md-4 是把.col-md-4 往右移了四列格。
注意：偏移列均为向右偏移，使用”col-md-offset-*”对列进行向右偏移时，要保证列与偏移列的总数不超过12，不然会致列断行显示。

二、文字排版

1、默认设置：
font-size：16px
line-height：1.5
font-family： “Helvetica Neue”, Helvetica, Arial, sans-serif
<p>元素：margin-top: 0 、 margin-bottom: 1rem(16px)
2、标题样式：
<h1>:2.5rem=40px
<h2>:2rem=32px
<h3>:1.75rem=28px
<h4>:1.5rem=24px
<h5>:1.25rem=20px
<h6>:1rem=16px
另外：
.display-1, .display-2, .display-3, .display-4可以输出更大更粗的字体。
<small>标签创建字号更小的颜色更浅的文本。
<mark>标签为黄色背景及有一定的内边距。
<abbr>标签元素的样式为显示在文本底部的一条虚线边框。
<blockquote>对于引用的内容可以在 <blockquote>标签上添加.blockquote类。

<code>用于放代码元素。

<kbd></kbd>内的文字将以以下方式呈现：

<pre>内的文字不会自动换行。

其他排版类：

三、颜色

（1）、文本颜色：


（2）、背景颜色：
.bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark 和 .bg-light。一般与.text-颜色一起使用。
例：<p class="bg-primary text-white">重要的背景颜色。</p>

四、表格

• 条纹表格：<table class="table table-striped">
• 带边框表格： <table class="table table-bordered">
• 鼠标悬停状态表格：<table class="table table-hover">可以为表格的每一行添加鼠标悬停效果（灰色背景）
• 黑色背景表格：<table class="table table-dark">
• 黑色条纹表格:

<table class="table table-dark table-striped">

• 无边框表格：

<table class="table table-borderless">

• 指定有意义的颜色类：
  可以为表格的行或者单元格设置颜色。
  
• 表头颜色：
  .thead-inverse 类用于给表头添加黑色背景，.thead-default 类用于给表头添加灰色背景。
• 较小表格：
  .table-sm 类用于通过减少内边距来设置较小的表格。
• 响应式表格：
  .table-responsive 类用于创建响应式表格，在屏幕宽度小于 992px 时会创建水平滚动条，如果可视区域宽度大于 992px 则显示不同效果（没有滚动条）。

五、图像形状

• .rounded 类：圆角图片
• .rounded-circle：椭圆图片
• .img-thumbnail：略缩图（图片有边框）
• 图片对齐方式：
  1、右对齐：.float-right
  2、左对齐：.float-left
  3、居中：.mx-auto (margin:auto) 和 .d-block (display:block) 例： <img src="paris.jpg" class="mx-auto d-block" style="width:50%">
• 响应式图片：在 <img> 标签中添加 .img-fluid 类来设置响应式图片。例： <img src="#" class="img-fluid">