界限容器

限縮文字與排版寬度的容器。
說明

界限容器可以縮限內容的寬度並置中在畫面上,裡面亦能擺放網格系統

1180px 910px 720px
is-narrow is-very-narrow
預設容器 窄形容器 超窄容器
結構
界限容器

基本的界限容器寬度是 1180px

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

讓內容以更窄的方式呈現。

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

界限容器會與螢幕邊緣保持距離,這個距離可以調整;若搭配響應式設計使用,能在行動裝置上改用較小的內距提昇螢幕空間使用率。

寬鬆內距
預設內距
無內距
<div class="ts-box" style="background: var(--ts-gray-300)">
    <div class="ts-container is-padded">
        <div class="ts-box has-padded">
            寬鬆內距
        </div>
    </div>
    <div class="ts-container">
        <div class="ts-box has-padded">
            預設內距
        </div>
    </div>
    <div class="ts-container is-fitted">
        <div class="ts-box has-padded">
            無內距
        </div>
    </div>
</div>
樣式變數
說明

容器的寬度。

容器到螢幕邊緣的空隙。

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