前8个Bootstrap替代方案

Bootstrap无处不在，但并不总是最合适的工具。下面是一些很好的替代品！

如果你随机查看一个网站前端的源代码，很有可能你会发现Bootstrap的存在。

我们已经习惯了container-fluid、row、col-sm-6等概念，很难想象还有其他风格的前端开发方式。因此，当我们需要构建下一个项目时，我们不自觉地选择了Bootstrap。然而，流行并不意味着Bootstrap适用于所有项目和需求。

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

本文有两个目的：

1. 提供与Bootstrap不同的实时替代品
2. 解释为什么你可能希望考虑这些替代品而不是Bootstrap

我认为解释部分非常重要，因为在大多数情况下，人们甚至没有意识到自己存在问题，或者他们选择Bootstrap会使工作变得更加艰难。最后，请注意，这绝对不是一篇反对Bootstrap的文章。

我喜欢Bootstrap 4，并尽可能地使用它。但是，我是一个个人开发人员，必须考虑使用最流行的解决方案；此外，我不是一个专门的UI开发人员，因此在构建前端时，我不会过多地担心很多事情。

有了这个前提，让我们来看看我们有哪些替代品。

Flexbox Grid

请花一分钟思考一下：你开始使用Bootstrap并仍在使用它的最大原因是它的网格系统。当然，要习惯row、col-md-6等类名是需要些时间的，但现在以行、列、偏移量等方式来考虑布局已经成为了第二天性。

如果你对自己诚实，你会发现Bootstrap中的其他所有内容都有点难以使用。

有许多类名需要记住，无论是处理表单、导航、按钮、表格还是其他任何东西。如果你像我一样，你仍然没有习惯所有的类名以及它们的作用，你经常只使用Bootstrap的网格系统，其他的CSS代码都是自己编写的。

如果是的，你可以通过使用Flexbox Grid做得更好。

Flexbox Grid，顾名思义，是一种基于CSSFlexbox属性的网格系统。然而，与CSS技术不同的是，它将所有的复杂性很好地抽象化，以便你只需专注于按照自己的需求放置元素。

最好的部分是，所有的代码和类名与Bootstrap 4中的要求完全相同，这意味着在这两个工具之间切换不需要任何心理摩擦。例如，下面是Flexbox Grid中”space around”的代码：

    
        
            around
        
    
    
        
            around
        
    
    
        
            around
        
    

这个网格系统的压缩CSS文件仅为10.7 KB，节省了几百KB的最终下载大小。如今，Flexbox Grid是我最喜欢的工具，因为我不想费力地定制Bootstrap。我喜欢用原始元素开始并自己进行样式处理，只在需要的地方使用Flexbox Grid。

学习更多关于Flexbox here, online的内容。

PureCSS

如果Bootstrap被分成了模块，你只能导入需要的模块，那不是很好吗？

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

是的，你没有看错。

所有模块在捆绑和压缩后的大小为3.7 KB，尽管它们分别占据更多空间。网格模块只有0.8 KB，而基本模块为1.0 KB。PureCSS团队表示，它完全针对移动设备进行构建，因此在包含之前，每一行CSS都经过了仔细审查以提高效率。

假设你只需要网格和表单模块。那么，只需下载这两个模块（以及基本模块），不到3.4 KB就可以完成！如果不使用按钮、表格和菜单模块，就不需要包含它们的CSS。

PureCSS有自己的类，而且生成的代码不像您可能非常熟悉的Bootstrap：

    
        
            
Lorem Ipsum
        
    
    
    
       
           
Dolor Sit Amet
       
    
    
    
       
           
Proident laborum
       
    
    
    
       
           
Praesent consectetur
       
    

你会注意到这里没有12列网格了。PureCSS有自己的网格系统，指定了每个列应该占据多少宽度。因此，pure-u-lg-1-4表示此元素应在大屏幕上占据可用宽度的1/4或25%。也可用于宽度的乘以1/5的倍数。

