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.
- In that search for bootstrap at the top right corner search box then we will get list of several bootstrap packages.
- 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.