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.
- In a new Ember application, use Bower to install the latest version of Bootstrap:
$ bower install bootstrap --save-devThis uses Bower's frontend package manager to install Bootstrap. It will be saved as a development dependency in the
bower.jsonfile. - Update the
ember-cli-build.jsfile 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.importstatement 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. - Add a drop-down button to the application template:
// 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.
- Start the server and you'll see the rendered button:
After clicking on the button, the menu will be displayed.
- Let's install the Bootstrap Ember add-on and comment out
app.importsin theember-cli-build.jsfile:$ ember install ember-bootstrapEmber Bootstrap is an add-on that includes all the normal
cssand 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.
- Update the application template file using the new Ember Bootstrap components:
// 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.
- Load the server and you'll see the following image:
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.