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

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

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

代码:


<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>Documenttitle>
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">1span>
      span>
      <div class="d-inline-block">
        <p class="mb-1">Finishedp>
        <p class="position-absolute text-muted">This is a descriptionp>
      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">2span>
      span>
      <div class="d-inline-block">
        <p class="mb-1"><strong>In Progressstrong>p>
        <p class="position-absolute text-muted">This is a descriptionp>
      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">3span>
      span>
      <div class="d-inline-block">
        <p class="mb-1">Waitingp>
        <p class="position-absolute text-muted">This is a descriptionp>
      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">Finishedp>
        <p class="position-absolute text-muted">This is a descriptionp>
      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">2span>
      span>
      <div class="d-inline-block">
        <p class="mb-1"><strong>In Progressstrong>p>
        <p class="position-absolute text-muted">This is a descriptionp>
      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">3span>
      span>
      <div class="d-inline-block">
        <p class="mb-1">Waitingp>
        <p class="position-absolute text-muted">This is a descriptionp>
      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">Finishedp>
        <p class="position-absolute text-muted">This is a descriptionp>
      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 Progressstrong>p>
        <p class="position-absolute text-danger">This is a descriptionp>
      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">3span>
      span>
      <div class="d-inline-block">
        <p class="mb-1">Waitingp>
        <p class="position-absolute text-muted">This is a descriptionp>
      div>
    div>
  div>
div>
body>
html>

你可能感兴趣的:(html5+css3,bootstrap)