Bootstrap4 小工具学习笔记

Bootstrap4 内置了很多实用的小工具，可以大大提高我们开发的效率。本文将介绍常用的几种小工具及其使用方法，并举出实例。

按钮

按钮是网页中最常见的交互元素，Bootstrap 提供了很多样式和功能不同的按钮。使用 Bootstrap 的按钮，只需要在 <button> 标签上添加 class 属性即可。

实例

htmlCopy Code
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-link">Link</button>

图标

图标可以增加页面的美观度和易读性，Bootstrap 使用 Font Awesome 作为默认图标库，内置了很多常用的图标。只需要在 <i> 标签上添加图标的类名即可。

实例

htmlCopy Code
<i class="fas fa-camera-retro"></i>
<i class="fas fa-envelope"></i>
<i class="fas fa-search"></i>
<i class="fas fa-user"></i>
<i class="fas fa-shopping-cart"></i>

进度条

进度条可以显示任务的完成情况，Bootstrap 提供了很多样式和功能不同的进度条。

实例

htmlCopy Code
<div class="progress">
  <div class="progress-bar" style="width: 25%;" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar bg-success" style="width: 50%;" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar bg-danger" style="width: 75%;" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>

卡片

卡片是展示内容的常用元素，Bootstrap 提供了很多样式和功能不同的卡片。

实例

htmlCopy Code
<div class="card">
  <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>
<div class="card text-white bg-primary mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Primary 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>
  </div>
</div>

以上是 Bootstrap4 常用的几种小工具，它们都有很多的用法和样式可以学习和应用。