将PrimeNG与Bootstrap 4一起使用 [英] Using PrimeNG with Bootstrap 4

问题描述

目前，我正在为新的Angular 2项目使用UI库.我尝试了Ng-Bootstrap和Material.不幸的是，它们仍然处于Alpha和Beta状态.我还检查了PrimeNG.目前，PrimeNG提供了比Material和NgBootstrap更多的组件.特别是在表格方面. PrimeNG似乎稳定并且可以用于生产.

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.

我对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 documentation neither.

我开始将Bootstrap 4与PrimeNG组件一起使用.对我来说，这是否是一个好方法尚不完全清楚.感觉好像我有两个在某些情况下做相同的框架.例如，如果我想创建一个按钮，则可以仅使用Bootstrap类进行以下操作.

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.

<button class="btn btn-primary">Button with Bootstrap</button>

或者我可以使用PrimeNG进行以下操作

or I could do the following using PrimeNG

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

我是否缺少PrimeNG的某些功能，或者将Bootstrap与PrimeNG结合使用是否有效，因为它在网格布局方面提供了更多功能?

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?

推荐答案

同时使用Bootstrap和PrimeNG并没有错.您仍然可以使用Bootstrap的CSS好东西.但是正如您所说，您只想使用Bootstrap的一些功能(例如其网格系统)，而不要使用PrimeNG框架中已经拥有的其他功能，因此我建议自定义Bootstrap.目前，尚无官方选项可以像在Bootstrap 3中那样自定义Bootstrap.但是您可以手动进行.只需下载Bootstrap的源代码(带有Sass文件)，您将在其中为Bootstrap的每个功能使用单独的文件，然后您可以注释掉不需要的文件，例如不需要按钮时就可以对其进行注释出_buttons.scss文件或_modal.scss等.它将为您编译仅包含所需CSS的CSS文件.但是为此，您需要具有有关SASS的一些基本知识.

There's nothing wrong with using Bootstrap along 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.scss file or _modal.scss etc. 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.

这篇关于将PrimeNG与Bootstrap 4一起使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！