What is Bootstrap? - How to use Bootstrap js?

random

What is Bootstrap? - How to use Bootstrap js?

Introduction to Bootstrap

You are probably heard about responsive design now a days. Considering the new generation of web design, responsive design is a most talked topic these days. Actually, it is noticed in last 3 years, more internet traffic came through mobile devices rather than laptops and desktops. and that is why web developers asked to develop such web application which is supported by any device. So Bootstrap js is one of the best framework available to do so. 
What is bootstrap and Why use?
Basically Bootstrap is a type of framework for faster and easier web development. Bootstrap was developed by Mark Otto and Jacob Thornton at Twitter. It was released in August 2011 on GitHub as an open source product. It includes HTML and CSS based design templates for common user interface components like Typography, Forms, Buttons, Tables, Navigation, Drop-downs, Alerts, Modals, Tabs, Accordion, Carousel and many other as well as optional JavaScript extensions. Bootstrap also gives you ability to create responsive layout with much less efforts. 

Bootstrap Advantages
The biggest advantage of using Bootstrap is that it is completely free to download and use. Additionally, using the Bootstrap data APIs you can create advance interface components like Scrollspy and Typeaheads without writing a single line of JavaScript. By using Bootstrap you can do following things :-
  • Speed up of your Web Development
  • Make your Web Form Responsive
  • Keep your design element consistent

Understanding Bootstrap file structure
Bootstrap/
|—— CSS/
| |—— bootstrap.css
| |—— bootstrap.min.css
| |—— bootstrap-theme.css
| |—— bootstrap-theme.min.css
|—— JS/
| |—— bootstrap.js
| |—— bootstrap.min.js
|—— Fonts/
| |—— glyphicons-halflings-regular.eot
| |—— glyphicons-halflings-regular.svg
| |—— glyphicons-halflings-regular.ttf
| |—— glyphicons-halflings-regular.woff
Bootstrap 3 example
How to use bootstrap in html page
So you have understood the file structure and now it is time to put Bootstrap to real time use. Find the below bootstrap example code :-

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>how to use bootstrap in html and css</title>
    <meta name="viewport" content="width=device-width, initialscale=1.0">
    <link rel="stylesheet" type="text/css"
          href="css/bootstrap.min.css">
</head>
<body>
    <h1>Hello, world!</h1>

    <script src="Scripts/jquery-1.9.1.js"></script>
    <script src="Scripts/bootstrap.min.js"></script>

</body>
</html>

So now we are all set to develop any website or web application by using Bootstrap framework. 
What is Bootstrap? - How to use Bootstrap js? Reviewed by Ravi Kumar on 12:14 AM Rating: 5

No comments:

All Rights Reserved by Etechpulse © 2012 - 2017

Contact Form

Name

Email *

Message *

Powered by Blogger.