Bootstrap
BOOTSTRAP is a complete package for web who wants to become a web designer. Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web sites.
HTML:
Defines data and structure of a page using elements under html.
CSS:
Defines how the data and elements actually looks and behave when interact with them.
JS:
This is actually programming language of a web know as java script.
History of Bootstrap:
Bootstrap is a front-end development framework that enables developers & designers to quickly build fully responsive websites. The framework contains global CSS settings with built-in components and extensible classes in the form of typography, navigation, buttons,form,tabbing and much more.
Bootstrap was originally developed by former Twitter employees Mark Otto and Jacob Thornton, as an internal development tool to improve consistency and efficiency of web page.
It was in August 2011, released as a open source project on github and become a most popular repository platform.
Very easy Installation:
Installation is very easy, just download the source file of bootstrap and upload on server and just put the references or links of available files into your header. The installation process work is covered with that work.
example-
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="link of your file" > (this is for .css file)
<!-- Latest compiled and minified JavaScript --> <script src="link of .js file" ></script>
How to start:
You should remember this format to start ..
<!DOCTYPE html>
<html>
<head>
<title>Title Name</title>
</head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Basic HTML elements-
- Title- <title></title>- this is use for give title of the page.
- Header- <h1>…<h6>- this element is use for give the heading of content.
- Paragraph-<p></p>- This element is use for give a paragraph.
- Simple block element-<div></div>
How to use CSS:
- Internal / Embedded Styles. Internal Styles are placed inside the head section of a particular web page via the style tag.
<style>
.clr{
color:red;
background-color:yellow;
}
#code{
font-size:12px;
}
</style>
- Inline Styles. Inline Styles cannot be resused at all, period.
<div style="color:red,margin:12px 0 0 0"></div>
- External Style Sheet. For the most part, we will want to place the majority of our Style Rules on an External Style Sheet.
<link href=”link of your file” rel=”stylesheet” type=”text/css”/>
How to use Javascript (JS File):
- Internal: Internal script are placed inside the page wherever you want via the sscript tag.
<script type="text/javascript">
$(document).ready(function(){
Your code here.....
});
</script>
- External- For the external link first you have to create a .js file in and set link in html page.
<script src="js file address" type="text/javascript" ></script>
Features:
- css resetting for cross browser compatibility.
- grid scaffolding for design.
- Multi screen support.(Fully Responsive)
Javascript plugin:
- Dialogs
- Tabs
- Alerts
- Carousel
- tooltips and many more..
Customization:
- You can customize the css according to your requirements.
- You can use LESS to compile your a bootstrap css version on your own.
- You can just download the customize version from http:/bootswatch.com
Adding Twitter Bootstrap:
You should use CDN links also..like
For CSS-
<link href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css” rel=”stylesheet”/>
For Javascript File-
<script type=”text/javascript” src=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js”></script>
[box] An Example of Bootstrap:[/box]
Awadhesh Kumar