前 5 个 Bootstrap 替代品

0 Shares

Bootstrap的替代方案：探索前端开发的更多选择

Bootstrap框架在现代网页开发中应用广泛，但这并不意味着它是所有项目的理想选择。本文将探讨一些出色的替代方案，它们可以满足不同的需求和偏好。

如今，随便查看一个网站的前端源代码，很可能会发现Bootstrap的身影。我们早已熟悉诸如container-fluid、row、col-sm-6等概念，以至于很难想象没有Bootstrap，前端开发会是什么样子。因此，在开始新项目时，我们常常会不自觉地选择Bootstrap。然而，流行的未必适合所有项目和场景。

实际上，对于那些追求精简前端的开发者而言，加载Bootstrap的所有CSS和JavaScript可能会导致页面体积膨胀。这正是本文的目的：

提供Bootstrap之外的实时替代方案。
解释为何在某些情况下，这些替代方案可能比Bootstrap更合适。

我认为解释“为什么”非常关键。很多时候，开发者可能并未意识到自己遇到了问题，或者，他们在使用Bootstrap的过程中反而增加了工作难度。最后，请明确一点，本文并非批评Bootstrap。我个人也喜欢Bootstrap 4，并在力所能及的范围内使用它。但是，作为一名开发者，我必须考虑最适合的解决方案。另外，我并非专业的UI开发人员，所以在前端构建方面，我可能不会过于追求完美。

接下来，让我们看看有哪些替代选择。

弹性盒子网格

让我们思考一下：你最初使用Bootstrap，并一直沿用至今的最大原因是什么？很可能是它的网格系统。刚开始，可能需要花一些时间适应row、col-md-6等类，但现在，在布局方面考虑行、列和偏移量已经成为一种本能。

但如果认真反思，你会发现Bootstrap中的其他部分用起来有些繁琐。无论是表单、导航、按钮、表格，还是其他任何组件，都需要记住大量的类。如果你和我一样，你可能并没有完全记住所有类的功能和作用，而且你可能只为了网格系统而使用Bootstrap，其他CSS则自行编写。

如果是这样的话，你或许可以考虑弹性盒子网格。正如其名，Flexbox Grid是一个基于CSS 弹性盒子特性的网格系统。它巧妙地抽象了所有复杂性，让你只需专注于按照自己想要的方式排列元素。最棒的是，它的所有代码和类名都模仿了Bootstrap 4，这意味着在两者之间切换几乎没有任何认知上的障碍。例如，以下是Flexbox Grid中实现“周围空间”效果的代码：

    <div class="row around-xs">
        <div class="col-xs-2">
            <div class="box">
                around
            </div>
        </div>
        <div class="col-xs-2">
            <div class="box">
                around
            </div>
        </div>
        <div class="col-xs-2">
            <div class="box">
                around
            </div>
        </div>
    </div>

这个网格系统的压缩CSS文件只有10.7KB，可以在最终的下载大小中节省数百KB。目前，Flexbox Grid是我的首选，因为我不想与Bootstrap“对抗”来完全自定义它。我更喜欢从原始元素开始，自己设计它们，并在需要时使用Flexbox Grid。

你可以在这里在线学习弹性盒子。

纯CSS

如果Bootstrap能够被拆分成模块，让我们只导入所需的模块，那不是很好吗？

纯CSS就做到了这一点。它是一组涵盖网站不同功能区域的模块。你可以选择下载其中一个或全部，但总的下载大小不会超过3.7KB！

没错，你没看错。

所有模块捆绑在一起并压缩后，只有3.7KB，即使单独下载，体积也不会很大。网格模块只有0.8KB，而基础模块只有1.0KB。PureCSS背后的团队表示，它是完全为移动设备构建的，因此每一行CSS在被包含之前都经过了仔细审查，以提高效率。

因此，假设你只需要网格和表单模块。没问题，只需下载这两个模块（以及基础模块），总大小将不到3.4KB！如果你不打算使用按钮、表格或菜单模块，则无需包含它们对应的CSS。

不过，PureCSS有自己的类，而且生成的代码不会模仿你可能非常熟悉的Bootstrap：

   <div class="pure-g">
    <div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">
        <div class="l-box">
            <h3>Lorem Ipsum</h3>
        </div>
    </div>
    
    <div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">
       <div class="l-box">
           <h3>Dolor Sit Amet</h3>
       </div>
    </div>
    
    <div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">
       <div class="l-box">
           <h3>Proident laborum</h3>
       </div>
    </div>
    
    <div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">
       <div class="l-box">
           <h3>Praesent consectetur</h3>
       </div>
    </div>
</div>

你会注意到，这里不再是12列的网格。PureCSS有它自己的网格系统，它指定一列的宽度。因此，pure-u-lg-1-4表示该元素应占据大屏幕可用宽度的1/4或25%。宽度为1/5的倍数也可用。

