界限容器 - Tocas UI

說明

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

	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>

樣式變數

	說明	預設值	目標
--width	容器的寬度。	`1180px`	`.ts-container`
--gap	容器到螢幕邊緣的空隙。	`1rem`	`.ts-container`