语义UI | 标签

语义UI是一种基于语义化的前端UI框架，旨在提供更加语义化的HTML元素和CSS类名，以提高代码的可读性和可维护性。标签是语义UI的重要组成部分，用于描述页面中的不同元素。

常用标签

Button 按钮

按钮标签用于表示一个交互按钮，通常用于触发一些操作。

<button class="ui button">Click Me</button>

Icon 图标

图标标签用于表示一个图标，通常用于提示某个状态或操作。

<i class="heart icon"></i> Favorite

Label 标签

标签标签用于表示一个标签，通常用于对某个元素进行分类或描述。

<div class="ui red label">Hot</div>

Input 输入框

输入框标签用于表示一个可输入的文本框，通常用于获取用户输入。

<div class="ui input">
  <input type="text" placeholder="Enter your name">
</div>

Dropdown 下拉框

下拉框标签用于表示一个下拉框，通常用于从多个选项中选择一个。

<div class="ui selection dropdown">
  <input type="hidden" name="gender">
  <i class="dropdown icon"></i>
  <div class="default text">Gender</div>
  <div class="menu">
    <div class="item" data-value="male">Male</div>
    <div class="item" data-value="female">Female</div>
  </div>
</div>

Menu 菜单

菜单标签用于表示一个菜单，通常用于导航或选项卡。

<div class="ui menu">
  <a class="active item">Home</a>
  <a class="item">Products</a>
  <a class="item">About Us</a>
</div>

CSS类名

除了常用标签外，语义UI还提供了一系列常用CSS类名，以便于对页面进行更加精细的布局和样式调整。

Grid 栅格

Grid类用于创建一个栅格布局，可以将页面划分为多个区域进行布局。

<div class="ui grid">
  <div class="four wide column">1</div>
  <div class="twelve wide column">2</div>
</div>

Fluid 流式布局

Fluid类用于创建一个流式布局，可以自适应浏览器窗口大小进行布局。

<div class="ui container fluid">
  ...
</div>

Divider 分割线

Divider类用于创建一个分割线，可以分隔不同的内容块。

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

Message 消息框

Message类用于创建一个消息框，可以提示用户某些信息或状态。

<div class="ui message">
  <div class="header">Congratulations</div>
  <p>Your account has been created.</p>
</div>

Modal 模态框

Modal类用于创建一个模态框，可以展示一些重要的内容或操作。

<div class="ui modal">
  <div class="header">Are You Sure?</div>
  <div class="content">
    <p>Do you really want to delete this item?</p>
  </div>
  <div class="actions">
    <div class="ui negative button">Cancel</div>
    <div class="ui positive button">OK</div>
  </div>
</div>

总结

通过应用语义UI中的标签和CSS类名，可以创建更加语义化和易于维护的前端UI界面。其中常用的标签包括Button、Icon、Label、Input、Dropdown和Menu等，而常用的CSS类名则包括Grid、Fluid、Divider、Message和Modal等。