此版本 (4.2) 已經過時,點擊此處檢視最新版本 (5.0)
台灣正體

網格系統

針對內容格局、元件所設計的排版系統。
範例
明暗色系
遵循使用者設定
遵循使用者設定
亮色
暗色
縮放
標準
放大
標準
縮小
<div class="ts-grid">
    <div class="column is-4-wide"></div>
    <div class="column is-4-wide"></div>
    <div class="column is-4-wide"></div>
    <div class="column is-4-wide"></div>
</div>
概要

在 Tocas UI 裡,網格系統的每行都被劃分為 16 格寬度。為了方便展示網格系統,我們將背景加上了灰色與輔助數字,在實際應用中這些都並不會出現。

概念
欄位與寬度

被劃分開來的區塊是「欄位」,每個欄位的寬度都可以自己決定。

Tocas UI 的網格系統每行皆有 16 格寬。這個範例由 2、8、6 格寬的欄位所組成,等於 2 + 8 + 6 = 16 也剛好達到了一行的最大格數。

沒有指定寬度的欄位會以其內容寬度為主。

<div class="ts-grid">
    <div class="column is-2-wide"></div>
    <div class="column is-8-wide"></div>
    <div class="column is-6-wide"></div>
</div>
欄位換行

如果單行欄位的寬度加起來超過 16 格寬,溢出來的欄位會自動換行。這個範例由 5、6、8 格寬的欄位所組成,等於 5 + 6 + 8 = 19,多出來的欄位會換行。

<div class="ts-grid">
    <div class="column is-5-wide"></div>
    <div class="column is-6-wide"></div>
    <div class="column is-8-wide"></div>
</div>
欄位數量

若你希望單行有 3 個欄位,你可能會發現 16 不能被 3 整除。不過你能透過 is-1-columnsis-10-columns 直接指定單行要有幾個欄位。

<div class="ts-grid is-3-columns">
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
</div>
<div class="ts-grid is-6-columns">
    <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>
欄位均分

若希望每個欄位都能有相同的寬度,就可以使用均分。舉例來說:2 個欄位會各佔 50%,而 3 個欄位會均分成 33%…以此類推。

<div class="ts-grid is-evenly-divided">
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
</div>
巢狀式網格

網格系統內可以還可以再有另一個網格系統。這樣你便能在單個欄位裡再進行寬度細分。

<div class="ts-grid is-2-columns">
    <div class="column">
        <div class="ts-grid is-4-columns">
            <div class="column"></div>
            <div class="column"></div>
            <div class="column"></div>
            <div class="column"></div>
        </div>
    </div>
    <div class="column"></div>
</div>
欄位
流動寬度

使某個欄位的寬度填滿剩餘空白位置。

<div class="ts-grid">
    <div class="column is-4-wide"></div>
    <div class="column is-fluid"></div>
    <div class="column is-4-wide"></div>
</div>

把某個欄位的排序調到第一個或是最後一個。

<div class="ts-grid">
    <div class="column is-4-wide"></div>
    <div class="column is-4-wide"></div>
    <div class="column is-8-wide is-first"></div>
</div>
<div class="ts-grid">
    <div class="column is-8-wide is-last"></div>
    <div class="column is-4-wide"></div>
    <div class="column is-4-wide"></div>
</div>
指定順序

透過 is-order-1is-order-10 重新排序欄位,使用此功能時所有的欄位都必須指定順序。適合搭配「響應式設計」功能來在行動裝置上重新排序欄位。

<div class="ts-grid">
    <div class="column is-2-wide is-order-4"></div>
    <div class="column is-3-wide is-order-3"></div>
    <div class="column is-4-wide is-order-2"></div>
    <div class="column is-7-wide is-order-1"></div>
</div>
外觀
水平對齊

項目可以選擇靠左、中或右對齊。

<div class="ts-grid is-start-aligned">
    <div class="column is-3-wide"></div>
    <div class="column is-3-wide"></div>
    <div class="column is-3-wide"></div>
</div>
<div class="ts-grid is-center-aligned">
    <div class="column is-3-wide"></div>
    <div class="column is-3-wide"></div>
    <div class="column is-3-wide"></div>
</div>
<div class="ts-grid is-end-aligned">
    <div class="column is-3-wide"></div>
    <div class="column is-3-wide"></div>
    <div class="column is-3-wide"></div>
</div>
垂直對齊

可以根據項目之間的高度,更改其上、中或下對齊方式。

<div class="ts-grid is-top-aligned is-3-columns">
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
</div>
<div class="ts-grid is-middle-aligned is-3-columns">
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
</div>
<div class="ts-grid is-bottom-aligned is-3-columns">
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
</div>
高度拉伸的

如果欄位裡有箱型容器片段,你會需要此樣式拉伸欄位裡的第一層元素,使其高度都與其他欄位相同。

這個片段有一行文字。

這個片段有兩行文字。

這個片段有兩行文字。

這個片段有三行文字。

這個片段有三行文字。

每個片段高度都一樣。

