semanticui中文文档（Semanticui）
本文目录一览：
semantic ui要装什么才能使用
对于初学者来说，node, npm, gulp 等工具会造成不少麻烦，即陷入所谓的“依赖地狱”(dependency hell)。如果你不想用这些工具，可以简单地将 Semantic-UI 预编译好的 CSS 和 JavaScript 文件加入到 HTML 的 head 元素中，就跟你将 jQuery.min.js 加进去一样。
1. 创建 index.html
html
head
/head
body
div
Default
/div
div
div
Item A
/div
div
Item B
/div
div
Item C
/div
/div
/body
/html
现在页面看起来是这样的：
img src="" data-rawwidth="2870" data-rawheight="576" class="origin_image zh-lightbox-thumb" width="2870" data-original=""
2. 下载 CSS 和 JS 文件
Semantic-UI 在 GitHub 上的代码仓库里，有准备好的 CSS 和 JS 文件供下载：
img src="" data-rawwidth="1954" data-rawheight="544" class="origin_image zh-lightbox-thumb" width="1954" data-original=""
我们目前需要的是 semantic.min.css 和 semantic.min.js 这两个文件，将它们加入到 HTML 的头部：
head
link href="./semantic.min.css" rel="stylesheet" type="text/css"
script src="./jquery.min.js"/script
script src="./semantic.min.js"/script
/head
你会发现中间多了一个 jquery.min.js，没错，如果你要使用 Semantic-UI 涉及 JavaScript 的高级功能，比如 tab, progress, sticky, API 等，就必须加上 jQuery 库，这是 Semantic-UI 所需要的全部依赖。
这里是一个 jQuery 的链接：
3. 为 div 元素设定 ui 类
body
div class="ui button"
Default
/div
div class="ui menu"
div class="item"
Item A
/div
div class="item"
Item B
/div
div class="item"
Item C
/div
/div
/body
然后去浏览器刷新一下，可以看到：
img src="" data-rawwidth="2870" data-rawheight="476" class="origin_image zh-lightbox-thumb" width="2870" data-original=""
聪明的你会发现，”ui button” 就代表一个按钮，而“ui menu” 是一个菜单，以此类推，”ui label” 是标签，”ui input” 是输入框，等等。所以使用 Semantic-UI 时，最重要的魔法关键词就是 “ui”。
现在的目录结构(文件夹)也十分直观，易于理解：
img src="" data-rawwidth="2864" data-rawheight="258" class="origin_image zh-lightbox-thumb" width="2864" data-original=""
这一个例子展示了如何从零开始使用 Semantic-UI，包括目录结构，HTML 的结构。除了按钮，菜单，Semantic-UI 目前支持 50 多种网站中常见的 UI 组件，详细文档请打开官网查阅：
录制了一个简单的视频，暂时放在 YouTube 上 (英文)，感兴趣的话请点击：
semantic ui 1.1 怎么用
Semantic UI—完全语义化的前端界面开发框架，跟Bootstrap和Foundation比起来，还是有些不同的，在功能特性上、布局设计上、用户体验上均存在很多差异。文章里详细介绍了Semantic UI自身的功能特性和优缺点。
文章来自CoderWall，作者是Nicholas Jordon。在这篇文章当中作者讲述了Semantic UI具备哪些功能特性，以及和其它前端界面开发框架的不同之处。可能Semantic UI只是HTML/CSS框架领域上的一个新成员，但是它来势汹汹，势不可挡。引用Semantic UI团队的话说：“Semantic赋予设计师和开发者为UI创建一个共享词汇库的能力。”（以下是编译内容）
我通常情况下不喜欢更改开发框架，即使是HTML/CSS框架。但是有的时候为了最终的产品质量，还是值得一试去改变框架的。
有那么一段时间，我是Zurb's Foundation Framework的超级粉丝，它有许多其它框架没有的功能特性，同时它还有很多预制模板。所以使用Zurb's Foundation Framework来设计的话相对是比较舒适快捷的。但唯一的一点是有些功能得等到Foundation新版本发布出来才能使用。
进入到Semantic UI开发框架，就会看到数量庞大的功能特性，这些功能都很有特点。Semantic UI拥有支持情态动词、手风琴元素、元素调光器、3D转换，甚至是评级等多种功能。更不用说其它的运行程序，因为它们看上去都像是涂抹了黄油一样——运行起来特别流利顺畅。当然所列举的这些只是冰山一角，不过这能让你基本上了解大致情况。可能Semantic UI只是HTML/CSS框架领域上的一个新成员，但是它来势汹汹，势不可挡。
另外，这些功能使用的类别名称比一些随意的字符串更加的接近英语；所以使用Semantic UI设计会让你感觉更自然。因此，学习如何使用Semantic UI，并用Semantic UI进行设计也就方便的多了。
然而，现在的问题是Semantic UI忽略了一些基本功能，例如基本的图片滑块，或者是缩略图类等等。不过后来发现，这些所谓的功能缺失，实际上是和其它功能整合了，在其它方面是完全可以实现的。
elementui图标展示文档怎么写
图标是现今比较流行的前端框架了，目前，使用比较多的就是Element UI，为了页面的美观程度，我们每个前端页面大多都会使用一下图标，下面介绍一下图标的使用。如有需要，可参考官网。举个简单的例子，我们编写一个input框，在框后端添加一个搜索的图标，代码如所示，希望我的回答能给您带来帮助
关于semanticui中文文档和Semanticui的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注云尚网络www.ysfad.net。
相关文章
发表评论
暂时没有评论，来抢沙发吧~