Bootstrap, formerly known as Twitter Bootstrap, is a popular, free, and open source collection of tools to create websites and applications. It contains several templates for typography, forms, buttons, and navigation.
You can use Bootstrap to make nice and simple user interfaces. In this recipe, we'll use it to create a drop-down menu.
$ bower install bootstrap --save-dev
This uses Bower's frontend package manager to install Bootstrap. It will be saved as a development dependency in the bower.json
file.
ember-cli-build.js
file and add the libraries for Ember Bootstrap:// ember-cli-build.js /* global require, module */ var EmberApp = require('ember-cli/lib/broccoli/ember-app'); module.exports = function(defaults) { var app = new EmberApp(defaults, { // Add options here }); app.import('bower_components/bootstrap/dist/js/bootstrap.js'); app.import('bower_components/bootstrap/dist/css/bootstrap.css'); return app.toTree(); };
The app.import
statement takes the asset path as the first and only argument. This is standard for non-AMD assets. Once this is loaded, we can use Bootstrap anywhere in our application.
// app/templates/application.hbs <h2 id="title">Welcome to Ember</h2> {{outlet}} <!-- Single button --> <div class="btn-group"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Action <span class="caret"></span> </button> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li role="separator" class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </div>
This will add a drop-down button.
After clicking on the button, the menu will be displayed.
app.imports
in the ember-cli-build.js
file:$ ember install ember-bootstrap
Ember Bootstrap is an add-on that includes all the normal css
and icon assets in your project. It also includes a set of native Ember components. It does not use the Bootstrap JavaScript file:
// ember-cli-build.js … //app.import('bower_components/bootstrap/dist/js/bootstrap.js'); //app.import('bower_components/bootstrap/dist/css/bootstrap.css'); …
As we are using the add-on, we must comment out the Bootstrap files. They are already included.
// app/templates/application.hbs <h2 id="title">Welcome to Ember</h2> <nav class="navbar navbar-default navbar-static"> <div class="container-fluid"> <ul class="nav navbar-nav"> {{#bs-dropdown tagName="li"}} {{#bs-dropdown-toggle}}Example Dropdown <span class="caret"></span>{{/bs-dropdown-toggle}} {{#bs-dropdown-menu}} <li>{{#link-to "info1"}}Info 1{{/link-to}}</li> <li>{{#link-to "info2"}}Info 2{{/link-to}}</li> {{/bs-dropdown-menu}} {{/bs-dropdown}} </ul> </div> </nav> {{outlet}}
All the Ember Bootstrap components start with bs
. The {{bs-dropdown}}
component creates a drop-down menu that displays links to the user.
Using Ember Bootstrap can be a little cleaner and easier than installing Bootstrap with Bower.
This is using Ember Bootstrap to create a menu.
Bootstrap is a versatile set of tools that can help you design a frontend quickly. Ember accepts assets using a library called Broccoli. Broccoli is an asset pipeline—it helps build the application. The app.import
statement is used to bring AMD and non-AMD assets in the application.
On the other hand, the Ember Bootstrap library can also be used. It has easy-to-use components built-in that make it easy to add buttons and menus.