标签：Semantic Bottom Top 用法 Middle 组件 日志 segment

文章目录

• 一、组件的简单介绍
• 二、组件的一些用法
• • （1）基本用法
  • （2）与stackable,field组件共用
  • （3）segment的嵌套共用
  • （4）segment的堆叠使用

---

一、组件的简单介绍

    通过段，创建相关内容的分组，使得页面布局更具层次感。

组件可以根据它们出现的屏幕大小响应性地调整其最大宽度，方便了响应式页面的开发

二、组件的一些用法

（1）基本用法

语法：

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

如果不需要边框的话，可以在属性上加“basic”

<div class="ui basic segment">
</div>

还可以拓展一下，成为一个占位符片段
这样使用图标占位，是不是很有感觉~

<div class="ui placeholder segment" style="margin: 20px">
    <div class="ui icon header">
        <i class="pdf google outline icon"></i>
        没有可用的谷歌文件
    </div>
    <div class="ui primary button">点击上传</div>
</div>

（2）与stackable,field组件共用

<div class="ui placeholder segment">
  <div class="ui two column stackable center aligned grid">
    <div class="ui vertical divider">Or</div>
    <div class="middle aligned row">
      <div class="column">
        <div class="ui icon header">
          <i class="search icon"></i>
          Find Country
        </div>
        <div class="field">
          <div class="ui search">
            <div class="ui icon input">
              <input class="prompt" type="text" placeholder="Search countries...">
              <i class="search icon"></i>
            </div>
            <div class="results"></div>
          </div>
        </div>
      </div>
      <div class="column">
        <div class="ui icon header">
          <i class="world icon"></i>
          Add New Country
        </div>
        <div class="ui primary button">
          Create
        </div>
      </div>
    </div>
  </div>
</div>

下方的为结合使用，和基本用法排列在一起，是不是页面的布局更加好看了些。

（3）segment的嵌套共用

<div class="ui segments">
  <div class="ui segment">
    <p>Top</p>
  </div>
  <div class="ui segments">
    <div class="ui segment">
      <p>Nested Top</p>
    </div>
    <div class="ui segment">
      <p>Nested Middle</p>
    </div>
    <div class="ui segment">
      <p>Nested Bottom</p>
    </div>
  </div>
  <div class="ui segment">
    <p>Middle</p>
  </div>
  <div class="ui horizontal segments">
    <div class="ui segment">
      <p>Top</p>
    </div>
    <div class="ui segment">
      <p>Middle</p>
    </div>
    <div class="ui segment">
      <p>Bottom</p>
    </div>
  </div>
  <div class="ui segment">
    <p>Bottom</p>
  </div>
</div>

（4）segment的堆叠使用

<div class="ui raised segments">
  <div class="ui segment">
    <p>Top</p>
  </div>
  <div class="ui segment">
    <p>Middle</p>
  </div>
  <div class="ui segment">
    <p>Bottom</p>
  </div>
</div>

剩下的个人感觉不太常用，如果需要的话可以去官方文档查看
附传送门：https://semantic-ui.com/elements/input.html

标签：Semantic,Bottom,Top,用法,Middle,组件,日志,segment
来源： https://blog.csdn.net/weixin_50765519/article/details/120982372

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。