BrickPlus

结构和样式
种类
尺寸

Brick提供一种拥有固定样式的步骤示意图，在结构最外层引用基类 .step-wrap 之后，需要根据你的需要，引用 three / four / five / six / seven-steps 工具类来定义你需要的步骤数量（我们现在提供了3-7步的工具类）；然后，由 pass1 / 2 / 3 / 4 / 5 / 6 / 7 这种工具类展示的你的步骤流程点。
步骤组件有固定的 html 结构，详情请参考代码示例。

实例

首先：XXXXXXX

然后：XXXXXXX

最后：XXXXXXX

            
<div class="step-wrap ( three / four / five / six / seven -steps ) ( pass1 / 2 / 3 / 4 / 5 / / 6 / 7 )">
  <div class="step-box">
    <!--进度条-->
    <div class="step-bar"></div>
    <!--步骤标记-->
    <div class="the-step">
      <div class="step"></div>
      <p>...</p>
    </div>
    ...
  </div>
</div>

步骤示意图的 3 - 7 步骤不单单是引用工具样式，同时，需要在结构上增加 .the-step 的数量到和你引用的步骤数工具类相应。

实例

XXXXXXX

            
<div class="step-wrap ( three / four / five / six / seven -steps ) ( pass1 / 2 / 3 / 4 / 5 / / 6 / 7 )">
</div>

除了标准的尺寸，步骤示意图还有另外一种小尺寸 small-steps 工具类可以用；
在步骤图引用五步和之后的步骤数量工具类的时候，步骤图的尺寸会自动缩小，相比三和四部更小，这是由于要适应实际的容器宽度问题，但如果你需要在引用三和四步的时候，应用的小尺寸的步骤图，那么直接引用 small-steps 就能得到。

实例

XXXXXXX

            
<div class="step-wrap small-steps">
</div>