網(wǎng)格系統(tǒng)

基本網(wǎng)格

<div class="ui 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="column"></div><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="column"></div><div class="column"></div><div class="column"></div> </div>

網(wǎng)格將水平空間劃分為不可分割的單元，稱(chēng)為“列”。網(wǎng)格中的所有列必須指定其寬度作為總寬度的比例。所有網(wǎng)格系統(tǒng)每行有任意列，Semantic 默認(rèn)主題有 16 列.默認(rèn)是one wide。可自己指定每一列站多少wide。當(dāng)不給網(wǎng)格指定行時(shí)，行是“隱式的”，當(dāng)前面沒(méi)有更多的空間時(shí)，自動(dòng)轉(zhuǎn)換。

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

當(dāng)然也可以指定一個(gè)顯示的行元素，行是列的水平分組，指定網(wǎng)格的列數(shù)。

<div class="ui four column grid"><div class="row"><div class="column"></div><div class="column"></div><div class="column"></div></div><div class="column"></div><div class="column"></div><div class="column"></div><div class="column"></div> </div>

自動(dòng)列計(jì)數(shù)

如果你不知道你要設(shè)置幾列，可以使用equal width可以自動(dòng)劃分列寬度。

<div class="ui equal width grid"><div class="column">1</div><div class="column">2</div><div class="column">3</div><div class="equal width row"><div class="column">4</div><div class="column">5</div></div> </div>

分割

網(wǎng)格可以用分隔符分割，列與列之間有分割(divided)，行與行之間有分割(vertically divided)，單元分割(celled)，內(nèi)部單元分割(internally celled)。

<div class="ui celled grid"><div class="two column row"><div class="column"><p>1</p></div><div class="column"><p>2</p></div></div><div class="three column row"><div class="column"><p>3</p></div><div class="column"><p>4</p></div><div class="column"><p>5</p></div></div> </div>

這樣就能使列欄均勻占滿網(wǎng)格了。

可堆疊（Stackable）

可自動(dòng)將行堆疊到移動(dòng)設(shè)備上的列。

<div class="ui right aligned stackable grid"><div class="three column row"><div class="column green">1</div><div class="column orange">2</div><div class="column pink">3</div></div><div class="eight column row"><div class="column green">4</div><div class="column orange">5</div><div class="column pink">6</div><div class="column grey">7</div><div class="column green">8</div><div class="column orange">9</div><div class="column pink">10</div><div class="column grey">11</div></div> </div>

居中

如果一行沒(méi)有占滿所設(shè)置的列數(shù)，可以使用centered這個(gè)變量來(lái)使列居中。

<div class="ui two column centered grid"><div class="column grey">0</div><div class="four column row"><div class="column green">1</div><div class="column orange">2</div></div> </div>

浮動(dòng)

列可以在每一行的左或者右對(duì)齊。left floated, right floated。

拉伸

行可以拉伸內(nèi)容以占據(jù)整個(gè)列高度

<div class="ui three column divided grid"><div class="stretched row"><div class="column"><div class="ui segment">1</div></div><div class="column"><div class="ui segment">1</div><div class="ui segment">2</div></div><div class="column"><div class="ui segment">1</div><div class="ui segment">2</div><div class="ui segment">3</div></div></div> </div>

內(nèi)邊距

padded，vertically padded，horizontally padded。

與React結(jié)合

semantic-ui-react
例如：

import { Menu, Item, Container, Image } from 'semantic-ui-react' ...export default class MenuExampleInverted extends Component {state = {}handleItemClick = (e, { name }) => this.setState({ activeItem: name })render() {const { activeItem } = this.statereturn (<Menu inverted attached><Container><Menu.Menu position="left"><Item><Image src={iconImg} style={{width: 100}} /></Item></Menu.Menu><Menu.Menu position="right"><Item as="a" name='index' active={activeItem === 'index'} onClick={this.handleItemClick}>首頁(yè)</Item><Item as="a" name='getstart' active={activeItem === 'getstart'} onClick={this.handleItemClick}>新手入門(mén)</Item><Item as="a" name='login' active={activeItem === 'login'} onClick={this.handleItemClick}>登錄</Item><Item as="a" name='register' active={activeItem === 'register'} onClick={this.handleItemClick}>注冊(cè)</Item></Menu.Menu></Container></Menu>)} }

轉(zhuǎn)載于:https://www.cnblogs.com/sunshine21/p/10171426.html

總結(jié)

以上是生活随笔為你收集整理的semantic ui框架学习笔记三的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。