网格系统

网格系统规则 Bootstrap4 网格系统规则:

网格每一行需要放在设置了 .container (固定宽度) 或 .container-fluid (全屏宽度) 类的容器中，这样就可以自动设置一些外边距与内边距。
使用行来创建水平的列组。
内容需要放置在列中，并且只有列可以是行的直接子节点。
预定义的类如 .row 和 .col-sm-4 可用于快速制作网格布局。
列通过填充创建列内容之间的间隙。这个间隙是通过 .rows 类上的负边距设置第一行和最后一列的偏移。
网格列是通过跨越指定的 12 个列来创建。例如，设置三个相等的列，需要使用用三个.col-sm-4 来设置。
Bootstrap 3 和 Bootstrap 4 最大的区别在于 Bootstrap 4 现在使用 flexbox（弹性盒子）而不是浮动。 Flexbox 的一大优势是，没有指定宽度的网格列将自动设置为等宽与等高列 。如果您想了解有关Flexbox的更多信息，可以阅读我们的CSS Flexbox教程。下表总结了 Bootstrap 网格系统如何在不同设备上工作的：

	超小设备 <576px	平板 ≥576px	桌面显示器 ≥768px	大桌面显示器 ≥992px	超大桌面显示器 ≥1200px
容器最大宽度	None (auto)	540px	720px	960px	1140px
类前缀	.col-	.col-sm-	.col-md-	.col-lg-	.col-xl-
列数量和	12
间隙宽度	30px （一个列的每边分别 15px）
可嵌套	Yes
列排序	Yes

创建相等宽度的列

    <div class="container-fluid">
        <h1>Hello World!</h1>
        <p>创建三个相等宽度的列! 尝试在 class="row" 的 div 中添加新的 class="col"  div，会显示四个等宽的列。</p>
        <div class="row">
          <div class="col" style="background-color:lavender;">.col</div>
          <div class="col" style="background-color:orange;">.col</div>
          <div class="col" style="background-color:lavender;">.col</div>
        </div>
    </div>

创建相等宽度响应式列

    <!-- 
        因为class="col-sm-*"所以当屏幕宽度小于 576px 时，四个列将会上下堆叠排版
    -->
    
    <div class="container-fluid">
        <h1>Hello World!</h1>
        <p>重置浏览器大小查效果。</p>
        <p> 在移动设备上，即屏幕宽度小于 576px 时，四个列将会上下堆叠排版。</p>
        <div class="row">
          <div class="col-sm-3" style="background-color:lavender;">.col-sm-3</div>
          <div class="col-sm-3" style="background-color:lavenderblush;">.col-sm-3</div>
          <div class="col-sm-3" style="background-color:lavender;">.col-sm-3</div>
          <div class="col-sm-3" style="background-color:lavenderblush;">.col-sm-3</div>
        </div>
    </div>

创建不等宽响应式列

    <div class="container-fluid">
        <h1>Hello World!</h1>
        <p>在移动设备上，即屏幕宽度小于 576px 时，.col-sm-4的列 和 .col-sm-8列将会上下堆叠排版。</p>
        <div class="row">
          <div class="col-sm-4" style="background-color:lavender;">.col-sm-4</div>
          <div class="col-sm-8" style="background-color:lavenderblush;">.col-sm-8</div>
        </div>
    </div>

平板和桌面端

以下示例演示了在桌面设备的显示器上两个列的宽度各占 50%，如果在平板端则左边的宽度为 25%，右边的宽度为 75%, 在移动手机等小型设备上会堆叠显示

bg-success和bg-warning是bootstrap的背景颜色
<div class="col-sm-3 col-md-6">当屏幕>=768时引用了col-md-6;当屏幕<576时引用了col-sm-3;

    <div class="container-fluid">
        <h1>平板与桌面的网格布局</h1>
        <p>以下示例演示了在桌面设备的显示器上两个列的宽度各占 50%，如果在平板端则左边的宽度为 25%，右边的宽度为 75%, 在移动手机等小型设备上会堆叠显示。
      </p>
        <div class="container-fluid">
          <div class="row">
            <div class="col-sm-3 col-md-6 bg-success">
              nhooo
            </div>
            <div class="col-sm-9 col-md-6 bg-warning">
              菜鸟教程
            </div>
          </div>
        </div>
    </div>

偏移位

文字排版

Bootstrap 4 默认的 font-size 为 16px, line-height 为 1.5
默认的 font-family 为 "Helvetica Neue", Helvetica, Arial, sans-serif。
此外，所有的元素 margin-top: 0 、 margin-bottom: 1rem (16px)。

Display 标题类

Bootstrap 还提供了四个 Display 类来控制标题的样式: .display-1, .display-2, .display-3, .display-4。

``标签

在 Bootstrap 4 中 HTML  元素用于创建字号更小的颜色更浅的文本

``标签

