不另写CSS，Bootstrap 4 实现步骤条
程序员文章站
2022-06-07 10:50:31
...
不另写CSS，Bootstrap 4 实现步骤条
Bootstrap 4 相对于 Bootstrap 3，引入了许多的辅助 class，使用起来也更为灵活。本文用Bootstrap 4 + Font-awesome 实现的步骤条，不用自己编写额外的CSS。
代码：
<!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>