semantic UI學習（二）

我這裡只是學習記錄，參考文件更加生動https://zijieke.com/semantic-ui/elements/container.php#/introduction

容器

容器是一個元素，可以根據使用者螢幕的大小將頁面元素包含到合理的最大寬度。

一個標準的容器

<div class="ui container">
  <p></p>
</div>

文字容器

可以降低其最大寬度更自然地容納一列文字

<div class="ui text container">
</div>

文字對齊

<div class="ui left aligned container"> 
  <p>left aligned</p>
</div>
<div class="ui center aligned container">
  <p>center aligned</p>
</div>
<div class="ui right aligned container">
  <p>right aligned</p>
</div>
<div class="ui justified container">
  <p>justified</p>
</div>

流式

<div class="ui fluid container">
  Fluid
</div>

Divider分割條

<div class="ui divider"></div>

Vertical Divider垂直分割條

只能1：1的左右分割

<div class="ui segment">
    <div class="ui two column grid">
      <div class="column"><p>1</p></div>
      <div class="column"><p>2</p></div>
    </div>
    <div class="ui vertical divider">and</div>
  </div>

Horizontal Divider水平分割線

可以icon與文字居中出現

<h4 class="ui horizontal divider header">
  <i class="tag icon"></i>
  描述
</h4>

Inverted反色

讓分割線的顏色反過來

Fitted填滿

分割線不會具有margin效果，文字排版不受影響

<div class="ui segment">
  p1
  <div class="ui fitted divider"></div>
  p2
</div>

hidden隱藏

分割線可以隱藏

section段落

分割線可以用來更好的分割段落間距

Clearing擦除

分割線可以清除它上方的內容。