Learn to Create Mobile Applications with Bootstrap and HTML 5
In this article, I will introduce readers to bootstrap 3 and also take you through building a mobile friendly sample web application. I will be using Visual Studio 2012 as the code editor; it has HTML 5 support.
What Is a Responsive Design?
The world is moving more towards mobile devices and people started using their mobile devices as a primary medium to surf the Internet. Developers should seriously consider the mobile compatibility of the web site that they are developing. There are organizations that have built a separate web site for mobile devices, but it cannot be afforded by all due to the cost involvement.
A responsive web design is the one that changes its UI layering or gracefully degrades the options based on the client's screen size. This is a much better solution than running different web sites to adapt to different devices.
Bootstrap: An Introduction
Bootstrap is a UI framework for developing responsive web design. It was developed primarily by the Twitter development team and due to its quick popularity; it has been made as an open source framework. It is a complete UI framework; having said that, it can be used with any web technologies from plain HTML to ASP.Net.
The latest version of bootstrap can be downloaded from here. Many leading organizations have started using the bootstrap framework to create a responsive deign of their web sites.
The framework components are categorized as follows:
- CSS: Design related capabilities and provisions
- Grid System
- Tables and so forth
- Components: Reusable controls or components
- Button groups and the like
- Modal and such
Bootstrap 3 is a mobile first framework. This means that the default target is mobile devices and will scale up from there.
Sample ASP.Net Web Application: Mobile Friendly
In this section, let us create a sample web application using the bootstrap framework. Create an empty ASP.Net web application using the Visual Studio IDE and add a page named Home.aspx. We will create it as a data entry form that scales up based on the device screens.
Including Bootstrap in the Project
To include the bootstrap framework to you project, unzip the downloaded bootstrap framework and copy the CSS, JS. and fonts folders to the project directory. Once copied, include them in the solution.
Add the ViewPort meta tag, the bootstrap.min.css, jQuery, and bootstrap.min.js onto the Home.aspx page as shown in the following code section.
<head runat="server"> <title>Mobile first sample page</title> <meta name="viewport" content="width=device-width, initial-scale=1" /> <link href="css/bootstrap.min.css" rel="stylesheet" /> </head> <body> <form id="form1" runat="server"> <div id="divContainer"> </div> </form> <script src="Scripts/jquery-2.1.1.min.js"></script> <script src="js/bootstrap.min.js"></script> </body> </html>
Create a Grid System
The Grid System is a CSS part in which the page will be scaled up to 12 columns for easy layout management. Add the .container class for the GridSystem to initiate.
<div id="divContainer" class="container">
Add a Navigation Bar
NavBar is a component in bootstrap that can be used to create the navigation. Add the following code to add a fixed navigation to your page.
<nav class="navbar navbar-default navbar-fixed-top" role="navigation"> <div id="divContainer" class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbarContent"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand navbar-left" href="#"> Mobile first web site </a> </div> <div id="navbarContent" class="collapse navbar-collapse"> <ul class="nav navbar-nav navbar-right"> <li class="active"><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Help</a></li> </ul> </div> </div> </nav>
Add Page Content—With Input Group
Input group is a control to group the label and the input element. It brings in the responsive design for the form. Add the following code to display the input controls on the page.
<div> <div class="input-group"> <span class="input-group-addon">First Name</span> <input type="text" class="form-control" placeholder="Enter your first name here" /> </div> <br /> <div class="input-group"> <span class="input-group-addon">Last Name</span> <input type="text" class="form-control" placeholder="Enter your last name here" /> </div> <br /> <div class="input-group"> <span class="input-group-addon">Email Address</span> <input type="text" class="form-control" placeholder="Valid email format is firstname.lastname@example.org" /> </div> <br /> <button type="button" class="btn btn-primary btn-lg btn-block"> Submit Data </button> </div>
Now that the form is ready, run the application. Figure 1 is a screenshot of the web page on a full browser view. Notice the navigation elements are displayed separately.
Figure 1: A browser view of the app, with navigation elements
Now, let us reduce the browser size. Figure 2 is a view of how the same page will be displayed on smaller screens, such as on mobile devices.
Figure 2: The same browser window, resized for mobile use
Notice that the menu items are automatically collapsed and an icon is displayed. Also, the other controls are resized respectively.
I hope this article was useful for developers who look forward to creating multi-device compatible web pages. An important advantage with the bootstrap framework is that developers can include what is needed. There are a lot of other great things that you can accomplish on your web site by using bootstrap.