Bootstrap

What is Bootstrap?

Bootstrap is a free front-end framework for faster and easier web development
Bootstrap includes HTML and CSS based design templates for typography, forms, buttons, tables, navigation, modals, image carousels and many other, as well as optional JavaScript plugins
Bootstrap also gives you the ability to easily create responsive designs

Why Use Bootstrap?

Advantages of Bootstrap:

Easy to use: Anybody with just basic knowledge of HTML and CSS can start using Bootstrap
Responsive features: Bootstrap's responsive CSS adjusts to phones, tablets, and desktops
Mobile-first approach: In Bootstrap 3, mobile-first styles are part of the core framework
Browser compatibility: Bootstrap is compatible with all modern browsers (Chrome, Firefox, Internet Explorer, Safari, and Opera)

Bootstrap CDN

If you don't want to download and host Bootstrap yourself, you can include it from a CDN (Content Delivery Network).

MaxCDN provide CDN support for Bootstrap's CSS and JavaScript. Also include jQuery:

MaxCDN:

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>


<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

Create First Web Page With Bootstrap

1. Add the HTML5 doctype

Bootstrap uses HTML elements and CSS properties that require the HTML5 doctype.

Always include the HTML5 doctype at the beginning of the page, along with the lang attribute and the correct character set:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
  </head>
</html>

2. Bootstrap 3 is mobile-first

Bootstrap 3 is designed to be responsive to mobile devices. Mobile-first styles are part of the core framework.

To ensure proper rendering and touch zooming, add the following <meta> tag inside the <head> element:

The width=device-width part sets the width of the page to follow the screen-width of the device (which will vary depending on the device).

The initial-scale=1 part sets the initial zoom level when the page is first loaded by the browser.

3. Containers

Bootstrap also requires a containing element to wrap site contents.

There are two container classes to choose from:

1. The .container class provides a responsive fixed width container

2. The .container-fluid class provides a full width container, spanning the entire width of the viewport

Note: Containers are not nestable (you cannot put a container inside another container).

Two Basic Bootstrap Pages

The following example shows the code for a basic Bootstrap page (with a responsive fixed width container):

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h1>My First Bootstrap Page</h1>
  <p>This is some text.</p>
</div>

</body>
</html>

The following example shows the code for a basic Bootstrap page (with a full width container):

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container-fluid">
  <h1>My First Bootstrap Page</h1>
  <p>This is some text.</p>
</div>

</body>
</html>
</div>

Bootstrap Grid System

Bootstrap's grid system allows up to 12 columns across the page.

If you do not want to use all 12 column individually, you can group the columns together to create wider columns:

span 1	span 1	span 1	span 1	span 1	span 1	span 1	span 1	span 1	span 1	span 1	span 1
span 4				span 4				span 4
span 4				span 8
span 6						span 6
span 12

Bootstrap's grid system is responsive, and the columns will re-arrange automatically depending on the screen size.

Grid Classes

The Bootstrap grid system has four classes:

xs (for phones)
sm (for tablets)
md (for desktops)
lg (for larger desktops)

The classes above can be combined to create more dynamic and flexible layouts.

Basic Structure of a Bootstrap Grid

The following is a basic structure of a Bootstrap grid:

First; create a row (

<div
class="row">

). Then, add the desired number of columns (tags with appropriate .col-*-*classes). Note that numbers in .col-*-* should always add up to 12 for each row.

Below we have collected some examples of basic Bootstrap grid layouts.

Three Equal Columns

The following example shows how to get a three equal-width columns starting at tablets and scaling to large desktops. On mobile phones, the columns will automatically stack:

Example

Two Unequal Columns

The following example shows how to get two various-width columns starting at tablets and scaling to large desktops:

Example

Bootstrap's Default Settings

Bootstrap's global default font-size is 14px, with a line-height of 1.428.

This is applied to the <body> and all paragraphs.

In addition, all <p> elements have a bottom margin that equals half their computed line-height (10px by default).

Bootstrap vs. Browser Defaults

In this chapter, we will look at some HTML elements that will be styled a little bit different by Bootstrap than browser defaults.

<h1> - <h6>

By default, Bootstrap will style the HTML headings (<h1> to <h6>) in the following way:

Example

h1 Bootstrap heading (36px)

h2 Bootstrap heading (30px)

h3 Bootstrap heading (24px)

h4 Bootstrap heading (18px)

h5 Bootstrap heading (14px)

h6 Bootstrap heading (12px)

Try it Yourself »

<small>

In Bootstrap the HTML <small> element is used to create a lighter, secondary text in any heading:

Example

h1 heading secondary text

h2 heading secondary text

h3 heading secondary text

h4 heading secondary text

h5 heading secondary text

h6 heading secondary text

<mark>

Bootstrap will style the HTML <mark> element in the following way:

Example

Use the mark element to highlight text.

<abbr>

Bootstrap will style the HTML <abbr> element in the following way:

Example

The WHO was founded in 1948.

<blockquote>

