Understanding Bootstrap

HTML elements tell the browser what kind of content they represent, but they don’t provide any information about how that content should be displayed. The information about how to display elements is provided using Cascading Style Sheets (CSS). CSS consists of a comprehensive set of properties that can be used to configure every aspect of an element’s appearance and a set of selectors that allow those properties to be applied.

One of the main problems with CSS is that some browsers interpret properties slightly differently, which can lead to variations in the way that HTML content is displayed on different devices. It can be difficult to track down and correct these problems, and CSS frameworks have emerged to help web app developers style their HTML content in a simple and consistent way.

One CSS framework that has gained a lot of popularity recently is Bootstrap, which was originally developed at Twitter but has become a widely used open source project. Bootstrap consists of a set of CSS classes that can be applied to elements to style them consistently and some JavaScript code that performs additional enhancement.

I use Bootstrap frequently in my own projects; it works well across browsers, it is simple to use, and it builds on jQuery (which, as we have already established, is something that I like a great deal, although I won’t be using the features that rely on jQuery in this book).

I use the Bootstrap CSS styles in this book because they let me style my examples without having to define and then list my own custom CSS in each chapter. Bootstrap provides a lot more features than the ones I use and describe in this book; see http://getbootstrap.com for full details.

Tip I don’t use the Bootstrap JavaScript components in this book. There is nothing wrong with them—in fact, they work well—but my focus is on AngularJS in this book, and I just need the basic CSS styles for my examples.

I don’t want to get into too much detail about Bootstrap because it isn’t the topic of this book, but I do want to give you just enough information so you can see which parts of an example are AngularJS features and which are Bootstrap styling. To help me demonstrate the basic Bootstrap features, I have created an HTML file called bootstrap.html in the angularjs folder, the contents of which you can see in Listing 4-5.

Listing 4-5. The Contents of the bootstrap.html File

<!DOCTYPE html>

<html xmlns=”http://www.w3.org/1999/xhtml”>

<head>

<title>Bootstrap Examples</title>

<link href=”bootstrap.css” rel=”stylesheet” />

<link href=”bootstrap-theme.css” rel=”stylesheet” />

</head>

<body>

<div class=”panel”>

<h3 class=”panel-heading”>Button Styles</h3>

<button class=”btn”>Basic Button</button>

<button class=”btn btn-primary”>Primary</button>

<button class=”btn btn-success”>Success</button>

<button class=”btn btn-warning”>Warning</button>

<button class=”btn btn-info”>Info</button>

<button class=”btn btn-danger”>Danger</button>

</div>

<div class=”well”>

<h3 class=”panel-heading”>Button Sizes</h3>

<button class=”btn btn-large btn-success”>Large Success</button>

<button class=”btn btn-warning”>Standard Warning</button>

<button class=”btn btn-small btn-danger”>Small Danger</button>

</div>

<div class=”well”>

<h3 class=”panel-heading”>Block Buttons</h3>

<button class=”btn btn-block btn-large btn-success”>Large Block Success</button>

<button class=”btn btn-block btn-warning”>Standard Block Warning</button>

<button class=”btn btn-block btn-small btn-info”>Small Block Info</button>

</div>

</body>

</html>

Tip The examples that follow rely on the bootstrap.css and bootstrap-theme.css files that were added to the angularjs folder in Chapter 1. If you have removed these file, then follow the instructions in Chapter 1 to download Bootstrap again and copy them into place.

This HTML demonstrates a number of different features that are typical of the way that Bootstrap works and of how I apply Bootstrap in this book. You can see the effect that the HTML creates in the browser in Figure 4-3; I explain the features I have used afterward.

1. Applying Basic Bootstrap Classes

Bootstrap styles are applied via the class attribute, which is used to associate related elements. The class attribute isn’t just used to apply CSS styles, but it is the most common use, and it underpins the way that Bootstrap and similar frameworks operate. Here is an example of an HTML element from the listing to which I have applied the class attribute:

<div class=”panel”>

I have set the class attribute to panel, which is one of the many CSS classes defined by Bootstrap. When I set the class attribute to the name of a Bootstrap class, CSS style properties defined by Bootstrap are applied by the browser to change the appearance of that element. There are three basic style classes in Listing 4-5, which I describe in Table 4-3.

