Using PrimeNG with Bootstrap 4

问题:

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.

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.

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>

or I could do the following using 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?

回答1:

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.

回答2:

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.

回答3:

A big relief for all the PrimeNG fans.

The Latest version of PrimeNG 5.6.X and above ships with Bootstrap.

Enjoy Coding :-)

回答4:

PrimeNG actually has 2 Grid systems - an older one similar to the Bootstrap 3 grid system, and a new one that 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.

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 row that Bootstrap 3 uses, you use ui-g for a new row.

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.