Bootstrap 4教程

Bootstrap是一个非常流行的前端框架，可以帮助程序员快速搭建一个美观、响应式的网站。它包含了很多CSS和JavaScript组件，可以用来创建样式、布局、表单、导航等等。

安装Bootstrap

可以通过以下几种方式来安装Bootstrap：

1. 下载Bootstrap的压缩包并解压缩到你的项目目录中。
2. 使用npm进行安装：npm install bootstrap
3. 使用CDN（内容分发网络）：<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.3.1/css/bootstrap.min.css">

用法

1. 在HTML文档中引入CSS和JavaScript：

<!-- 引入Bootstrap的CSS文件 -->
<link rel="stylesheet" href="path/to/bootstrap.min.css">

<!-- 引入jQuery -->
<script src="path/to/jquery.min.js"></script>

<!-- 引入Bootstrap的JavaScript文件 -->
<script src="path/to/bootstrap.min.js"></script>

2. 使用Bootstrap的组件：

样式类

Bootstrap有很多样式类，可以让文本、图像、表格等等更美观。

<p class="text-danger">这是危险文本。</p>

<img src="path/to/image.jpg" class="img-fluid rounded" alt="Responsive image">

<table class="table">
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</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的布局类可以让页面响应式，适合不同尺寸的屏幕。

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-4">1/3宽度</div>
    <div class="col-sm-4">1/3宽度</div>
    <div class="col-sm-4">1/3宽度</div>
  </div>
</div>

组件

Bootstrap包含了很多组件，例如导航、表单、模态框、轮播图等等。

<!-- 导航 -->
<ul class="nav">
  <li class="nav-item">
    <a class="nav-link active" href="#">首页</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">功能1</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">功能2</a>
  </li>
</ul>

<!-- 表单 -->
<form>
  <div class="form-group">
    <label>用户名</label>
    <input type="text" class="form-control" placeholder="请输入用户名">
  </div>
  <div class="form-group">
    <label>密码</label>
    <input type="password" class="form-control" placeholder="请输入密码">
  </div>
  <button type="submit" class="btn btn-primary">登录</button>
</form>

<!-- 模态框 -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
  打开模态框
</button>

<div class="modal fade" id="myModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title">标题</h4>
        <button type="button" class="close" data-dismiss="modal">&times;</button>
      </div>
      <div class="modal-body">
        <p>内容...</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
      </div>
    </div>
  </div>
</div>

<!-- 轮播图 -->
<div id="myCarousel" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
    <li data-target="#myCarousel" data-slide-to="1"></li>
    <li data-target="#myCarousel" data-slide-to="2"></li>
  </ol>

  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="path/to/image1.jpg" alt="First slide">
    </div>
    <div class="carousel-item">
      <img src="path/to/image2.jpg" alt="Second slide">
    </div>
    <div class="carousel-item">
      <img src="path/to/image3.jpg" alt="Third slide">
    </div>
  </div>

  <a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">上一张</span>
  </a>
  <a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">下一张</span>
  </a>
</div>

插件

Bootstrap的插件可以增强组件的功能。

<!-- Tooltip插件 -->
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="提示文本">
  悬停显示提示文本
</button>

<script>
$(function () {
  $('[data-toggle="tooltip"]').tooltip()
})
</script>

<!-- 弹出框插件 -->
<button type="button" class="btn btn-primary" data-toggle="popover" title="标题" data-content="内容...">
  点击弹出框
</button>

<script>
$(function () {
  $('[data-toggle="popover"]').popover()
})
</script>

参考

• Bootstrap官网
• Bootstrap中文文档