我们再去准备 mixitup 需要的代码结构 ... 它的功能就是对一个列表里面的项目进行排序或者过滤 .. 所以我们需要先去准备一个项目的列表 .. 这个列表不一定非得用列表标签去创建 .. 可以使用任何元素 .. 只要在每个项目的包装元素上添加一个统一的 css 类就行了 ..

这里我会用到 semantic ui 提供的一些样式 .. 你可以参考宁皓网的课程学习一下这个框架 ..

先添加一个大的容器，它可以包装所有的项目 .. 在它里面可以使用一个网格布局 .. 添加一个分成四栏显示的网格布局 ..

div.ui.four.column.grid

每个项目可以使用一个 div 包装一下 .. 它的上面添加一个 column 类 .. 添加 8 个这样的项目 .. 然后再设置一下这些项目里的内容 .. 用一下 semantic ui 里的 inverted segment .. 里面包装的是一个数字 ..

div.column*8>div.ui.inverted.segment{ $ }

这个缩写功能是编辑器的 emmet 插件提供的 .. 现在这些项目的背景都是黑色的 . 我们可以在这个 segment 元素上添加一些颜色类，去改变它的背景颜色 ..

比如我在这个项目的上面，添加一个 red ..

在这个页面上，我们再去给它添加一个标题 .. 用一个 h1 元素，添加一个 center aligned header .. 居中显示的标题 .. 标题上的文字是 mixitup ..

再它下面，再添加一个分割线 ...

这样我们就准备好了 mixitup 需要的代码结构 .. 你可以使用类似的结构，不一定非要使用 semantic ui 提供的样式 ... 在任何一个拥有统一类的内容列表上我们都可以使用 mixitup 提供的功能 ..