Bootstrap vs Foundation vs Bulma vs Semantic vs UIkit

阴凯歌

2023-12-01

在过去几年中，最终用户的浏览习惯已经发展到包括各种设备。因此，响应式网页设计对于当今开发的每个网站都是必不可少的。但是，为每个项目从头开始创建响应式设计可能非常耗时。一个让您的生活更轻松的好解决方案是使用 CSS 框架。这样的框架会为您处理基本的响应式设计原则。在这个比较中，我们看看一些最好的 CSS 框架，看看哪个是最好的。这是 Bootstrap vs Foundation vs Bulma vs Semantic vs UIkit。

这篇文章将指导您为下一个项目选择正确的 CSS 框架。我假设您具备前端技术和响应式网页设计原则的基本知识。每个 CSS 框架都经过测试，以涵盖 Bootstrap、Foundation、Bulma、Semantic 和 UIkit 的各个方面。我介绍了每个框架的起源以及它的主要功能。我还为您提供了每个框架的快速入门指南。

在这篇文章的最后，您将了解每个框架的主要功能和限制，并能够更好地确定哪些最适合您的需求。让我们开始吧：

引导程序#
基础#
布尔玛#
语义#
用户界面#

引导程序（getbootstrap.com）

Bootstrap 是一个响应式、移动优先的 CSS 框架，用于快速开发网站。它是这个列表中最流行的 CSS 框架，在 GitHub 上有超过 13 万颗星。Bootstrap 包含使用HTML、CSS 和JavaScript开发的即用型组件。

Bootstrap 最初于 2011 年在 Twitter 开发，但最终演变为一个独立项目。当前的稳定版本是 4.3。目前正在开发的 Bootstrap 5 将用 vanilla JS 代替 jQuery，放弃对过时浏览器的支持并更改当前的测试平台。

要使用 Bootstrap，您必须在构建新网页时执行以下操作：

使用 HTML5 文档类型
创建视口元标记
在head标签中导入 Bootstrap CSS
按jQuery顺序导入脚本，Popper.js然后bootstrap.min.js使用 Bootstrap 的任何 JavaScript 功能

这是一个入门模板。

<!doctype html>
<html>
  <head>
...
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
...
  </head>
  <body>
...
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  </body>
</html>

在本教程中，我们将为这些框架使用 CDN 托管的资源版本（CSS 和 JS 文件）。这是 Bootstrap 的快速入门指南。

除了强大的移动优先方法之外，该框架的成熟度还得到了社区的大力支持。此外，虽然 Bootstrap 维护了一个已批准的框架和工具包列表供您选择，但第三方开发人员还为 Bootstrap 提供工具包和包，它们可以同样轻松地与您的项目集成。这是我们为 Bootstrap 挑选的免费 UI 工具包。除了移动优先之外，还有一些对触摸屏的支持。由于 Bootstrap 是一个成熟的项目，它支持许多辅助功能。

Bootstrap 最大的缺点是增加了页面权重。虽然在平均页面大小约为 2MB 的世界中，几百 KB 可能并不重要，但它可能会让追求最高效率的开发人员感到担忧。对 jQuery 的依赖是一个令人担忧的问题，尽管知道 jQuery 的移除是 Bootstrap 5 路线图的一部分是令人鼓舞的。

优点：

移动优先，响应式网页设计框架
良好的社区支持和文档

缺点：

大依赖大小（~ 300KB）
依赖 jQuery 以使某些组件正常工作

如果您正在寻找具有良好支持基础的稳定平台，Bootstrap 应该是您的首选。如果您不希望对默认组件进行太多修改，这是正确的选择。Bootstrap 非常适合那些希望在敏捷环境中快速迭代解决方案的人。

基金会(foundation.zurb.com)

Foundation 于 2011 年在 Bootstrap 的一个月内首次发布，它是一类前端框架，不仅适用于网站，还适用于应用程序和电子邮件！让我们看看 Bootstrap 与 Foundation 是如何叠加的！

就像 Twitter 的 Bootstrap 一样，Foundation 最初是作为 Zurb 基金会的内部工具，然后最终作为框架发布。Foundation 的源代码是开源的，重点是移动优先的响应式设计。Foundation 有一个类似于 Bootstrap 的网格系统，有 12 列可供选择。此外，JavaScript 也是可选的！

在您的网站上使用 Foundation 的大致步骤如下：

下载基金会资源
使用 HTML5 文档类型
head在标签中添加 Foundation CSS 文件
包括 jQuerywhat-input.js和 Foundation 的脚本
在结束body标记之前，调用foundation()函数将 Foundation 属性附加到各种 DOM 元素

这是一个快速入门模板：

<!doctype html>
<html class="no-js" lang="en">
  <head>
...
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="css/foundation.css" />
  </head>
  <body>
...
    <script src="js/vendor/jquery.js"></script>
    <script src="js/vendor/what-input.js"></script>
    <script src="js/vendor/foundation.min.js"></script>
    <script>
      $(document).foundation();
    </script>

  </body>
</html>

如果适合您的需要，您可以下载Foundation 框架的自定义构建。

