Bootstrap 4 入门
什么是 Bootstrap？
- Bootstrap 是一个免费的前端框架，用于更快更轻松地进行网页开发。
- Bootstrap 包含用于排版、表单、按钮、表格、导航、模态框、图片轮播等方面的 HTML 和 CSS 基于设计模板，以及可选的 JavaScript 插件。
- Bootstrap 还使您能够轻松创建响应式设计。
什么是响应式网页设计？
响应式网页设计是关于创建能够自动调整自身以在所有设备上看起来都很好看的网站，从小型手机到大型台式机。
Bootstrap 4 示例
<div class="jumbotron text-center">
<h1>我的第一个 Bootstrap 页面</h1>
<p>调整此响应式页面大小以查看效果！</p>
</div>
<div class="container">
<div class="row">
<div class="col-sm-4">
<h3>列 1</h3>
<p>Lorem ipsum dolor..</p>
</div>
<div class="col-sm-4">
<h3>列 2</h3>
<p>Lorem ipsum dolor..</p>
</div>
<div class="col-sm-4">
<h3>列 3</h3>
<p>Lorem ipsum dolor..</p>
</div>
</div>
</div>
自己试试 »Bootstrap 版本
本教程遵循 **Bootstrap 4**，它于 2018 年发布，是对 Bootstrap 3 的升级，包含新的组件、更快的样式表、更高的响应能力等。
Bootstrap 5（于 2021 年发布）是 Bootstrap 的最新版本；它支持所有主要浏览器和平台的最新稳定版本。但是，不支持 Internet Explorer 11 及以下版本。
Bootstrap 5 与 Bootstrap 3 和 4 之间的最大区别在于 Bootstrap 5 已切换到 JavaScript 而不是 jQuery。
**注意：** Bootstrap 3 和 Bootstrap 4 仍然受到团队支持，用于修复严重错误和更改文档，继续使用它们是完全安全的。但是，不会向其中添加新功能。
为什么要使用 Bootstrap？
Bootstrap 的优势
- **易于使用：**任何具备 HTML 和 CSS 基础知识的人都可以开始使用 Bootstrap。
- **响应式功能：**Bootstrap 的响应式 CSS 适应手机、平板电脑和台式机。
- **移动优先方法：**在 Bootstrap 中，移动优先样式是核心框架的一部分。
- **浏览器兼容性：**Bootstrap 4 兼容所有现代浏览器（Chrome、Firefox、Internet Explorer 10+、Edge、Safari 和 Opera）。
在哪里获取 Bootstrap 4？
有两种方法可以在您自己的网站上开始使用 Bootstrap 4。
您可以
- 从 CDN 包含 Bootstrap 4
- 从 getbootstrap.com 下载 Bootstrap 4
Bootstrap 4 CDN
如果您不想自己下载和托管 Bootstrap 4，您可以从 CDN（内容分发网络）包含它。
**jsDelivr** 为 Bootstrap 的 CSS 和 JavaScript 提供 CDN 支持。您还必须包含 jQuery。
jsDelivr
<!-- 最新编译并压缩的 CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net.cn/npm/[email protected]/dist/css/bootstrap.min.css">
<!-- jQuery 库 -->
<script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/dist/jquery.slim.min.js"></script>
<!-- Popper JS -->
<script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/dist/umd/popper.min.js"></script>
<!-- 最新编译的 JavaScript -->
<script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
使用 Bootstrap 4 CDN 的一个优势
许多用户在访问其他网站时已经从 jsDelivr 下载了 Bootstrap 4。因此，当他们访问您的网站时，它将从缓存中加载，从而缩短加载时间。此外，大多数 CDN 将确保一旦用户向其请求文件，它将从最接近他们的服务器提供服务，这也有助于缩短加载时间。
jQuery 和 Popper？
Bootstrap 4 使用 jQuery 和 Popper.js 来实现 JavaScript 组件（如模态框、提示框、气泡提示等）。但是，如果您只使用 Bootstrap 的 CSS 部分，则不需要它们。
- 可关闭的警告
- 用于切换状态的按钮和复选框/单选按钮
- 用于幻灯片、控件和指示器的轮播
- 用于切换内容的折叠
- 下拉菜单（也需要 Popper.js 以实现完美定位）
- 模态框（打开和关闭）
- 导航栏（用于可折叠菜单）
- 提示框和气泡提示（也需要 Popper.js 以实现完美定位）
- 用于滚动行为和导航更新的滚动侦听
下载 Bootstrap 4
如果您想自己下载和托管 Bootstrap 4，请访问 https://bootstrap.ac.cn/，并按照那里的说明操作。
使用 Bootstrap 4 创建第一个网页
1. 添加 HTML5 文档类型
Bootstrap 4 使用需要 HTML5 文档类型的 HTML 元素和 CSS 属性。
始终在页面开头包含 HTML5 文档类型，以及 lang 属性和正确的字符集
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
</html>
2. Bootstrap 4 是移动优先的
Bootstrap 4 被设计为对移动设备做出响应。移动优先样式是核心框架的一部分。
为了确保正确渲染和触摸缩放，请在 <head> 元素内添加以下 <meta> 标签
<meta name="viewport" content="width=device-width, initial-scale=1">
The width=device-width part sets the width of the page to follow the screen-width of the device (which will vary depending on the device).
The initial-scale=1 part sets the initial zoom level when the page is first loaded by the browser.
3. 容器
Bootstrap 4 还需要一个包含元素来包装站点内容。
您可以选择两种容器类
- The
.containerclass provides a responsive fixed width container - The
.container-fluidclass provides a full width container, spanning the entire width of the viewport
两个基本的 Bootstrap 4 页面
以下示例显示了一个基本的 Bootstrap 4 页面的代码（具有响应式固定宽度容器）
容器示例
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 4 示例</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net.cn/npm/[email protected]/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container">
<h1>我的第一个 Bootstrap 页面</h1>
<p>这是一些文本。</p>
</div>
</body>
</html>
自己试试 »
以下示例显示了一个基本的 Bootstrap 4 页面的代码（具有全宽度容器）
容器流体示例
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 4 示例</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net.cn/npm/[email protected]/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container-fluid">
<h1>我的第一个 Bootstrap 页面</h1>
<p>这是一些文本。</p>
</div>
</body>
</html>
自己试试 »
