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

最新推荐文章于 2024-04-30 15:44:23 发布

切糕糕

最新推荐文章于 2024-04-30 15:44:23 发布

阅读量4.6k

点赞数

分类专栏： html5+css3 bootstrap 文章标签： Bootstrap 前端 CSS3

本文链接：https://blog.csdn.net/supergao222/article/details/79303868

版权

不另写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&