<div class="ts-grid is-stretched is-3-columns">
    <div class="column">
        <div class="ts-segment">
            <p>這個片段有一行文字。</p>
        </div>
    </div>
    <div class="column">
        <div class="ts-segment">
            <p>這個片段有兩行文字。</p>
            <p>這個片段有兩行文字。</p>
        </div>
    </div>
    <div class="column">
        <div class="ts-segment">
            <p>這個片段有三行文字。</p>
            <p>這個片段有三行文字。</p>
            <p>每個片段高度都一樣。</p>
        </div>
    </div>
</div>
分隔的

讓欄位之間有垂直分隔線區隔項目,僅適用於單行的網格系統。

<div class="ts-grid is-divided is-3-columns">
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
</div>
空白圍繞

使空白圍繞在欄位之間或是周圍。

<div class="ts-grid is-spaced-between">
    <div class="column is-3-wide"></div>
    <div class="column is-3-wide"></div>
    <div class="column is-3-wide"></div>
</div>
<div class="ts-grid is-spaced-around">
    <div class="column is-3-wide"></div>
    <div class="column is-3-wide"></div>
    <div class="column is-3-wide"></div>
</div>
顛倒順序

顛倒網格系統裡所有欄位順序,你可以透過搭配「響應式設計」功能來在行動裝置上切換這個樣式(如:將側邊欄改成優先順位)。

<div class="ts-grid is-reversed">
    <div class="column is-2-wide"></div>
    <div class="column is-4-wide"></div>
    <div class="column is-10-wide"></div>
</div>
層疊的

這會不論原訂的欄位寬度,直接將所有欄位各自獨立成為一行(便是將所有欄位設置為 16 格寬)。適合搭配「響應式設計」功能在行動裝置上讓所有欄位層疊起來。

<div class="ts-grid is-stacked">
    <div class="column is-2-wide"></div>
    <div class="column is-3-wide"></div>
    <div class="column is-4-wide"></div>
</div>
密度

網格系統裡欄位的間距可以更密或是更寬鬆。

<div class="ts-grid is-relaxed is-3-columns">
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
</div>
<div class="ts-grid is-3-columns">
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
</div>
<div class="ts-grid is-compact is-3-columns">
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
</div>
響應式設計

在 Tocas UI 裡,所有東西都可以套用響應式設計系統,所以我們建議你閱讀響應式設計頁面。下列範例僅作為基本的指導教學。

指定寬度

欄位所佔的格數寬度可以依據裝置而有所不同,相關介面尺寸請參閱響應式設計頁面。舉例來說:tablet+:is-8-wide 會在平板或更大的裝置上以 8 格寬的方式呈現。

<div class="ts-grid">
    <div class="column mobile:is-16-wide tablet+:is-8-wide"></div>
    <div class="column mobile:is-16-wide tablet+:is-8-wide"></div>
    <div class="column mobile:is-16-wide tablet+:is-8-wide"></div>
    <div class="column mobile:is-16-wide tablet+:is-8-wide"></div>
</div>
自動層疊

這會不論原訂的欄位寬度,在手機裝置時套用 is-stacked 層疊樣式並令所有欄位各自獨立成為一行(便是將所有欄位設置為 16 格寬)。

<div class="ts-grid mobile:is-stacked">
    <div class="column is-4-wide"></div>
    <div class="column is-4-wide"></div>
    <div class="column is-4-wide"></div>
    <div class="column is-4-wide"></div>
</div>
指定數量

你可以在指定裝置上變更一個網格系統的欄位數量,這個範例的 mobile:is-2-columns 表示行動裝置會有 2 欄,而 tablet+:is-3-columns 是指平板或是更大的裝置會有 3 欄。

<div class="ts-grid mobile:is-2-columns tablet+:is-3-columns">
    <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>
可見度

某些欄位可以只在指定介面尺寸上呈現、隱藏,相關使用方式請參閱響應式設計頁面。

<div class="ts-grid">
    <div class="column mobile:has-hidden is-4-wide"></div>
    <div class="column tablet+:has-hidden is-4-wide"></div>
    <div class="column desktop-:has-hidden is-4-wide"></div>
    <div class="column widescreen:has-hidden is-4-wide"></div>
</div>
組合應用
搜尋欄位

通常搜尋欄位會有流動欄位與一個固定欄位,沒有指定寬度的欄位會以其內容寬度為主。

<div class="ts-grid">
    <div class="column is-fluid">
        <div class="ts-input">
            <input type="text" class="input" placeholder="搜尋文章…" />
        </div>
    </div>
    <div class="column">
        <button class="ts-button">送出</button>
    </div>
</div>
變數與屬性
說明

欄位之間的空白間隙像素寬度。

在尋找相似的元件嗎?
由來自 台灣的 Yami Odymel 所設計,當然還有貢獻者們的愛心❤️。原始碼授權方式為 MIT,文件則為 CC 0 公眾領域。還請盡情地使用、分享或一同改進。Tocas UI 是卡莉絲伊繁星的設計語言,而卡莉絲伊繁星屬對空音商事
台灣正體語系協作者:Yami Odymel、coin3x、Sea-n
擁有 Tocas UI 的所屬組織商標