Bootstrap 4 定义 为黄色背景及有一定的内边距:

`<abbr>`标签

Bootstrap 4 定义 HTML 元素的样式为显示在文本底部的一条虚线边框:

`<blockquote>`标签与类

对于引用的内容可以在 <blockquote> 上添加 .blockquote 类 :

`<pre>`标签

`<code>`标签

`<kbd>`标签

`<dl>`标签

排版类列表

类名	描述	示例
.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	显示在 `<abbr>` 元素中的文本以小号字体展示，且可以将小写字母转换为大写字母	尝试一下
.list-unstyled	移除默认的列表样式，列表项中左对齐 ( `<ul>` 和 `<ol>`中)。这个类仅适用于直接子列表项 (如果需要移除嵌套的列表项，你需要在嵌套的列表中使用该样式)	尝试一下
.list-inline	将所有列表项放置同一行	尝试一下
.pre-scrollable	使 `<pre>` 元素可滚动，代码块区域最大高度为340px,一旦超出这个高度,就会在Y轴出现滚动条	尝试一下

表格

给table添加的类

.table: 表格的基础类(必有)
.table-striped:各行变色
.table-bordered:使表格有边框
.table-hover:设置鼠标悬停时行变色
.table-condensed:将表格的单元格中的内边距减小为原来的一半

状态类(给tr或td添加的类)

类名	描述
.table-primary	蓝色: 指定这是一个重要的操作
.table-success	绿色: 指定这是一个允许执行的操作
.table-danger	红色: 指定这是可以危险的操作
.table-info	浅蓝色: 表示内容已变更
.table-warning	橘色: 表示需要注意的操作
.table-active	灰色: 用于鼠标悬停效果
.table-secondary	灰色: 表示内容不怎么重要
.table-light	浅灰色，可以是表格行的背景
.table-dark	深灰色，可以是表格行的背景

响应式表格: 当屏幕尺寸小于768时，可以在表格下面出现滚动条，大于768时，正常显示表格

<div class="table-responsive">
    table表格
</div>

图片形状

<!DOCTYPE html>\
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>首页</title>
   <link href="./css/bootstrap.css" rel="stylesheet"/>
   <script src="./js/jquery-3.7.1.js"></script>
   <script src="./js/bootstrap.js" ></script>
   <style>

   </style>
</head>
<body>
 <div class="container">
   <div>
     <h2>圆角图片</h2>
     <p>.rounded 类可以让图片显示圆角效果：</p>            
     <img src="/img/gV_oZlvO.jpg" class="rounded" alt="Cinque Terre" width="304" height="236">   
   </div>
   <div>
     <h2>缩略图</h2>
     <p>.img-thumbnail 类用于设置图片缩略图(图片有边框):</p>            
     <img src="/img/gV_oZlvO.jpg" class="img-thumbnail" alt="Cinque Terre" width="304" height="236">
   </div>
   <div>
     <h2>椭圆图片</h2>
     <p>.rounded-circle 类可以设置椭圆形图片:</p>            
     <img src="/img/gV_oZlvO.jpg" class="rounded-circle" alt="Cinque Terre" width="304" height="236">  
   </div>
   <div>
     <!-- 该类演示无效 可能版本原因 本质就是在img标签中添加 float: right 默认是float: left-->
     <h2>图片对齐方式</h2>
     <p>使用 .float-right 类来设置图片右对齐，使用 .float-left 类设置图片左对齐:</p>
     <img src="/img/gV_oZlvO.jpg" class="float-left"  width="304" height="236"> 
     <img src="/img/gV_oZlvO.jpg" class="float-right" style="float: right; width: 304px; height: 236px;">
   </div>
   <div>
     <h2>响应式图片</h2>
     <p>.img-fluid 类可以设置响应式图片，重置浏览器大小查看效果:</p>
     <img src="/img/gV_oZlvO.jpg" class="img-fluid">
   </div>
</div>
</body>
</html>

效果图如下:

bootstrap4

网格系统

创建相等宽度的列

创建相等宽度响应式列

创建不等宽响应式列

平板和桌面端

偏移位

文字排版

Display 标题类

`<small>`标签

`<mark>`标签

`<abbr>`标签

`<blockquote>`标签与类

`<pre>`标签

`<code>`标签

`<kbd>`标签

`<dl>`标签

排版类列表

表格

图片形状

bootstrap4

网格系统

创建相等宽度的列

创建相等宽度响应式列

创建不等宽响应式列

平板和桌面端

偏移位

文字排版

Display 标题类

<small>标签

<mark>标签

<abbr>标签

<blockquote>标签与类

<pre>标签

<code>标签

<kbd>标签

<dl>标签

排版类列表

表格

图片形状

`<small>`标签

`<mark>`标签

`<abbr>`标签

`<blockquote>`标签与类

`<pre>`标签

`<code>`标签

`<kbd>`标签

`<dl>`标签