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擦除

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

猜你喜欢

转载自blog.csdn.net/s_h_e_l_l_e_y/article/details/110290810