bootstrap⼀排5个_5个最好的Bootstrap替代⼯具推荐
本⽂概述
Bootstrap随处可见, 但它并不总是正确的⼯具。这⾥有⼀些不错的选择！
如果你最近⼏天随机检查⽹站前端的源代码, 很可能会在下⾯到Bootstrap。我们都已经习惯了诸如容器流体, ⾏, col-sm-6等概念, 因此很难想象甚⾄可以使⽤任何其他样式的前端开发。因此, 当我们必须构建下⼀个项⽬时, 我们会不⾃觉地接触Bootstrap。也就是说, Bootstrap的流⾏并不适合所有项⽬和需求。
实际上, 对于真正精简的前端, 加载所有Bootstrap CSS和JS可能会导致严重的膨胀。
本⽂有两个⽬的：
提供类似于Bootstrap的⾮Bootstrap实时替代⽅案
解释为什么你可能想在Bootstrap上考虑这些替代⽅案
我认为解释部分⾮常重要, 因为在⼤多数情况下, ⼈们甚⾄都没有意识到⾃⼰有问题, 或者他们通过选择B
ootstrap来使⼯作变得更艰难。最后, 请注意, 这绝不是反引导程序。我喜欢Bootstrap 4, 并尽可能使⽤它。但是, 然后, 我是⼀个个⼈开发⼈员, 必须考虑使⽤最受欢迎的解决⽅案；另外, 我本⾝不是UI开发⼈员, 因此在构建前端时不必担⼼太多事情。
接下来, 让我们看看我们有哪些替代⽅案。
Flexbox⽹格
想⼀想：你开始使⽤Bootstrap且仍在使⽤它的最⼤原因是它的⽹格系统。当然, 花了⼀些时间来适应⾏, col-md-6等类, 但是现在考虑按⾏，列, 偏移量等考虑布局是第⼆天性。
⽽且, 如果你对⾃⼰诚实, 那么你会发现Bootstrap中的其他所有内容都很⿇烦。⽆论你是在做表单, 导航, 按钮, 表格还是其他任何东西, 都要记住很多课。如果你像我⼀样, 你仍然还不习惯所有的类以及它们的⽤途, 并且经常将Bootstrap仅⽤于⽹格并⾃⼰编写所有其他CSS。
如果是这样, 那么使⽤Flexbox Grid可以做得更好。
顾名思义, Flexbox Grid是基于CSS Flexbox属性的⽹格系统。但是, 与CSS技术不同, 所有复杂性都被很好地抽象了, 因此你只关注按所需⽅式放置元素。最好的部分是, 所有代码和类名都可以模仿你在Bootstrap 4中所需的内容, 这意味着在这两种⼯具之间进⾏切换需要零的⼼理负担。例如, 这是Flexbo
x⽹格中”周围”空间的代码：
around
around
around
此⽹格系统的最⼩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：
Lorem Ipsum
Dolor Sit Amet
Proident laborum
Praesent consectetur
你会注意到不再有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中使⽤⽹格系统的⽅法如下：
4 columns
4 columns
4 columns
4 columns
这⾥的” c”代表”列”, 因此” c4″表⽰⼀列, 该列跨越四个单位(⽹格为12尺⼨, 就像Bootstrap⼀样)。我认为这与Bootstrap⾮常相似,⽽且⾮常直观。
总⽽⾔之, Zitit是⼀个完整⽽简单的框架, ⽤于开发具有响应能⼒且外观美观的UI原型。它⽐Bootstrap更好(在原型设计⽅⾯), 因为Bootstrap的下载量要⼤得多, ⽽且最终的设计很俗⽓。
HTML KickStart
在你构建的⼤多数项⽬中, 速度⾄关重要。加快Web开发速度的最⼤障碍是前端部分, ⽽前端开发中最⼤的”层”是对外观精美的交互式组件进⾏编码的需求。由于组件可以通过多种⽅式运⾏, 并且需要管理许多屏幕尺⼨, 因此编码和管理组件可能成为开发⼈员的噩梦。
HTML KickStart提供了⼀种替代⽅法。
简单地说；它是⼀组⾮常时尚的组件, 你可以将它们放到项⽬中, 并⼤⼤减少开发时间。这是我发现的⼀些不错的组件：
dropdown
button
标签(居中和带有图标)
Materialize
如果你喜欢Bootstrap并能为所有常见的⽹页设计问题提供现成的解决⽅案, 但你还是喜欢Material设计风格, 则应该尝试Materialize。Materialize⼤多类似于Bootstrap — 12点⽹格系统, 偏移量以及诸如表格, 卡⽚等熟悉的组件。但是, 它确实具有吸引许多⼈的优点。
推拉
为什么使用bootstrap?
通过Materialize CSS的推/拉功能, 你可以对列进⾏重新排序。这让⼈联想到新的CSS Grid标准, 该标准的布局与元素顺序不同。
This div is 7-columns wide on pushed to the right by 5-columns.
5-columns wide pulled to the left by 7-columns.
结果如下：
你会注意到, 各列已切换位置, 这在传统的基于Bootstrap的CSS中可能是⽆法实现的。
JavaScript好东西
Materialize附带了很多JavaScript功能和效果。其中包括⼯具提⽰, 吐司(类似于Android的临时通知), Parallex, Pushpin等。我喜欢的⼀个⾮常令⼈惊奇的效果是FeatureDiscovery, 它基本上使你可以在某些事件(例如按钮按下)上突出显⽰页⾯上的某个元素, 以使⽤户将注意⼒吸引到该元素上。很难⽤语⾔完整地描述它, 因此请转到materializecss/feature-discovery.html了解我的意思。
总⽽⾔之, 对于那些希望采⽤功能全⾯的Material CSS框架的⼈, Materialize是Bootstrap的绝佳替代品。
总结
Bootstrap是响应式设计的代名词。正是Bootstrap推⼴了”移动优先设计”⼀词, 并展⽰了如何做到这⼀点。但是, 尽管Bootstrap⼤部分时间都能完成⼯作, 但仅完成⼯作并不总是⾜够的。如果你觉得Bootstrap限制了你并且你的需求很特殊, 则此处列出的选项之⼀会有所帮助。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。