twitter-bootstrap 在 Bootstrap 4 中使用 PrimeNG
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/44095217/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Using PrimeNG with Bootstrap 4
提问by Trafalgar
Currently, I am playing around with UI-Libraries for a new Angular 2 Project. I tried Ng-Bootstrap and Material. Unfortunately they are still in Alpha and Beta. I also checked PrimeNG. At the moment PrimeNG offers a lot more components than Material and NgBootstrap. Especially when it comes to tables. PrimeNG seems to be stable and ready to use for production.
目前，我正在为一个新的 Angular 2 项目使用 UI-Libraries。我尝试了 Ng-Bootstrap 和 Material。不幸的是，它们仍处于 Alpha 和 Beta 阶段。我还检查了 PrimeNG。目前，PrimeNG 提供的组件比 Material 和 NgBootstrap 多得多。尤其是在桌子上。PrimeNG 似乎很稳定，可以用于生产。
I am not really pleased with the Grid System of PrimeNG. For example it is not clear how to perform a column offset for example. I couldn't find this in the documentationneither.
我对 PrimeNG 的网格系统不太满意。例如，不清楚如何执行列偏移。我在文档中也找不到这个。
I started to use Bootstrap 4 with PrimeNG Components. To me it is not fully clear if this is a good way to do. It feels like I have two frameworks that are doing the same in some cases. For example if I want to create a button I could do the following just using Bootstrap classes.
我开始将 Bootstrap 4 与 PrimeNG Components 一起使用。对我来说，这是否是一个好方法并不完全清楚。感觉就像我有两个框架在某些情况下做同样的事情。例如，如果我想创建一个按钮，我可以仅使用 Bootstrap 类执行以下操作。
<button class="btn btn-primary">Button with Bootstrap</button>
<button class="btn btn-primary">Button with Bootstrap</button>
or I could do the following using PrimeNG
或者我可以使用 PrimeNG 执行以下操作
<button pButton type="button" label="Button created with PrimeNG"></button>
Am I missing some features of PrimeNG or is it valid to use Bootstrap in combination with PrimeNG as it offers more features when it comes to Grid-Layout?
我是否缺少 PrimeNG 的某些功能，或者将 Bootstrap 与 PrimeNG 结合使用是否有效，因为它在网格布局方面提供了更多功能？
回答by Ali Shahzad
There's nothing wrong with using Bootstrapalong with PrimeNG. You can still use the CSS goodies of Bootstrap. But as you said you only want to use few features of Bootstrap (like its grid system) and not the others that you already have in PrimeNG framework then I recommend to customize the Bootstrap. For now there's no official option out there to customize Bootstrap as like it's in Bootstrap 3. But you can do it manually. Just download the source of Bootstrap (with Sass files) where you'll have separate files for every feature of Bootstrap, then you can comment out the files that you don't want like if you don't need it for buttons you can comment out the _buttons.scssfile or _modal.scssetc. It will compile for you the CSS file which will only contain the CSS you want. But for this you need to have some basic knowledge about SASS.
没有什么错误使用Bootstrap沿PrimeNG。您仍然可以使用 Bootstrap 的 CSS 好东西。但是正如您所说，您只想使用 Bootstrap 的少数功能（例如它的网格系统），而不是您在 PrimeNG 框架中已有的其他功能，那么我建议您自定义 Bootstrap。目前还没有官方选项可以像在 Bootstrap 3 中一样自定义 Bootstrap。但是您可以手动进行。只需下载 Bootstrap 的源代码（带有 Sass 文件），您将在其中为 Bootstrap 的每个功能提供单独的文件，然后您可以注释掉您不想要的文件，如果您不需要它的按钮，您可以评论出_buttons.scss文件或_modal.scss等等。它会为你编译只包含你想要的 CSS 的 CSS 文件。但是为此，您需要对 SASS 有一些基本的了解。
回答by Jens Habegger
I can see two disadvantages with your current approach:
我可以看到您目前的方法有两个缺点：
- List other developers in your team might not immediately recognize that you're using two complete frameworks and use either one for the 'wrong' purpose within your context
- depending on your build system, you might be carrying a lot of unnecessary luggage.
- 列出您团队中的其他开发人员可能不会立即意识到您正在使用两个完整的框架，并且在您的上下文中将其中一个用于“错误”目的
- 根据您的构建系统，您可能会携带很多不必要的行李。
That said, I think it's a valid approach. However, you might consider replacing bootstrap with a smaller dedicated library for grid layouts or nagging the PrimeNG team for specific grid layout related features or even just use plain flex-box.
也就是说，我认为这是一种有效的方法。但是，您可能会考虑用较小的网格布局专用库替换引导程序，或者为特定的网格布局相关功能烦扰 PrimeNG 团队，甚至只使用普通的 flex-box。
回答by Karthik H
A big relief for all the PrimeNG fans.
所有 PrimeNG 粉丝都松了一口气。
The Latest version of PrimeNG 5.6.X and above ships with Bootstrap.
最新版本的 PrimeNG 5.6.X 及更高版本随 Bootstrap 一起提供。
Enjoy Coding :-)
享受编码:-)
回答by Cindy K.
PrimeNG actually has 2 Grid systems - an older onesimilar to the Bootstrap 3 grid system, and a new onethat is a FlexGrid-based grid system. They list the older one as deprecated, but if your user base will potentially use browsers that don't support FlexGrid, you will need to use the "deprecated" Grid.
PrimeNG 实际上有 2 个网格系统——一个类似于 Bootstrap 3 网格系统的旧网格系统，以及一个是基于 FlexGrid 的网格系统的新网格系统。他们将旧的列为已弃用，但如果您的用户群可能使用不支持 FlexGrid 的浏览器，您将需要使用“已弃用”的 Grid。
Their Grid has 12 columns, just like Bootstrap, and uses classes like ui-g, ui-sm-*, ui-md-*, ui-lg-*and ui-xl-*where the * is a number from 1 to 12. Instead of the class rowthat Bootstrap 3 uses, you use ui-gfor a new row.
他们的网格有12列，就像引导，并且使用类一样ui-g，ui-sm-*，ui-md-*，ui-lg-*和ui-xl-*其中*是不是类的1到12的数row是引导3层的用途，你用ui-g一个新行。
That being said, having used both Bootstrap 3 and PrimeNG, I can see why you might want to combine the 2. Many things are much easier to use in Bootstrap, but if you need advanced controls, like an editable table, then PrimeNG beats Bootstrap. If you are just using tables in a read-only fashion, then Bootstrap is fine.
话虽如此，在使用了 Bootstrap 3 和 PrimeNG 之后，我可以理解为什么您可能想要将这 2 组合起来。在 Bootstrap 中使用很多东西要容易得多，但是如果您需要高级控件，例如可编辑的表格，那么 PrimeNG 胜过 Bootstrap . 如果您只是以只读方式使用表格，那么 Bootstrap 很好。
