A beginner's guide to twitter bootstrap

Leading Front-end Framework

What is a framework

Basic Conceptual Structure

Used in Development

Provides Generic

Functionality

A general Definition

Front End Framework

CSS Javascript/JQuery

Front-end

Framework

Why do we need a

framework

Before After

The Blood and Bones of Bootstrap

NONE:

<button>Bootstrap</button>

Using Bootstrap Classes:

<button

class=“btn”>Bootstrap</butto

n>

<button class=“btn btn-

primary”>Bootstrap</button>

The whole bootstrap

works on classes

none

btn

+ btn-primary

Snapshots

Fluid Vs Non-Fluid

940px Width

Centered

1170px Width

Centered

http://localhost/pikachu/index.php/home/bootstrap/Container

Right left 20px padding. Full width.

http://localhost/pikachu/index.php/home/bootstrap/Container-fluid

<div class=“container”>

<h1>Heading</h1>

Some random content.

.

.

.

.

</div>

Container

(For disabling Responsive bootstrap, comment out the bootstrap-responsive.css)

<div class=“container-fluid”>

<h1>Heading</h1>

Some random content.

.

.

.

.

</div>

Container-fluid

Fluid Vs Non-Fluid

Row means a 100% width

div.

<div class=“row”>

<h1>Heading</h1>

Some random content.

.

.

.

.

</div>

ROW

Fluid row is responsive and adjusts itself according to screen size.

<div class=“row-fluid”>

<h1>Heading</h1>

Some random content.

.

.

.

.

</div>

Lets see the use of rows.

Row-fluid

On Resizing the browser window

Syntax

<div class=“span12”>

….

</div>

<div class=“span6”>

…

</div>

<div class=“span6”>

…

</div>

Appearance

1170 px

570 px

570 px

Syntax

• Span12 – full width;

• If respnsive css is

included:

• Span12 width:1170px (same

as responsive container)

• Span6 width:570px etc

• If responsive css is not

included:

• Span12 width: 940px (same

as irresponsive container)

• Span6 width:460px;

Appearance

1170 px

570 px

570 px

1170 px

570 px

940 px

460 px

Bootstrap’s version of some HTML elements. Default CSS.

<h1>

<h2>

<h3>

<h4>

<h5>

<h6>

• I wanna say <strong>Hello</strong>

• I wanna say <em>Hello</em>

• <small>This line of text is meant to be treated as fine print.</small>

I wanna say Hello

I wanna say Hello

I wanna say Hello

Simply add THE required class, and bootstrap will take care of the rest.

• <p class="text-left">Left aligned text.</p>

• <p class="text-center">Center aligned text.</p>

• <p class="text-right">Right aligned text.</p>

As simple as it seems.

<table><thead>

…

..

..

</thead>

<tbody>

….

..

..

</tbody>

</table>

<table class=“table”>

…

</table>

http://localhost/pikachu/index.php/home/normal/tabl

e

Before After

And all we did was, add class=“table”, nothing else. I swear to god. ;)