semantic-ui基础使用

最新推荐文章于 2024-04-11 09:53:30 发布
最新推荐文章于 2024-04-11 09:53:30 发布
阅读量5.2k 收藏 61
点赞数 10
分类专栏： 前端 文章标签： css javascript css3 semanticui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44866153/article/details/117534266
版权

semantic-ui


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

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

引入CDN

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/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/semantic-ui@2.4.2/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/semantic-ui@2.4.2/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 right labeled left icon input">
  <i class="tags icon"></i>
  <input type="text" placeholder="输入标签">
  <a class="ui tag label">
    添加标签
  </a>
</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>
向天再借500年
关注
  • 10
    点赞
  • 踩
  • 61
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
解决安装 Semantic-UI 的各种坑（亲测有效）
蜂窝码农的博客
04-18 2090
前言 为了更好的展示 H5 SPA 的开发效果，除了 Bootstrap 外，同时也采用了功能强大的 Semantic-UI。相比 Bootstrap，Semantic-UI 在模板（theme）上的功能强大很多。 然而要用得上 theme 功能，需要经过一个看似简单却巨坑慢慢的安装步骤。本文记录一下本人整个填坑过程。 一切从 Semantic-UI (https://semantic-ui.com/) 官网开始 在点击 Get Started 之后，就跳转到安装教程页面。对于那些不会用到 Semanti
semantic-ui-docs-gatsby
03-28
语义UI文档语义UI设计...:package: JSON支持 :t-shirt: 更漂亮+降价的皮棉 :electric_plug: Nodemon发展入门安装NodeJS cd /path/to/semantic-ui-docs-gatsby/ npm i npm run develop更改SUI主题该项目使用semantic-ui
探索 Semantic UI：优雅的设计与强大的前端框架
gitblog_00077的博客
04-11 554
探索 Semantic UI：优雅的设计与强大的前端框架 项目地址:https://gitcode.com/aaronbrethorst/SemanticUI Semantic UI 是一个流行的开源前端框架，其目标是使开发者能够以人类可读的语言编写 HTML 标签，并创建出美观、响应式的网站和应用程序。本文将详细介绍 Semantic UI 的特性、应用及其优势，引导您理解为何它值得在您的下一个...
前端开发框架Semantic UI（一）
热门推荐
潜行100的博客
03-25 3万+
文章转载自：http://blog.csdn.net/a464057216/article/details/52493469文章转载自：http://blog.csdn.net/a464057216/article/details/52493469文章转载自：http://blog.csdn.net/a464057216/article/details/52493469简介安装Semantic U...
前端一直忽视的框架??其实很好用！！
Voyager-Lc
03-27 195
前端开发框架Semantic UI *前面时候在学习写项目的时候，学习到了这个前端开发框架Semantic UI,个人觉得比起Bootstrap来，使用起来更加语义化，更容易上手，也更好看。打开 Semantic UI 的文档，我们就会发现许多和 36kr 里类似的组件，把这些组件整合拼装起来，就可以做出一个页面。 推荐网站:https://semantic-ui.com 使用教程。 （1）、下载...
IDEA快速入门01-认识IDEA
瘦子没有夏天
08-30 1968
IDEA入门
semantic-ui@2.4.2 install: `gulp install`
ljt_code67的博客
10-03 1930
关于vue下npm安装semantic-ui的问题 安装流程：npm install -g gulp npm install semantic-ui --save 报错：semantic-ui@2.4.2 install: `gulp install` 博主原因是 gulp@4.0.2 和 node.js@14.6.0 版本不兼容 降低node.js版本为node....
Python毕业设计 基于Django与semantic-ui的语言计算实验平台的设计与实现+详细文档+全部资料
最新发布
04-18
Python毕业设计 基于Django与semantic-ui的语言计算实验平台, 功能包括自然语言综合处理,词语计算,社会热点计算,人物计算,文学画像,职位画像等社会计算功能的设计与实现+详细文档+全部资料.zipPython毕业设计 基于...
sm-pagination:基于 Semantic-ui 的秘银基础小部件
06-02
link rel =" stylesheet " href =" https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.10.3/semantic.min.css " > < script src =" bower_components/mithril/mithril.js " > </ script > <...
Semantic UI 离线 中文 文档
09-23
1. **Grid系统**：Semantic UI的格栅系统是布局的基础，它允许你创建灵活的、响应式的页面结构。通过定义行(row)和列(column)，你可以轻松调整内容在不同屏幕尺寸下的排列方式。 2. **元素(Element)**：这些是基本...
Semantic UI 框架
07-06
Semantic UI 框架,Semantic UI中文官方网站, 当前版本:Semantic UI 2.2.4... Semantic作为一款开发框架,帮助开发者使用对人类友好的HTML语言构建优雅的响应式布局。
基于SemanticUI的音乐社交网站Ting.zip
07-19
Ting 是基于 Ruby on Rails 框架和 Semantic UI 前端界面开发框架的音乐社交网站。 网站后台使用 Ruby on Rails 框架, 创意来自于 @djyde 前阵子发布的一个叫 Musicda! 的项目。 要求 Ruby 2.0.0 Memcached 1.4 ImageMagick 6.8 标签：Ting
SemanticUi管理模板
01-24
基于SemanticUi框架开发的后台管理模板，Semantic作为一款开发框架，帮助开发者使用对人类友好的HTML语言构建优雅的响应式布局。
semanticUI 后台管理模板
04-11
Semantic作为一款开发框架，帮助开发者使用对人类友好的HTML语言构建优雅的响应式布局。
个人实现的基于Django与semantic-ui的语言计算实验平台, 功能包括自然语言综合处理,词语计算,社会热点.zip
02-10
更有深度学习、机器学习、自然语言处理和计算机视觉的实战项目源码，助您从理论走向实践，如果您已有一定基础，您可以基于这些源码进行修改和扩展，实现更多功能。 【期待与您同行】 我们真诚地邀请您下载并使用...
介绍一款超好用的前端框架：Semantic UI
imyLove7的博客
01-16 3990
最近在使用Bootstrap这款前端框架做小项目，期间又了解到另外一款同样好用的前端框架：Semantic UI， 官网链接：https://1.semantic-ui.com/ 建议，先将网站语言由 English 修改为 简体中文； 在线用户手册：点击左上角的“菜单”，将会在左侧弹出一个菜单栏，选择你想要的元素，查看手册内容； 选择一个元素之后，会出现如下内容； ...
Semantic UI术语
教官的博客
04-13 1575
Semantic UI 的特定术语术语类型一、组件类型 (Types of Components)二、工程术语 (Project Terminology)三、定义术语 (Definition Terminology)四、一般术语 (General Terms) 术语类型 你好！这是一篇关于semantic ui 有关的术语的简介。 一、组件类型 (Types of Components) Sema...
Semantic UI
Co_zy的博客
10-22 2533
地址 http://www.semantic-ui.cn/elements/button.html 常用一.Element->Segment->Inverted<div class="ui inverted segment"> <p>I'm here to tell you something, and you will probably read me first.</p> </div>一个
semantic ui中文文档
08-05
Semantic UI 是一种流行的前端框架，它提供了用于创建漂亮和一致的用户界面的丰富的 UI 组件和样式。对于初学者来说，Semantic UI 中文文档非常有用。 Semantic UI 中文文档为用户提供了详细的指南和说明，包括如何开始使用 Semantic UI、如何安装和引用样式表文件、如何使用各种组件和模块等。文档内容非常清晰明了，对于理解和使用 Semantic UI 提供了很好的帮助。 文档的结构非常组织有序，以模块或组件为单位进行介绍。每个模块或组件都有详细的说明，包括用法示例和可用的配置选项。此外，文档还提供了丰富的演示和实例，可以直接在页面上查看和交互，并且代码也同时显示出来，帮助用户更好地理解和应用。 除了基本的组件和模块介绍外，文档还涵盖了 Semantic UI 的其他重要特性和工具，例如响应式设计、网格系统、动画效果、表单验证和样式定制等。这些都将帮助开发人员更加灵活地使用 Semantic UI，并根据自己的需求进行定制。 总之，Semantic UI 中文文档提供了对 Semantic UI 框架的详尽介绍和使用指导。它是一个学习和使用 Semantic UI 的重要资源，无论是初学者还是有经验的开发人员都能从中获益。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值