[CSS] 眼下最流行的五大CSS框架，你都知道么？

超、凢脫俗 2022-05-15 01:56 247阅读 0赞

From: [http://developer.51cto.com/art/201710/555733.htm][http_developer.51cto.com_art_201710_555733.htm]

如今，CSS框架越来越受欢迎，可以说已经应用到每一个网站上了。作为开发工具，CSS框架一直处于不断进化和改进的状态，因此我们强烈建议您关注眼下的趋势。这篇文章会带您了解2017年最流行的5种CSS框架。

**1. Bootstrap**

这个框架是GitHub的明星产品之一，被认为是拥有最好的响应性的CSS框架。专为前端开发而设计，有助于构建web设计理念、移动优先项目、网格系统、排版和按钮等。

[![Bootstrap][]][Bootstrap]

Bootstrap没有任何附加功能，但是有第三方插件可用，除了常规的HTML元素，还具有其他常见的UI元素。其核心原则是RWD和mobile first。Bootstrap版本3支持各种浏览器(最新版本)，并且自Bootstrap 2开始，框架支持响应式网页设计。Bootstrap 4版本目前正在开发中。

Bootstrap非常受欢迎，但并不是说他比其他的框架要好。大多数人用它是因为它的受欢迎程度，由于这一点，有很多资源可用(如教程，额外的插件等)，使得使用Bootstrap更容易。

**2. Foundation**

Foundation是一个开源项目，是CSS框架界的另一巨头。众所周知，它得流畅性和响应性非常好，可以用于许多用途：构建网站、创建电子邮件模板、构建移动和web应用程序。

[![Foundation][]][Foundation]

这个框架对用户也非常友好，提供了培训、支持和咨询等服务。还有一些独特的组件(击键，Joyride，Flex视频等)和一些附加组件。其核心原则除了RWD和mobile first，还包括semantic。

Foundation以完美的工作流程和开发人员的大力支持为自己赢得了巨大的利润。它是一个非常专业的框架，并提供了大量可用的教程，用户能够随时了解Foundation。

**3. Bulam**

Bulam开放源码、免费并且节约开发人员的时间。由于学习起来和使用非常简单，因此最近变得非常流行。

[![Bulam][]][Bulam]

首先，Bulma包含很棒的UI组件，如选标签、导航栏、框和面板等等，因为此框架旨在为用户提供清晰而有吸引力的UI。其次，Bulma非常的模块化，用户可以只导入所需的功能。 最后，这个框架的类可读性很高，这点对于一些开发者来说可能是非常具有吸引力的。

Bulma易于理解和使用简单，同时它具有所有必要的功能，帮助您高效的创建出优质产品。

**4. Ulkit**

可能没有多少人知道(使用)这个框架，但它与其他类似框架具有相同的功能。

[![Ulkit][]][Ulkit]

Ulkit是轻量级和模块化的，用于创建快速但功能强大的Web界面。 Ulkit基本上是一组易于定制的组件集合，具有HTML Editor、Flex、其他附加组件和独特的组件。它的核心原则是RWD和mobile first，Ulkit广泛应用于WordPress主题中。使您能够灵活的进行手动定制机制。

**5. Semantic UI**

从名称就能猜出，Semantic UI旨在使网站构建过程更加语义化。核心特征是利用自然语言原理使代码更易于阅读，更容易理解。

[![Semantic UI][]][Semantic UI]

核心原则是标签矛盾、语义和响应能力。这个框架是将语句和类作为可交换的组件来处理，并使用直观的JS和简单的调试。

Semantic UI的好处在于，它提供了组织良好的文档和网站，并提供了使用指南。简而言之，它有3000多个主题变量，50多个UI组件，以及5000多个提交。绝对值得一试。是创建页面漂亮、反应灵敏的网站的不错之选择。

1.  [.NET程序员提高效率的70多个开发工具][.NET_70]
2.  [浅谈移动应用的跨平台开发工具（Xamarin和React Native）][Xamarin_React Native]
3.  [机智云MCU代码开发工具降低智能硬件开发成本][MCU]
4.  [2017年前端开发工具趋势][2017]
5.  [十个免费的web前端开发工具 – Envato – Medium][web_ _ Envato _ Medium]

[http_developer.51cto.com_art_201710_555733.htm]: http://developer.51cto.com/art/201710/555733.htm
[Bootstrap]: /images/20220515/82ff39fde10f4ca9a7bd1dc85fcb4d21.png
[Foundation]: /images/20220515/6ef08bd218d3486f81bdb61ac1b4a09d.png
[Bulam]: /images/20220515/ff0b1965d39a402ba40fd555af717ed1.png
[Ulkit]: /images/20220515/763851b744a249788b06680539b0f8d3.png
[Semantic UI]: /images/20220515/925e24bf282f4c9ba3ef5ed4a7ab03f4.png
[.NET_70]: http://developer.51cto.com/art/201603/507012.htm
[Xamarin_React Native]: http://developer.51cto.com/art/201606/512242.htm
[MCU]: http://developer.51cto.com/art/201704/538280.htm
[2017]: http://developer.51cto.com/art/201705/538982.htm
[web_ _ Envato _ Medium]: http://news.51cto.com/art/201709/551483.htm