ASP.NET MVC 5 with Bootstrap and Knockout.js

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