semantic-ui基础使用

Semantic UI—完全语义化的前端界面开发框架，代码可读性与可理解性很强，界面简洁美观，与bootstrap风格接近，基于jquery，适用响应式布局，提供一些基本模板，兼容Firefox、Chrome、safari,IE 10+等浏览器

这都是我自己根据文档敲了一遍的，可能不是很全，建议看官网文档
中文文档

引入CDN

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/semantic.min.css">

引入js需要引入jquery

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/semantic.min.js"></script>

快速入门

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="ui container" style="padding:50px">
        <!-- header就是产生标题的效果 -->
        <!-- dividing或者divider产生一条分割线 -->

      <div class="ui header dividing">Button</div>

      <button class="ui button">按钮</button>

    </div>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/semantic.min.css">
    <link rel="stylesheet" href="css/index.css">
</body>
</html>

布局

网格

网格是一种具有丰富历史的结构，在你的设计中用来布置周围空间。

网格的使用能使你的内容自然的显示页面中，而且能够迅速的根据元素的大小来自动重新调整布局。

semantic-ui和bootstrap和layui不一样，这两个都是分成12份，而semantic-ui是分成16份

<div class="ui grid">
  <div class="four wide column"></div>
  <div class="four wide column"></div>
  <div class="four wide column"></div>
  <div class="four wide column"></div>
</div>

列 (Columns)

网格将水平空间划分为不可分割的单元，称为“列”。网格中的所有列必须指定其宽度作为总宽度的比例。

<div class="ui grid">
  <div class="two wide column"></div>
  <div class="eight wide column"></div>
  <div class="six wide column"></div>
</div>

行 (Rows)

行是水平排列的列组

<div class="ui four column grid">
  <div class="row">
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
  </div>
</div>

常用组件

按钮 (Button)

按钮可设置大小、颜色、形状等；

<button class="ui button">
 按钮
</button>

大小

<button class="ui button">按钮</button>
      <button class="ui mini button">按钮</button>
      <button class="ui tiny button">按钮</button>
      <button class="ui small button">按钮</button>
      <button class="ui medium button">按钮</button>
      <button class="ui large button">按钮</button>
      <button class="ui big button">按钮</button>
      <button class="ui massive button">按钮</button>

<button class="mini ui button">
  Mini
</button>
<button class="tiny ui button">
  Tiny
</button>
<button class="small ui button">
  Small
</button>
<button class="medium ui button">
  Medium
</button>
<button class="large ui button">
  Large
</button>
<button class="big ui button">
  Big
</button>
<button class="huge ui button">
  Huge
</button>
<button class="massive ui button">
  Massive
</button>

在这里插入图片描述

流式 (Fluid)

按钮可以占满整个容器

<div class="ui container" style="padding:50px">
         <!-- 如果想要和容器一样宽 并且会随着容器的变化而变化-->
        <button class="ui fluid button">按钮</button>

    </div>

强调 (Emphasis)

按钮可以格式化以显示不同级别的强调
在 site.variables 中设置你的的颜色为基色或者副色，能够显示在当前主题中

   <!-- 默认是蓝色 -->
      <button class="ui primary button">主按钮</button>
      <!-- 默认是黑色 -->
      <button class="ui secondary  button">次按钮</button>
      <!-- 默认是绿色 -->
      <button class="ui positive button">积极按钮</button>
      <!-- 默认是红色 -->
      <button class="ui negative button">消极按钮</button>

在这里插入图片描述

切换 (Toggle)

按钮可以格式化为开关

<button class="ui toggle button">Vote</button>

浮动 (Floated)

按钮可以在容器中左浮动或者右浮动

<button class="ui right floated button">右浮动</button>
<button class="ui left floated button">左浮动</button>

动画 (Animated)

按钮可以通过动画来显示隐藏的内容
按钮的尺寸将根据可见内容的尺寸自动调整，请确保有足够的空间来显示隐藏内容。

<!-- 动画效果 -->
      <!-- 默认是从左到右水平变化的 -->
      <button class="ui animated button">
          <div class="visible content">下一步</div>
          <div class="hidden content">
              <i class="right arrow icon"></i>
          </div>
      </button>
      
      <!-- 从上到下竖直变化 -->
      <button class="ui vertical animated button">
        <div class="visible content">下一步</div>
        <div class="hidden content">
            <i class="right arrow icon"></i>
        </div>
    </button>
    
     <!-- 渐变效果 -->
    <button class="ui fade animated button">
        <div class="visible content">下一步</div>
        <div class="hidden content">
            <i class="right arrow icon"></i>
        </div>
    </button>

图标 (Icon)

一个按钮只能有一个图标

<!-- 图标按钮 -->
   <div class="ui icon button">
       <i class="cloud icon"></i>
   </div>
   
   <!-- 将图标按钮调为圆形 -->
   <div class="ui circular icon button">
    <i class="cloud icon"></i>
   </div>

标签 (Label)

按钮可以在标签旁边显示
图标默认是在左边，可以调整到右边

在这里插入图片描述

组合

按钮组 (Buttons)

多个按钮可以作为一个组
注意是buttons

<div class="ui buttons">
  <button class="ui button">java</button>
  <button class="ui button">python</button>
  <button class="ui button">c++</button>
</div>

 <div class="ui buttons">
            <button class="ui button">java</button>
            <button class="ui button">python</button>
            <button class="ui button">c++</button>
        </div>
         
        <div class="ui divider"></div>
        <!-- 去掉默认的按钮颜色 -->
        <div class="ui basic buttons">
            <button class="ui button">java</button>
            <button class="ui button">python</button>
            <button class="ui button">c++</button>
        </div>
        <div class="ui divider"></div>
         <!-- 三等分按钮 -->
        <div class="ui three basic buttons">
            <button class="ui button">java</button>
            <button class="ui button">python</button>
            <button class="ui button">c++</button>
        </div>

        <div class="ui divider"></div>
         <!-- 竖直排列 -->
        <div class="ui vertical basic buttons">
            <button class="ui button">java</button>
            <button class="ui button">python</button>
            <button class="ui button">c++</button>
        </div>

