Introduction to Bootstrap

Chakravarthi
Posted by in Bootstrap category on for Beginner level | Points: 250 | Views : 32911 red flag
Rating: 4 out of 5  
 1 vote(s)

In this article we are going to learn Bootstrap

Introduction

In Web development, User Interface plays key role. In scenarios, most of the developers used to create separate user interface pages for mobile and tablet and PC's. Using bootstrap we are able to create single front end framework for all devices instead of creating separate pages.

Objective

The objective of this article is to explain overview of bootstrap.

Getting Started

Bootstrap is powerful mobile first front end framework for faster and easy web development. It is very sleek, intuitive and any one can get started bootstrap with just knowledge of HTML and CSS.

Adding Bootstrap to a Project :
 
Adding bootstrap package to our project is pretty simple. following are the steps involved in adding bootstrap package to our project.

  • Go to NuGet Package manager and choose Manage NuGet packages for solution


  • Then manage NuGet packages pop-up window will appear.
    1. In that search for bootstrap at the top right corner search box then we will get list of several bootstrap packages.
    2. Choose the very first Bootstrap package and click on install to add package to our project

  • after clicking install button we will get a pop-up window for asking select projects install. Here choose the bootstrap required projects and click on ok to complete the installation of this package.



  • After completing this installation of bootstrap package, we will find the following files added to our project as show in below image

     

Using Bootstrap in a Project :

In a basic HTML page we will define bootstrap as follows

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
   <title>Bootstrap in Basic HTML</title>
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    
    <!-- Bootstrap -->
    <link href="Content/bootstrap.min.css" rel="stylesheet" />
    <script src="Scripts/bootstrap.min.js"></script>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="Scripts/jquery-1.9.0.min.js"></script>
    <script src="https://code.jquery.com/jquery.js"></script>
</head>
<body>
  <h1 class="page-header">Hello, world!</h1>
  <p class="text-info">Welcome to Bootstrap tutorial in DotNetFunda.Com</p>
</body>
</html>
Here we will observe that the bootstrap.min.css, bootstrap.min.js, jquery.js files included in the above HTML page to make basic HTML page to Bootstrap Template.

Output of this page is as shown bellow




Conclusion

In this article, we have learnt how to start working with bootstrap, Hope this article was useful.
We will see more about bootstrap in following articles. 
Thanks for reading.

Page copy protected against web site content infringement by Copyscape

About the Author

Chakravarthi
Full Name: Annabattula Ashok Chakravarthi
Member Level: Starter
Member Status: Member
Member Since: 7/4/2013 11:49:03 PM
Country: India
Chakravarthi
http://www.dotnetfunda.com

Login to vote for this post.

Comments or Responses

Login to post response

Comment using Facebook(Author doesn't get notification)