网站建设管理_建站网址不安全_排名_如何做电商个人

Bootstrap5-HTML（二）深入探索容器，网格系统和排版

前言
一、Bootstrap5 容器
- （一）容器类的选择
- - 1.container
  - 2.container-fluid
  - 3.共同点
  - 4.不同点
- （二）响应式容器类
二、Bootstrap5 网格系统
- 1.网格系统的基本原理
- 2.等宽响应式列
- 3.不等宽响应式列
- 4.嵌套列
- 5.偏移列
- 6.列顺序
二、Bootstrap5 排版
- （一）文本样式
- - 1.文本颜色
  - 2.文本对齐
  - 3.文本装饰
- （二）标题
- （三）段落
- （四）列表
- - 无序列表
  - 有序列表
- （五）代码块
- （六）表格

前言

在之前的文章中，我们对 Bootstrap5 有了初步的了解，知道了它的基本概念和环境安装等基础知识。
在这篇中，我们将深入探讨 Bootstrap5 中非常重要的三个部分：容器、网格系统和排版，这些内容将帮助我们构建出更加复杂和精美的网页布局

一、Bootstrap5 容器

容器是Bootstrap一个基本的构建块, 它包含、填充和对齐给定设备或视口中的内容。
Bootstrap 需要一个容器元素来包裹网站的内容

（一）容器类的选择

Bootstrap5 提供了两种主要的容器类：.container和 .container-fluid

1.container

.container 类用于创建固定宽度的响应式页面
宽度 (max-width) 会根据屏幕宽度同比例放大或缩小
其宽度会根据屏幕尺寸在不同的断点处进行调整，例如在超小屏幕（<576px）时宽度为 100%，小屏幕（≥576px）时宽度为 540px，中等屏幕（≥768px）时宽度为 720px，以此类推。

在这里插入图片描述

2.container-fluid

.container-fluid类则创建一个全屏幕宽度（width 始终为 100%）的容器，无论屏幕大小如何，它都会占据整个视口

3.共同点

二者之间的共同点为，两者都可以将高度设置成auto，即自动模式。最大的不同就是宽度的设定上。

4.不同点

container根据屏幕宽度利用媒体查询，已经设定了固定的宽度，作用为阶段性的改变宽度，所以在改
变浏览器的大小时，页面是一个阶段一个阶段变化的。

container-fluid则是将宽度设定为auto，所以当缩放浏览器时，它会保持全屏大小，始终保持100%的宽
度

（二）响应式容器类

除了上述两种基本容器类，Bootstrap5 还提供了一系列响应式容器类，
如.container-sm|md|lg|xl|xxl。
这些类可以根据不同屏幕尺寸范围来灵活调整容器的最大宽度

例如:
.container-sm在小屏幕（≥576px）及以上时宽度为 540px，在超小屏幕（<576px）时宽度为 100%；
.以此类推
使用方法

 <div class="container-sm">.container-sm</div><div class="container-md">.container-md</div><div class="container-lg">.container-lg</div><div class="container-xl">.container-xl</div><div class="container-xxl">.container-xxl</div>

二、Bootstrap5 网格系统

网格系统是 Bootstrap5 实现响应式布局的核心组件，它允许我们将页面内容划分为行和列，从而轻松构建复杂的页面布局
Bootstrap 5 网格系统有以下 6 个类:

1.网格系统的基本原理

Bootstrap5 网格系统规则:

网格每一行需要放在设置了 .container (固定宽度) 或 .container-fluid (全屏宽度) 类的容器中，这样就可以自动设置一些外边距与内边距。
预定义的类如.row 和 .col-sm-4可用于快速制作网格布局。

2.等宽响应式列

Bootstrap5 的网格系统基于 12 列布局，随着屏幕尺寸的增加，列会自动重新排列
要是超过 12 个，就会在下一行显示。
如下面的代码所示