总而言之，PureCSS是一个自由且令人惊叹的CSS工具（或框架），你可以根据需要从中挑选。当然，它也带来了一些学习曲线，因为你需要学习一种新的（略有不同的）做事方式。

PureCSS也有自己的类和默认样式，所以在这方面，它与Bootstrap并没有太大的不同。

齐米特

齐米特框架在这个列表中有点特殊。是的，它也是一个构建UI的框架，但它主要针对特定类型的UI：模型（mockup）。

有时，你需要开发前端来展示产品的功能。理想情况下，应该有UI设计师或开发人员参与，并使用高级线框图工具（例如Moqups、Blasmic等）创建模型。这些页面应该在像素级别上完美，配色方案时尚且经过精心挑选。同时，页面应该可以开放供讨论、评论等。

但现实往往并非如此。很多时候，你可能是项目中的唯一一人，需要身兼数职。此时，你需要一个框架：

允许你使用HTML/CSS进行编码。
轻巧。
拥有广泛的基础组件集合。
具有体面且一致的风格语言。
如果可能，类似线框设计的“灰色”色调。
易于学习。
内置CSS预处理器。

Zimit满足所有这些要求。它只有84KB大小，并且提供了多种组件可供选择。以下是一些我认为非常有用的示例，因为自己编写这些组件会耗费大量时间：

树状视图

面包屑

标签

还有更多其他有用的组件等待你去探索。你可以在这里查看。

让我们看看代码是什么样子。以下是在Zimit中使用网格系统的方法：

 <div class="row">
    <div class="c12">
       <div class="row">
          <div class="c4">4 columns</div>
          <div class="c4">4 columns</div>
       </div>
       <div class="row">
          <div class="c4">4 columns</div>
          <div class="c4">4 columns</div>
       </div>
    </div>
 </div>

这里的“c”代表“column”，所以“c4”表示跨越4个单元格的列（网格大小为12，与Bootstrap相同）。在我看来，它与Bootstrap非常相似，而且非常直观。

总而言之，Zimit是一个完整且简单的框架，可用于开发响应式且美观的UI原型。它比Bootstrap（在原型设计方面）更好，因为Bootstrap的下载大小要大得多，而且最终的设计也可能会比较俗气。

HTML启动

在你构建的大多数项目中，速度至关重要。加快Web开发速度的最大障碍之一是前端部分，而前端开发中最大的“延迟”是需要编写外观优雅的交互式组件。由于组件的行为方式有很多种，并且要管理各种屏幕尺寸，因此编码和管理组件可能会成为开发人员的噩梦。

HTML启动提供了另一种选择。

简单来说，它是一组非常时尚的组件，你可以直接将其放入项目中，从而大大缩短开发时间。以下是一些我个人觉得很不错的组件：

下拉菜单

按钮

标签页（居中且带有图标）

Materialize

如果你喜欢Bootstrap，因为它为所有常见的网页设计问题提供了现成的解决方案，但同时又是Material Design风格的忠实拥趸，那么你应该尝试一下Materialize。

Materialize与Bootstrap类似，它也采用了12列网格系统、偏移量和熟悉的组件，例如表单和卡片等。但是，它确实有一些吸引人的亮点。

推/拉

Materialize CSS的推/拉特性允许你对列进行重新排序。这让人联想到新的CSS Grid标准，其中布局和元素的顺序可以不同。

    <div class="row">
      <div class="col s7 push-s5"><span class="flow-text">This div is 7-columns wide on pushed to the right by 5-columns.</span></div>
      <div class="col s5 pull-s7"><span class="flow-text">5-columns wide pulled to the left by 7-columns.</span></div>
    </div>

这会产生以下结果：

你会注意到，列的位置已经被交换了，这在传统的基于Bootstrap的CSS中可能难以实现。

JavaScript组件

Materialize还附带了很多JavaScript特性和效果。例如，Tooltips、Toasts（类似于Android的临时通知）、Parallax和Pushpin等等。我个人很喜欢FeatureDiscovery效果，它允许你在某些事件（例如，按下按钮）时突出显示页面上的特定元素，以将用户的注意力吸引到该元素上。很难用文字来完整描述它，因此请访问https://materializecss.com/feature-discovery.html亲自体验一下。

总而言之，Materialize是Bootstrap的一个绝佳替代方案，或者说，对于那些想要采用功能全面的Material Design风格CSS框架的人来说，它是一个很好的选择。

结论

Bootstrap是响应式设计的代名词。它普及了“移动优先”的设计理念，并展示了如何实现它。尽管Bootstrap在大多数情况下都能满足需求，但仅仅完成工作可能还不够。如果你觉得Bootstrap限制了你的发挥，或者你的需求比较特殊，那么本文中列出的替代方案或许能帮到你。