Bootstrap - What the hell is it
Download as PPTX, PDF1 like1,082 views
Bootstrap CSS is a front-end framework for developing responsive, mobile-first web sites and applications. The document provides examples of how to use Bootstrap for page layout, buttons, images, icons and installing Bootstrap through a CDN or package manager. Resources are listed for learning more about Bootstrap CSS.
Bootstrap - What the hell is it
- 1. Bootstrap CSS What the hell is it @LaplanteWebDev
- 4. Example
- 6. Example • <div class=“container-fluid”></div> • Full Width of page • <div class=“container”></div> • Fixed width on page
- 9. EASY MODE • Link To Bootstrap using their CDN • <link rel="stylesheet" href=“https://maxcdn.bootstrapcdn.com/ bootstrap/3.3.4/css/bootstrap.min.css"> • <script src="https://maxcdn.bootstrapcdn.com/b ootstrap/3.3.4/js/bootstrap.min.js"></scri pt>
- 10. HARD MODE • Install with your favorite package manager • npm install bootstrap • bower install boostrap
- 13. Example • <a class="btn btn-default" href="#" role="button">Link</a> • <button class="btn btn-default" type="submit">Button</button> • <input class="btn btn-default" type="button" value="Input"> • <input class="btn btn-default" type="submit" value="Submit">
- 15. Example • <img src="..." class="img-responsive" alt="Responsive image”> • <img src="..." alt="..." class="img-rounded"> • <img src="..." alt="..." class="img-circle"> • <img src="..." alt="..." class="img-thumbnail">
- 18. Example • <span class="glyphicon glyphicon-search" aria- hidden="true"></span>
- 20. Example Time
- 22. Questions
- 23. Resources • http://getbootstrap.com/ • http://lapweb.info/1K5emHU • https://wrapbootstrap.com/ • http://lapweb.info/1K5evel
Editor's Notes
- #3: Bootstrap is a set of tools that allow for pre-built css components, grids, and default JavaScript Actions -Mobile first -googles new algorithm takes into account mobile design
- #4: Bootstrap is most famous for their responsive grid framework Comprised of 12 columns, broken apart by specific css classes.
- #6: Bootstrap comes with some prebuilt css classes you need to attach to get their css framework to work properly. Container-fluid - Stretches entire width of viewport Container - Fixed width Row - A singular row, which contains columns for the grid columns - Columns are broken up into 12 sections, can divide them however you please
- #8: Bootstrap can end up littering your html, be careful and wise when you decide to use. Some pitfalls - Containers inside of Rows - Containers inside of Containers
- #9: Thats cool and all, but how to we get this thing working
- #12: Bootstrap comes with some awesome helper and utility classes - remember to always modify the default theme, as nobody has time to see the same cookie cutter template everywhere
- #13: One of the main components you will use often with bootstrap are buttons to add buttons its as simple as adding a class to your html element btn - adds to element —- Default styling -Bootstrap comes with some helper classes for some button styling out of the box - btn-default -btn -primary - btw-success ….. sizing bootstrap comes with some helper classes for sizing of buttons Follow the grid model in naming structure btn-xs/s/m/lg
- #15: Images and the image responsive class Everyone hates images and responsive design add this class and life worries go away img-responsive
- #17: Navbars in bootstrap How are they helpful Remember mobile first - Hamburger icon How they can become a nightmare
- #18: What the heck are glyph icons Why they are useful wrapped into bootstrap glyphicon glyphicon-search
- #20: JavaScript in bootstrap Why its used set of jQuery plugins that tie into bootstrap modals/drop downs/tooltips/Carousel
- #21: Jump into example of basic bootstrap template