twitter-bootstrap 材料（垂直）步进器

Material (vertical) stepper

提问by chrisvdb

I'm trying to implement the Material vertical stepperfor a wizard in my web application (using Angular and Bootstrap).

我正在尝试为我的 Web 应用程序中的向导实现Material 垂直步进器（使用 Angular 和 Bootstrap）。

Unfortunately I do not find any example implementations that I can use as a basis. I only found a few (not-so-good-looking) horizontal ones. Even Angular Material does not implement this component yet.

不幸的是，我没有找到任何可以用作基础的示例实现。我只找到了几个（不太好看的）横向的。甚至 Angular Material 也没有实现这个组件。

Anybody able to help with an example for the layout (HTML + CSS)? In particular, I do not know how to correctly draw the step circles (with numbers or -in my case- icons), connect them with lines and position them correctly compared to the step content on different devices. The logic/navigation (JS/Angular) on the other hand is quite straightforward.

任何人都可以帮助提供布局示例（HTML + CSS）？特别是，我不知道如何正确绘制步骤圆圈（用数字或 - 在我的例子中 - 图标），用线条连接它们并与不同设备上的步骤内容相比正确定位它们。另一方面，逻辑/导航（JS/Angular）非常简单。

回答by Ilya B.

Is this what you need?

这是你需要的吗？

*,
*:before,
*:after {
  box-sizing: border-box;
}
.step {
  position: relative;
  min-height: 32px
  /* circle-size */
  ;
}
.step > div:first-child {
  position: static;
  height: 0;
}
.step > div:last-child {
  margin-left: 32px;
  padding-left: 16px;
}
.circle {
  background: #4285f4;
  width: 32px;
  height: 32px;
  line-height: 32px;
  border-radius: 16px;
  position: relative;
  color: white;
  text-align: center;
}
.line {
  position: absolute;
  border-left: 1px solid gainsboro;
  left: 16px;
  bottom: 10px;
  top: 42px;
}
.step:last-child .line {
  display: none;
}
.title {
  line-height: 32px;
  font-weight: bold;
}

<div class="step">
  <div>
    <div class="circle">n</div>
    <div class="line"></div>
  </div>
  <div>
    <div class="title">Title</div>
    <div class="body">Body</div>
  </div>
</div>

Or see is the fullDemo

或者看是完整的Demo

回答by Alexandre Thebaldi

Material Design Lite Stepper (Polyfill)could be a good example of Material Design Stepper (with HTML5) implementation.

Material Design Lite Stepper (Polyfill)可能是 Material Design Stepper（使用 HTML5）实现的一个很好的例子。

There are demonstrations, introduction to the component and Javascript API.

有演示、组件介绍和Javascript API。

回答by Faraz M. Khan

For almost pure Bootstrap 4 solution.

对于几乎纯粹的 Bootstrap 4 解决方案。

  .stepper .line{
      width: 2px;
      background-color: lightgrey !important;
  }    
      
  .stepper .lead {
      font-size: 1.1rem;
  }

<div class="stepper d-flex flex-column mt-5">
    <div class="d-flex mb-1">
      <div class="d-flex flex-column pr-4 align-items-center">
        <div class="rounded-circle py-2 px-3 bg-primary text-white mb-1">1</div>
        <div class="line h-100"></div>
      </div>
      <div>
        <h5 class="text-dark">Create your application repository</h5>
        <p class="lead text-muted pb-3">Choose your website name & create repository</p>
      </div>
    </div>
    <div class="d-flex mb-1">
      <div class="d-flex flex-column pr-4 align-items-center">
        <div class="rounded-circle py-2 px-3 bg-primary text-white mb-1">2</div>
        <div class="line h-100"></div>
      </div>
      <div>
        <h5 class="text-dark">Clone application respository</h5>
        <p class="lead text-muted pb-3">Go to your dashboard and clone Git respository from the url in the dashboard of your application</p>
      </div>
    </div>
    <div class="d-flex mb-1">
      <div class="d-flex flex-column pr-4 align-items-center">
        <div class="rounded-circle py-2 px-3 bg-primary text-white mb-1">3</div>
        <div class="line h-100 d-none"></div>
      </div>
      <div>
        <h5 class="text-dark">Make changes and push!</h5>
        <p class="lead text-muted pb-3">Now make changes to your application source code, test it then commit &amp; push!</p>
      </div>
    </div>
  </div>

Here is the demo link

这是演示链接