在这里插入图片描述

<!-- 标签变成绿色 -->
        <div class="ui green  buttons">
            <button class="ui button">java</button>
            <button class="ui button">python</button>
            <button class="ui button">c++</button>
        </div>
        <div class="ui divider"></div>
         <!-- 将按钮变大 -->
        <div class="ui large buttons">
            <button class="ui button">java</button>
            <button class="ui button">python</button>
            <button class="ui button">c++</button>
        </div>
        <div class="ui divider"></div>
         <!-- 带图标的组合icon -->
        <div class="ui labeled icon buttons">
            <button class="ui button">
                <i class="pause  icon"></i>
                暂停
            </button>
            <button class="ui button">
                <i class="play  icon"></i>
                播放
            </button>
            <button class="ui button">
                <i class="shuffle icon"></i>
                随机
            </button>
        </div>

图标按钮组(Icon Buttons)

按钮组可以显示一组图标

<div class="ui icon buttons">
  <button class="ui button"><i class="align left icon"></i></button>
  <button class="ui button"><i class="align center icon"></i></button>
  <button class="ui button"><i class="align right icon"></i></button>
  <button class="ui button"><i class="align justify icon"></i></button>
</div>
<div class="ui icon buttons">
  <button class="ui button"><i class="bold icon"></i></button>
  <button class="ui button"><i class="underline icon"></i></button>
  <button class="ui button"><i class="text width icon"></i></button>
</div>

在这里插入图片描述

状态

激活 (Active)

按钮可以表现出正在被点击

<button class="ui active button">
  <i class="user icon"></i>
  Follow
</button>

禁用 (Disabled)

按钮可以表现出不可交互的状态

<button class="ui disabled button">
  <i class="user icon"></i>
  关注
</button>

加载 (Loading)

按钮可以表现出正在加载的状态

<button class="ui loading button">加载中</button>

分隔条

标准分隔条

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

垂直分隔条 (Vertical Divider)

分隔条可以分割垂直内容

<div class="ui segment">
  <div class="ui two column very relaxed grid">
    <div class="column">
      <p></p>
      <p></p>
      <p></p>
      <p></p>
    </div>
    <div class="column">
      <p></p>
      <p></p>
      <p></p>
      <p></p>
    </div>
  </div>
  <div class="ui vertical divider">
    和
  </div>
</div>

在这里插入图片描述

输入框(Input)

输入框是用来接收用户输入信息的

输入框

标准的输入框

<div class="ui input">
            <input type="text" placeholder="搜一下">
</div>

流式 (Fluid)

输入框可以占满整个容器的大小

<!-- 流式随着容器的宽度变化而变化 -->
        <div class="ui fluid input">
            <input type="text" placeholder="搜一下">
        </div>

图标 (Icon)

输入框可与图标结合

<!-- 搜索框加图标默认是右边显示 -->
        <div class="ui icon input">
            <input type="text" placeholder="搜一下">
            <i class="search icon"></i>
        </div>

 <!-- 搜索框加图标设置成左边显示 -->
        <div class="ui left icon input">
            <input type="text" placeholder="搜一下">
            <i class="search icon"></i>
        </div>

<!-- 搜索框加图标变成圆形可点击 -->
        <div class="ui icon input">
            <input type="text" placeholder="搜一下">
            <i class="circular search icon link"></i>
        </div>

<!-- 搜索框加图标变成圆形可点击实心黑色 -->
        <div class="ui icon input">
            <input type="text" placeholder="搜一下">
            <i class="inverted circular search icon link"></i>
        </div>

状态

聚焦 (Focus)

输入框可以显示当前用户正在与之交互

<div class="ui input focus">
            <input type="text" placeholder="搜一下">
</div>

加载 (Loading)

带图标的输入框可以显示它当前正在加载中
加载转圈转在左边

<div class="ui left icon input loading">
  <input type="text" placeholder="搜一下">
  <i class="search icon"></i>
</div>

加载转圈转在右边

<div class="ui icon input loading">
  <input type="text" placeholder="搜一下">
  <i class="search icon"></i>
</div>

禁用 (Disabled)

输入框可显示他当前是禁用状态

<div class="ui disabled icon input">
  <i class="search icon"></i>
  <input type="text" placeholder="搜一下">
</div>

错误 (Error)

输入框可指示其数据存在错误

<div class="ui input error">
  <input type="text" placeholder="搜索...">
</div>

标签 (Labeled)

输入框可联合标签使用

 <div class="ui labeled input">
            <div class="ui label">http://</div>
            <input type="text" placeholder="baidu.com">

</div>

下拉菜单形式

<!-- 下拉菜单形式 -->
     <div class="ui right labeled input">
        <input type="text" placeholder="搜索域名">
        <div class="ui dropdown label">
          <div class="text">.com</div>
          <i class="dropdown icon"></i>
          <div class="menu">
            <div class="item">.com</div>
            <div class="item">.net</div>
            <div class="item">.org</div>
          </div>
        </div>
      </div>

角标

角标在左边

<div class="ui left corner labeled input">
  <input type="text" placeholder="搜索...">
  <div class="ui left corner label">
    <i class="asterisk icon"></i>
  </div>
</div>

角标在右边

<div class="ui corner labeled input">
  <input type="text" placeholder="搜索...">
  <div class="ui corner label">
    <i class="asterisk icon"></i>
  </div>
</div>