ASP.NET MVC 5 with Bootstrap and Knockout.js (2015)

Part I. Getting Started

Chapter 2. Introduction to Bootstrap

Bootstrap is an HTML, CSS, and JavaScript framework that creates consistent-looking, responsive websites. Bootstrap is automatically installed with MVC 5 applications and is immediately seen in action within the default layout that was created in Chapter 1. Through the use of basic HTML styled with specific CSS classes, it’s easy to create very nice-looking web pages.

This chapter will explore the many common components of Bootstrap, such as menus, buttons, and alerts. You can visit the Bootstrap Components listing for a more in-depth overview of the plethora of components that have been created. Some of the more complex components that require a combination of JavaScript, HTML, and CSS will be covered in future chapters when they are integrated with Knockout.js.

Examining the Default Menu

The project that we created in Chapter 1 contains an example of one of Bootstrap’s menus with a responsive design. Let’s explore its structure now. It is contained in Views/Shared/_Layout.cshtml. When this menu is rendered in a browser, it looks like Figure 2-1.

Figure 2-1. The default menu

Defining a menu with Bootstrap requires a div tag with the class of navbar as shown in Example 2-1.

Example 2-1. Starting the menu

<div class="navbar navbar-inverse navbar-fixed-top">

</div>

This example also specifies two additional classes: navbar-inverse and navbar-fixed-top. By specifying the navbar-inverse class, Bootstrap will make the menu the inverse of the default coloring. With the default theme, that means black instead of transparent. The navbar-fixed-top class will cause the menu to always remain fixed at the top of the page, meaning if the content allows you to scroll down, the menu will remain visible at the top.

The list of navigational elements are commonly defined in a list tag (ul) attributed with a class called nav. Each navigation element is then defined in its own list item or li tag as shown in Example 2-2.

Example 2-2. Defining the menu links

<div class="navbar navbar-inverse navbar-fixed-top">

<div class="navbar-collapse collapse">

<ul class="nav navbar-nav">

<li>@Html.ActionLink("Home", "Index", "Home")</li>

<li>@Html.ActionLink("About", "About", "Home")</li>

<li>@Html.ActionLink("Contact", "Contact", "Home")</li>

</ul>

</div>

As I’ve mentioned, Bootstrap provides a responsive web layout. This means when the website is viewed in a browser with a different screen resolution, the page will adjust automatically.

As shown in Example 2-2, just above the ul tag that defines the three main links is a div with the class navbar-collapse. When this page is viewed on a small device (or you resize your browser), the menu will automatically collapse to ensure that the menu fits properly in the provided resolution. This example adds a second class to the div of collapse, which will make the menu completely hidden if it won’t fit on a single line.

Of course, this wouldn’t provide very good usability, and this example has already thought of that. It adds a little button on the right-hand side that, when clicked, toggles the display of the three buttons as shown in Figure 2-2.

Figure 2-2. A collapsed menu

The button to show and hide the menu is created with several different attributes, so when clicked, the menu is shown as demonstrated in Example 2-3.

Example 2-3. Button for collapsed menu

<div class="navbar navbar-inverse navbar-fixed-top">

<div class="container">

<div class="navbar-header">

<button type="button" class="navbar-toggle" data-toggle="collapse"

data-target=".navbar-collapse">

<span class="icon-bar"></span>

</button>

@Html.ActionLink("Application name", "Index", "Home",

new { area = "" }, new { @class = "navbar-brand" })

</div>

<div class="navbar-collapse collapse">

<ul class="nav navbar-nav">

<li>@Html.ActionLink("Home", "Index", "Home")</li>

<li>@Html.ActionLink("About", "About", "Home")</li>

<li>@Html.ActionLink("Contact", "Contact", "Home")</li>

</ul>

</div>

Previously, everything was accomplished via CSS classes on HTML elements. The collapse button introduces data attributes that are used in the JavaScript provided by Bootstrap. The data-toggle attribute with a value of collapse indicates that it should remain invisible until the menu requires collapsing. The data-target attribute indicates which element that is currently being hidden should be displayed (or hidden) when the button is clicked; in this case, it is .navbar-collapse. The button is styled and placed on the right-hand side by the class navbar-toggle.

The Data Target

