0
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-
...
none
btn
+ btn-
primary
Snapshots
Fluid Vs Non-Fluid
940px Width
Centered
1170px Width
Centered
http://localhost/pikach
u/index.php/home/boo
tstrap/Container
Right left 20px
padding. Full width.
http://localhost/pikach
u/index.php/home/boo
tstrap/Container-fluid
<div class=“container”>
<h1>Heading</h1>
Some random content
.
.
.
.
.
</div>
Container
(For disabling
Responsive bootstra...
<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 ...
On Resizing the browser window
Syntax
<div class=“span12”>
….
</div>
<div class=“span6”>
…
</div>
<div class=“span6”>
…
</div>
Appearance
1170 px
570 px
...
Syntax
• Span12 – full width;
• If respnsive css is
included:
• Span12 width:1170px (same
as responsive container)
• Span6...
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 fin...
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">Ri...
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. ;)
A beginner's guide to twitter bootstrap
A beginner's guide to twitter bootstrap
A beginner's guide to twitter bootstrap
A beginner's guide to twitter bootstrap
A beginner's guide to twitter bootstrap
Upcoming SlideShare
Loading in...5
×

A beginner's guide to twitter bootstrap

1,255

Published on

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.

Published in: Technology, Design
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,255
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
59
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Transcript of "A beginner's guide to twitter bootstrap"

  1. 1. Leading Front-end Framework
  2. 2. What is a framework Basic Conceptual Structure Used in Development Provides Generic Functionality A general Definition
  3. 3. Front End Framework CSS Javascript/JQuery Front-end Framework
  4. 4. Why do we need a framework Before After
  5. 5. The Blood and Bones of Bootstrap
  6. 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. 7. none btn + btn- primary Snapshots
  8. 8. Fluid Vs Non-Fluid
  9. 9. 940px Width Centered
  10. 10. 1170px Width Centered http://localhost/pikach u/index.php/home/boo tstrap/Container
  11. 11. Right left 20px padding. Full width. http://localhost/pikach u/index.php/home/boo tstrap/Container-fluid
  12. 12. <div class=“container”> <h1>Heading</h1> Some random content . . . . . </div> Container (For disabling Responsive bootstrap, comment out the bootstrap- responsive.css)
  13. 13. <div class=“container-fluid”> <h1>Heading</h1> Some random content . . . . . </div> Container-fluid
  14. 14. Fluid Vs Non-Fluid
  15. 15. Row means a 100% width div. <div class=“row”> <h1>Heading</h1> Some random content . . . . . </div> ROW
  16. 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. 17. On Resizing the browser window
  18. 18. Syntax <div class=“span12”> …. </div> <div class=“span6”> … </div> <div class=“span6”> … </div> Appearance 1170 px 570 px 570 px
  19. 19. 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
  20. 20. 1170 px 570 px
  21. 21. 940 px 460 px
  22. 22. Bootstrap’s version of some HTML elements. Default CSS.
  23. 23. <h1> <h2> <h3> <h4> <h5> <h6>
  24. 24. • 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
  25. 25. Simply add THE required class, and bootstrap will take care of the rest.
  26. 26. • <p class="text-left">Left aligned text.</p> • <p class="text-center">Center aligned text.</p> • <p class="text-right">Right aligned text.</p>
  27. 27. As simple as it seems.
  28. 28. <table> <thead> … .. .. </thead> <tbody> …. .. .. </tbody> </table>
  29. 29. <table class=“table”> … </table> http://localhost/pikachu/index.php/home/normal/tabl e
  30. 30. Before After And all we did was, add class=“table”, nothing else. I swear to god. ;)
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×