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.

1. Leading Front-end Framework

2. What is a
framework
Basic
Conceptual
Structure
Used in
Development
Provides
Generic
Functionality
A general Definition

3. Front End
Framework
CSS Javascript/JQuery
Front-end
Framework

4. Why do we need a
framework
Before After

5. The Blood and Bones of Bootstrap

6. 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

7. none
btn
+ btn-
primary
Snapshots

8. Fluid Vs Non-Fluid

9. 940px Width
Centered

10. 1170px Width
Centered
http://localhost/pikach
u/index.php/home/boo
tstrap/Container

11. Right left 20px
padding. Full width.
http://localhost/pikach
u/index.php/home/boo
tstrap/Container-fluid

12. <div class=“container”>
<h1>Heading</h1>
Some random content
.
.
.
.
.
</div>
Container
(For disabling
Responsive bootstrap,
comment out the
bootstrap-
responsive.css)

13. <div class=“container-fluid”>
<h1>Heading</h1>
Some random content
.
.
.
.
.
</div>
Container-fluid

14. Fluid Vs Non-Fluid

15. Row means a 100% width
div.
<div class=“row”>
<h1>Heading</h1>
Some random content
.
.
.
.
.
</div>
ROW

16. 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

17. On Resizing the browser window

20. Syntax
<div class=“span12”>
….
</div>
<div class=“span6”>
…
</div>
<div class=“span6”>
…
</div>
Appearance
1170 px
570 px
570 px

21. 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

22. 1170 px
570 px

23. 940 px
460 px

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

26. <h1>
<h2>
<h3>
<h4>
<h5>
<h6>

27. • 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

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

30. • <p class="text-left">Left aligned text.</p>
• <p class="text-center">Center aligned text.</p>
• <p class="text-right">Right aligned text.</p>

31. As simple as it seems.

32. <table>
<thead>
…
..
..
</thead>
<tbody>
….
..
..
</tbody>
</table>

33. <table class=“table”>
…
</table>
http://localhost/pikachu/index.php/home/normal/tabl
e

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