Notice that in Example 2-3 the class navbar-collapse is prefixed with a period (.). The value within the attribute is used within a jQuery selector to find the element and show or hide it. If the menu were identified by an ID, it would require a hash tag (#) prefix before the ID assigned to it.

Now enter the power of the many different Bootstrap components. In Example 2-2, the ul tag contains a secondary class of navbar-nav. Bootstrap provides several different classes that can create a variety of different-looking menus.

If you replace the navbar-nav class with nav-pills, a different-looking menu is displayed. I also added the class active to the first li item (see Example 2-4).

Example 2-4. Changing to pills stylized menu

<ul class="nav nav-pills">

<li class="active">@Html.ActionLink("Home", "Index", "Home")</li>

<li>@Html.ActionLink("About", "About", "Home")</li>

<li>@Html.ActionLink("Contact", "Contact", "Home")</li>

</ul>

When rendered, it looks slightly different as shown in Figure 2-3.

Figure 2-3. A pill menu

A Menu with Drop-Downs and a Search Box

The default menu that was created by MVC is pretty comprehensive. However, Bootstrap provides a lot more functionality that can be implemented in a menu. This next example will explore a more complex menu that will contain a mix of navigation elements with and without drop-downs, as well as a search box with a button.

Just like the default menu, starting a new menu requires the navbar class as shown in Example 2-5. This time, it will use the default colors (instead of the inverse), and it won’t be fixed to the top.

Example 2-5. Starting the menu

<nav class="navbar navbar-default" role="navigation">

</nav>

The next thing that is required is the “branding” of the application as shown in Example 2-6. It will be contained in a separate element with the button to show the menu when it’s collapsed, to ensure that it is grouped together when the resolution is too small to show the full menu.

Example 2-6. Menu with branding

<nav class="navbar navbar-default" role="navigation">

<div class="navbar-header">

<button type="button" class="navbar-toggle collapsed" data-toggle="collapse"

data-target=".navbar-collapse">

<span class="sr-only">Toggle navigation</span>

<span class="icon-bar"></span>

</button>

<a class="navbar-brand" href="@Url.Action("Index", "Home")">Application name</a>

</div>

</nav>

This contains the same button as shown in the Figure 2-2 that will be displayed when the menu is collapsed. Notice that the links are defined differently. Previously, they were completely defined with Razor. However, the next links (in Example 2-7) require HTML within the link text, so it’s better to have complete control over the a tag. It is still important to let MVC compile the URL for us, so it’s using the UrlHelper to build the link instead of the HtmlHelper.

Next up are the three links to Home, About, and Contact as shown in Example 2-7. About and Contact have been updated to include drop-down links to fictitious subpages. The About drop-down even contains a nice divider between the second and third link.

Example 2-7. Drop-down menus

<nav class="navbar navbar-default" role="navigation">

<div class="navbar-header">

<button type="button" class="navbar-toggle collapsed" data-toggle="collapse"

data-target=".navbar-collapse">

<span class="sr-only">Toggle navigation</span>

<span class="icon-bar"></span>

</button>

<a class="navbar-brand" href="@Url.Action("Index", "Home")">Application name</a>

</div>

<div class="collapse navbar-collapse">

<ul class="nav navbar-nav">

<li class="active"><a href="@Url.Action("Index", "Home")">Home</a></li>

<li class="dropdown">

<a href="@Url.Action("About", "Home")" class="dropdown-toggle"

data-toggle="dropdown">About <span class="caret"></span></a>

<ul class="dropdown-menu" role="menu">

<li><a href="#">The Executive Team</a></li>

<li><a href="#">Who We Are</a></li>

<li class="divider"></li>

<li><a href="#">Jobs</a></li>

</ul>

</li>

<li class="dropdown">

<a href="@Url.Action("Contact", "Home")" class="dropdown-toggle"

data-toggle="dropdown">Contact <span class="caret"></span></a>

<ul class="dropdown-menu" role="menu">

<li><a href="#">By Mail</a></li>

<li><a href="#">By E-mail</a></li>

</ul>

</li>

</ul>

</div>

</nav>

The li elements for drop-downs are tagged with the dropdown class. The link is then affixed with the dropdown-toggle class and the data-toggle of dropdown. Beneath the link is an unordered list with each link in a li tag. Inside the About drop-down is an empty li tag that contains the classdivider.

To complete this menu, a search form will be created and aligned to the right side of the menu as shown in Example 2-8.

Example 2-8. The search form

<nav class="navbar navbar-default" role="navigation">

<div class="navbar-header">

<button type="button" class="navbar-toggle collapsed" data-toggle="collapse"

data-target=".navbar-collapse">

<span class="sr-only">Toggle navigation</span>

<span class="icon-bar"></span>

</button>

<a class="navbar-brand" href="@Url.Action("Index", "Home")">Application name</a>

</div>

<div class="collapse navbar-collapse">

<ul class="nav navbar-nav">

<li class="active"><a href="@Url.Action("Index", "Home")">Home</a></li>

<li class="dropdown">

<a href="@Url.Action("About", "Home")" class="dropdown-toggle"

data-toggle="dropdown">About <span class="caret"></span></a>

<ul class="dropdown-menu" role="menu">

<li><a href="#">The Executive Team</a></li>

<li><a href="#">Who We Are</a></li>

<li class="divider"></li>

<li><a href="#">Jobs</a></li>

</ul>

</li>

<li class="dropdown">

<a href="@Url.Action("Contact", "Home")" class="dropdown-toggle"

data-toggle="dropdown">Contact <span class="caret"></span></a>

<ul class="dropdown-menu" role="menu">

<li><a href="#">By Mail</a></li>

<li><a href="#">By E-mail</a></li>

</ul>

</li>

</ul>

<form class="navbar-form navbar-right" role="search">

<div class="form-group">

<input type="text" class="form-control" placeholder="Search">

</div>

<button type="submit" class="btn btn-default">Submit</button>

</form>

</div>

</nav>

The final menu looks (in my opinion) really slick (shown in Figure 2-4) with an inline search form aligned to the far right of the menu.

Figure 2-4. The final menu

The inline form and alignment are accomplished by adding the navbar-form and navbar-right classes to the form tag as shown in Example 2-8.

Buttons

Another very common thing on any website are buttons. Bootstrap has built six different themed buttons. They are named and look as shown in Figure 2-5.

Figure 2-5. The six button styles

Note the names: Default, Primary, Success, Info, Warning, and Danger. These are used in several other components as well, and the colors remain consistent between them. Example 2-9 demonstrates how to create the buttons shown in Figure 2-5.

Example 2-9. Making the buttons

<button type="button" class="btn btn-default">Default</button>

<button type="button" class="btn btn-primary">Primary</button>

<button type="button" class="btn btn-success">Success</button>

<button type="button" class="btn btn-info">Info</button>

<button type="button" class="btn btn-warning">Warning</button>

<button type="button" class="btn btn-danger">Danger</button>

Each button is created by specifying two classes. The first is btn, and it is consistent between all of the buttons. Next is a class that begins with btn- and finishes with the type of button being created, e.g., success or danger.

These classes are not limited to only HTML button tags. They can be applied with links or submit buttons as well.

Just like the menu created earlier, buttons can be created with drop-downs as well. This provides a nice solution when you require a selection from the user where multiple options are available.

Another nice feature of buttons is that you can group them together. Example 2-10 will explore these options mixed together.

Example 2-10. Button group with drop-down

<div class="btn-group">

<button type="button" class="btn btn-default">Default</button>

<button type="button" class="btn btn-primary">Primary</button>

<button type="button" class="btn btn-success">Success</button>

<button type="button" class="btn btn-success dropdown-toggle"

data-toggle="dropdown">

<span class="caret"></span>

</button>

<ul class="dropdown-menu" role="menu">

<li><a href="#">Option 1</a></li>

<li><a href="#">Option 2</a></li>

</ul>

</div>

The result of this button group looks like Figure 2-6.

Figure 2-6. A button group

The drop-down in the button is accomplished identically to the menu — the list of options are contained within a ul tag, and each option is contained within a li tag. The drop-down icon is its own button that contains a span tag with caret as the class name. Because the buttons are contained within a div with class btn-group, they are tightly coupled together. This gives the appearance that the button with “Success” and the drop-down icon are the same button, even though it is implemented with a two-button tags.

Alerts

Prior to using Bootstrap, I didn’t often deal with alert messages because I felt the implementation effort exceeded the value they provided. Bootstrap definitely alleviates this concern.

Figure 2-7 demonstrates the four different types of alert messages. Alert messages optionally include the ability to be dismissed with the “x” in the right corner, which allows users to hide the message once they have read it.

Figure 2-7. Alert messages

Example 2-11. Dismissible alert messages

<div class="alert alert-success alert-dismissible" role="alert">

<button type="button" class="close" data-dismiss="alert">

<span aria-hidden="true">×</span><span class="sr-only">Close</span>

</button>

<strong>Success!</strong>

</div>

Example 2-11 demonstrates that creating an alert is quite similar to creating buttons when dealing with the styling. A success button would contain two classes: btn and btn-success. Alerts work the same way, replacing btn with alert.

Note that, by default, alerts do not support the default and primary classes that buttons support.

Like buttons, if I wanted to create a warning alert, or a danger alert I would replace alert-success with alert-warning or alert-danger, respectively.

A third class is added to this alert message: alert-dismissible. Inside the div tag is a button with a class of close and an attribute data-dismiss with the value alert. This combination will allow the Bootstrap CSS and JavaScript to stylize and make the alert box disappear when the user clicks the x in the top-right corner.

Themes

As shown when creating buttons and alert boxes, Bootstrap leverages common class names that are converted to a consistent color theme. If you are adventurous, you can edit any of the coloring, spacing, and so on by editing the Bootstrap CSS. In MVC, the file is located in the Contentdirectory and appropriately named bootstrap.css.

Because of Bootstrap’s consistent nature, there are hundreds of different themes that people have created to further enhance the built-in components.

Bootstrap theming is outside the scope of this book; however, if you search for Bootstrap themes on Google, you will find many different types. Many of them are free and some of them cost a few dollars.

Summary

The examples in this chapter barely scratch the surface of the more than 70 components that are provided by Bootstrap. There are great components that deal with paginating of data, tables or grids of data, form elements, etc. Throughout the remainder of this book, I will explore a variety of these components while integrating them with MVC.

This chapter contains example HTML for multiple menus, buttons, button groups, and alert messages that is barely more than 50 lines of code. If you were to create the same styling without Bootstrap, you would also need to write several hundred lines of CSS and accompanying JavaScript to make the drop-down menus and dismissible alert messages!

In my opinion, this makes using Bootstrap in all of my projects a no-brainer.