Bootstrap 教程学习笔记
Bootstrap 是一套开源的前端框架，由 Twitter 开发和维护。Bootstrap 使前端开发更加简单、快捷、直观，可以帮助开发者快速构建现代化、响应式的 Web 应用程序和网站。
基础结构
使用 Bootstrap 构建网站的基本结构如下：
htmlCopy Code<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My Bootstrap Website</title>
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<!-- 内容 -->
</div>
<!-- 引入 jQuery -->
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<!-- 引入 Bootstrap JavaScript -->
<script src="https://cdn.bootcss.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</body>
</html>
以上代码中，引入了 Bootstrap 的 CSS 和 JavaScript，以及 jQuery 库。<div class="container"> 是内容容器，这是一个常用的 Bootstrap 类之一。
栅格系统
Bootstrap 的栅格系统是其核心功能之一。栅格系统可以让我们简单地创建出响应式布局，使得网站在不同的设备上都能够获得较好的显示效果。
以下是一个栅格系统的示例：
htmlCopy Code<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>
其中，<div class="row"> 标签定义行，<div class="col-md-4"> 定义列。在本例中，我们定义了三个等宽的列。
表格
Bootstrap 还提供了易于使用的表格组件，以下是一个表格的示例：
htmlCopy Code<table class="table table-striped">
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>20</td>
</tr>
<tr>
<td>李四</td>
<td>22</td>
</tr>
</tbody>
</table>
上述代码中，<table class="table table-striped"> 定义了一个带有条纹的表格，并使用 <thead> 和 <tbody> 标签定义表头和表体。表格的内容由 <tr> 和 <td> 组成。
按钮
Bootstrap 的按钮组件可以让开发者轻松地创建美观的按钮，以下是一个按钮的示例：
htmlCopy Code<button type="button" class="btn btn-primary">Primary</button>
上面代码中，<button> 标签用于创建按钮。我们使用了 class="btn btn-primary" 来指定该按钮的样式。
表单
表单是网站中常见的控件，Bootstrap 提供了易于使用和美观的表单组件。以下是一个表单的示例：
htmlCopy Code<form>
<div class="form-group">
<label for="exampleInputEmail1">邮箱地址</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
<small id="emailHelp" class="form-text text-muted">我们绝不会与其他人分享您的电子邮件地址。</small>
</div>
<div class="form-group">
<label for="exampleInputPassword1">密码</label>
<input type="password" class="form-control" id="exampleInputPassword1">
</div>
<button type="submit" class="btn btn-primary">提交</button>
</form>
上述代码中，<form> 标签用于创建一个表单，<div class="form-group"> 用于定义表单组。在本例中，我们创建了两个输入框和一个提交按钮。
总结
Bootstrap 是一个非常流行的前端框架，其提供了丰富的组件和工具，可以帮助开发者快速构建美观、响应式的网站和应用程序。我们介绍了 Bootstrap 的基础结构、栅格系统、表格、按钮和表单等组件，并给出了相应的代码示例。