Layout Plugin Admin Pages: Use BootStrap? [closed]

Question

When you make your plugin admin pages, ie 'My Plugin Settings' page and etc. do you use bootstrap in them?

What is the convention for this and what do most in the industry use to lay out their plugin admin pages?

I am considering using it simply to use rows and columns so the layout is responsive. But maybe WordPress has its own existing classes? If thats the case I want to use that because I want to maintain standards and consistency with other plugins.

Any advice on what you use in plugins for layout and what is the standard?

*Edit: I can successfully import the BootStrap js css files but they change the whole dashboards styling - even for other pages like 'Add New Page' and other plugins settings pages. Is there any way to stop this? Other than going through the Bootstrap CSS file and removing everything related to body, etc.?

Answer 1

I used less to wrap Bootstrap css within custom div bootstrap-wrapper:

1 - Download Bootstrap Source from the download page, and extract.

2 - Inside bootstrap-3.3.7/less/ folder, create bootstrap-wrapper.less, and add the following code:

.bootstrap-wrapper {
    @import "bootstrap.less";
}

3 - Install less: npm install -g less

4 - From terminal, compile less files to get the css file:

cd bootstrap-3.3.7/less/
lessc bootstrap-wrapper.less bootstrap-wrapper.css

5 - Copy the file to your WordPress plugin (or theme), and enqueue it:

wp_enqueue_style('csbk_bs_css', plugins_url( '/css/bootstrap-wrapper.css', __FILE__ ));

6 - Inside your plugin page:

<div class="bootstrap-wrapper">
    <button class="btn btn-primary">Click me</button>
</div>

Reference: Using Bootstrap in Wordpress Admin Panel

Answer 2

Wordpress has a Settings API that allows you to register and create default admin-style inputs. It also takes care of loading and saving these settings in your database. The API is fairly verbose, but its documentation covers everything you need to know about it.

If you value sticking to the WP standards/conventions, I would suggest using it instead of injecting foreign CSS (even if it is something as widely used as bootstrap) and possibly messing up unexpected parts of your admin panel.

If you need more control over the way your admin page looks, just hand-craft those few lines of CSS or copy them over from bootstrap if you feel really lazy.

Answer 3

I have manage that this way and it seems it's gonna work. I have just use again the scripts that I have used for theme to save some memory on server.

/*
 *  Bootstrap Styles and scripts
 */
wp_register_style( 'bootstrap.min', 'http://domain.cz/wp-content/themes/theme-name/css/bootstrap.min.css' );
wp_enqueue_style('bootstrap.min');
//Bootstrap Scripts
wp_register_script( 'bootstrap.min', 'http://domain.cz/wp-content/themes/theme-name/js/bootstrap.min.js' );
wp_enqueue_script('bootstrap.min');
//Google Jquery
wp_register_script( 'jquery.min', 'https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js' );
wp_enqueue_script('jquery.min');