总的来说，PureCSS是一个解放和令人惊奇的CSS工具(framework?)，您可以根据需要进行选择。也就是说，它需要一定的投入和学习曲线，因为您需要学习一种新的（略有不同的）操作方式。

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

Zimit

这个Zimit框架在列表中有点格格不入。是的，它是一个构建用户界面的框架，但它针对的是特定类型的用户界面：模型。

有时您需要开发前端来展示产品的功能。当然，理想的方式是让一个UI设计师/开发者参与进来，并在一种高级线框工具（Moqups，Blasmic等）上创建模型。

页面将是像素完美的，配色方案时尚而精心选择的，页面将对参与、评论等开放。

但现实生活并非理想，往往只有您一人参与工作，必须承担所有角色并完成工作。在这些时候，您需要一个满足以下条件的框架：

• 允许您使用HTML/CSS进行编码
• 轻量级
• 具有广泛的基本组件集合
• 具有良好且一致的样式语言
• 如果可能，与线框设计的“灰色”色调相似
• 易于学习
• 具有某种内置的CSS预处理器

Zimit满足所有这些要求。它只有84 KB大小，具有广泛的组件选择。以下是我发现非常吸引人的一些示例，如果自己编写代码将花费很多时间。

树状视图

面包屑

标签页

还有许多其他有趣的内容可供探索。查看它们：here

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

   
      
         4列
         4列
      
      
         4列
         4列
      
   

这里的“c”表示“列”，因此“c4”表示占据四个单位的列（网格大小为12，就像Bootstrap一样）。在我看来，非常类似于Bootstrap，也非常直观。

总的来说，Zimit是一个完整而易用的框架，用于快速开发响应式且外观良好的UI原型。与Bootstrap相比（在原型设计方面），它更好，因为Bootstrap的下载文件更大，生成的设计也显得“俗气”。

Tailwind

Tailwind CSS 创建实用类而不是预定义的组件样式。

这个框架允许开发人员使用实用类来控制阴影、排版、布局、间距等，可以在HTML文件中创建自定义组件设计，而无需编写代码。

您可以创建一个简单的表单，让用户选择如下；

您可以根据需要自定义不同的内容，例如文本颜色、背景颜色和边框大小。

为什么选择Tailwind CSS？

• 低特异性：Tailwind的选择器特异性较低，使其不太可能覆盖或与其他样式冲突。因此，在使用Tailwind的实用类时，您可以编写较少的代码，仍然能够生成可维护的代码。
• 有观点且灵活：Tailwind旨在在可定制性和灵活性之间取得平衡。该框架建议使用一致的颜色调色板、间距比例和排版。然而，您仍然可以自定义某些默认设置以满足您的需求。
• 即时编译（JIT）提高构建时间：JIT功能提供了一种高效快速的生成最终CSS代码的方式。有了这个功能，Tailwind只会生成在您的HTML代码中使用的样式。基本上，每当您加载一个网页时，您的浏览器将向JIT服务器发送一个请求，该服务器将为该特定文件生成一个优化的CSS代码，并将其发送回浏览器。

Tailwind CSS适合您如果您正在寻找一个特异性较低的框架，您想要创建自定义设计并仍然享受灵活性。

Bulma

Bulma是一个基于Flexbox的开源UI框架。该框架具有各种可直接使用的前端组件，您可以将它们组合起来创建具有视觉吸引力和响应式的界面。

配置简单是Bulma在UI开发人员中日益流行的原因之一。

为了演示它的工作原理，我们将使用以下代码创建几个选项卡；

  


    
图片

    
音乐

    
视频

    
文档

  

渲染后的页面将显示如下；

您可以根据需要自定义选项卡。例如，您可以将活跃链接更改为非活跃状态，居中选项卡，更改选项卡上的文本等。

为什么选择Bulma？