当我们尝试比较 Bootstrap 和 Foundation 时，会出现一些问题。Bootstrap 提供了来自社区的更多支持，使用起来更容易一些，并且在您被盯着看时为您提供了广泛的主题可供选择。另一方面，Foundation 为您提供了对组件的更多控制和自由，而无需向 DOM 元素添加类——因为属性与组件相关联。此外，由于 Foundation 已经开发了几年，它提供了许多辅助功能。

优点：

移动优先，响应式网页设计框架
为应用程序和电子邮件提供支持

缺点：

像 Bootstrap 这样的大依赖大小
大量可能让初学者不知所措的功能

Bootstrap 与 Foundation 之间的功能没有显着变化，选择任何一个平台都不会损失太多。话虽如此，如果您想更好地控制您的项目，您可能应该选择 Foundation。

布尔玛(bulma.io)

Bulma 是一个基于 Flexbox 的开源轻量级 CSS 框架。

虽然还没有达到 Bootstrap 的水平，但 Bulma 是 GitHub 上一个相当受欢迎的项目，拥有超过 35k 颗星。

Bulma 被设计成一个移动优先的响应式框架，并且更加注重模块化。

为了在您的项目中使用 Bulma，您必须按照以下步骤操作：

添加 HTML5 文档类型
为响应式视口添加元标记
head在您的标签中包含 Bulma CSS 文件
[可选] 添加fontawesome脚本以使用图标

这是一个模板：

<!DOCTYPE html>
<html>
  <head>
...
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.min.css">
    <script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>
  </head>
  <body>
...
  </body>
</html>

回到关于 Bootstrap 与 Foundation 与 Bulma 的辩论，Bulma 的学习曲线更为平缓。Bulma 与 Bootstrap 和 Foundation 的一个显着区别是只关注 CSS，框架中没有任何 JavaScript 元素。JavaScript 的排除也使框架变得轻量级。在可访问性方面，Bulma 仅部分可访问，尽管社区正在定期增加支持。

优点：

轻量级、基于 flexbox 的框架
模块化元素实现了灵活性

缺点：

没有 JavaScript 元素
对可访问性的有限支持

作为开发人员，如果您想使用轻量级框架来帮助您为 Web 创建响应式元素，则应该选择 Bulma。如果您在此过程中遇到困难，该框架有相当多的支持可以帮助您。

语义(semantic-ui.com)

Semantic 是一个 CSS 框架，旨在创建直观的用户界面。

该框架使用明显的类名来帮助简化学习过程。Semantic 中的类受到英语的启发，将逻辑概念与类名联系起来。

要在您的项目中使用语义组件，您需要完成以下步骤：

包含 HTML5 文档类型
加载语义 CSS 文件
在调用任何 JavaScript 元素之前包含 jQuery
包含语义的脚本

这是一个模板：

<!DOCTYPE html>
<html>
  <head>
...
    <link rel="stylesheet" type="text/css" href="semantic/dist/semantic.min.css">
  </head>
  <body>
...
    <script
      src="https://code.jquery.com/jquery-3.1.1.min.js"
      integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
      crossorigin="anonymous"></script>
    <script src="semantic/dist/semantic.min.js"></script>
  </body>
</html>

将 Semantic 与 Bootstrap 与 Foundation 等进行比较，您会注意到，尽管有直观的命名约定，但 Semantic 在学习的复杂性方面仍存在不足。文档很广泛，但需要一些时间来适应。与Angular 和 React等 JavaScript 框架的集成很好，这使得它非常适合在涉及使用这些框架的应用程序中使用。

优点：

直观的类名
与 JavaScript 框架集成

缺点：

可能无法满足大型项目的需要
来自社区的有限支持

Semantic 是学习曲线相对容易的框架，也支持 JavaScript 框架。如果您的需求涉及到 JavaScript 的使用，那么您绝对应该考虑在您的下一个项目中使用这个框架。

UIkit (getuikit.com)

UIkit 是一个现代的轻量级框架，非常强调模块化来创建 Web 界面。

它是一个相对较新的开源框架，在 GitHub 上有大约 15k 颗星。UIkit 可帮助您创建响应式设计，并在 BrowserStack 上进行自动持续部署。

要在您的项目中使用 UIkit 组件，您需要完成以下步骤：

包含 HTML5 文档类型
加载 UIkit CSS 文件
包含 UIkit 的功能和图标脚本

这是一个模板：

<!DOCTYPE html>
<html>
  <head>
...
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.1.5/css/uikit.min.css" />
  </head>
  <body>
...
    <script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.1.5/js/uikit.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.1.5/js/uikit-icons.min.js"></script>
  </body>
</html>

如果我们将 UIkit 与 Bootstrap、Foundation 和 Bulma 进行比较，它有很多功能。尽管有 JavaScript 元素，但 UIkit 不依赖 jQuery，这使得最终用户的有效负载更小。在敏捷开发环境中快速迭代 Web 应用程序版本方面，它绝对与这些框架并驾齐驱。

优点：

专注于模块化，使其易于使用
元素可定制，带来灵活性

缺点：

有限的文档和社区支持

虽然 UIkit 在控制结构和功能方面为您提供了很大的自由，但它是相当新的，如果您遇到框架问题，这会导致在线支持有限。因此，只有当你的前端编程技能足够先进时，才应该在项目中考虑这个框架。