不另写CSS，Bootstrap 4 实现步骤条

https://math-digital.cn/blog/9

文章共3,280字 · 阅读需要大约11分钟

一键AI生成摘要，助你高效阅读

问答

切糕糕

4600人浏览 · 2018-02-10 11:23:03

切糕糕 · 2018-02-10 11:23:03 发布

不另写CSS，Bootstrap 4 实现步骤条

Bootstrap 4 相对于 Bootstrap 3，引入了许多的辅助 class，使用起来也更为灵活。本文用Bootstrap 4 + Font-awesome 实现的步骤条，不用自己编写额外的CSS。

$步骤条DEMO$

代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">
  <link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
  <title>Document</title>
</head>
<body>
<div class="container mt-5">
  <div class="row">
    <div class="align-middle">
      <span class="fa-stack fa-lg">
        <i class="fa fa-circle-thin fa-stack-2x"></i>
        <span class="fa-stack-1x">1</span>
      </span>
      <div class="d-inline-block">
        <p class="mb-1">Finished</p>
        <p class="position-absolute text-muted">This is a description</p>
      </div>
    </div>
    <span class="col border mx-3 my-auto"></span>
    <div class="align-middle">
      <span class="fa-stack fa-lg">
        <i class="fa fa-circle-thin fa-stack-2x"></i>
        <span class="fa-stack-1x">2</span>
      </span>
      <div class="d-inline-block">
        <p class="mb-1"><strong>In Progress</strong></p>
        <p class="position-absolute text-muted">This is a description</p>
      </div>
    </div>
    <span class="col border mx-3 my-auto"></span>
    <div class="align-middle">
      <span class="fa-stack fa-lg">
        <i class="fa fa-circle-thin fa-stack-2x"></i>
        <span class="fa-stack-1x">3</span>
      </span>
      <div class="d-inline-block">
        <p class="mb-1">Waiting</p>
        <p class="position-absolute text-muted">This is a description</p>
      </div>
    </div>
  </div>

  <div class="m-5"></div>

  <div class="row">
    <div class="align-middle text-primary">
      <span class="fa-stack fa-lg">
        <i class="fa fa-circle-thin fa-stack-2x"></i>
        <span class="fa fa-stack-1x fa-check"></span>
      </span>
      <div class="d-inline-block">
        <p class="mb-1">Finished</p>
        <p class="position-absolute text-muted">This is a description</p>
      </div>
    </div>
    <span class="col border border-primary mx-3 my-auto"></span>
    <div class="align-middle text-primary">
      <span class="fa-stack fa-lg">
        <i class="fa fa-circle fa-stack-2x"></i>
        <span class="fa-stack-1x text-white">2</span>
      </span>
      <div class="d-inline-block">
        <p class="mb-1"><strong>In Progress</strong></p>
        <p class="position-absolute text-muted">This is a description</p>
      </div>
    </div>
    <span class="col border mx-3 my-auto"></span>
    <div class="align-middle text-muted">
      <span class="fa-stack fa-lg">
        <i class="fa fa-circle-thin fa-stack-2x"></i>
        <span class="fa-stack-1x">3</span>
      </span>
      <div class="d-inline-block">
        <p class="mb-1">Waiting</p>
        <p class="position-absolute text-muted">This is a description</p>
      </div>
    </div>
  </div>

  <div class="m-5"></div>

  <div class="row">
    <div class="align-middle text-primary">
      <span class="fa-stack fa-lg">
        <i class="fa fa-circle-thin fa-stack-2x"></i>
        <span class="fa fa-stack-1x fa-check"></span>
      </span>
      <div class="d-inline-block">
        <p class="mb-1">Finished</p>
        <p class="position-absolute text-muted">This is a description</p>
      </div>
    </div>
    <span class="col border border-danger mx-3 my-auto"></span>
    <div class="align-middle text-danger">
      <span class="fa-stack fa-lg">
        <i class="fa fa-circle-thin fa-stack-2x"></i>
        <span class="fa fa-stack-1x fa-times"></span>
      </span>
      <div class="d-inline-block">
        <p class="mb-1"><strong>In Progress</strong></p>
        <p class="position-absolute text-danger">This is a description</p>
      </div>
    </div>
    <span class="col border mx-3 my-auto"></span>
    <div class="align-middle text-muted">
      <span class="fa-stack fa-lg">
        <i class="fa fa-circle-thin fa-stack-2x"></i>
        <span class="fa-stack-1x">3</span>
      </span>
      <div class="d-inline-block">
        <p class="mb-1">Waiting</p>
        <p class="position-absolute text-muted">This is a description</p>
      </div>
    </div>
  </div>
</div>
</body>
</html>