📅 最后修改于: 2023-12-03 15:25:33.944000 🧑 作者: Mango
引导启动模板（Bootstrap）是一个免费的开源框架，用于快速构建响应式的Web应用程序和移动应用程序。Bootstrap是用HTML，CSS和JavaScript编写的，它使网站和应用程序的开发变得简单。
使用引导启动模板，您可以创建漂亮且一致的Web应用程序，而不必担心复杂的CSS和JavaScript代码。Bootstrap包含了许多易于使用的样式和组件，例如导航栏，表单，按钮，标签页，进度条，模态框和轮播图等等。
您可以使用以下方法在自己的Web应用程序中使用引导启动模板：
在HTML中直接引入Bootstrap样式和JavaScript文件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Example</title>
<!-- 引入Bootstrap样式 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css">
<!-- 引入Bootstrap JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js"></script>
</head>
<body>
<!-- 在这里添加您的页面内容 -->
</body>
</html>
在您的Web应用程序中使用Bootstrap提供的CDN链接（内容分发网络）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Example</title>
<!-- 引入Bootstrap样式 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css">
<!-- 引入Bootstrap JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js"></script>
</head>
<body>
<!-- 在这里添加您的页面内容 -->
</body>
</html>
以下示例是一个简单的网格系统，它使用Bootstrap内置的CSS类来创建一个响应式的页面布局。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Grid Example</title>
<!-- 引入Bootstrap样式 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css">
<!-- 引入Bootstrap JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-4">
<p>第一列</p>
</div>
<div class="col-sm-4">
<p>第二列</p>
</div>
<div class="col-sm-4">
<p>第三列</p>
</div>
</div>
</div>
</body>
</html>
这里使用了container和row这两个Bootstrap的样式类。container是一个固定宽度的容器，它包含一个或多个row。row又包含了许多col，它们负责定义网格布局。
Bootstrap内置了许多组件，以下是其中的一些示例。
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Logo</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">首页</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">产品</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">关于</a>
</li>
</ul>
</div>
</nav>
该代码创建了一个带有导航栏的页面，包括一个logo，一个可折叠的菜单按钮和三个菜单项。
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" href="#">标签页1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">标签页2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">标签页3</a>
</li>
</ul>
该代码创建了一组标签页，其中active类用于设置默认选中的标签页。
<!-- 模态框按钮 -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
打开模态框
</button>
<!-- 模态框 -->
<div class="modal fade" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<!-- 模态框头部 -->
<div class="modal-header">
<h4 class="modal-title">模态框标题</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- 模态框主体 -->
<div class="modal-body">
这里是模态框的主体内容。
</div>
<!-- 模态框底部 -->
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
<button type="button" class="btn btn-primary">保存</button>
</div>
</div>
</div>
</div>
该代码创建了一个按钮，点击后会弹出一个模态框，包括标题、内容和底部两个按钮。