最佳5种引导程序选择

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


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

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

本文有两个目的:

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

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

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

Flexbox网格

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

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

如果是的话,您可以做得更好 Flexbox网格.

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

周围

周围

周围

这个网格系统的CSS压缩文件只有10.7 KB,为您节省了数百KB的最终下载大小。如今,Flexbox Grid是我的最爱,因为我不想让Bootstrap对其进行完全自定义。我喜欢从香草元素开始并自行设置样式,在需要的地方使用Flexbox Grid.

学习 在线Flexbox,在线.

纯CSS

如果将Bootstrap拆分为模块,而您只能导入所需的模块,那会不会很好?

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

是的,你没看错.

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

假设您只需要表格和表格模块。好吧,只需下载这两个文件(以及基本模块),就可以完成3.4 KB的文件了!如果您不想使用Button,Tables和Menus模块中的CSS,则无需使用它们.

不过,PureCSS具有其类,并且生成的代码无法模仿您可能习惯的Bootstrap:

洛普伊普森

多萝尔·阿梅特

偶然劳动

临时保密

您会注意到不再有12列网格。 PureCSS的网格系统指定一列应采用的宽度。因此,pure-u-lg-1-4表示此元素应占用大屏幕上可用宽度的1/4或25%。宽度也可以是1/5的倍数.

总而言之,PureCSS是一种解放和令人惊叹的CSS工具(框架?),您可以根据需要进行选择。就是说,确实需要大量的买进和学习曲线,因为您需要学习一种新的(略有不同)的做事方式.

PureCSS还具有自己的类和默认样式,因此,它与Bootstrap并没有太大区别.

齐米特

齐米特 在此列表中,框架有点奇怪。是的,它是一个用于构建UI的框架,但它针对特定类型的UI:样机.

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

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

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

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

树视图

面包屑

标签

还有更多的好东西可供探索。去看一下 这里.

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

4列
4列

4列
4列

这里的“ c”代表“列”,因此“ c4”表示一列,该列跨越四个单位(网格为12尺寸,就像Bootstrap一样)。我认为与Bootstrap非常相似,并且非常直观.

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

HTML KickStart

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

HTML KickStart 提供替代.

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

落下

纽扣

标签(居中和带有图标)

物化

如果您喜欢Bootstrap并能为所有常见的网页设计问题提供现成的解决方案,但您还是喜欢Material Design风格的人,则应该尝试一下 物化.

Materialize就像Bootstrap一样-12点网格系统,偏移量和熟悉的组件,如表格,卡片等。但是,它确实具有某些优点,可以吸引许多人.

推拉

通过Materialize CSS的推/拉功能,您可以对列进行重新排序。这使人联想到新的CSS Grid标准,该标准的布局与元素顺序不同.

该div的宽度为7列,向右推5列.
5列宽,由7列向左拉.

结果如下:

您会注意到各列之间切换了位置,这在传统的基于Bootstrap的CSS中可能无法实现.

JavaScript好东西

Materialize附带了很多JavaScript功能和效果。其中包括工具提示,吐司(类似于Android的临时通知),Parallex,Pushpin等。我喜欢的一个非常令人惊奇的效果是FeatureDiscovery,它基本上使您可以在某些事件(例如按钮按下)上突出显示页面上的某个元素,以使用户将注意力转移到该元素上。很难用语言完整地描述它,因此请转到https://materializecss.com/feature-discovery.html了解我的意思.

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

结论

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

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map