Bootstrap 学习笔记

什么是 Bootstrap？

Bootstrap 是一个流行的前端框架，由 Twitter 公司开发并维护。它提供了一系列易于使用的 CSS、JavaScript 和 HTML 组件，用于构建现代化和响应式的 Web 应用程序和网站。

如何使用 Bootstrap？

你可以从 Bootstrap 官方网站 https://getbootstrap.com 下载最新版本的 Bootstrap。下载之后，你可以将它添加到你的项目中：

将 bootstrap.min.css 添加到 HTML 文件中的 <head> 标签内。
将 bootstrap.bundle.min.js 添加到 HTML 文件中的 <body> 标签底部。

htmlCopy Code
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>My Bootstrap Website</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css">
  </head>
  <body>
    <!-- 在这里插入你的 HTML 代码 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js"></script>
  </body>
</html>

Bootstrap 组件

Bootstrap 提供了大量的组件，让你可以快速而轻松地创建美观和响应式的界面。下面是一些常用的 Bootstrap 组件：

导航栏（Navbar）

导航栏是一个重要的组件，它可以帮助用户快速浏览和访问网站的不同部分。下面是一个简单的导航栏示例：

htmlCopy Code
<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">My Website</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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">
          <a class="nav-link active" aria-current="page" 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>
  </div>
</nav>

模态框（Modal）

模态框可以用于在页面上显示弹出式对话框，以显示重要的信息或收集用户输入。下面是一个简单的模态框示例：

htmlCopy Code
<!-- 模态框按钮 -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
  Launch demo modal
</button>

<!-- 模态框 -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

表格（Table）

表格是展示数据的重要工具，Bootstrap 提供了许多类和样式以帮助你创建漂亮的表格。下面是一个简单的表格示例：

htmlCopy Code
<table class="table">
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

总结

Bootstrap 是一个流行的前端框架，它提供了大量易于使用的组件，帮助你快速创建现代化和响应式的 Web 应用程序和网站。在本文中，我们介绍了如何使用 Bootstrap 和一些常用的组件。希望这些学习笔记对你有所帮助！