semantic-ui 容器与栅格

Posted 2020-11-02 寻觅beyond

　　semantic中可以指定one-sixteen这16个单词来指定网格column所占的长度。也就是说，在网页中，一行最多只有16个column，超过16个之后，自动移到下一行。

　　栅格可以使用i，div，span标签，尽量不要使用button和p标签

1、定义栅格

　　注意，单独将标签的class设置为column是不行的，因为这些标签要位于一个class为ui grid的标签下才行。

<div class="ui grid">
	<div class="column red"></div>
	<div class="column yellow"></div>
</div>

　　

 

2、指定栅格长度 

　　semantic中可以指定one-sixteen这16个单词来指定网格column所占的长度，光是数量单词还不行，还要使用wide。

<div class="ui grid">
	<i class="two wide column red"></i>
	<i class="three wide column yellow"></i>
</div>

　　

 

3、栅格嵌套

　　栅格嵌套和按钮嵌套很相似。需要注意的是：

　　1、嵌套的时候，每一个要进行嵌套的栅格都要使用ui grid，就像下面的第二个two wide column。

　　2、每一个ui grid都会在内部分成16份，没错，即使将一个two wide column中间嵌套，中间也会被分成16份，而不是两份。16份才能填满。

<div class="ui grid">
	<div class="two wide column red"></div>
	<div class="two wide column">
		<div class="ui grid">
			<div class="four wide column green"></div>
			<div class="four wide column black"></div>
			<div class="four wide column green"></div>
			<div class="four wide column black"></div>
			<div class="four wide column green"></div>
			<div class="four wide column black"></div>
			<div class="four wide column green"></div>
			<div class="four wide column black"></div>
		</div>
	</div>
	<div class="two wide column blue"></div>
</div>