Tip Not all Bootstrap styles require explicit use of the class attribute. The heading elements, hi-h6, are automatically styled whenever they are used.

2. Modifying Style Context

Bootstrap defines a set of style context classes that are applied to elements to signify their purpose. These classes are specified with the name created by combining a basic Bootstrap style class (such as btn), a hyphen, and one of primary, success, warning, info, or danger. Here is an example of applying a style context class:

<button class=”btn btn-primary“>Primary</button>

Context classes must be applied along with the basic class, which is why the button element has both the btn and btn-primary classes. (Multiple classes are separated using spaces.) You don’t have to use a context class; they are entirely optional and are usually used just for emphasis.

3. Modifying Sizes

You can change the way that some elements are styled by using a size modification class. These are specified by combining a basic class name, a hyphen, and lg or sm. Here is an example from the listing of a size class:

<button class=”btn btn-lg btn-success”>Large Success</button>

Omitting a size class uses the default size for the element. Notice that I am able to combine a context class and a size class. Bootstrap class modifications work together to give you complete control over how elements are styled. For button elements, you can apply the btn-block class to create a button that fills the available horizontal space, as follows:

<button class=”btn btn-block btn-lg btn-success”>Large Block Success</button>

The btn-block class can be combined with size and context classes, as shown in Figure 4-3.

4. Using Bootstrap to Style Tables

Bootstrap also includes support for styling table elements—a feature I used for the example app in Chapter 2. Table 4-4 lists the CSS classes that Bootstrap includes for tables.

All of these classes are applied directly to the table element. I modified the bootstrap.html file to demonstrate the Bootstrap styling for tables, as shown in Listing 4-6.

Listing 4-6. Adding Styled Tables to the bootstrap.html File <!DOCTYPE html>

<html xmlns=”http://www.w3.org/1999/xhtml”>

<head>

<title>Bootstrap Examples</title>

<link href=”bootstrap.css” rel=”stylesheet” />

<link href=”bootstrap-theme.css” rel=”stylesheet” />

</head>

<body>

<div class=”panel”>

<h3 class=”panel-heading”>Standard Table with Context</h3>

<table class=”table”>

<thead>

<tr><th>Country</th><th>Capital City</th></tr>

</thead>

<tr class=”success”><td>United Kingdom</td><td>London</td></tr>

<tr class=”danger”><td>France</td><td>Paris</td></tr>

<tr><td>Spain</td><td class=”warning”>Madrid</td></tr>

</table>

</div>

<div class=”panel”>

<h3 class=”panel-heading”>Striped, Bordered and Highlighted Table</h3>

<table class=”table table-striped table-bordered table-hover”>

<thead>

<tr><th>Country</th><th>Capital City</th></tr>

</thead>

<tr><td>United Kingdom</td><td>London</td></tr>

<tr><td>France</td><td>Paris</td></tr>

<tr><td>Spain</td><td>Madrid</td></tr>

</table>

</div>

</body>

</html>

I have used two table elements to show how different Bootstrap classes can be combined. You can see the result in Figure 4-4.

The first table element has just the table class, so only the basic Bootstrap styles for tables are applied. For variety, I have applied the context classes to two tr elements and one td element to show that context styles can be applied to individual rows and cells.

For the second table, I have applied the basic table class as well as the table-striped, table-bordered, and table-hover classes. This has the effect of alternating the styles used for table rows, adding borders for rows and cells, and—although it can’t be seen in a static figure—highlighting rows as the mouse passes over them.

5. Ensuring the Correct Table Structure

Notice that I have used the thead element when defining the tables in Listing 4-6. Browsers will automatically add any tr elements that are direct descendants of table elements to a tbody element if one has not been used. You will get odd results if you rely on this behavior when working with Bootstrap because most of the CSS classes that are applied to the table element cause styles to be added to the descendants of the tbody element. Consider the table shown in Listing 4-7, which I have defined in the bootstrap.html file.

Listing 4-7. Defining a Table Without a Separate Header in the bootstrap.html File

<!DOCTYPE html>

<html xmlns=”http://www.w3.org/1999/xhtml”>

<head>

<title>Bootstrap Examples</title>

<link href=”bootstrap.css” rel=”stylesheet” />

