1. 引入 Bootstrap 样式文件：
在 HTML 文件的 <head> 部分引入 Bootstrap 的样式文件。你可以选择使用 CDN（内容分发网络）或者将 Bootstrap 下载到本地并引入。
使用 CDN 的示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.6.0/css/bootstrap.min.css">
<title>Your Bootstrap 4 Page</title>
</head>
<body>
<!-- 页面内容 -->
</body>
</html>
如果你想下载 Bootstrap 并引入到本地，可以在 [Bootstrap 官方网站](https://getbootstrap.com/docs/4.6/getting-started/download/) 下载最新版本。
2. 使用容器（Container）：
在页面的主要内容区域使用 Bootstrap 容器类 .container 或 .container-fluid。.container 创建一个响应式的固定宽度容器，而 .container-fluid 创建一个全宽度的容器。
<body>
<div class="container">
<!-- 页面内容 -->
</div>
</body>
或者使用 .container-fluid：
<body>
<div class="container-fluid">
<!-- 页面内容 -->
</div>
</body>
3. 创建栅格系统：
使用 Bootstrap 的栅格系统创建页面布局。将内容划分为行（.row）和列（.col-*）。
<div class="container">
<div class="row">
<div class="col-sm-6">
<!-- 左侧内容 -->
</div>
<div class="col-sm-6">
<!-- 右侧内容 -->
</div>
</div>
</div>
4. 使用组件：
Bootstrap 提供了许多现成的组件，如导航栏、卡片、表格等，可以直接使用。查阅 Bootstrap 文档以了解更多组件。
<div class="container">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<!-- 其他导航元素 -->
</nav>
</div>
以上是一个简单的导航栏示例。
5. 自定义样式：
如果需要自定义页面样式，可以使用 Bootstrap 提供的样式类或者添加自定义的 CSS 样式。
<style>
/* 自定义样式 */
body {
background-color: #f8f9fa;
}
</style>
在页面的 <head> 部分或者外部 CSS 文件中添加自定义样式。
以上是一个简单的 Bootstrap 4 页面创建的基本流程。你可以根据具体的需求添加更多的组件、样式和脚本。查阅 [Bootstrap 4 文档](https://getbootstrap.com/docs/4.6/getting-started/introduction/) 以获取更多详细信息。
转载请注明出处：http://www.zyzy.cn/article/detail/5481/Bootstrap