<!DOCTYPE html>
<html lang="en">
<head> <!-- 最新的 Bootstrap5核心 css 文件 --><link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css"><!--最新的 Bootstrap5 核心 JavaScript 文件 --><script src="../bootstrap/js/bootstrap.min.js"></script>
</head>
<body><div class="container"><div class="row"><div class="col-md-1">1</div><div class="col-md-1">2</div><div class="col-md-1">3</div><div class="col-md-1">4</div><div class="col-md-1">5</div><div class="col-md-1">6</div><div class="col-md-1">7</div><div class="col-md-1">8</div><div class="col-md-1">9</div><div class="col-md-1">10</div><div class="col-md-1">11</div><div class="col-md-1">12</div></div>
</div>
</body>
</html>

在这里插入图片描述

在这里，container 和 row 共同组成了栅格容器，
row 代表一行
col-md-1 中 md 指桌面显示器
而 col-md-1 表示每个 div 的宽度占 1/12

再看这个示例，将一行显示为 3 列：

<div class="row"><div class="col-md-4">1</div><div class="col-md-4">2</div><div class="col-md-4">3</div>
</div>

在这里插入图片描述

其中 class 为 col-md-4，意味着占整个宽度的 4/12，也就是每个 div 占 1/3 宽度

3.不等宽响应式列

像下面这样的代码：

<div class="row"><div class="col-sm-4">1-4</div><div class="col-sm-8">5-12</div>
</div>

在这里插入图片描述

在移动设备上，也就是屏幕宽度小于 576px 时，两个列将会上下堆叠排版，通过这样的设置就能轻松实现不同比例的列布局

4.嵌套列

嵌套列是 Bootstrap5 网格系统中一个很实用的功能，它允许我们在已有的列中再创建行和列，实现更加复杂、多层次的布局结构。
例如

<!DOCTYPE html>
<html lang="en">
<head> <!-- 最新的 Bootstrap5核心 css 文件 --><link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css"><!--最新的 Bootstrap5 核心 JavaScript 文件 --><script src="../bootstrap/js/bootstrap.min.js"></script>
</head>
<body><div class="row"><div class="col-md-9"> <div class="row"><div class="col-md-6">1</div><div class="col-md-6">2</div></div><div class="row"><div class="col-md-3">3</div><div class="col-md-6">4</div></div></div></div>
</body>
</html>

在这里插入图片描述

5.偏移列

偏移列可以让列在水平方向上进行偏移，通过使用 .offset-sm-*（这里 * 代表具体的列数，取值范围是 1 到 11）这样的类来实现。
例如，如果你想让一个列向右偏移 3 列的宽度，可以像下面这样写代码：

<div class="container"><div class="row"><div class="col-md-4">普通列</div><div class="col-md-4 offset-md-4">偏移后的列</div></div>
</div>

在这里插入图片描述

6.列顺序

Bootstrap5 允许我们改变列的显示顺序，这在响应式设计中非常有用，当屏幕尺寸发生变化时，我们可以根据需要调整列的先后顺序，以呈现出更好的视觉效果和用户体验。

使用 .order-md-*（同样 * 表示具体顺序值，取值范围从 1 开始递增）类来控制列顺序

<div class="container"><div class="row"><div class="col-md-6 order-md-2">第二顺序的列</div><div class="col-md-6 order-md-1">第一顺序的列</div></div>
</div>

在这里插入图片描述

二、Bootstrap5 排版

Bootstrap5 提供了丰富且实用的排版功能，涵盖了文本样式、标题、段落、列表、代码块等多个方面，能够帮助我们快速打造出具有良好视觉效果和易读性的网页内容排版。

（一）文本样式

1.文本颜色

可以使用

等类来快速设置文本的颜色，分别对应不同的主题颜色，例如 .text-primary 通常用于表示主要内容强调的颜色，而 .text-danger 可用于显示警示相关的文本颜色。

<!DOCTYPE html>
<html lang="en">
<head> <!-- 最新的 Bootstrap5核心 css 文件 --><link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css"><!--最新的 Bootstrap5 核心 JavaScript 文件 --><script src="../bootstrap/js/bootstrap.min.js"></script>
</head>
<body><p class="text-primary">这是主要内容强调的文本颜色示例。</p>
<p class="text-danger">这是警示文本颜色示例。</p>
</body>
</html>

在这里插入图片描述

2.文本对齐

通过 .text-start（左对齐）、.text-center（居中对齐）、.text-end（右对齐）等类实现文本在水平方向上的对齐方式设置，方便快速调整段落、标题等文本元素的位置布局

<!DOCTYPE html>
<html lang="en">
<head> <!-- 最新的 Bootstrap5核心 css 文件 --><link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css"><!--最新的 Bootstrap5 核心 JavaScript 文件 --><script src="../bootstrap/js/bootstrap.min.js"></script>
</head>
<body><p class="text-start">这段文本左对齐。</p>
<h1 class="text-center">这个标题居中对齐。</h1>
<p class="text-end">这段文本右对齐。</p>
</body>
</html>

在这里插入图片描述

3.文本装饰

如果想为文本添加下划线、删除线等装饰效果，
可以使用 .text-decoration-underline 来添加下划线
.text-decoration-line-through 来添加删除线
.text-decoration-none 去除链接默认的下划线

<!DOCTYPE html>
<html lang="en">
<head> <!-- 最新的 Bootstrap5核心 css 文件 --><link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css"><!--最新的 Bootstrap5 核心 JavaScript 文件 --><script src="../bootstrap/js/bootstrap.min.js"></script>
</head>
<body><p class="text-decoration-underline">带下划线的文本示例。</p>
<p class="text-decoration-line-through">带删除线的文本示例。</p>
<a href="#" class="text-decoration-none">去除下划线的链接示例。</a>
</body>
</html>

在这里插入图片描述

（二）标题

Bootstrap5 提供了从 h1 到 h6 不同级别的标题样式类，格式为 .h1 到 .h6，使用这些类可以让标题的样式更加统一且符合整体的页面风格，同时也方便在不同的屏幕尺寸下保持良好的显示效果和层级关系。

<!DOCTYPE html>
<html lang="en">
<head> <!-- 最新的 Bootstrap5核心 css 文件 --><link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css"><!--最新的 Bootstrap5 核心 JavaScript 文件 --><script src="../bootstrap/js/bootstrap.min.js"></script>
</head>
<body><h1 class="h1">一级标题示例</h1>
<h2 class="h2">二级标题示例</h2>
<h3 class="h3">三级标题示例</h3>
</body>
</html>

在这里插入图片描述

并且，标题还可以与其他文本样式类结合使用，例如改变标题的颜色和对齐方式等，增强标题的视觉表现力，使其在页面中更加突出

（三）段落

普通的段落元素 <p> 在 Bootstrap5 中会有默认的行高和间距等样式设置，使其具有良好的可读性

同时，可以根据需要添加额外的文本样式类来进一步调整段落的外观，例如前面提到的文本对齐类，让段落按照设计要求进行对齐排版

<!DOCTYPE html>
<html lang="en">
<head> <!-- 最新的 Bootstrap5核心 css 文件 --><link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css"><!--最新的 Bootstrap5 核心 JavaScript 文件 --><script src="../bootstrap/js/bootstrap.min.js"></script>
</head>
<body><p>这是一个普通的段落示例，具有默认的排版样式，在页面中呈现出合适的间距和行高，方便阅读。可以通过添加其他文本样式类来改变其外观，比如让它居中对齐。</p>
<p class="text-center">这个段落通过添加类实现了居中对齐。</p>
</body>
</html>

在这里插入图片描述

（四）列表

无序列表

无序列表默认会有相应的样式，列表项前面会有项目符号，并且列表之间有合适的间距
可以通过添加 .list-unstyled 类来去除默认的项目符号样式，使其呈现更简洁的外观

<ul><li>普通无序列表项1</li><li>普通无序列表项2</li>
</ul>
<ul class="list-unstyled"><li>去除项目符号的无序列表项1</li><li>去除项目符号的无序列表项2</li>
</ul>

