semantic UI 的安装和调用

semantic UI可以有两种方式安装

一种是直接下载压缩包,解压后调用就可以使用了,其实也就是说无需安装,另一种方式是用gulp进行安装。

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

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

第一步是安装node.js,提示:官网有两个版本可以选择,最好是选LTS版本,这个是长期支持版本。

第二步是安装gulp:cmd打开控制台,输入:

npm install -g gulp

第三步就是安装semantic UI了,CD到需要安装semantic的文件夹,然后输入:

npm install semantic-ui --save

接下来如果控制台不报错的话,就会询问你是否自动安装和安装位置。这个自己选就好了。

然后就可以在html中调用了。

调用的顺序一定不要搞错。

CSS,Jquery,JS

<link rel="stylesheet" type="text/css" href="semantic/dist/semantic.min.css">
<script
  src="https://code.jquery.com/jquery-3.1.1.min.js"
  integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
  crossorigin="anonymous"></script>
<script src="semantic/dist/semantic.min.js"></script>

以上都是基于windows环境。

时间: 2024-09-30 20:40:08

semantic UI 的安装和调用的相关文章

160908、前端开发框架Semantic UI

简介 网页开发中,CSS控制网页样式.作为测试开发工程师,我个人不太擅长手写CSS.样式微调.兼容浏览器等工作,所以我选择使用成熟的前端框架,可以快速开发出样式美观的网站,也解决了大部分浏览器兼容问题.前端框架百花齐放,我们公司的产品使用了Bootstrap,我个人使用的是Semantic UI. 安装Semantic UI 首先需要安装node.全局安装gulp(我使用的是Mac环境): brew install node sudo npm install -g gulp 然后进入项目的静态文

Semantic UI 记忆

CSS框架 What:简单地说,就是一些事先写好的css集合,你只需要给你的html元素加上一些特定的类,就可以快速的得到一些想要的效果. Why:简单.快速.方便.避免CSS中的各种坑. Which:Semantic UI是一款语义化的前端开发框架,Semantic是围绕自然交流语言而架构的,这使得开发更加直观.易于理解. Semantic UI 框架特色 Semantic UI把词语和类看成一个个可以任意组合的概念,使用如:名词/修饰语,文字序列以及诸多的自然语法来定义类名. 常见用法 ?

Semantic UI中的验证控件的事件的使用

1.Semantic UI中的验证控件,功能挺不错的,中文官网的文档写的都比较详细了,我再这里就不再进行重复了,主要是想说一下它的事件的使用方法,这个可能有部分朋友刚开始接触的时候不太了解 注意看这几个事件:前两个是对于字段验证通过和失败之后的事件的调用,后两个是对整个form是否都验证通过或者失败时调用的事件,于是我们在调用的时候可以这么写 function login() { $(".ui.form").form( { username: { identifier: 'userNa

webpack 解决 semantic ui 中 google fonts 引用的问题

semantic ui css 的第一行引用了 google web font api,由于不可告人而又众所周知的原因,这条链接在国内无法访问: @import url('https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic&subset=latin'); css 是阻塞渲染的,而 css 中的 import 又会进一步阻塞加载和渲染,所以就导致页面样式加载十分缓慢. 像 semantic ui 这样的开

开始学习使用 Semantic UI

最近在找一个功能比较丰富的前端框架,之前一直使用的Bootstrap,感觉组件还是不够丰富,很多东西都需要不少自定义.于是就发现了 Semantic UI. 不过感觉网上相关的中文资料好少,官方网站(http://www.semantic-ui.cn/)倒是有小部分汉化,但是大部分内容还是都是英文的... 要开始使用这个框架,首先得要下载引用,嗯,这个步骤就头疼了一下,因为貌似没有直接现成的文件下载,需要使用 node.js.npm.gulp 等工具进行获取和编译. 之前只是看到过这几个单词,并

UI Recorder安装与使用

现在的互联网公司,普遍在尝试并执行敏捷开发模式,那么必然要涉及到频繁的更新迭代,在每次更新迭代时,老功能的回归成为了老大难.当系统日益复杂,涉及到的回归点逐渐增多,UI自动化测试即使成本在大,也需要提上日程,解放人力,让测试人员提高工作效率. 以往我们对于UI自动化测试,第一个想到的事Selenium,虽说功能强大,稳定,但是一个系统回归级别的代码量还是比较笨重的,本次我们探讨调研一个能够上手快.操作简单.提供录制的工具,来应对我们频繁的更新迭代,那就是UI Recorder: UI Recor

前端框架之Semantic UI

前记 今天,又一轮的实训开始了.意味着最后一个暑假结束了.马上就步入大四了,搭上了大学的最后一班车.开学后意味着新挑战,有许多技术等着自己去学习.今天,老师教了我们一个前端新框架---------Semantic UI.我把自己学到的与大家分享! Semantic UI—完全语义化的前端界面开发框架,跟 Bootstrap 和 Foundation 比起来,还是有些不同的,在功能特性上.布局设计上.用户体验上均存在很多差异. Semantic UI 特点: 文档和演示非常完善 易于学习和使用 配

修改 Semantic UI 的默认字体

Semantic UI 默认使用的是谷歌提供的字体,并且是直接使用了谷歌的官方链接.由于大家都知道的原因,谷歌网站在国内访问速度很差,甚至根本无法访问,还有就是可能会在离线环境下使用 Semantic UI,不能总是依赖于在线字体,所以需要对 Semantic UI 的源文件进行一下手动修改. 1.首先根据上篇教程(http://www.cnblogs.com/xwgli/p/4770984.html)获取到 Semantic UI 未编译前的源代码: 2.找到并用文本编辑器打开源码中的文件:

搭建coreseek(sphinx+mmseg3)详细安装配置+php之sphinx扩展安装+php调用示例

http://blog.csdn.net/e421083458/article/details/21529969 常用的命令 ps -ef|grep searchd 如果你开了search服务后,你命令比如 indexer search 后面都需要带上 --rotate ./indexer --all ./searchd 至于其它什么命令 看手册 collect2: ld returned 1 exit status make[2]: *** [indexer] Error 1 make[2]: