網格系統

基本網格

<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>

網格將水平空間劃分為不可分割的單元，稱為“列”。網格中的所有列必須指定其寬度作為總寬度的比例。所有網格系統每行有任意列，Semantic 默認主題有 16 列.默認是one wide。可自己指定每一列站多少wide。當不給網格指定行時，行是“隱式的”，當前面沒有更多的空間時，自動轉換。

<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>

當然也可以指定一個顯示的行元素，行是列的水平分組，指定網格的列數。

<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>

自動列計數

如果你不知道你要設置幾列，可以使用equal width可以自動劃分列寬度。

<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>

分割

網格可以用分隔符分割，列與列之間有分割(divided)，行與行之間有分割(vertically divided)，單元分割(celled)，內部單元分割(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>

這樣就能使列欄均勻占滿網格了。

可堆疊（Stackable）

可自動將行堆疊到移動設備上的列。

<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>

居中

如果一行沒有占滿所設置的列數，可以使用centered這個變量來使列居中。

<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>

浮動

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

拉伸

行可以拉伸內容以占據整個列高度

<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>

內邊距

padded，vertically padded，horizontally padded。

與React結合

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}>首頁</Item><Item as="a" name='getstart' active={activeItem === 'getstart'} onClick={this.handleItemClick}>新手入門</Item><Item as="a" name='login' active={activeItem === 'login'} onClick={this.handleItemClick}>登錄</Item><Item as="a" name='register' active={activeItem === 'register'} onClick={this.handleItemClick}>注冊</Item></Menu.Menu></Container></Menu>)} }

轉載于:https://www.cnblogs.com/sunshine21/p/10171426.html

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。