（可运行代码）引入jQuery和Bootstrap的JavaScript库，不仅仅是CSS

Bootstrap是一种开源的前端开发框架，提供了一系列的CSS和JavaScript规则，可以帮助开发者快速地构建出响应式的、移动设备优先的网页应用。Bootstrap提供了各种HTML和CSS的设计模板，如排版、表单、按钮、导航以及各种扩展插件。
可以下载对应JS文件查看内容，发现不仅仅是CSS，还有JS。

简单完整示例

下面是一个简单的Bootstrap代码示例：

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- 引入Bootstrap CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
</head>
<body>

<div class="container">
  <!-- 创建一个响应式的导航栏 -->
  <nav class="navbar navbar-default">
    <div class="container-fluid">
      <div class="navbar-header">
        <a class="navbar-brand" href="#">My Website</a>
      </div>
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">Page 1</a></li>
        <li><a href="#">Page 2</a></li> 
        <li><a href="#">Page 3</a></li> 
      </ul>
    </div>
  </nav>
  
  <!-- 创建一个Jumbotron -->
  <div class="jumbotron text-center">
    <h1>Welcome to My Website</h1>
    <p>Resize this page to see the responsive effect!</p> 
  </div>
  
  <!-- 创建一个3列的网格系统 -->
  <div class="row">
    <div class="col-sm-4">
      <h3>Column 1</h3>
      <p>Lorem ipsum dolor..</p>
    </div>
    <div class="col-sm-4">
      <h3>Column 2</h3>
      <p>Lorem ipsum dolor..</p>
    </div>
    <div class="col-sm-4">
      <h3>Column 3</h3> 
      <p>Lorem ipsum dolor..</p>
    </div>
  </div>
</div>

<!-- 引入jQuery和Bootstrap的JavaScript库 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

</body>
</html>

在这个例子中，我们使用Bootstrap创建了一个响应式的导航栏、一个Jumbotron以及一个3列的网格系统。当页面大小改变时，这些元素会自动调整以适应不同的设备屏幕。

主要内容

Bootstrap确实提供了一整套预定义的样式名，这些样式名可以直接应用到HTML元素上，以便轻松地实现响应式布局、组件样式和交互效果。但Bootstrap不仅仅是一套样式名，它实际上是一个功能完备的前端框架。

Bootstrap包含以下主要部分：

样式：Bootstrap提供了一套丰富的CSS样式，包括基本的HTML元素样式（如排版、列表、表格等）、响应式栅格系统、各种组件（如导航栏、按钮、卡片等）以及实用的工具类。
组件：Bootstrap提供了一系列可复用的组件，这些组件基于HTML、CSS和JavaScript构建，可以帮助您快速创建功能丰富的用户界面。一些常见的组件包括警告框、徽章、下拉菜单、进度条等。
JavaScript插件：Bootstrap还包含了一系列基于jQuery的JavaScript插件，这些插件可以为您的网站添加额外的交互功能和动画效果。例如，模态框、轮播图、工具提示等。

Bootstrap旨在帮助开发者更快速、更简单地构建出美观且响应式的网页应用。

其他示例

Bootstrap 提供了许多可重用的组件，这些组件基于 HTML、CSS 和 JavaScript 构建，可以帮助您快速创建功能丰富的用户界面。以下是一些常见的 Bootstrap 组件及其用途的例子：

导航栏 (Navbar)：用于创建响应式的导航栏，可以包含网站标志、导航链接、表单和其他内容。

<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="#">Features</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Pricing</a>
      </li>
    </ul>
  </div>
</nav>

卡片 (Card)：用于创建包含标题、内容和可选操作的灵活且可扩展的内容容器。

<div class="card" style="width: 18rem;">
  <img src="image.jpg" class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

轮播 (Carousel)：用于创建循环播放的幻灯片展示。

<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="image1.jpg" class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="image2.jpg" class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="image3.jpg" class="d-block w-100" alt="...">
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>