台灣正體

界限容器

避免文字與排版過度寬敞的響應式限制容器。
說明

容器能讓內容保持最大寬度而不會被過度延展,如此一來就不會因為螢幕太寬而導致內容格局過寬。裡面亦能放置網格系統,這樣就可以讓內容集中在螢幕中間。這裡是不同容器之間的寬度資訊。

內容
界限容器

一個最基本且常用的界限容器是 1180px 為寬度上限,這可以讓文字與內容在螢幕上置中而不會過寬。

保障任何人的著作權,其中包括二次創作,二次創作僅可在原作者未聲明否決下進行發佈和創作,在未經原作允許下衍生任何具有原作之內容,基於衍生理念與內容為判決要點,原作必須基於合理使用之理念提出移除、上訴任何非符合合理使用概念的衍生內容,合理使用的理念如下:使用目的及性質 其著重點在於內容是否有所轉化,如衍生創作另有新意,非僅複製原作內容。版權作品性質 以真實、事實所闡述之作品較虛構作品來的能夠符合合理使用。使用版權作品的多寡 引用少量的原創著作比起引用大量來要的符合合理使用,但倘若原創著作成為衍生著作之核心內容,即使少量的原創著作被引用,也較不可能符合合理使用之原則。使用行為對於版權作品的市場或價值之影響 透過原創著作的內容而進行獲利並造成原創著作部分損害,較不符合合理使用之原則。
<div class="ts-container">
    <div class="ts-segment">
        保障任何人的著作權,其中包括二次創作,二次創作僅可在原作者未聲明否決下進行發佈和創作,在未經原作允許下衍生任何具有原作之內容,基於衍生理念與內容為判決要點,原作必須基於合理使用之理念提出移除、上訴任何非符合合理使用概念的衍生內容,合理使用的理念如下:使用目的及性質 其著重點在於內容是否有所轉化,如衍生創作另有新意,非僅複製原作內容。版權作品性質 以真實、事實所闡述之作品較虛構作品來的能夠符合合理使用。使用版權作品的多寡 引用少量的原創著作比起引用大量來要的符合合理使用,但倘若原創著作成為衍生著作之核心內容,即使少量的原創著作被引用,也較不可能符合合理使用之原則。使用行為對於版權作品的市場或價值之影響 透過原創著作的內容而進行獲利並造成原創著作部分損害,較不符合合理使用之原則。
    </div>
</div>
外觀
窄度

縮限容器最大的寬度,讓內容與格局以更窄的方式呈現。

保障任何人的著作權,其中包括二次創作,二次創作僅可在原作者未聲明否決下進行發佈和創作,在未經原作允許下衍生任何具有原作之內容,基於衍生理念與內容為判決要點,原作必須基於合理使用之理念提出移除、上訴任何非符合合理使用概念的衍生內容,合理使用的理念如下:使用目的及性質 其著重點在於內容是否有所轉化,如衍生創作另有新意,非僅複製原作內容。版權作品性質 以真實、事實所闡述之作品較虛構作品來的能夠符合合理使用。使用版權作品的多寡 引用少量的原創著作比起引用大量來要的符合合理使用,但倘若原創著作成為衍生著作之核心內容,即使少量的原創著作被引用,也較不可能符合合理使用之原則。使用行為對於版權作品的市場或價值之影響 透過原創著作的內容而進行獲利並造成原創著作部分損害,較不符合合理使用之原則。
保障任何人的著作權,其中包括二次創作,二次創作僅可在原作者未聲明否決下進行發佈和創作,在未經原作允許下衍生任何具有原作之內容,基於衍生理念與內容為判決要點,原作必須基於合理使用之理念提出移除、上訴任何非符合合理使用概念的衍生內容,合理使用的理念如下:使用目的及性質 其著重點在於內容是否有所轉化,如衍生創作另有新意,非僅複製原作內容。版權作品性質 以真實、事實所闡述之作品較虛構作品來的能夠符合合理使用。使用版權作品的多寡 引用少量的原創著作比起引用大量來要的符合合理使用,但倘若原創著作成為衍生著作之核心內容,即使少量的原創著作被引用,也較不可能符合合理使用之原則。使用行為對於版權作品的市場或價值之影響 透過原創著作的內容而進行獲利並造成原創著作部分損害,較不符合合理使用之原則。
<div class="ts-container is-narrow">
    <div class="ts-segment">
        保障任何人的著作權,其中包括二次創作,二次創作僅可在原作者未聲明否決下進行發佈和創作,在未經原作允許下衍生任何具有原作之內容,基於衍生理念與內容為判決要點,原作必須基於合理使用之理念提出移除、上訴任何非符合合理使用概念的衍生內容,合理使用的理念如下:使用目的及性質 其著重點在於內容是否有所轉化,如衍生創作另有新意,非僅複製原作內容。版權作品性質 以真實、事實所闡述之作品較虛構作品來的能夠符合合理使用。使用版權作品的多寡 引用少量的原創著作比起引用大量來要的符合合理使用,但倘若原創著作成為衍生著作之核心內容,即使少量的原創著作被引用,也較不可能符合合理使用之原則。使用行為對於版權作品的市場或價值之影響 透過原創著作的內容而進行獲利並造成原創著作部分損害,較不符合合理使用之原則。
    </div>
