container.yml 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138
  1. Title : 容器
  2. Description: 協助你保持身材。
  3. Layout : Single
  4. Outline : |
  5. <p>容器用來保持文字在中間,如此一來就不會因為螢幕太寬而導致文字區域太寬,你也可以在裡面放置格線系統,這樣就可以讓內容集中在螢幕中間。這裡是不同容器之間的寬度資訊表格。</p>
  6. <table class="ts small stackable definition table">
  7. <thead>
  8. <tr>
  9. <th></th>
  10. <th>1200px</th>
  11. <th>100%</th>
  12. <th>860px</th>
  13. <th>992px</th>
  14. <th>700px</th>
  15. </tr>
  16. </thead>
  17. <tbody>
  18. <tr>
  19. <td>樣式名稱</td>
  20. <td><span class="ts label">container</span></td>
  21. <td><span class="ts label">fluid container</span></td>
  22. <td><span class="ts label">text container</span></td>
  23. <td><span class="ts label">narrow container</span></td>
  24. <td><span class="ts label">very narrow container</span></td>
  25. </tr>
  26. <tr>
  27. <td>裝置稱呼</td>
  28. <td>容器</td>
  29. <td>流動容器</td>
  30. <td>文字容器</td>
  31. <td>窄形容器</td>
  32. <td>超窄容器</td>
  33. </tr>
  34. </tbody>
  35. </table>
  36. Definitions:
  37. - Title : 容器
  38. Description: 容器本身。
  39. Sections :
  40. - Title : 基本
  41. Description: 一個最基本的容器。
  42. Since : 2.3.3
  43. HTML : |
  44. <div class="ts [[container]]">
  45. 保障任何人的著作權,其中包括二次創作,二次創作僅可在原作者未聲明否決下進行發佈和創作, 在未經原作允許下衍生任何具有原作之內容,基於衍生理念與內容為判決要點,
  46. 原作必須基於合理使用之理念提出移除、上訴任何非符合合理使用概念的衍生內容, 合理使用的理念如下: 使用目的及性質 其著重點在於內容是否有所轉化,如衍生創作另有新意,非僅複製原作內容。
  47. 版權作品性質 以真實、事實所闡述之作品較虛構作品來的能夠符合合理使用。 使用版權作品的多寡 引用少量的原創著作比起引用大量來要的符合合理使用,但倘若原創著作成為衍生著作之核心內容,
  48. 即使少量的原創著作被引用,也較不可能符合合理使用之原則。 使用行為對於版權作品的市場或價值之影響 透過原創著作的內容而進行獲利並造成原創著作部分損害,較不符合合理使用之原則。
  49. </div>
  50. - Title : 文字容器
  51. Description: 專門擺放文字的容器,比起一般容器更窄而且字更大。
  52. Since : 2.3.3
  53. HTML : |
  54. <div class="ts [[text]] container">
  55. 保障任何人的著作權,其中包括二次創作,二次創作僅可在原作者未聲明否決下進行發佈和創作, 在未經原作允許下衍生任何具有原作之內容,基於衍生理念與內容為判決要點,
  56. 原作必須基於合理使用之理念提出移除、上訴任何非符合合理使用概念的衍生內容, 合理使用的理念如下: 使用目的及性質 其著重點在於內容是否有所轉化,如衍生創作另有新意,非僅複製原作內容。
  57. 版權作品性質 以真實、事實所闡述之作品較虛構作品來的能夠符合合理使用。 使用版權作品的多寡 引用少量的原創著作比起引用大量來要的符合合理使用,但倘若原創著作成為衍生著作之核心內容,
  58. 即使少量的原創著作被引用,也較不可能符合合理使用之原則。 使用行為對於版權作品的市場或價值之影響 透過原創著作的內容而進行獲利並造成原創著作部分損害,較不符合合理使用之原則。
  59. </div>
  60. - Title : 窄的
  61. Description: 比起一般要來的窄的容器。
  62. Since : 2.3.3
  63. HTML : |
  64. <div class="ts [[narrow]] container">
  65. 保障任何人的著作權,其中包括二次創作,二次創作僅可在原作者未聲明否決下進行發佈和創作, 在未經原作允許下衍生任何具有原作之內容,基於衍生理念與內容為判決要點,
  66. 原作必須基於合理使用之理念提出移除、上訴任何非符合合理使用概念的衍生內容, 合理使用的理念如下: 使用目的及性質 其著重點在於內容是否有所轉化,如衍生創作另有新意,非僅複製原作內容。
  67. 版權作品性質 以真實、事實所闡述之作品較虛構作品來的能夠符合合理使用。 使用版權作品的多寡 引用少量的原創著作比起引用大量來要的符合合理使用,但倘若原創著作成為衍生著作之核心內容,
  68. 即使少量的原創著作被引用,也較不可能符合合理使用之原則。 使用行為對於版權作品的市場或價值之影響 透過原創著作的內容而進行獲利並造成原創著作部分損害,較不符合合理使用之原則。
  69. </div>
  70. - Title : 更窄的
  71. Description: 比起窄容器還要來的更窄。
  72. Since : 2.3.3
  73. HTML : |
  74. <div class="ts [[very narrow]] container">
  75. 保障任何人的著作權,其中包括二次創作,二次創作僅可在原作者未聲明否決下進行發佈和創作, 在未經原作允許下衍生任何具有原作之內容,基於衍生理念與內容為判決要點,
  76. 原作必須基於合理使用之理念提出移除、上訴任何非符合合理使用概念的衍生內容, 合理使用的理念如下: 使用目的及性質 其著重點在於內容是否有所轉化,如衍生創作另有新意,非僅複製原作內容。
  77. 版權作品性質 以真實、事實所闡述之作品較虛構作品來的能夠符合合理使用。 使用版權作品的多寡 引用少量的原創著作比起引用大量來要的符合合理使用,但倘若原創著作成為衍生著作之核心內容,
  78. 即使少量的原創著作被引用,也較不可能符合合理使用之原則。 使用行為對於版權作品的市場或價值之影響 透過原創著作的內容而進行獲利並造成原創著作部分損害,較不符合合理使用之原則。
  79. </div>
  80. - Title : 流動
  81. Description: 讓容器的寬度隨父容器決定,能多寬就多寬。
  82. Since : 2.3.3
  83. HTML : |
  84. <div class="ts [[fluid]] container">
  85. 保障任何人的著作權,其中包括二次創作,二次創作僅可在原作者未聲明否決下進行發佈和創作, 在未經原作允許下衍生任何具有原作之內容,基於衍生理念與內容為判決要點,
  86. 原作必須基於合理使用之理念提出移除、上訴任何非符合合理使用概念的衍生內容, 合理使用的理念如下: 使用目的及性質 其著重點在於內容是否有所轉化,如衍生創作另有新意,非僅複製原作內容。
  87. 版權作品性質 以真實、事實所闡述之作品較虛構作品來的能夠符合合理使用。 使用版權作品的多寡 引用少量的原創著作比起引用大量來要的符合合理使用,但倘若原創著作成為衍生著作之核心內容,
  88. 即使少量的原創著作被引用,也較不可能符合合理使用之原則。 使用行為對於版權作品的市場或價值之影響 透過原創著作的內容而進行獲利並造成原創著作部分損害,較不符合合理使用之原則。
  89. </div>
  90. - Title : 和其他元件搭配
  91. Description: 容器可以擺放至元件內或是和其他元件搭配。
  92. Sections :
  93. - Title : 選單
  94. Description: 你可以在選單內擺放容器,如此一來選單內的項目就不會過寬。
  95. Since : 2.3.3
  96. HTML : |
  97. <div class="ts menu">
  98. <div class="ts very narrow [[container]]">
  99. <a class="item">首頁</a>
  100. <a class="item">文件</a>
  101. <a class="item">
  102. <i class="download {{icon}}"></i>
  103. 下載
  104. </a>
  105. <a class="item">關於</a>
  106. </div>
  107. </div>
  108. - Title : 網格系統
  109. Description: 一個網格系統本身就可以是容器,這樣就不會讓網格系統過寬貼齊螢幕邊緣。
  110. Since : 2.3.3
  111. HTML : |
  112. <div class="ts four column very narrow [[container]] [[grid]]">
  113. <div class="column"></div>
  114. <div class="column"></div>
  115. <div class="column"></div>
  116. <div class="column"></div>
  117. </div>
  118. - Title : 片段
  119. Description: 片段本身就可以是一個容器,避免太寬而貼齊螢幕左右邊緣。
  120. Since : 2.3.3
  121. HTML : |
  122. <div class="ts very narrow [[container]] [[segment]]">
  123. 保障任何人的著作權,其中包括二次創作,二次創作僅可在原作者未聲明否決下進行發佈和創作, 在未經原作允許下衍生任何具有原作之內容,基於衍生理念與內容為判決要點,
  124. 原作必須基於合理使用之理念提出移除、上訴任何非符合合理使用概念的衍生內容, 合理使用的理念如下: 使用目的及性質 其著重點在於內容是否有所轉化,如衍生創作另有新意,非僅複製原作內容。
  125. 版權作品性質 以真實、事實所闡述之作品較虛構作品來的能夠符合合理使用。 使用版權作品的多寡 引用少量的原創著作比起引用大量來要的符合合理使用,但倘若原創著作成為衍生著作之核心內容,
  126. 即使少量的原創著作被引用,也較不可能符合合理使用之原則。 使用行為對於版權作品的市場或價值之影響 透過原創著作的內容而進行獲利並造成原創著作部分損害,較不符合合理使用之原則。
  127. </div>