Bootstrap CSS Quickstart Guide
•Download as PPTX, PDF•
1 like•1,074 views
Talk given at the front end design meetup group that dives into the basics of bootstrap
Recommended
More Related Content
What's hot
What's hot (20)
Similar to Bootstrap CSS Quickstart Guide
Similar to Bootstrap CSS Quickstart Guide (20)
Recently uploaded
Recently uploaded (20)
Bootstrap CSS Quickstart Guide
- 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
- 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
- Bootstrap is most famous for their responsive grid framework Comprised of 12 columns, broken apart by specific css classes.
- 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
- 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
- Thats cool and all, but how to we get this thing working
- 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
- 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
- Images and the image responsive class Everyone hates images and responsive design add this class and life worries go away img-responsive
- Navbars in bootstrap How are they helpful Remember mobile first - Hamburger icon How they can become a nightmare
- What the heck are glyph icons Why they are useful wrapped into bootstrap glyphicon glyphicon-search
- JavaScript in bootstrap Why its used set of jQuery plugins that tie into bootstrap modals/drop downs/tooltips/Carousel
- Jump into example of basic bootstrap template