Bootstrap will style the HTML <blockquote> element in the following way:

Example

For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.

From WWF's website

Try it Yourself »

To show the quote on the right, use the .blockquote-reverse class:

Example

From WWF's website

<dl>

Bootstrap will style the HTML <dl> element in the following way:

Example

Coffee

- black hot drink

Milk

- white cold drink

<code>

Bootstrap will style the HTML <code> element in the following way:

Example

The following HTML elements: span, section, and div defines a section in a document.

<kbd>

Bootstrap will style the HTML <kbd> element in the following way:

Example

Use ctrl + p to open the Print dialog box.

<pre>

Bootstrap will style the HTML <pre> element in the following way:

Example

Text in a pre element

is displayed in a fixed-width

font, and it preserves

both      spaces and

line breaks.

Contextual Colors and Backgrounds

Bootstrap also has some contextual classes that can be used to provide "meaning through colors".

The classes for text colors are:.text-muted, .text-primary, .text-success, .text-info, .text-warning, and.text-danger:

Example

This text is muted.

This text is important.

This text indicates success.

This text represents some information.

This text represents a warning.

This text represents danger.

The classes for background colors are:.bg-primary, .bg-success, bg-info, bg-warning, and .bg-danger:

Example

This text is important.

This text indicates success.

This text represents some information.

This text represents a warning.

This text represents danger.

More Typography Classes

The Bootstrap classes below can be added to style HTML elements further:

Class	Description	Example
`.lead`	Makes a paragraph stand out
`.small`	Indicates smaller text (set to 85% of the size of the parent)
`.text-left`	Indicates left-aligned text	Try it
`.text-center`	Indicates center-aligned text	Try it
`.text-right`	Indicates right-aligned text	Try it
`.text-justify`	Indicates justified text	Try it
`.text-nowrap`	Indicates no wrap text	Try it
`.text-lowercase`	Indicates lowercased text	Try it
`.text-uppercase`	Indicates uppercased text	Try it
`.text-capitalize`	Indicates capitalized text	Try it
`.initialism`	Displays the text inside an `<abbr>` element in a slightly smaller font size	Try it
`.list-unstyled`	Removes the default list-style and left margin on list items (works on both `<ul>` and `<ol>`). This class only applies to immediate children list items (to remove the default list-style from any nested lists, apply this class to any nested lists as well)	Try it
`.list-inline`	Places all list items on a single line	Try it
`.dl-horizontal`	Lines up the terms (`<dt>`) and descriptions (`<dd>`) in `<dl>` elements side-by-side. Starts off like default `<dl>`s, but when the browser window expands, it will line up side-by-side	Try it
`.pre-scrollable`	Makes a `<pre>` element scrollable	Try it

Bootstrap Basic Table

A basic Bootstrap table has a light padding and only horizontal dividers.

The .table class adds basic styling to a table:

Example

Firstname	Lastname	Email
John	Doe	john@example.com
Mary	Moe	mary@example.com
July	Dooley	july@example.com

Striped Rows

The .table-striped class adds zebra-stripes to a table:

Example

Firstname	Lastname	Email
John	Doe	john@example.com
Mary	Moe	mary@example.com
July	Dooley	july@example.com

Bordered Table

The .table-bordered class adds borders on all sides of the table and cells:

Example

Firstname	Lastname	Email
John	Doe	john@example.com
Mary	Moe	mary@example.com
July	Dooley	july@example.com

Hover Rows

The .table-hover class enables a hover state on table rows:

Example

Firstname	Lastname	Email
John	Doe	john@example.com
Mary	Moe	mary@example.com
July	Dooley	july@example.com

Condensed Table

The .table-condensed class makes a table more compact by cutting cell padding in half:

Example

Firstname	Lastname	Email
John	Doe	john@example.com
Mary	Moe	mary@example.com
July	Dooley	july@example.com

Contextual Classes

Contextual classes can be used to color table rows (<tr>) or table cells (<td>):

Example

Firstname	Lastname	Email
John	Doe	john@example.com
Mary	Moe	mary@example.com
July	Dooley	july@example.com

The contextual classes that can be used are:

Class	Description
`.active`	Applies the hover color to the table row or table cell
`.success`	Indicates a successful or positive action
`.info`	Indicates a neutral informative change or action
`.warning`	Indicates a warning that might need attention
`.danger`	Indicates a dangerous or potentially negative action

Bootstrap Image Shapes

Rounded Corners:

Circle:

Thumbnail:

Rounded Corners

The .img-rounded class adds rounded corners to an image (IE8 do not support rounded corners):

Example

Circle

The .img-circle class shapes the image to a circle (IE8 do not support rounded corners):

Example

Thumbnail

The .img-thumbnail class shapes the image to a thumbnail:

Example

Responsive Images

Images comes in all sizes. So do screens. Responsive images automatically adjust to fit the size of the screen.

Create responsive images by adding an .img-responsive class to the <img> tag. The image will then scale nicely to the parent element.

The .img-responsive class applies max-width: 100%; and height: auto; to the image:

Example

Image Gallery

You can also use Bootstrap's grid system in conjunction with the .thumbnail class to create an image gallery:

Example

<div class="row">
  <div class="col-md-4">
    <a href="pulpitrock.jpg" class="thumbnail">
      <p>Pulpit Rock: A famous tourist attraction in Forsand, Ryfylke, Norway.</p>
      <img src="pulpitrock.jpg" alt="Pulpit Rock" style="width:150px;height:150px">
    </a>
  </div>
  <div class="col-md-4">
    <a href="moustiers-sainte-marie.jpg" class="thumbnail">
      <p>Moustiers-Sainte-Marie: Considered as one of the "most beautiful villages of France".</p>
      <img src="moustiers-sainte-marie.jpg" alt="Moustiers Sainte Marie"style="width:150px;height:150px">
    </a>
  </div>
  <div class="col-md-4">
    <a href="cinqueterre.jpg" class="thumbnail">
      <p>The Cinque Terre: A rugged portion of coast in the Liguria region of Italy.</p>
      <img src="cinqueterre.jpg" alt="Cinque Terre" style="width:150px;height:150px">
    </a>
  </div>
</div>

Responsive Embeds

Also let videos or slideshows scale properly on any device.

Classes can be applied directly to <iframe>, <embed>, <video>, and <object> elements.

The following example creates a responsive video by adding an .embed-responsive-item class to an <iframe> tag (the video will then scale nicely to the parent element). The containing <div> defines the aspect ratio of the video:

Example

What is aspect ratio?

The aspect ratio of an image describes the proportional relationship between its width and its height. Two common video aspect ratios are 4:3 (the universal video format of the 20th century), and 16:9 (universal for HD television and European digital television).

You can choose between two aspect ratio classes:

<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>


<div class="embed-responsive embed-responsive-4by3">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>

Bootstrap Jumbotron and Page Header

Creating a Jumbotron

A jumbotron indicates a big box for calling extra attention to some special content or information.

A jumbotron is displayed as a grey box with rounded corners. It also enlarges the font sizes of the text inside it.

Tip: Inside a jumbotron you can put nearly any valid HTML, including other Bootstrap elements/classes.

Use a <div> element with class .jumbotron to create a jumbotron:

Bootstrap Tutorial

Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile-first projects on the web.

Jumbotron Inside Container

Place the jumbotron inside the

<div
class="container">

if you want the jumbotron to NOT extend to the edge of the screen:

Example

<div class="container">
  <div class="jumbotron">
    <h1>Bootstrap Tutorial</h1>
    <p>Bootstrap is the most popular HTML, CSS, and JS framework for developing
    responsive, mobile-first projects on the web.</p>
  </div>
  <p>This is some text.</p>
  <p>This is another text.</p>
</div>

Jumbotron Outside Container

Place the jumbotron outside the

<div
class="container">

if you want the jumbotron to extend to the screen edges:

Example

<div class="jumbotron">
  <h1>Bootstrap Tutorial</h1>
  <p>Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive,
mobile-first projects on the web.</p>
</div>
<div class="container">
  <p>This is some text.</p>
  <p>This is another text.</p>
</div>

Creating a Page Header

A page header is like a section divider.

The .page-header class adds a horizontal line under the heading (+ adds some extra space around the element):

Example Page Header

Use a <div> element with class .page-header to create a page header:

Example

<div class="page-header">
<h1>Example Page Header</h1>
</div>

Monday, 23 February 2015

Bootstrap,What is Bootstrap,• Responsive features

What is Bootstrap?

Why Use Bootstrap?

Bootstrap CDN

MaxCDN:

Create First Web Page With Bootstrap

Two Basic Bootstrap Pages

Example

Example

Bootstrap Grid System

Grid Classes

Basic Structure of a Bootstrap Grid

Three Equal Columns

Example

Two Unequal Columns

Example

Bootstrap's Default Settings

Bootstrap vs. Browser Defaults

<h1> - <h6>

Example

h1 Bootstrap heading (36px)

h2 Bootstrap heading (30px)

h3 Bootstrap heading (24px)

h4 Bootstrap heading (18px)

h5 Bootstrap heading (14px)

h6 Bootstrap heading (12px)

<small>

Example

h1 heading secondary text

h2 heading secondary text

h3 heading secondary text

h4 heading secondary text

h5 heading secondary text

h6 heading secondary text

<mark>

Example

<abbr>

Example

<blockquote>

Example

Example

<dl>

Example

<code>

Example

<kbd>

Example

<pre>

Example

Contextual Colors and Backgrounds

Example

Example

More Typography Classes

Bootstrap Basic Table

Example

Striped Rows

Example

Bordered Table

Example

Hover Rows

Example

Condensed Table

Example

Contextual Classes

Example

Bootstrap Image Shapes

Rounded Corners

Example

Circle

Example

Thumbnail

Example

Responsive Images

Example

Image Gallery

Example

Responsive Embeds

Example

Bootstrap Jumbotron and Page Header