O'Reilly logo

Learning Web Development with Bootstrap and AngularJS by Stephen Radford

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Scaffolding

Okay, now that we've got our base file and folder structure sorted we can begin to scaffold out our app using Bootstrap. Apart from including a collection of components, such as navigation and buttons, that we can use throughout our contacts manager, Bootstrap also includes an extremely powerful and responsive grid system that we're going to harness the power of.

Navigation

We're going to need a navbar to switch between each of our views. Naturally, this will be placed at the top of the screen.

Let's take a look at our completed navigation before we break it down:

<nav class="navbar navbar-default"role="navigation"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#nav-toggle"> ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required