理解 semantic-ui grid 的使用

semantic-ui 是一套类似于 bootstrap 的 ui framework,相比 bootstrap 有如下优点:

  • 组件采用语义化的组织方式,容易理解,容易记忆
  • 组件库非常丰富,几乎不需要引入第三方的组件,统一性强
  • 由于采用语义化的方式命名,所有组件都有自己的命名空间,相互不受干扰,侵入性弱,对自定义 css 干扰小,bootstrap 则改写了很多元素的默认样式,复写困难
  • 自定义容易,semantic ui 的源码中各个组件相互独立,依赖清晰,自定义方便

fundamental concepts

  • container
    A fixed width container 具有固定宽度的容器
  • grid
    网格
  • column
    网格的列
  • row
    网格的行

固定宽度居中布局

semantic ui 提供容器 container 来快速实现固定宽度居中,使用 container 不需要任何 grid

1
2
3
4
5
<div class="ui container">
<div class="c">
content
</div>
</div>

如果需要对一段文本进行固定居中,semantic ui 提供了 text container

1
2
3
<div class="ui text container">
Sometimes you just need to put a single column of centered text on a page. A text container is a special type of container optimized for a single flowing column of text, like this instructions on this page.
</div>

grid 布局

自动换行

grid 布局可以非常容易地实现任意行列组合的布局。如果 column 直接作为 grid 的 child,即没有 row,当前行占满之后会自动 flow 到下一行。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<div class="ui grid">
<div class="four wide column">
content
</div>
<div class="four wide column">
content
</div>
<div class="four wide column">
content
</div>
<div class="four wide column">
content
</div>
<!-- 换行 -->
<div class="four wide column">
content
</div>
<div class="four wide column">
content
</div>
<div class="four wide column">
content
</div>
<div class="four wide column">
content
</div>
</div>

column 不指定宽度时,默认用的是 1 个单位的宽。

手动换行

使用 row 可以强迫当前行即使内容没有占满就自动换行

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div class="ui three column grid">
<div class="column">

</div>
<!-- 换行 -->
<div class="row">
<div class="column">
content
</div>
<div class="column">
content
</div>
<div class="column">
content
</div>
</div>
</div>

指定 grid 的 column count

可以在 grid 上指定单个 column 的 count,当每行的 column count 达到指定数目后就自动换行,不管有没有指定 row

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div class="ui three column grid">
<div class="column"></div>
<div class="column"></div>
<div class="column"></div>
<!-- 换行 -->
<div class="column"></div>
<div class="column"></div>
<div class="column"></div>
<div class="row">
<div class="column">content</div>
<div class="column">content</div>
<div class="column">content</div>
<!-- 称满一行 -->
</div>
</div>

row 内的 column 默认没有高度

1
2
3
4
5
6
7
8
9
10
11
12

<div class="ui three column grid">
<div class="row">
<!-- height 0 -->
<div class="column">
</div>
<div class="column">
</div>
<div class="column">
</div>
</div>
</div>

指定 column 的宽度

1
2
3
4
5
<div class="ui grid">
<div class="four wide column"></div>
<div class="column"></div>
<div class="column"></div>
</div>

特定 grid 必须要有 row

celled gridinternally celled griddivided gridvertially divide grid 都需要指定 row

1
2
3
4
5
6
7
<div class="ui celled grid">
<div class="row" >
<div class="column">content</div>
<div class="column">content</div>
<div class="column">content</div>
</div>
</div>

居中 column

如果 column 没有占满一行,可以使用 centered grid, centered row, or centered column 来使列居中

1
2
3
4
5
6
7
<div class="ui two column centered grid">
<div class="column"></div>
<div class="four column centered row">
<div class="column">content</div>
<div class="column">content</div>
</div>
</div>

row 中指定的 column count 能够覆盖 grid 的 column count

浮动 column

left floated item should come first, and a right floated item last in its row

1
2
3
4
5
6
7
8
9
10
11
12
<div class="ui grid">
<div class="left floated six wide column">
<div class="ui segment">
Left floated
</div>
</div>
<div class="right floated six wide column">
<div class="ui segment">
Right floated
</div>
</div>
</div>

可以在任意级别 grid, row, column 指定文本的对齐方式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<div class="ui grid">
<div class="right aligned eight wide column">
right aligned column
</div>
<div class="left aligned eight wide column">
left aligned column
</div>
<div class="center aligned two column row">
<div class="column">
center aligned row
</div>
<div class="column">
center aligned row
</div>
</div>
<div class="sixteen wide right aligned column">
right aligned column
</div>
</div>

垂直居中对齐

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div class="ui middle aligned four column centered grid">
<div class="row">
<div class="column">
<img class="ui wireframe image" src="assets/images/wireframe/image.png">
</div>
<div class="column">
<img class="ui wireframe image" src="assets/images/wireframe/image.png">
<img class="ui wireframe image" src="assets/images/wireframe/image.png">
</div>
<div class="column">
<img class="ui wireframe image" src="assets/images/wireframe/image.png">
</div>
</div>
</div>

均分 column width

grid 指定 equal width 可以使 row 中的任意列宽度相同

1
2
3
4
5
6
7
8
9
10
11
12
13
<div class="ui equal width grid">
<div class="row">
<div class="column">column</div>
<div class="column">column</div>
<div class="column">column</div>
<div class="column">column</div>
</div>
<div class="row">
<div class="column">column</div>
<div class="column">column</div>
<div class="column">column</div>
</div>
</div>

codepen sample

See the Pen oByPyE by 三月沙 (@zhyq0826) on CodePen.

注意事项

  1. 2.3.2 中,column 的子元素不能直接是 row,如果要在 column 下使用 row 必须嵌套在 grid 中
1
2
3
4
5
6
7
8
<div class="fourteen wide column">
<div class="ui grid">
<!-- 必须要嵌套在 新的 grid 中 -->
<div class="row" >

</div>
</div>
</div>
三月沙 wechat
扫描关注 wecatch 的公众号