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 alignedp>
div>
<div class="ui center aligned container">
  <p>center alignedp>
div>
<div class="ui right aligned container">
  <p>right alignedp>
div>
<div class="ui justified container">
  <p>justifiedp>
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>1p>div>
      <div class="column"><p>2p>div>
    div>
    <div class="ui vertical divider">anddiv>
  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擦除

分割线可以清除它上方的内容。