<link href=”bootstrap-theme.css” rel=”stylesheet” />

</head>

<body>

<div class=”panel”>

<h3 class=”panel-heading”>Striped, Bordered and Highlighted Table</h3>

<table class=”table table-striped table-bordered table-hover”>

<tr><th>Country</th><th>Capital City</th></tr>

<tr><td>United Kingdom</td><td>London</td></tr>

<tr><td>France</td><td>Paris</td></tr>

<tr><td>Spain</td><td>Madrid</td></tr>

</table>

</div>

</body>

</html>

There is no thead element in the table element, which means that the header row is added to the tbody element that the browser creates automatically. This has a subtle but important effect on the way that the content is displayed, as shown in Figure 4-5.

Notice that the striping of the rows now starts with the header. This may not seem like a big deal, but if you run this example yourself and move the mouse over the table rows, you will see that the header row is included in the highlighting, something that is rarely desirable since it will confuse the user.

6. Using Bootstrap to Create Forms

Bootstrap includes styling for form elements, allowing them to be styled consistently with other elements in the application, as illustrated by Listing 4-8.

Listing 4-8. Styling Form Elements in the bootstrap.html File <!DOCTYPE html>

<html xmlns=”http://www.w3.org/1999/xhtml”>

<head>

<title>Bootstrap Examples</title>

<link href=”bootstrap.css” rel=”stylesheet” />

<link href=”bootstrap-theme.css” rel=”stylesheet” />

</head>

<body>

<div class=”panel”>

<h3 class=”panel-header”>

Form Elements

</h3>

<div class=”form-group”>

<label>Name:</label>

<input name=”name” class=”form-control” />

</div>

<div class=”form-group”>

<label>Email:</label>

<input name=”email” class=”form-control” />

</div>

<div class=”radio”>

<label>

<input type=”radio” name=”junkmail” value=”yes” checked />

Yes, send me endless junk mail

</label>

</div>

<div class=”radio”>

<label>

<input type=”radio” name=”junkmail” value=”no” />

No, I never want to hear from you again

</label>

</div>

<div class=”checkbox”>

<label>

<input type=”checkbox” />

I agree to the terms and conditions.

</label>

</div>

<input type=”button” class=”btn btn-primary” value=”Subscribe” />

</div>

</body>

</html>

This HTML file contains a number of form elements that gather data from the user. I explain the AngularJS support for forms in Chapter 12, but this example is just to show how Bootstrap can be used to style form elements; you can see the result in Figure 4-6.

The basic styling for forms is achieved by applying the form-group class to a div element that contains a label and an input element, as follow:

<div class=”form-group”>

<label>Email:</label>

<input name=”email” class=”form-control” />

</div>

Bootstrap styles the elements so that the label is shown above the input element and the input element occupies 100 percent of the available horizontal space.

There are different classes for other form elements. In the example, I have used the checkbox class, which is also applied to div elements, for input elements whose type is set to, obviously enough, checkbox, as follows:

<div class=”checkbox”>

<label>

<input type=”checkbox” />

I agree to the terms and conditions.

</label>

</div>

Tip Notice that the label element is used to contain the descriptive text and the input element, which is a different structure from the one used for other types of input element.

7. Using Bootstrap to Create Grids

Bootstrap provides style classes that can be used to create different kinds of grid layout, ranging from one to twelve columns and with support for responsive layouts (where the layout of the grid changes based on the width of the screen, allowing the same content to be laid out on mobile and desktop devices). In Listing 4-9, I have used the bootstrap.html file to create a grid layout.

Listing 4-9. Creating a Grid Layout in the bootstrap.html File

<!DOCTYPE html>

<html xmlns=”http://www.w3.org/1999/xhtml”>

<head>

<title>Bootstrap Examples</title>

<link href=”bootstrap.css” rel=”stylesheet” />

<link href=”bootstrap-theme.css” rel=”stylesheet” />

<style>

#gridContainer {padding: 20px;}

.grid-row > div { border: 1px solid lightgrey; padding: 10px;

background-color: aliceblue; margin: 5px 0; }

</style>

</head>

<body>

<div class=”panel”>

<h3 class=”panel-header”>

Grid Layout

</h3>

<div id=”gridContainer”>

<div class=”row grid-row”>

