Semantic UI 语意化的前端开发框架

效果还不错，UI很漂亮

官网范例的解释也很清楚，有兴趣的可以去官网先看看

首先来看看其中一个Dropdown的效果，有没有很漂亮!!

 

---

 

Setup

首先我们在这里使用的是网址的部分，当然你也可以依照官网上的去下载Library或是利用npm指令去Install ilbrary

 

是不是很简单?  恩...因为目前我也只会这样

 

 

---

 

 

Try it now

再来这个范例介绍两个基本的dropdown

首先看完成图，上面的是single selection dropdown，下面的是multiple selection dropdown

   

再来我们来看程式码的部分

 

首先在head的部分我们import了semantic-ui 和 jquery library，要记得jquery必须在semantic-ui.min.js之前，

否则semantic-ui.min.js会找不到

再来看主程式的部分

我们可以看到注解single selection dropdown的部分是单选的selection dropdown

所以在第一层div中的class叫做为ui delection dropdown，这个class name是semantic-ui用来辨识你到底要用

哪一个样式的dropdown，而第二个dropdown可以多选的重点在于 multiple="" 这个属性，如果把它拿掉的话第

二个dropdown就会不能多选

 

其他的属性大家看一下应该就知道什么意思了，像是default text是预设要显示的字串，menu底下有两个item，分别为

Male和Female之类的，建议大家可以多自己try看看喔

 

 

查看原文 >>