Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

HTML & CSS #10 : Bootstrap

776 views

Published on

HTML & CSS #10 : Bootstrap

Published in: Software
  • Be the first to comment

HTML & CSS #10 : Bootstrap

  1. 1. Bootstrap
  2. 2. 1. Bootstrap ?
  3. 3. What ? « Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web. » http://getbootstrap.com
  4. 4. Framework ? A software framework is an abstraction in which software providing generic functionality can be selectively changed by additional user-written code, thus providing application-specific software. http://en.wikipedia.org
  5. 5. Mobile first ? « Adapting the design process to start by designing the mobile version of an application first and then going upwards. »
  6. 6. Most popular ? Source Google Trends
  7. 7. The story Jacob Thornton Mark Otto Twitter + +
  8. 8. 2. Why Bootstrap ?
  9. 9. Save time“All we have to decide is what to do with the time that is given us.” - Gandalf
  10. 10. Customization« Design is not just what it looks like and feels like. Design is how it works. » - Steve Jobs
  11. 11. Consistency« Trust is built with consistency. » Lincoln Chafee
  12. 12. Responsiveness« Adapt or perish, now as ever, is nature's inexorable imperative. » - H. G. Wells
  13. 13. 3. Getting started
  14. 14. Downloadhttp://getbootstrap.com/getting-started/#download
  15. 15. Basic template <!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> <link href="css/bootstrap.min.css" rel="stylesheet"> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> </head> <body> <h1>Hello, world!</h1> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script src="js/bootstrap.min.js"></script> </body> </html>
  16. 16. Exemples template http://getbootstrap.com/getting-started/#examples
  17. 17. 4. Grid system
  18. 18. Containers (1) « Bootstrap requires a containing element to wrap site contents and house our grid system. » http://getbootstrap.com/css/#overview-container
  19. 19. Containers (2) <div class="container"> ... </div> <div class="container-fluid"> ... </div> Fixed width Full width
  20. 20. Rows (1) « Use rows to create horizontal groups of columns. » http://getbootstrap.com/css/#grid-intro
  21. 21. Rows (2) Rows must be placed within a .container or .container-fluid for proper alignment and padding. Only columns may be immediate children of rows
  22. 22. Rows (3) <div class="container"> <div class="row">...</div> <div class="row">...</div> <div class="row">...</div> </div>
  23. 23. Columns (1) « Bootstrap includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases » http://getbootstrap.com/css/#grid-intro
  24. 24. Columns (2) Content should be placed within columns Grid columns are created by specifying the number of twelve available columns you wish to span. Grid classes apply to devices with screen widths greater than or equal to the breakpoint sizes
  25. 25. Columns (3) http://getbootstrap.com/css/#grid-options
  26. 26. Columns (4) <div class="container"> <div class="row"> <div class="col-md-8">.col-md-8</div> <div class="col-md-4">.col-md-4</div> </div> <div class="row"> <div class="col-md-4">.col-md-4</div> <div class="col-md-4">.col-.md-4</div> <div class="col-md-4">.col-md-4</div> </div> <div class="row"> <div class="col-md-6">.col-md-6</div> <div class="col-md-6">.col-md-6</div> </div> </div>
  27. 27. Columns (5) <div class="container"> <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-md-4">.col-xs-6 .col-md-4</div> <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</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> </div>
  28. 28. 4. Customize
  29. 29. NEVER, EVER modify the bootstrap.css file Every time you hack bootstrap files God kills a kitten
  30. 30. Add a Custom Stylesheet <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> <link href="css/bootstrap.min.css" rel="stylesheet"> <link rel="stylesheet" type="text/css" href="css/custom.css"> </head>
  31. 31. Applying Custom Styles h1{ color: red; }
  32. 32. Merci pour votre attention.

×