Step，步骤，可以用来显示一系列的动作的完成的状态，常用的场景比如用户在购物的时候，可以用一个 Step 为用户显示完成一个交易都需要哪些步骤，现在他所在的状态是什么，还剩下哪些没有完成的步骤。

所有的步骤的周围用一个包装的容器 .. 一般用 div 标签就行 .. 在上面加上一个 ui 类，还有 steps ..

div.ui.steps

它的里面就是步骤内容，每个步骤都可以放到一个单独的包装里面 .. 同样可以使用一个 div 标签，步骤的容器上要用一个 step 类 ..

div.step

步骤的标签可以放在一个带 title 类的元素里面 ..

div.title{配送}

步骤的详细的描述可以放在带 description 类的元素里 ..

div.description{选择配送方式}

现在你看到的就是一个步骤的基本的样式 ..

在这个步骤里面，可以加上一个图标 .. 把它放在步骤容器里的最上面 .. 用一个小卡车的图标 .. i.truck.icon .. 然后需要把下面的文字内容再用一个容器包装一下 .. 在这个容器的上面需要再添加一个 content 类 这样可以在内容的周围添加合适的边距 ..

我们可以再调整一下浏览的显示 ..

下面我们再用类似的方法再去添加两个步骤 ... 复制一下 .. 用一个信用卡图标 .. 修改一下文字 .. 支付 .. 选择支付方式 ..

最后这个步骤用一个信息图标 .. 再修改一下文字 .. 确认 .. 确认订单信息 .. 下面我们在这些步骤里再加上表示状态的 CSS 类 ..

在当前的步骤上，可以再加上一个 active … 这样会用比较醒目的样式显示这个步骤 ..

在没有完成的步骤上可以用一个 disabled .. 这样会用半透明的效果显示这个步骤 .. 提醒用户这个步骤还没有完成 ..

我们可以让步骤平均分成几份占满整个容器的宽度 .. 比如这里有三个步骤，所以可以在步骤的大容器上添加一个 three ，表示要平均分成三份显示 ..

使用表示大小的类可以改变步骤的尺寸 .. 再复制一份 ... 先用一个 small .. 小号的步骤 .. 然后再复制一份 ... 再用一个 large .. 这样步骤会比默认的尺寸大一些 ..