• Bulma具有12列网格系统，可以将页面划分为等宽列。美妙的是，这些网格根据屏幕尺寸自动调整。
• 如果您希望自定义应用程序，Bulma非常适合，因为它带有一些默认设置。
• 该框架还提供了很大的灵活性，因为它基于Flexbox。
• Bulma很轻巧，因为它使用最少的JavaScript，从而生成更小的应用程序。

Bulma适合寻找简单而强大的UI框架的开发人员。Bulma组件的现代风格适合那些不想使用通用和老式的Bootstrap设计的设计师。

UIkit

UIkit是一个轻量级的模块化框架，用于开发强大的Web界面。您可以使用CSS、Less和Sass与该框架一起使用。如果您想要一个具有可靠的HTML、CSS和JavaScript组件的平台，那么它将是理想的Bootstrap替代品。

要在代码中使用UIkit，请在部分中包括其CDN链接。您也可以从GitHub编译源代码。

安装完成后，您可以开始使用各种组件。例如，您可以添加一个uk-button组件，如下所示；

我的按钮

为什么选择UIkit

• 模块化架构： UIkit的组件是自包含的。因此，您可以只在应用程序中包含您需要的内容。这种方法可以减小JavaScript和CSS文件的大小。
• 内置JavaScript插件： 您可以通过UIkit的JavaScript插件（如选项卡、模态框和滑块）扩展其功能。
• 自定义： 可用的Sass变量和混合使得自定义更加灵活。因此，您可以设计出与应用程序需求相匹配的独特设计。
• 为您的编辑器提供UIkit自动完成工具： 您可以将UIkit插件或代码片段添加到您最喜欢的代码编辑器，如Visual Studio Code、Sublime Text 3或Atom，并获得在生成UIkit类和标记时的帮助。

UIkit将是寻找现代独特设计的开发人员的完美选择。为您的编辑器提供UIkit自动完成工具

HTML KickStart

在您构建的大多数项目中，速度至关重要。在网页开发中，实现快速的最大障碍是前端部分，而在前端开发中，最大的“拖延者”是需要编写优雅、交互式组件的需求。

由于组件可以有多种行为方式，并且需要管理多种屏幕尺寸，编写和管理组件可能会成为开发人员的噩梦。

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

简单来说，它是一组非常精美的组件，您可以直接将其放入您的项目中，大大缩短开发时间。以下是我发现的一些不错的组件：

下拉菜单

按钮

选项卡（居中和带图标）

Materialize

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

Materialize与Bootstrap非常相似- 12列网格系统、偏移和熟悉的组件，如表单、卡片等。然而，它确实拥有一些吸引人的特点。

推拉

Materialize CSS的推拉功能允许您重新排序列。这类似于新的CSS Grid标准，其中布局与元素的顺序不同。

      此
宽度为7列，向右推5列。
      宽度为5列，向左拉7列。

结果如下：

您会注意到列的位置发生了变化，这在传统基于Bootstrap的CSS中可能无法实现。

JavaScript好用的功能

Materialize附带了许多JavaScript功能和效果。工具提示、Toast（类似于Android的临时通知）、视差、固定等都是其中之一。

我特别喜欢的一个效果是FeatureDiscovery，它基本上允许您在页面上的某个事件（例如按钮按下）上突出显示一个元素，以引起用户的注意。很难用文字完全描述它，因此请访问https://materializecss.com/feature-discovery.html了解详情。

总的来说，Materialize是Bootstrap的一个很好的替代品，或者适用于那些希望采用功能齐全的Material CSS框架的人。

结论

Bootstrap与响应式设计是一体的。正是Bootstrap推广了“移动优先设计”这个术语，并展示了如何实现。但是，虽然Bootstrap大多数情况下可以完成工作，但仅仅完成工作并不总是足够。

如果你觉得Bootstrap限制了你，而且你的需求很特别，这里列出的一个选项将会对你有帮助。
你也可以阅读如何add Bootstrap to Angular。