诸如Bootstrap之类的前端框架仍然风靡一时。 有很多不错的选择可供选择,但是最近引起我注意的一个是Semantic UI 。
当然,这个图书馆已经存在了一段时间,可以追溯到几年前。 但是,最新版本的2.2 附带了许多附加功能,并证明了语义技术将长期存在。
有了数十个CSS变量 , 简单的响应类和易于设置的布局 ,您就可以轻松使用语义UI。
简单的类名和网格结构确实给这个被称为“语义”的框架赋予了含义。 这些类非常明智,这使您HTML易于在远处阅读。
它甚至附带了对动态页面元素(例如轮播和下拉选择菜单)的jQuery支持 。
阳光下的每个HTML元素都是经过定制的,并具有语义UI的全部功能 。 其中包括HTML5元素以及其他功能,例如评分和自定义标签 。
![自定义标签](https://i-blog.csdnimg.cn/blog_migrate/12c9ab8ec723108a3f3747fd750ddf7d.png)
但是,语义的最佳部分也许是主题设置 。 您不仅可以获得大量的预先设计的样式和动态元素,而且还可以根据Semantic的代码重新构建这些样式。
整个库共有3,000多个主题变量,您可以在Sass中或通过扩展自己的样式表进行更改。 另外,语义UI带有九个默认主题 :
- 语义默认
- 胖乎乎的
- 上调
- 经典
- Google资料
- 亚马孙
- 引导程序
- 的GitHub
- 推特
这些只是冰山一角,它们的作用更像是设计您自己的主题的起点 。
![语义UI Amazon主题](https://i-blog.csdnimg.cn/blog_migrate/dc8de30d5ba7b2c8eecb3e051c0e3d67.png)
如果要从头开始构建新的着陆页或自定义网站,请认真考虑使用语义UI。 它是完全免费和开源的, 在线文档非常丰富 。
而且,您可以直接从GitHub下载源代码的副本 ,其中还包括针对初学者的指南 。