在这里插入图片描述

有序列表

有序列表同样有默认的序号样式，通过添加 .list-inline 类可以让列表项在水平方向上内联显示，实现类似导航栏等水平排列的列表布局效果，常用于创建一些紧凑的、横向排列的菜单结构等。

<ol><li>普通有序列表项1</li><li>普通有序列表项2</li>
</ol>
<ol class="list-inline"><li>内联显示的有序列表项1</li><li>内联显示的有序列表项2</li>
</ol>

在这里插入图片描述

（五）代码块

当需要在网页中展示代码片段时，Bootstrap5 提供了合适的代码块样式。
使用 <pre> 标签包裹 <code> 标签来展示代码，并且可以添加 .pre-scrollable 类让代码块在内容过多时出现滚动条，方便查看完整的代码内容，确保代码在页面上清晰易读，呈现出良好的代码排版效果

<!DOCTYPE html>
<html lang="en">
<head> <!-- 最新的 Bootstrap5核心 css 文件 --><link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css"><!--最新的 Bootstrap5 核心 JavaScript 文件 --><script src="../bootstrap/js/bootstrap.min.js"></script>
</head>
<pre><code>// 这是一段示例代码function example() {console.log("这是一个示例函数");}</code></pre><pre class="pre-scrollable"><code>// 当代码内容很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长的时候，会出现滚动条方便查看全部内容。function longExample() {for (let i = 0; i < 1000; i++) {console.log(i);}}</code></pre>
</body>
</html>

在这里插入图片描述

（六）表格

Bootstrap5 为表格提供了多种样式类，使表格在网页中呈现出美观且易读的效果。例如，添加 .table 类可以让表格具有基本的样式，包括边框、合适的单元格间距等。还可以使用 .table-striped 类来为表格添加斑马条纹效果，即奇数行和偶数行呈现不同的背景颜色，增强表格内容的可读性

<table class="table"><thead><tr><th>表头1</th><th>表头2</th></tr></thead><tbody><tr><td>数据1</td><td>数据2</td></tr><tr><td>数据3</td><td>数据4</td></tr></tbody>
</table>
<table class="table table-striped"><thead><tr><th>表头1</th><th>表头2</th></tr></thead><tbody><tr><td>数据1</td><td>数据2</td></tr><tr><td>数据3</td><td>数据4</td></tr></tbody>
</table>

在这里插入图片描述

非常感谢您的阅读，喜欢的话记得三连哦

在这里插入图片描述

网站建设管理_建站网址不安全_排名_如何做电商个人

Bootstrap5-HTML（二）深入探索容器，网格系统和排版

前言

一、Bootstrap5 容器

（一）容器类的选择

1.container

2.container-fluid

3.共同点

4.不同点

（二）响应式容器类

二、Bootstrap5 网格系统

1.网格系统的基本原理

2.等宽响应式列

3.不等宽响应式列

4.嵌套列

5.偏移列

6.列顺序

二、Bootstrap5 排版

（一）文本样式

1.文本颜色

2.文本对齐

3.文本装饰

（二）标题

（三）段落

（四）列表

无序列表

有序列表

（五）代码块

（六）表格

最新新闻

热搜词

网站建设管理_建站网址不安全_排名_如何做电商 个人

Bootstrap5-HTML（二）深入探索容器，网格系统和排版

前言

一、Bootstrap5 容器

（一）容器类的选择

1.container

2.container-fluid

3.共同点

4.不同点

（二）响应式容器类

二、Bootstrap5 网格系统

1.网格系统的基本原理

2.等宽响应式列

3.不等宽响应式列

4.嵌套列

5.偏移列

6.列顺序

二、Bootstrap5 排版

（一）文本样式

1.文本颜色

2.文本对齐

3.文本装饰

（二）标题

（三）段落

（四）列表

无序列表

有序列表

（五）代码块

（六）表格

最新新闻

热搜词

网站建设管理_建站网址不安全_排名_如何做电商个人