Semantic-UI 分隔符垂直类型

语言版本：中文

Semantic-UI 是一个流行的前端框架，其中绝大多数基础模块都是通过 HTML 元素和 CSS 样式（往往伴随着一些 JavaScript 行为）实现的。其中，分隔符是一种常见的UI组件，用于将页面元素分为逻辑上不同的区域，以提高页面的可读性和理解性。

Semantic-UI 分隔符提供了多种不同类型的分隔符，其中垂直类型的分隔符是一种常用的类型。在本文中，我们将对 Semantic-UI 分隔符垂直类型进行详细介绍。

1. 基本语法

分隔符的基本语法如下：

<div class="ui vertical divider"></div>

其中，ui 是 Semantic-UI 基础样式，vertical 表示该分隔符为垂直类型，divider 表示该元素为分隔符。

2. 可选参数

Semantic-UI 分隔符提供了以下可选参数：

• inverted：黑底白字的颜色反转（默认黑色底色白色字）
• hidden：隐藏元素

使用方式如下：

<div class="ui inverted vertical divider"></div>
<div class="ui hidden vertical divider"></div>

3. 示例

以下代码展示了如何在页面中使用 Semantic-UI 分隔符垂直类型：

<div class="ui container">
  <h2 class="ui header">我的收藏</h2>
  <div class="ui divider"></div>
  <div class="ui stackable grid">
    <div class="four wide column">
      <img src="https://picsum.photos/200/200" class="ui small image">
    </div>
    <div class="twelve wide column">
      <h3 class="ui header">美食</h3>
      <p>蒜香龙虾、滋补燕窝、进口奶酪、草莓巧克力蛋糕、啤酒鸭翅……喜欢吃就收藏。</p>
    </div>
  </div>
  <div class="ui vertical divider">或</div>
  <div class="ui stackable grid">
    <div class="four wide column">
      <img src="https://picsum.photos/200/200" class="ui small image">
    </div>
    <div class="twelve wide column">
      <h3 class="ui header">旅行</h3>
      <p>没事就瞎浪，走走看看，世界那么大，不去看看会后悔的。</p>
    </div>
  </div>
  <div class="ui vertical divider">
    和
    <i class="plane icon"></i>
  </div>
  <div class="ui stackable grid">
    <div class="four wide column">
      <img src="https://picsum.photos/200/200" class="ui small image">
    </div>
    <div class="twelve wide column">
      <h3 class="ui header">书籍</h3>
      <p>最好的伴侣就是书籍，一本书可以改变一个人的一生。</p>
    </div>
  </div>
</div>

这里展示了一个收藏网站的三个收藏类目，通过 Semantic-UI 分隔符垂直类型进行了区分，页面效果如下所示：

4. 总结

Semantic-UI 分隔符垂直类型是一个方便实用的 UI 组件，可以用于分隔页面元素。在使用时，可以结合其他 Semantic-UI 组件进行布局，通过添加不同的可选参数来达到更多的样式效果。