Bootstrap CSS 简介

Bootstrap 是一个免费的开源前端框架，包含了大量的 HTML、CSS 和 JavaScript 组件，用于创建响应式、移动设备优先的网站应用程序和网站。Bootstrap 是由推特公司的工程师 Mark Otto 和 Jacob Thornton 所开发，并在 2011 年首次发布，随后成为最流行的前端框架之一。

使用 Bootstrap 可以有效地利用基础样式并快速搭建界面，还能够通过自定义变量和 Mixins 来构建即使复杂的样式。Bootstrap 也提供了大量的插件，如模态框、标签、轮播图、消息通知等，让前端开发更加高效。

运行环境

Bootstrap 可以在各种框架的基础上使用，比如 React、Vue、Angular 等。在开发过程中，需要引入 Bootstrap 的 CSS 文件和 JavaScript 文件。另外，Bootstrap 还需要 jQuery 库的支持。

<!-- 引入 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/5.0.2/css/bootstrap.min.css">

<!-- 引入 JavaScript 文件，需要先引入 jQuery 库 -->
<script src="https://cdn.staticfile.org/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/5.0.2/js/bootstrap.min.js"></script>

响应式布局

Bootstrap 的响应式布局使用了栅格系统，将页面分成了 12 列。可以通过添加 .col-* 类来控制元素的列数，如 .col-xs-12、.col-sm-6、.col-md-4、.col-lg-3。

<div class="container">
  <div class="row">
    <div class="col-sm-4">
      左侧内容
    </div>
    <div class="col-sm-8">
      右侧内容
    </div>
  </div>
</div>

基础组件

Bootstrap 提供了基础组件，如按钮、表单、导航、提示框等，这些组件可以使页面更加美观。

<button class="btn btn-primary">Primary</button>

<form>
  <div class="mb-3">
    <label for="exampleInputEmail1" class="form-label">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
    <div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div>
  </div>
  <div class="mb-3">
    <label for="exampleInputPassword1" class="form-label">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1">
  </div>
  <div class="mb-3 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>

<ul class="nav">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>

<div class="alert alert-danger" role="alert">
  This is a danger alert—check it out!
</div>

插件

Bootstrap 还提供了插件，如轮播图、模态框、标签、消息通知等，可以大大提高开发效率。

<div id="carouselExampleSlidesOnly" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="https://via.placeholder.com/800x400?text=Slide+1" class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="https://via.placeholder.com/800x400?text=Slide+2" class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="https://via.placeholder.com/800x400?text=Slide+3" class="d-block w-100" alt="...">
    </div>
  </div>
</div>

<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
  Launch demo modal
</button>

<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

<span class="badge bg-primary">Primary</span>
<span class="badge bg-secondary">Secondary</span>
<span class="badge bg-success">Success</span>
<span class="badge bg-danger">Danger</span>
<span class="badge bg-warning text-dark">Warning</span>
<span class="badge bg-info text-dark">Info</span>
<span class="badge bg-light text-dark">Light</span>
<span class="badge bg-dark">Dark</span>

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <img src="..." class="rounded me-2" alt="...">
    <strong class="me-auto">Bootstrap</strong>
    <small>11 mins ago</small>
    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
  <div class="toast-body">
    Hello, world! This is a toast message.
  </div>
</div>

自定义样式

Bootstrap 还提供了大量的可自定义的变量和 Mixins，可以轻松地定制自己的样式。变量可以通过修改 SCSS 和 LESS 文件来实现，Mixins 可以在 CSS 中直接使用。

$primary-color: #007bff;

.btn-primary {
  background-color: $primary-color;
  border-color: $primary-color;
}

@import '~bootstrap/scss/functions';
@import '~bootstrap/scss/variables';

.my-mixin() {
  color: adjusted-color($gray-800, $lightness: 10%);
}

.my-class {
  @include my-mixin();
}

总结

Bootstrap 是一个功能强大的前端框架，可以大大提高开发效率。它提供了丰富的组件和插件，并且还支持样式的自定义。如果你是一个前端开发者，Bootstrap 是一个必学的框架之一。