Semantic-UI 网格列

简介

Semantic-UI是一个现代化的CSS框架，它的目标是使用简单而强大的语法来创建响应式的UI。其中，网格列是一种非常有用的布局方式，可以帮助我们在不同的屏幕大小上创建具有一致性的UI。

网格列的基础结构

Semantic-UI的网格系统由容器(.container)、行(.row)和列(.column)三部分组成。在容器中创建一个或多个行，然后在行中添加列来构建网格。

<div class="container">
  <div class="row">
    <div class="column">1</div>
    <div class="column">2</div>
    <div class="column">3</div>
  </div>
  <div class="row">
    <div class="column">4</div>
    <div class="column">5</div>
    <div class="column">6</div>
  </div>
</div>

注意，每行必须包含一定的列数，这样才能保证网格的结构正确。

列的类型

Semantic-UI中有多种类型的列，可以根据需要进行选择。以下是其中一些常用的列：

• .one, .two, .three, .four, .five, .six, .seven, .eight, .nine, .ten, .eleven, .twelve 表示占据1-12等份的列。

• .wide 表示宽度大于等于两个普通列的列。

• .centered 将列居中显示。

• .stretched 铺满整个行的列。

• .equal width 将多个列的宽度平均分配。

<div class="container">
  <div class="row">
    <div class="four wide column">1</div>
    <div class="centered four wide column">2</div>
    <div class="stretched eight wide column">3</div>
  </div>
  <div class="row">
    <div class="equal width column">4</div>
    <div class="equal width column">5</div>
    <div class="equal width column">6</div>
  </div>
</div>

响应式设计

Semantic-UI的网格系统支持响应式设计，可以根据不同大小的屏幕调整列的数目、宽度等属性。

以下是一些响应式的类名：

• .tablet only 表示只在平板上显示。

• .computer only 表示只在电脑上显示。

• .tablet and computer only 表示只在平板和电脑上显示。

• .mobile only 表示只在手机上显示。

<div class="container">
  <div class="row">
    <div class="four wide computer only column">1</div>
    <div class="eight wide mobile tablet only column">2</div>
  </div>
  <div class="row">
    <div class="equal width column">3</div>
    <div class="equal width column">4</div>
  </div>
</div>

总结

Semantic-UI的网格列是一个非常强大的布局工具，可以帮助我们在不同的屏幕大小上创建一致的UI。通过灵活使用列的类型和响应式类名，我们可以轻松实现各种布局需求。