Bootstrap仍然是最流行的 CSS 框架之一。他们提供了大量的文档、示例和演示,可以帮你快速进行响应式 Web 开发。该框架的当前版本是 Bootstrap 5,相较于V4,做出了一些改变:
-
拥有了自己的SVG图标库
-
不再支持jquery
-
不再支持IE
-
增加了css自定义属性
-
增强的网格系统
-
Forms可被更新
传送门:getbootstrap.com/
六、UIkit
相较于其他通用的css框架,UIkit有一些这些框架没有的组件,比如
-
Lightbox(利用模态对话框为图片和视频创建一个别致的灯箱)
-
Parallax(依赖于页面滚动条位置的动态 CSS 特性)
-
Nestable(创建可以通过拖拽排序的可嵌套式列表)
-
Sortable(创建可排序的网格和列表重新来排列元素的顺序)
传送门:getuikit.com/
七、Semantic UI
Semantic意为语义,由于Semantic UI类在命名上清晰易懂,因此开发人员不但节省了学习的时间,也让手头上项目的开发更快、更直观。此外布局的多样性是Semantic UI的另一个优势。通过不同的主题,您可以轻松地为各种项目找到必要的组件。
Semantic UI存在一些缺点,更新频率相较于其他热门框架较低,并且在某些设备运行响应能力一般。
传送门:semantic-ui.com/
八、Bulma
Bulma 是一个基于 Flexbox 的现代化的 CSS 框架。它提供了随时可用的前端组件,您可以轻松地组合这些组件来构建响应式 Web 界面。
和bootstrap相比,两者最大的区别是,bulma是纯css,没有js,bootstrap有JS。这里举个列布局的例子:
-
添加
columns
容器 -
添加任意数量的
column
元素
无论列数是多少,每一列的宽度都相等。