<div class=”col-xs-l”>l</div>

<div class=”col-xs-l”>l</div>

<div class=”col-xs-2″>2</div>

<div class=”col-xs-2″>2</div>

<div class=”col-xs-6″>6</div>

</div>

<div class=”row grid-row”>

<div class=”col-xs-3″>3</div>

<div class=”col-xs-4″>4</div>

<div class=”col-xs-5″>5</div>

</div>

<div class=”row grid-row”>

<div class=”col-xs-6″>6</div>

<div class=”col-xs-6″>6</div>

</div>

<div class=”row grid-row”>

<div class=”col-xs-ll”>ll</div>

<div class=”col-xs-l”>l</div>

</div>

<div class=”row grid-row”>

<div class=”col-xs-12″>12</div>

</div>

</div>

</div>

</body>

</html>

The Bootstrap grid layout system is simple to use. You specify a column by applying the row class to a div element, which has the effect of setting up the grid layout for the content that the div element contains.

Each row defines 12 columns, and you specify how many columns each child element will occupy by assigning a class whose name is col-xs followed by the number of columns. For example, the class col-xs-1 specifies that an element occupies one column, col-xs-2 specifies two columns, and so on, right through to col-xs-12, which specifies that an element fills the entire row. In the listing, I have created a series of div elements with the row class, each of which contains further div elements to which I have applied col-xs-* classes. You can see the effect in the browser in Figure 4-7.

Bootstrap doesn’t apply any styling to the elements within a row, which I why I have used a style element to create a custom CSS style that sets a background color, sets up some spacing between rows, and adds a border. This is the grid-row class that you can see applied alongside the row class:

<div class=”row grid-row“>

8. Creating Responsive Grids

Responsive grids adapt their layout based on the size of the browser window. The main use for responsive grids is to allow mobile devices and desktops to display the same content, taking advantage of whatever screen space is available. To create a responsive grid, replace the col-* class on individual cells with one of the classes shown in Table 4-5.

When the width of the screen is less than the class supports, the cells in the grid row are stacked vertically rather than horizontally. As a demonstration, I have created a responsive grid on the bootstrap.html file, as shown in Listing 4-10.

Listing 4-10. Creating a Responsive Grid in the bootstrap.html File <!DOCTYPE html>

<html xmlns=”http://www.w3.org/1999/xhtml”>

<head>

<title>Bootstrap Examples</title>

<meta name=”viewport” content=”width=device-width, initial-scale=l”>

<link href=”bootstrap.css” rel=”stylesheet” />

<link href=”bootstrap-theme.css” rel=”stylesheet” />

<style>

#gridContainer { padding: 20px; }

.grid-row > div { border: 1px solid lightgrey;

padding: 10px; background-color: aliceblue; margin: 5px 0; }

</style>

</head>

<body>

<div class=”panel”>

<h3 class=”panel-header”>

Grid Layout

</h3>

<div id=”gridContainer”>

<div class=”row grid-row”>

<div class=”col-sm-3″>3</div>

<div class=”col-sm-4″>4</div>

<div class=”col-sm-5″>5</div>

</div>

<div class=”row grid-row”>

<div class=”col-sm-6″>6</div>

<div class=”col-sm-6″>6</div>

</div>

<div class=”row grid-row”>

<div class=”col-sm-ll”>ll</div>

<div class=”col-sm-l”>l</div>

</div>

</div>

</div>

</body>

</html>

I removed some grid rows from the previous example and replaced the col-xs* classes with col-sm-*. The effect is that the cells in the row will be stacked horizontally when the browser window is greater than 768 pixels wide and stacked horizontally when it is smaller. You can see the effect in Figure 4-8, which shows the listing displayed in Chrome and an iPhone emulator.

Tip Notice that I added a meta element to this example. This element tells mobile browsers to display the content actual size. Without the meta element, many mobile browsers will display the content as though it were intended only for a desktop and expect the user to zoom in to see any detail. In short, you should always add a meta element like the one in the listing when targeting mobile devices. See my The Definitive Guide to HTML5 book, also published by Apress, for full details.

Source: Freeman Adam (2014), Pro AngularJS (Expert’s Voice in Web Development), Apress; 1st ed. edition.

Leave a Reply

Your email address will not be published. Required fields are marked *