HTML & CSS #10 : Bootstrap
•
1 like•982 views
Bootstrap is an open-source HTML, CSS, and JavaScript framework for developing responsive mobile-first projects. It provides pre-built components and utilities for common tasks like responsive grid system, typography, forms, buttons, navigation and other interfaces. The document discusses what Bootstrap is, why it is popular, how to get started, its grid system for responsive design, and customizing Bootstrap with additional CSS.
Report
Share
HTML & CSS #10 : Bootstrap
- 1. Bootstrap
- 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. 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. Mobile first ? « Adapting the design process to start by designing the mobile version of an application first and then going upwards. »
- 6. Most popular ? Source Google Trends
- 7. The story Jacob Thornton Mark Otto Twitter + +
- 8. 2. Why Bootstrap ?
- 9. Save time“All we have to decide is what to do with the time that is given us.” - Gandalf
- 10. Customization« Design is not just what it looks like and feels like. Design is how it works. » - Steve Jobs
- 11. Consistency« Trust is built with consistency. » Lincoln Chafee
- 12. Responsiveness« Adapt or perish, now as ever, is nature's inexorable imperative. » - H. G. Wells
- 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>
- 17. 4. Grid system
- 18. Containers (1) « Bootstrap requires a containing element to wrap site contents and house our grid system. » http://getbootstrap.com/css/#overview-container
- 19. Containers (2) <div class="container"> ... </div> <div class="container-fluid"> ... </div> Fixed width Full width
- 20. Rows (1) « Use rows to create horizontal groups of columns. » http://getbootstrap.com/css/#grid-intro
- 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. Rows (3) <div class="container"> <div class="row">...</div> <div class="row">...</div> <div class="row">...</div> </div>
- 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. 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
- 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. 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. 4. Customize
- 29. NEVER, EVER modify the bootstrap.css file Every time you hack bootstrap files God kills a kitten
- 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. Applying Custom Styles h1{ color: red; }
- 32. Merci pour votre attention.