a beginner's guide to twitter bootstrap
DESCRIPTION
A "Lets get Started" Guide to twitter bootstrap. Starting with the importance. I am working on it and will improve it later on, so ignore some 'localhost' links, this presentation was for training purpose.TRANSCRIPT
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. ;)