Twitter bootstrap 使用带引导4的启动

目前，我正在为一个新的Angular 2项目使用UI库。我试过使用引导和材料。不幸的是，它们仍然处于Alpha和Beta阶段。我还检查了Priming。目前，Priming提供的组件比Material和NgBootstrap多得多。尤其是在餐桌上。底漆似乎稳定，可用于生产

我对Priming的网格系统不是很满意。例如，不清楚如何执行列偏移。我在这两个房间里都找不到这个

我开始使用Bootstrap4来启动组件。对我来说，这是否是一个好方法还不完全清楚。感觉上我有两个框架在某些情况下做着相同的事情。例如，如果我想创建一个按钮，我可以使用引导类执行以下操作

带引导的按钮

或者我可以使用Priming执行以下操作

<button pButton type="button" label="Button created with PrimeNG"></button>

---

我是否缺少Priming的一些功能，或者将引导与Priming结合使用是否有效，因为它在网格布局方面提供了更多功能？

将引导与引导一起使用没有什么错。您仍然可以使用Bootstrap的CSS特性。但正如您所说的，您只想使用引导的一些功能（比如它的网格系统），而不想使用PrimeNG framework中已有的其他功能，那么我建议您自定义引导。现在还没有官方的选项来定制Bootstrap，就像它在Bootstrap3中一样。但是你可以手工操作。只需下载Bootstrap的源代码（带有Sass文件），其中每个Bootstrap功能都有单独的文件，然后你可以注释掉你不想要的文件，如果你不需要它作为按钮，你可以注释掉

\u buttons.scss

文件或

\u modal.scss

等。它将为你编译CSS文件，其中只包含你想要的CSS。但为此，您需要对SASS有一些基本的了解。

我可以看出您当前的方法有两个缺点：

• 列出您团队中的其他开发人员可能不会立即意识到您使用了两个完整的框架，并且在您的上下文中使用其中任何一个都是为了“错误”的目的
• 根据构建系统的不同，您可能会携带很多不必要的行李

---

尽管如此，我认为这是一种有效的方法。但是，您可以考虑用Bootstrap替换网格布局的较小专用库，或者将PIMEN团队用于特定的网格布局相关特性，或者甚至只使用普通Flex Box。

< P> PRIMEN实际上有2个网格系统-类似于Bootstrap 3网格系统，和一个基于Flex Grand的网格系统。他们将旧版本列为已弃用版本，但如果您的用户群可能会使用不支持FlexGrid的浏览器，则需要使用“弃用”版本

他们的网格有12列，就像Bootstrap一样，并使用类，如

ui-g

，

ui-sm-*

，

ui-md-*

，

ui-lg-*

和

ui-xl-*

，其中*是从1到12的数字。与Bootstrap 3使用的类

row

不同，您使用

ui-g

作为新行

---

也就是说，在使用了引导3和启动后，我明白了为什么您可能想要将2结合起来。很多东西在引导中更容易使用，但如果您需要高级控件，比如可编辑的表，那么priming胜过引导。如果您只是以只读方式使用表，那么Bootstrap就可以了。

对于2020年来到这里的人来说，PrimeFlex现在作为一个单独的包推出，是一个非常成熟且易于使用的网格系统。