bootstrap tutorial: bootstrap tutorial

what is bootstrap ?

It is powerful mobile first front-end framework for faster and easier web

development. It uses HTML , CSS and Javascript.

It was developed by Mark Otto and Jacob Thornton at Twitter. It was released as an open source product in August 2011 on Git Hub.

Why use Bootstrap?

Mobile first approach
Browser Support:
Easy to get started
Responsive design

What Bootstrap Package Includes?

Scaffolding: Bootstrap provides a basic structure with Grid System, link styles, background.
This is covered in detail in the section Bootstrap Basic Structure
CSS: Bootstrap comes with feature of global CSS settings, fundamental HTML elements styled and enhanced with extensible classes, and an advanced grid system. This is covered in detail in the section Bootstrap with CSS.
Components: Bootstrap contains over a dozen reusable components built to provide iconography,dropdowns, navigation, alerts, popovers, and much more. This is covered in detail in the section Layout Components.
JavaScript Plugins: Bootstrap contains over a dozen custom jQuery plugins. You can easily include them all, or one by one. This is covered in details in the section Bootstrap Plugins.
Customize: You can customize Bootstrap's components, LESS variables, and jQuery plugins to get your very own version.

download bootstrap

http://getbootstrap.com/.

File structure:-

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

A basic HTML template using Bootstrap:-

<!DOCTYPE html>

<html>

<head>

<title>Bootstrap 101 Template</title>

<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media

queries -->

<!--[if lt IE 9]>

html5shiv.js"></script>

respond.min.js"></script>

<![endif]-->

</head>

<body>

<h1>Hello, world!</h1>

<!-- Include all compiled plugins (below), or include individual files

as needed -->

</body>

</html>

Grid System:-

Media query is a really fancy term for "conditional CSS rule". It simply applies some CSS based on certain

conditions set forth. If those conditions are met, the style is applied.

/* Extra small devices (phones, less than 768px) */

/* No media query since this is the default in Bootstrap */

/* Small devices (tablets, 768px and up) */

@media (min-width: @screen-sm-min) { ... }

/* Medium devices (desktops, 992px and up) */

@media (min-width: @screen-md-min) { ... }

/* Large devices (large desktops, 1200px and up) */

@media (min-width: @screen-lg-min) { ... }

Occasionally these are expanded to include a max-width to limit CSS to a narrower set of devices.

@media (max-width: @screen-xs-max) { ... }

@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }

@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }

@media (min-width: @screen-lg-min) { ... }

Media queries have two parts, a device specification and then a size rule. In the above case, the following rule is

set:

Lets consider this line:

@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }

Responsive column resets:-

div class="container">

<div class="col-xs-6 col-sm-3"

style="background-color: #dedef8;

box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>

</div>

<div class="col-xs-6 col-sm-3"

style="background-color: #dedef8;box-shadow:

inset 1px -1px 1px #444, inset -1px 1px 1px #444;">

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do

eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut

enim ad minim veniam, quis nostrud exercitation ullamco laboris

nisi ut aliquip ex ea commodo consequat.

</p>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do

eiusmod tempor incididunt ut.

</p>

</div>

<div class="col-xs-6 col-sm-3"

style="background-color: #dedef8;

box-shadow:inset 1px -1px 1px #444, inset -1px 1px 1px #444;">

<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco

laboris nisi ut aliquip ex ea commodo consequat.

</p>

</div>

<div class="col-xs-6 col-sm-3"

style="background-color: #dedef8;box-shadow:

inset 1px -1px 1px #444, inset -1px 1px 1px #444;">

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do

eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut

enim ad minim

</p>

</div>

Monday, 2 March 2015