BOOTSTRAP
what is Bootstrap?
Bootstrap is a free collection of tools for creating websites and web applications. It contains HTML and CSS-based design templates for typography, forms, buttons, navigation and other interface components, as well as optional JavaScript extensions.
Bootstrap has relatively incomplete support for HTML5 and CSS 3, but it is compatible with all major browsers. Basic information of compatibility of websites or applications is available for all devices and browsers. There is a concept of partial compatibility that makes the basic information of a website available for all devices and browsers. For example, the properties introduced in CSS3 for rounded corners, gradients and shadows are used by Bootstrap despite lack of support by older web browsers. These extend the functionality of the toolkit, but are not required for its use.
Since version 2.0 it also supports responsive design. This means the layout of web pages adjusts dynamically, taking into account the characteristics of the device used (PC, tablet, mobile phone).
Developer(s) Twitter
Initial release August 2011; 2 years ago
Stable release 3.0.0 / August 19, 2013;
Website: getbootstrap.com
How to use Bootstrap?
1. Go to the below link
http://getbootstrap.com/
2. Download the Zip File.
3. Extract it we can see 3 folders:
bootstrap/
├── css/
│ ├── bootstrap.css
│ ├── bootstrap.min.css
├── js/
│ ├── bootstrap.js
│ ├── bootstrap.min.js
└── img/
├── glyphicons-halflings.png
└── glyphicons-halflings-white.png
4.Extract them and include them in home Directory of your project.
5.Then include below specified links in the header section of your page.
<head>
<link rel="stylesheet" href="css/bootstrap.css" type="text/css"/>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="js/bootstrap.js"></script>
</head>
6. Now it is ready to make attractive with Bootsrap.
How does it work?
Here I designed the html Page with bootstrap.
let's see how?
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
<link rel="stylesheet" href="css/bootstrap.css" type="text/css"/>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="js/bootstrap.js"></script>
</head>
<body>
<input type="button" value="Accept"/>
<input type="button" value="Reject" class="btn btn-danger"/>
</body>
</html>
OUTPUT:
Here we can see the difference between normal Button and Bootstrap applied Button.
Like this we can apply validations,toggle,forms,buttons.
No comments:
Post a Comment