5个最好的Bootstrap替代工具推荐

本文概述

• Flexbox网格
• PureCSS
• Zimit
• HTML KickStart
• Materialize

Bootstrap随处可见, 但它并不总是正确的工具。这里有一些不错的选择！

如果你最近几天随机检查网站前端的源代码, 很可能会在下面找到Bootstrap。我们都已经习惯了诸如容器流体, 行, col-sm-6等概念, 因此很难想象甚至可以使用任何其他样式的前端开发。因此, 当我们必须构建下一个项目时, 我们会不自觉地接触Bootstrap。也就是说, Bootstrap的流行并不适合所有项目和需求。

实际上, 对于真正精简的前端, 加载所有Bootstrap CSS和JS可能会导致严重的膨胀。

本文有两个目的：

1. 提供类似于Bootstrap的非Bootstrap实时替代方案
2. 解释为什么你可能想在Bootstrap上考虑这些替代方案

我认为解释部分非常重要, 因为在大多数情况下, 人们甚至都没有意识到自己有问题, 或者他们通过选择Bootstrap来使工作变得更艰难。最后, 请注意, 这绝不是反引导程序。我喜欢Bootstrap 4, 并尽可能使用它。但是, 然后, 我是一个个人开发人员, 必须考虑使用最受欢迎的解决方案；另外, 我本身不是UI开发人员, 因此在构建前端时不必担心太多事情。

接下来, 让我们看看我们有哪些替代方案。

Flexbox网格

想一想：你开始使用Bootstrap且仍在使用它的最大原因是它的网格系统。当然, 花了一些时间来适应行, col-md-6等类, 但是现在考虑按行, 列, 偏移量等考虑布局是第二天性。

而且, 如果你对自己诚实, 那么你会发现Bootstrap中的其他所有内容都很麻烦。无论你是在做表单, 导航, 按钮, 表格还是其他任何东西, 都要记住很多课。如果你像我一样, 你仍然还不习惯所有的类以及它们的用途, 并且经常将Bootstrap仅用于网格并自己编写所有其他CSS。

如果是这样, 那么使用Flexbox Grid可以做得更好。

顾名思义, Flexbox Grid是基于CSS Flexbox属性的网格系统。但是, 与CSS技术不同, 所有复杂性都被很好地抽象了, 因此你只关注按所需方式放置元素。最好的部分是, 所有代码和类名都可以模仿你在Bootstrap 4中所需的内容, 这意味着在这两种工具之间进行切换需要零的心理负担。例如, 这是Flexbox网格中”周围”空间的代码：

<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.7 KB, 为你节省了数百KB的最终下载大小。如今, Flexbox Grid是我的最爱, 因为我不想让Bootstrap对其进行完全自定义。我喜欢从香草元素开始, 并在需要的地方使用Flexbox Grid自己对它们进行样式设置。

在线了解Flexbox。

PureCSS

如果将Bootstrap拆分为模块, 而你仅可以导入所需的模块, 那不是很好吗？

好吧, PureCSS已经做到了这一点, 它是涵盖网站不同功能区域的一组模块。你可以选择下载一个或全部, 但下载大小不会超过3.7 KB！

是的, 你没有看错。

将所有模块捆绑在一起并压缩后, 它们的大小为3.7 KB, 尽管单独地它们总计更多。网格模块仅为0.8 KB, 而基本模块为1.0 KB。 PureCSS背后的团队表示, 它完全是在考虑移动设备的情况下构建的, 因此在加入CSS之前, 每行CSS都经过了仔细的效率审查。

假设你只需要表格和表格模块。好吧, 只需下载这两个文件(以及基本模块), 就可以用不到3.4 KB的空间完成操作！如果你不打算使用Button, Tables和Menus模块中的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并没有太大区别。

Zimit

Zimit框架在此列表中有点奇怪。是的, 这是一个用于构建UI的框架, 但它针对特定类型的UI：模型。

有时候, 你必须开发前端以显示产品的功能。当然, 理想的方法是让UI设计人员/开发人员参与其中, 并在一种先进的线框图工具(想到的Moqups, Blasmic等)上创建模型。这些页面将是完美的像素, 配色方案流畅且选择良好, 并且这些页面将开放供参与, 评论, 评论等使用。

但是现实生活并不理想, 通常你是唯一的工作人员, 必须戴上所有帽子才能完成工作。那时, 你需要一个框架：

• 允许你使用HTML / CSS进行编码
• 轻巧
• 拥有广泛的基本组件
• 具有体面和一致的样式语言
• 如果可能, 类似于线框设计的”灰色”色调
• 易学
• 内置一些CSS预处理器

Zimit选中所有这些框。它只有84 KB的大小, 并且具有多种组件可供选择。这里有一些我觉得很吸引人的示例, 因为你自己编写代码会花费很多时间。

树视图

面包屑

标签

还有更多的好东西可供探索。在这里查看它们。

让我们看看代码是什么样的。在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”代表”列”, 因此” c4″表示一列, 该列跨越四个单位(网格为12尺寸, 就像Bootstrap一样)。我认为这与Bootstrap非常相似, 而且非常直观。

总而言之, Zitit是一个完整而简单的框架, 用于开发具有响应能力且外观美观的UI原型。它比Bootstrap更好(在原型设计方面), 因为Bootstrap的下载量要大得多, 而且最终的设计很俗气。

HTML KickStart

在你构建的大多数项目中, 速度至关重要。加快Web开发速度的最大障碍是前端部分, 而前端开发中最大的”层”是对外观精美的交互式组件进行编码的需求。由于组件可以通过多种方式运行, 并且需要管理许多屏幕尺寸, 因此编码和管理组件可能成为开发人员的噩梦。

HTML KickStart提供了一种替代方法。

简单地说;它是一组非常时尚的组件, 你可以将它们放到项目中, 并大大减少开发时间。这是我发现的一些不错的组件：

dropdown

button

标签(居中和带有图标)

Materialize

如果你喜欢Bootstrap并能为所有常见的网页设计问题提供现成的解决方案, 但你还是喜欢Material设计风格, 则应该尝试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功能和效果。其中包括工具提示, 吐司(类似于Android的临时通知), Parallex, Pushpin等。我喜欢的一个非常令人惊奇的效果是FeatureDiscovery, 它基本上使你可以在某些事件(例如按钮按下)上突出显示页面上的某个元素, 以使用户将注意力吸引到该元素上。很难用语言完整地描述它, 因此请转到https://materializecss.com/feature-discovery.html了解我的意思。

总而言之, 对于那些希望采用功能全面的Material CSS框架的人, Materialize是Bootstrap的绝佳替代品。

总结

Bootstrap是响应式设计的代名词。正是Bootstrap推广了”移动优先设计”一词, 并展示了如何做到这一点。但是, 尽管Bootstrap大部分时间都能完成工作, 但仅完成工作并不总是足够的。如果你觉得Bootstrap限制了你并且你的需求很特殊, 则此处列出的选项之一会有所帮助。 ????