Bootstrap 简介学习笔记
什么是 Bootstrap?
Bootstrap 是一个流行的前端开发框架，由 Twitter 开发和维护。它使得构建现代、响应式、移动设备友好的 Web 应用程序变得容易。
Bootstrap 包含 HTML、CSS 和 JavaScript 的设计模板，用于排版、表单、按钮、导航和其他界面组件，以及可重用的 JavaScript 插件。
如何使用 Bootstrap？
步骤1：下载 Bootstrap
首先，你需要到 Bootstrap 的官方网站（https://getbootstrap.com/）下载最新的版本。解压缩后，你会看到如下结构：
bashCopy Codebootstrap/ ├── css/ │ ├── bootstrap.css │ ├── bootstrap.css.map │ ├── bootstrap.min.css │ └── bootstrap.min.css.map ├── js/ │ ├── bootstrap.bundle.js │ ├── bootstrap.bundle.min.js │ ├── bootstrap.js │ └── bootstrap.min.js └── index.html
其中，css/ 目录包含了 CSS 样式表文件，js/ 目录包含了 JavaScript 文件。
步骤2：引入 Bootstrap
在 HTML 文件中，通过如下代码引入 Bootstrap 的 CSS 样式表和 JavaScript 文件：
htmlCopy Code<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Bootstrap Example</title>
<link rel="stylesheet" href="path/to/bootstrap.min.css">
<script src="path/to/bootstrap.min.js"></script>
</head>
<body>
<!-- Your HTML code here -->
</body>
</html>
步骤3：使用 Bootstrap
使用 Bootstrap，你可以很容易地创建响应式布局、导航栏、表单、按钮等等组件。下面是一些实例代码：
响应式布局
htmlCopy Code<div class="container">
<div class="row">
<div class="col-sm-4">Column 1</div>
<div class="col-sm-4">Column 2</div>
<div class="col-sm-4">Column 3</div>
</div>
</div>
导航栏
htmlCopy Code<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="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</nav>
表单
htmlCopy Code<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck1">
<label class="form-check-label" for="exampleCheck1">Check me out</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
按钮
htmlCopy Code<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>
总结
通过这份学习笔记，你应该已经了解了 Bootstrap 是什么、如何下载和引入 Bootstrap，以及如何使用 Bootstrap 创建响应式布局、导航栏、表单和按钮等组件。