</div>
<div class="ts-container is-very-narrow">
    <div class="ts-segment">
        保障任何人的著作權,其中包括二次創作,二次創作僅可在原作者未聲明否決下進行發佈和創作,在未經原作允許下衍生任何具有原作之內容,基於衍生理念與內容為判決要點,原作必須基於合理使用之理念提出移除、上訴任何非符合合理使用概念的衍生內容,合理使用的理念如下:使用目的及性質 其著重點在於內容是否有所轉化,如衍生創作另有新意,非僅複製原作內容。版權作品性質 以真實、事實所闡述之作品較虛構作品來的能夠符合合理使用。使用版權作品的多寡 引用少量的原創著作比起引用大量來要的符合合理使用,但倘若原創著作成為衍生著作之核心內容,即使少量的原創著作被引用,也較不可能符合合理使用之原則。使用行為對於版權作品的市場或價值之影響 透過原創著作的內容而進行獲利並造成原創著作部分損害,較不符合合理使用之原則。
    </div>
</div>
流動的

界限容器也能以 100% 的寬度貼齊其父容器。

保障任何人的著作權,其中包括二次創作,二次創作僅可在原作者未聲明否決下進行發佈和創作,在未經原作允許下衍生任何具有原作之內容,基於衍生理念與內容為判決要點,原作必須基於合理使用之理念提出移除、上訴任何非符合合理使用概念的衍生內容,合理使用的理念如下:使用目的及性質 其著重點在於內容是否有所轉化,如衍生創作另有新意,非僅複製原作內容。版權作品性質 以真實、事實所闡述之作品較虛構作品來的能夠符合合理使用。使用版權作品的多寡 引用少量的原創著作比起引用大量來要的符合合理使用,但倘若原創著作成為衍生著作之核心內容,即使少量的原創著作被引用,也較不可能符合合理使用之原則。使用行為對於版權作品的市場或價值之影響 透過原創著作的內容而進行獲利並造成原創著作部分損害,較不符合合理使用之原則。
<div class="ts-container is-fluid">
    <div class="ts-segment">
        保障任何人的著作權,其中包括二次創作,二次創作僅可在原作者未聲明否決下進行發佈和創作,在未經原作允許下衍生任何具有原作之內容,基於衍生理念與內容為判決要點,原作必須基於合理使用之理念提出移除、上訴任何非符合合理使用概念的衍生內容,合理使用的理念如下:使用目的及性質 其著重點在於內容是否有所轉化,如衍生創作另有新意,非僅複製原作內容。版權作品性質 以真實、事實所闡述之作品較虛構作品來的能夠符合合理使用。使用版權作品的多寡 引用少量的原創著作比起引用大量來要的符合合理使用,但倘若原創著作成為衍生著作之核心內容,即使少量的原創著作被引用,也較不可能符合合理使用之原則。使用行為對於版權作品的市場或價值之影響 透過原創著作的內容而進行獲利並造成原創著作部分損害,較不符合合理使用之原則。
    </div>
</div>
內距調整

加大內距能讓容器跟邊緣之間有更大的空白。可以搭配響應式設計使用,如:在行動裝置上使用較小的內距以避免侵佔頁面寬度。如果你想讓裡面的元件貼邊,可以參考輔助樣式的貼邊外觀。

較寬鬆的內距
預設內距
無內距
<div class="ts-box" style="background: var(--ts-gray-300);">
    <div class="ts-container is-padded">
        <div class="ts-segment">
            較寬鬆的內距
        </div>
    </div>
    <div class="ts-container">
        <div class="ts-segment">
            預設內距
        </div>
    </div>
    <div class="ts-container is-fitted">
        <div class="ts-segment">
            無內距
        </div>
    </div>
</div>
由來自 台灣的 Yami Odymel 所設計,當然還有貢獻者們的愛心❤️。原始碼授權方式為 MIT,文件則為 CC 0 公眾領域。還請盡情地使用、分享或一同改進。Tocas UI 是卡莉絲伊繁星的設計語言,而卡莉絲伊繁星屬對空音商事
台灣正體語系協作者:Yami Odymel、coin3x、Sea-n
擁有 Tocas UI 的所屬組織商標