| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475 |
- Title : 分隔線
- Description: 這裡開啟了另一個話題。
- Definitions:
- - Title : 種類
- Description: 分隔線具有不同的種類。
- Sections :
- - Title : 基本
- Description: 一個最基本的分隔線。
- Since : 2.3.3
- HTML : |
- <p>我是微笑小安安，歡迎來到小安網站。</p>
- <hr class="ts [[divider]]">
- <p>你將會在這裡看見一個魔法師的日常生活，</p>
- <p>沒錯，只要你能夠單身三十年，你也可以跟我一樣成為魔法師。</p>
- - Title : 段落
- Description: 分隔線可以增加間距用以區分大型段落。
- Since : 2.3.3
- HTML : |
- 這裡是一個區段，然後下一行會是新世界。
- <hr class="ts [[section]] divider">
- 哈囉！世界！
- - Title : 水平分隔線
- Description: 這種分隔線可以讓你在中間插入文字。
- Since : 2.3.3
- HTML : |
- <p>嗶嗶嗶。</p>
- <div class="ts [[horizontal]] divider">我是分隔線</div>
- <p>沒錯，你可以在分隔線中間插入一小段文字，</p>
- <p>而且只需要一個元素。</p>
- - Title : 外觀
- Description: 分隔線的外觀可以有所不同。
- Sections :
- - Title : 隱藏
- Description: 不可見的分隔線，但仍帶有分隔效果。
- Since : 2.3.3
- HTML : |
- <p>嗶嗶嗶。</p>
- <div class="ts [[hidden]] divider">我是分隔線</div>
- <p>你有看見中間的分隔線嗎？。</p>
- <p>很多人看不見。</p>
- <p>但是很多人不說。</p>
- - Title : 縮減
- Description: 分隔線可以沒有間距。
- Since : 2.3.3
- HTML : |
- 這個分隔線會沒有間距，字看起來會跟分隔線黏在一起。
- <hr class="ts [[fitted]] divider">
- 當然這一行也不例外。
- - Title : 反色
- Description: 分隔線的顏色是相反色。
- Since : 2.3.3
- HTML : |
- <div class="ts inverted {{segment}}">
- 下面的分隔線會和一般的分隔線顏色有所不同。
- <hr class="ts [[inverted]] divider">
- 看見了嗎！奇蹟啊！
- </div>
- - Title : 清理浮動
- Description: |
- 分隔線可以透過 `clear: both` 清理上一個元素的浮動狀態。
- Since : 2.3.3
- HTML : |
- 月月，搭拉安！
- <hr class="ts [[clearing]] divider">
- 月月，搭拉安！
|
