在这个统计信息上,我们可以添加一些表示大小的类改变它们的尺寸 .. 比如你想让它小一点,可以用一个 mini ... 在这个统计信息的包装上,添加一个 mini ... 让它大一些,可以使用 large ... 或者也可以使用比 large 更大的 huge ...
另外我们也可以使用表示颜色的类来改变统计信息的的颜色 .. 这它的包装上,添加一个 red .. 保存 .. 这样信息的值会变成红色 .. 再试一下 green ... 值的颜色会变成绿色 ..
再把这个统计信息放在一个暗色的背景下面看一下 .. 先选中它 .. ctrl + w .. 给它添加一个包装 .. 一个 div 标签,上面加上 .ui.inverted.segment
你会看到现在这个统计信息的标签不见了 .. 因为标签文字的颜色跟背景一样,都是黑色的 .. 在这个统计信息的包装上,添加一个 inverted .. 这个类可以让统计信息在暗色的背景下面正常显示 .. (撤销到原始状态)
使用 floated ,可以让统计信息浮动到内容的左边或者右边显示 ... 比如这里我们在它下面添加一段文字 .. 现在这个统计信息会在文字的上面显示 ... 想让它浮动到内容的右边显示可以这样 ... 在它的容器上,添加一个 right floated ..
现在它会在内容的右边显示 .. 并且跟内容之间会有一个合适的距离 ... 浮动到左边,可以把 right .. 换成 left .. (撤销到原始状态)
把几个统计信息组织在一起,需要给它们添加一个大的容器,上面要加上 ui 还有 statistics .. 先再添加两个统计信息 .. 选中这段代码 .. command + shift + D .. 复制一下 .. 修改一下它的值 ... 还有标签 ...
再复制一段 .. 再修改一下这个统计信息的值 .. 另外还有标签 ... 然后选中这三个统计信息 ... ctrl + W .. 给它们添加一个容器 .. 用一个 div 标签 .. 上面加上 ui.statistics ... 注意这里是个复数形式 ..
这样会在不同的统计信息之间使用合适的边距 .. 下面再等分一下容器的宽度 . 这里有三个统计信息 .. 在它们的大容器上,添加一个 three ... 这样每个统计信息会占用容器的三分之一的宽度 ...