Bootstrap是一个基于HTML、CSS、JavaScript的前端开发框架，由Twitter公司的Mark Otto和Jacob Thornton创建并维护。Bootstrap通过提供一系列基础模板、CSS规则和JavaScript插件等，可以轻松帮助开发者构建响应式、移动端优化的网站和Web应用。

Bootstrap学习笔记之初识Bootstrap

什么是Bootstrap

Bootstrap是一个基于HTML、CSS、JavaScript的前端开发框架，由Twitter公司的Mark Otto和Jacob Thornton创建并维护。Bootstrap通过提供一系列基础模板、CSS规则和JavaScript插件等，可以轻松帮助开发者构建响应式、移动端优化的网站和Web应用。

Bootstrap的导入方式

Bootstrap有两种导入方式，分别是CDN和本地导入。

CDN导入

在HTML文件中的<head>中引入以下代码：

<!-- 最新版本的Bootstrap，来自官方CDN -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css">
<!-- 最新版本的JavaScript，来自官方CDN -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js"></script>

本地导入

将下载好的Bootstrap文件夹中的bootstrap.min.css和bootstrap.min.js文件放入项目文件夹中，然后在HTML文件中的<head>中引入以下代码：

<!-- 引入本地的BootstrapCSS文件 -->
<link rel="stylesheet" href="./bootstrap/css/bootstrap.min.css">
<!-- 引入本地的BootstrapJS文件 -->
<script src="./bootstrap/js/bootstrap.min.js"></script>

Bootstrap的基础结构

Bootstrap的基础结构为一个网格系统，其中网格分为12列。开发者可以利用这个网格系统来构建自己的布局。

以下是一个简单的网格布局示例：

<div class="container">
  <div class="row">
    <div class="col-md-4">第一列</div>
    <div class="col-md-4">第二列</div>
    <div class="col-md-4">第三列</div>
  </div>
</div>

其中，container用于创建一个包围内容的区域，并且为开发者提供默认的外边距和填充。row用于创建一行，每一行可以包含多个列。col-md-4用于创建一个列，md表示当设备为中等大小的屏幕时，列的宽度为4。

Bootstrap的常用组件

Navbar组件

Navbar组件是Bootstrap中用来创建导航栏的组件，可以通过以下代码创建一个基本的导航栏：

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">网站名称</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
      <div class="navbar-nav">
        <a class="nav-link active" aria-current="page" href="#">首页</a>
        <a class="nav-link" href="#">产品</a>
        <a class="nav-link" href="#">服务</a>
        <a class="nav-link" href="#">关于</a>
      </div>
    </div>
  </div>
</nav>

其中，navbar表示创建一个导航栏。navbar-expand-lg表示在屏幕宽度大于等于lg（大屏幕）时，导航栏将占据整个屏幕宽度。navbar-light bg-light表示导航栏为浅色背景。navbar-brand用于创建网站名称。navbar-toggler表示创建一个用于展开导航栏的按钮，当屏幕尺寸小于一定大小时，导航栏默认会折叠，点击该按钮可以展开导航栏。navbar-collapse用于指定要折叠的内容，navbar-nav用于创建一个用于包含导航链接的容器。

Card组件

Card组件是Bootstrap中用于创建卡片式布局的组件，可以通过以下代码创建一个基本的卡片：

<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">卡片标题</h5>
    <p class="card-text">卡片正文</p>
    <a href="#" class="btn btn-primary">按钮</a>
  </div>
</div>

其中，card表示创建一个卡片。card-img-top用于设置卡片的顶部图片。card-body用于创建一个卡片主体，并包含标题、正文和按钮。card-title用于设置卡片的标题。card-text用于设置卡片的正文。btn用于创建一个按钮，btn-primary表示该按钮为蓝色按钮。