Bootstrap 4 详细知识点总结与实践指南

<!-- 引入 Bootstrap 4 核心 CSS -->
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.2/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

<!-- 引入 jQuery 和 Bootstrap 4 的 JavaScript 文件 -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.slim.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.2/js/bootstrap.bundle.min.js" integrity="sha384-7ymO4nGrkm372HoSbq1OY2DP4pEZnMiA+E0F3zPr+JQQtQ82gQ1HPY3QIVtztVua" crossorigin="anonymous"></script>

1.2 下载本地文件

你也可以从 Bootstrap 官方网站下载预编译的 CSS 和 JavaScript 文件，或者通过包管理工具（如 npm、Composer）安装。

npm install bootstrap@4.6.2

二、Bootstrap 4 的核心特性

2.1 移动优先的响应式设计

Bootstrap 4 采用移动优先的设计理念，通过响应式网格系统和媒体查询，确保网页在不同设备上都能完美显示。在页面中添加以下 meta 标签可以启用响应式设计：

HTML复制

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

2.2 强大的栅格系统

Bootstrap 4 提供了一个基于 12 列的响应式网格系统，可以轻松创建复杂的布局。例如，以下代码创建了一个简单的三列布局：

<div class="container">
  <div class="row">
    <div class="col-sm-4">Column 1</div>
    <div class="col-sm-4">Column 2</div>
    <div class="col-sm-4">Column 3</div>
  </div>
</div>

2.3 Flexbox 布局

Bootstrap 4 引入了 Flexbox 布局，使得页面布局更加灵活。例如，使用 d-flex 和 justify-content-center 类可以轻松实现水平居中：

<div class="d-flex justify-content-center">
  <div>Centered Content</div>
</div>

三、Bootstrap 4 的组件与插件

3.1 按钮与导航

Bootstrap 4 提供了多种预定义的按钮样式和导航组件。例如，创建一个带有下拉菜单的导航栏：

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNavDropdown">
    <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 dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown link
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
          <a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
</div> </nav> ```

3.2 模态框（Modal）

模态框是Bootstrap 4中非常实用的组件，用于创建弹出窗口。以下是一个简单的模态框示例：

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

<!-- 模态框内容 -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        This is a modal body content.
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

3.3 卡片（Card）

卡片组件是Bootstrap 4中用于展示内容的灵活容器，可以包含图片、文本、按钮等。以下是一个卡片组件的示例：

HTML复制

<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" 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>

3.4 表单

Bootstrap 4提供了丰富的表单样式，支持多种输入类型和布局方式。以下是一个简单的表单示例：

<form>
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
    <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
  </div>
  <div class="form-group form-check">
    <input type="checkbox" class="form-check-input" id="exampleCheck1">
    <label class="form-check-label" for="exampleCheck1">Check me out</label>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

四、Bootstrap 4 的实用工具类

4.1 边距与填充

Bootstrap 4 提供了一系列的边距（margin）和填充（padding）工具类，方便快速调整元素的间距。例如：

<div class="m-3">Margin 3</div> <!-- 外边距 -->
<div class="p-3">Padding 3</div> <!-- 内边距 -->

4.2 文本对齐

使用文本对齐工具类可以快速调整文本的对齐方式：

<p class="text-left">Left aligned text on all viewport sizes.</p>
<p class="text-center">Center aligned text on all viewport sizes.</p>
<p class="text-right">Right aligned text on all viewport sizes.</p>

4.3 颜色工具类

Bootstrap 4 提供了一些预定义的颜色工具类，用于快速设置文本颜色和背景颜色：

HTML复制

<p class="text-primary">Primary color text</p>
<div class="bg-secondary text-white">Secondary background with white text</div>

五、Bootstrap 4 的自定义与扩展

5.1 自定义主题

通过修改Bootstrap 4的Sass变量，可以轻松创建自定义主题。例如，修改主色调：

$primary: #ff5722;

@import "bootstrap";

5.2 扩展组件

Bootstrap 4允许开发者通过JavaScript扩展组件功能。例如，扩展模态框组件：

$(document).ready(function() {
  $('#exampleModal').on('show.bs.modal', function(event) {
    var button = $(event.relatedTarget); // Button that triggered the modal
    var recipient = button.data('whatever'); // Extract info from data-* attributes
    var modal = $(this);
    modal.find('.modal-title').text('New message to ' + recipient);
    modal.find('.modal-body input').val(recipient);
  });
});