精华内容
下载资源
问答
  • semantic ui

    2015-09-06 19:19:49
    semantic ui css框架
  • Semantic UI

    2014-11-18 18:13:55
    Semantic UI0.10.2 UI是Web的灵魂! 语义化设计的前端框架,为攻城师而制作的可复用的开源前端框架。
  • Semantic UI 有兴趣可以参考宁皓网的 Semantic UI 课程包,订阅宁皓网就可以学习全部课程了。Semantic UI 是一套开源的 CSS 与 JavaScript 框架,提供了一些设计好的界面组件,你可以在项目里直接使用这些组件。...

    对 Semantic UI 有兴趣可以参考宁皓网的 Semantic UI 课程包,订阅宁皓网就可以学习全部课程了。

    Semantic UI 是一套开源的 CSS 与 JavaScript 框架,提供了一些设计好的界面组件,你可以在项目里直接使用这些组件。它还提供了一套很方便的定制主题的方法,你可以用自己的想法去改变界面组件的样式。在这个教程里我们学习一下安装 Semantic UI 。

    准备工具

    你需要使用命令行去安装,Windows 用 Powershell ,Mac 使用终端。然后确定你已经安装好了 npm 与 gulp 。

    安装 Semantic UI

    先为项目创建一个目录,然后进入到这个目录的下面,比如我在自己的桌面上去为项目创建一个目录:

    cd ~/desktop

    mkdir ninghao-semantic

    cd ninghao-semantic

    使用 npm 去安装一下 Semantic UI:

    npm install semantic-ui

    过一会儿会出现设置 Semantic UI 的提示,按上下箭头可以选择:

    ❯ Automatic (Use defaults locations and all components)

    Express (Set components and output folder)

    Custom (Customize all src/dist values)Automatic:自动配置,一切都用默认的设置。

    Express:快速设置,只需要设置组件还有输出的目录。

    Custom:自定义,完全自己去定义 src/dist 目录。

    选择默认的 Automatic ,回车执行,又会提示:

    [?] We detected you are using NPM. Nice!

    Is this your project folder?

    /Users/xiaoxue/Desktop/ninghao-semantic (Use arrow keys)

    ❯ Yes

    No, let me specify

    问我们桌面上的 ninghao-semantic 这个目录是不是我的项目的目录, Yes ,再回车执行一下。 提示:

    [?] Where should we put Semantic UI inside your project? (semantic/)

    意思是要把 Semantic UI 放在项目目录的哪个目录的下面,默认这个目录就是 semantic 。回车执行,会完成安装,查看项目目录下面的东西,你会看到:

    node_modulessemanticsemantic.json

    进入到 semantic 这个目录的下面,然后再执行编译的命令。

    cd semantic

    gulp build

    编译好的 Semantic UI 会放在 dist 这个目录的下面。这个目录有下面这些东西:

    componentssemantic.jssemantic.min.js

    semantic.csssemantic.min.cssthemes

    components 目录下面是单独的一些组件,如果你只想使用 Semantic UI 里的某些组件,可以在这个目录下面找到这些组件。如果你想使用全部的组件,可以使用 semantic.css 与 semantic.js ,或者使用它们的最小化之后的版本,semanitc.min.css 与 semantic.min.js 。

    任务

    在 semantic 这个目录的下面,有一个文件叫 gulpfile.js ,在这个文件里定义了一些可以执行的任务,比如刚才我们用了 gulp build 去编译了 Semantic UI ,你也可以单独编辑 Semantic UI 的 CSS 或者 JavaScript ,执行任务你需要在项目下的 semantic 这个目录的下面。

    编译 CSS

    gulp build-css

    编译 JavaScript

    gulp build-javascript

    自动编译

    你可以让 Semantic UI 自动去编译,当你修改了某些文件以后,会自动执行任务去编译 Semantic UI ,执行任务:

    gulp watch

    基本结构

    你可以在项目的根目录下面创建一个 HTML 文件,在这个文件里嵌入需要的 CSS 与 JavaScript ,这样就可以去练习 Semantic UI 了。

    比如在项目的根目录下面,创建一个名字是 index.html 的文件,这个文件里的内容大概是这样的:

    Semantic UI

    Semantic UI 的一些组件需要用到 jQuery ,我们在项目下面创建一个目录,命名为 javascript ,然后把 node_modules/jquery/dist 下面的 jquery.min.js 放到 javascript 这个目录的下面。

    cd ~/desktop/ninghao-semantic

    mkdir javascript

    mv node_modules/jquery/dist/jquery.min.js javascript/

    自动刷新

    用 Atom 编辑器打开项目的目录,然后你可以再去使用 Browsersync ,监视一下项目下的 index.html 这个文件的变化,这样你在修改这个文档以后就不需要手工去刷新浏览器来查看变化了。

    安装 Browsersync

    npm install -g browser-sync

    创建服务器并监视文件变化

    cd ~/desktop/ninghao-semantic

    browser-sync start --server --no-notify --files "index.html"

    展开全文
  • semanticUI

    2014-08-28 22:53:33
    Semantic-UI。Bootstrap很通用,兼容性很好,甚至能兼容低版本的IE,Semantic-UI则更Geek,有不少CSS3的特性,比如 Shape 和 Reveal 就很有趣。从界面设计风格来说,Semantic比Bootstrap(2)更扁平化
  • 1、参考链接 (1) semantic ui英文站:...引入Semantic UI框架需要引入三个文件 (1) jquery-3.5.1.min.js (要注意,该文件必须在semantic.min.js前引入,因为后者依赖于前者) (2) semantic.min.css (3

    1、参考链接
    (1) semantic ui英文站:https://semantic-ui.com/
    (2) semantic ui中文站:https://zijieke.com/semantic-ui/
    (3) jQuery:https://jquery.com/download/

    引入Semantic UI框架需要引入三个文件
    (1) jquery-3.5.1.min.js (要注意,该文件必须在semantic.min.js前引入,因为后者依赖于前者)
    (2) semantic.min.css
    (3) semantic.min.js

    代码具体如图:

        <script src="../js/jquery-3.5.1.min.js"></script>
        <link rel="stylesheet" href="../css/semantic.min.css">
        <script src="../js/semantic.min.js"><</script>

     

    展开全文
  • semantic UI

    2018-11-23 15:04:00
  • Semantic UI 框架

    2018-07-06 18:51:07
    Semantic UI 框架,Semantic UI中文官方网站, 当前版本:Semantic UI 2.2.4... Semantic作为一款开发框架,帮助开发者使用对人类友好的HTML语言构建优雅的响应式布局。
  • SemanticUi后台admin模板

    2021-02-26 11:21:21
    SemanticUi后台admin模板
  • SemanticUi管理模板

    2019-01-24 13:13:29
    基于SemanticUi框架开发的后台管理模板,Semantic作为一款开发框架,帮助开发者使用对人类友好的HTML语言构建优雅的响应式布局。
  • Semantic UI入门

    2020-08-11 14:46:58
    安装Semantic UI semantic UI可以有两种方式安装 一种是直接下载压缩包,解压后调用就可以使用了;另一种方式是用gulp进行安装。 用gulp安装的优点是可以自己修改sementic ui中的样式,这样就更灵活一点,而最简化...

    安装Semantic UI

    semantic UI可以有两种方式安装:

    • 直接下载压缩包,解压后调用就可以使用了
    • 用gulp进行安装

    用gulp安装的优点是可以自己修改sementic ui中的样式,这样就更灵活一点,而最简化安装方式下不能修改,只能用默认样式。

    要先安装gulp,而安装gulp是NPM的一个模块,所以需要先安装NPM,而NPM又是node.js的一个模块,所以,就需要安装node.js, 所以:

    第一步:安装node.js

    提示:官网有两个版本可以选择,最好是选LTS版本,这个是长期支持版本。node自带npm,所以不需要额外安装。
    在这里插入图片描述

    第二步:安装gulp:

    安装命令: npm install -g gulp
    在这里插入图片描述

    第三步就是安装semantic UI

    CD到需要安装semantic的文件夹,然后输入:

    下载Semantic UI的源代码:npm install semantic-ui --save

    在这里插入图片描述
    其中:

    • Automatic:自动配置,一切都用默认的设置。
    • Express:快速设置,只需要设置组件还有输出的目录。
    • Custom:自定义,完全自己去定义 src/dist 目录
      选择默认的 Automatic ,回车执行,又会提示:
      在这里插入图片描述
      问我们当前目录是不是我的项目的目录, Yes ,再回车执行
      在这里插入图片描述
      意思是要把 Semantic UI 放在项目目录的哪个目录的下面,默认这个目录就是 semantic 。回车执行,会完成安装,查看项目目录下面的东西,会看到:
      在这里插入图片描述
      在这里插入图片描述

    编译SemanticUI

    cd到目录semantic-ui/semantic

    命令:gulp build

    在这里插入图片描述
    编译后会生成目标文件夹dist,以后我们要使用的就是这个文件夹下面生成的文件。

    使用Semantic UI

    示例:修改默认样式。

    第一步:创建项目导入文件

    按如下所示创建目录:
    在这里插入图片描述
    说明:上面semantic-ui是上一步中下载生成的内容。

    第二步:创建页面

    网页源代码:

    <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="UTF-8">
            <title>按钮</title>
            <link rel="stylesheet" href="semantic-ui/semantic/dist/semantic.min.css">
            <script type="text/javascript" src="js/jquery3.3.1.js"></script>
            <script type="text/javascript" src="semantic-ui/semantic/dist/semantic.min.js"></script>
        </head>
        <body>
            <h2>按钮的样式</h2>
            <button class="ui button">标准按钮</button>
            <!--除了<button>标签外,<div>标签也可以创建按钮-->
            <div class="ui button">标准按钮</div>
            <br>
            <br>
    
            <button class="ui compact button">紧凑按钮</button>
            <button class="ui basic button">基础按钮</button>
            <button class="ui basic button">
                <i class="user icon"></i>个人信息
            </button>
            <br>
            <br>
    
            <!--优先级按钮-->
            <button class="ui primary button">主要</button>
            <button class="ui secondary button">次要</button>
            <br>
            <br>
    
            <button class="ui positive button">积极</button>
            <button class="ui negative">消极</button>
            <br>
            <br>
    
            <!--表示状态的按钮-->
            <button class="ui active button">激活状态</button>
            <button class="ui disabled button">禁用状态</button>
            <button class="ui teal huge loading button">加载状态</button>
            <br>
            <br>
    
            <!--表示状态切换的按钮-->
            <button class="ui toggle button">正常</button>
            <br>
            <br>
    
            <!--社交 (Social)-->
            <button class="ui facebook button">
                <i class="facebook icon"></i>
                Facebook
            </button>
            <button class="ui twitter button">
                <i class="twitter icon"></i>
                Twitter
            </button>
            <button class="ui linkedin button">
                <i class="linkedin icon"></i>
                LinkedIn
            </button>
            <button class="ui instagram button">
                <i class="instagram icon"></i>
                Instagram
            </button>
            <button class="ui youtube button">
                <i class="youtube icon"></i>
                YouTube
            </button>
            <button class="ui google button">
                <i class="google icon"></i>
                Google
            </button>
            <button class="ui google plus button">
                <i class="google plus icon"></i>
                Google Plus
            </button>
        </body>
    </html>
    

    :emantic-ui的使用需要引入jQuery。

    默认效果:
    在这里插入图片描述

    修改样式

    首先进入semantic目录,然后执行gulp watch命令:
    在这里插入图片描述
    然后打开源代码theme.config,按如下所示修改:
    在这里插入图片描述
    修改后保存文件,控制台会自动编译:
    在这里插入图片描述
    最终浏览器查看效果:
    在这里插入图片描述
    若修改为amazon
    在这里插入图片描述
    则效果:
    在这里插入图片描述

    展开全文
  • Semantic UI术语

    2019-04-13 18:03:11
    Semantic UI 的特定术语术语类型一、组件类型 (Types of Components)二、工程术语 (Project Terminology)三、定义术语 (Definition Terminology)四、一般术语 (General Terms) 术语类型 你好!这是一篇关于semantic ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 7,204
精华内容 2,881
关键字:

semanticui