ember-bootstrap uses the Bootstrap CSS classes while replacing the behaviors from the components Bootstrap implements
in bootstrap.js
, such as toggle, navbar, modal, etc., with equivalent, CSS class-compatible
native Ember components.
If you are not using a preprocessor, ember-bootstrap will import the static CSS files. If you are using Sass as a preprocessor, ember-bootstrap imports the preprocessor-ready versions of the styles.
bootstrap.js
because the jQuery and Ember ways of control flow and animation
sometimes don't play well together, causing unpredictable results. This is the main motivation behind ember-bootstrap.
It is possible to import
bootstrap.js
from manually. However this is NOT recommended or
supported, and you will be on your own. You have been warned!
When not using a CSS preprocessor (see below) ember-bootstrap will automatically import the static Bootstrap CSS into
your ember-cli build. In situations where you prefer to use another strategy for importing Bootstrap CSS,
you can opt out of CSS import by setting the importBootstrapCSS
option to
false in your ember-cli-build.js
:
//your-bootstrap-app/ember-cli-build.js
module.exports = function(defaults) {
let app = new EmberApp(defaults, {
'ember-bootstrap': {
'importBootstrapCSS': false
}
});
return app.toTree();
};
ember-bootstrap supports Sass (with
ember-cli-sass)
as a CSS preprocessor. When it detects it upon first installation of ember-bootstrap, it will install the
necessary packages and add an @import
statement to your app.scss
file respectively:
// app.scss
@import "ember-bootstrap/bootstrap";
This will add the whole bootstrap stylesheets allowing you to customize them easily using the available variables.
preprocessor
option:
ember generate ember-bootstrap --preprocessor=sass
! This will execute the necessary setup steps as described above.
It is possible to import only the assets your app needs but the definitions varies according to the chosen configuration.
// app.scss
// Required
@import "ember-bootstrap/functions";
@import "ember-bootstrap/variables";
@import "ember-bootstrap/mixins";
// Optional - Bootstrapping/Resetting
@import "ember-bootstrap/root";
@import "ember-bootstrap/print";
@import "ember-bootstrap/reboot";
// Optional - Everything else
@import "ember-bootstrap/type";
@import "ember-bootstrap/buttons";
You can also checkout which files are available for import in node_modules/bootstrap/scss
.