Bootstrap 3.1.1

2,381
-1

Published on

on Bootstrap 3.1.1

Published in: Software, Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

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

No notes for slide

Bootstrap 3.1.1

  1. 1. Twitter’s Bootstrap 3.1.1
  2. 2. What we are going to cover • Overview of Bootstrap • Why Bootstrap • Getting Started Bootstrap • Grid System of Bootstrap • CSS, Components, JavaScript • Layouts in Bootstrap • media queries • Creating sample Structures using Bootstrap • Customization
  3. 3. Overview • Framework for front-end development • Open source project by Twitter. • Mobile-first approach • Responsive design
  4. 4. Why ?? • Faster development • Browser Support • Number of devices Support • Easy to use • Built-in easy to customize components • Free
  5. 5. Getting Started <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Bootstrap 101 Template</title> <!-- Bootstrap --> <link href="css/bootstrap.min.css" rel="stylesheet"> <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  6. 6. Getting Started <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script> <![endif]--> </head> <body> <h1>Hello, world!</h1> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <!-- Include all compiled plugins (below), or include individual files as needed --> <script src="js/bootstrap.min.js"></script> </body> </html>
  7. 7. Grid System
  8. 8. CSS, Components, JavaScript CSS Components JavaScript Typography Glyph icons Modal Code Breadcrumbs ScrollSpy Table Pagination Tooltip Forms Button Dropdowns Popover Buttons Input Groups Collapse Images Badges Carousel Helper Classes Navigation Bar Affix Responsive Utilities Jumbotron Progress Bar Alert Panel Global CSS settings, fundamental HTML elements styled and enhanced with extensible classes
  9. 9. Layouts Extra small devicesPhone s (<768px) Small devices Tablet s (≥768px) Medium devices Deskt ops (≥992px) Large devices Deskt ops (≥1200px) Grid behavior Horizontal at all times Collapsed to start, horizontal above breakpoints Container width None (auto) 750px 970px 1170px Class prefix .col-xs- .col-sm- .col-md- .col-lg- # of columns 12 Column width Auto 60px 78px 95px Gutter width 30px (15px on each side of a column)
  10. 10. Media Queries E.g. • @media (min-width:500px) { … } • @media (orientation: portrait) { … } Media Queries is a CSS3 module allowing content rendering to adapt to conditions such as screen resolution.
  11. 11. Creating sample structure • <div class="row"> <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div> <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div> </div> • <div class="row"> <div class="col-xs-6">.col-xs-6</div> <div class="col-xs-6">.col-xs-6</div> </div>
  12. 12. Customization
  13. 13. Questions ?
  14. 14. Thank You
  1. A particular slide catching your eye?

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

×