Bootstrap 4 安装使用学习笔记

Bootstrap是一个非常流行的开源前端框架，可以快速构建漂亮、响应式的网站和Web应用程序。本文将介绍如何安装和使用Bootstrap 4，包括基础知识、常用组件和实例演示。

安装 Bootstrap 4

安装Bootstrap 4最简便的方式是通过CDN引入，只需在HTML头部引入以下代码即可：

htmlCopy Code
<!-- 引入CSS文件 -->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css">

<!-- 引入JS文件 -->
<script src="https://cdn.bootcss.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

如果需要自定义下载Bootstrap 4，则可以到官方网站 https://getbootstrap.com/docs/4.0/getting-started/download/ 下载源代码或编译后的CSS和JS文件。

基础知识

Bootstrap 4包含了许多基础样式和组件，其中最重要的是栅格系统。栅格系统是Bootstrap中最常用的组件之一，可以将页面划分为12列，并通过类名 .col-* 来控制元素在不同屏幕上的布局。

以下是一个基本的栅格系统示例：

htmlCopy Code
<div class="container">
  <div class="row">
    <div class="col-md-6 col-lg-4">1</div>
    <div class="col-md-6 col-lg-4">2</div>
    <div class="col-md-12 col-lg-4">3</div>
  </div>
</div>

上述代码将会在大屏幕上显示为三列，其中第一列和第二列各占据了1/3的宽度，第三列则占据了整个容器的宽度。在中等屏幕上，第一列和第二列各占据了1/2的宽度，同样在小屏幕上每一列都占据了整个屏幕的宽度。

常用组件

Bootstrap 4包含了许多常用的UI组件和JavaScript插件，以下是一些例子：

导航栏

htmlCopy Code
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <a class="navbar-brand" href="#">Brand</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 <span class="sr-only">(current)</span></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>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
  </div>
</nav>

卡片

htmlCopy Code
<div class="card" style="width: 18rem;">
  <img class="card-img-top" src="..." alt="Card image cap">
  <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>

表格

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

实例演示

以下是一个基于Bootstrap 4的响应式网站的示例：https://getbootstrap.com/docs/4.0/examples/carousel/。

这个示例包含了许多常用的Bootstrap组件，如导航栏、轮播图、卡片等。其中的代码可以作为学习和实践的参考。