css导航步骤条样式代码(bootstrap4 css扩展)

演示  website 下载

这是bootstrap4的CSS扩展，帮助你创建一个快速响应、SEO友好的步骤条，可以显示用户当前的进度。

使用方法：

1.在bootstrap样式表之后加载bootstrap-steps.min.css。

<link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" />
<link rel="stylesheet" href="/path/to/bootstrap-steps.min.css" />

2.添加步骤条代码。

<ul class="steps">
  <li class="step step-success">
    <div class="step-content">
      <span class="step-circle">1</span>
      <span class="step-text">Step 1</span>
    </div>
  </li>
  <li class="step step-active">
    <div class="step-content">
      <span class="step-circle">2</span>
      <span class="step-text">Step 2</span>
    </div>
  </li>
  <li class="step">
    <div class="step-content">
      <span class="step-circle">3</span>
      <span class="step-text">Step 3</span>
    </div>
  </li>
  <li class="step">
    <div class="step-content">
      <span class="step-circle">4</span>
      <span class="step-text">Step 4</span>
    </div>
  </li>
</ul>

会员登陆后即可下载资源文件。更多好用网站特效插件，请关注帝国模板之家。