Successfully reported this slideshow.
Your SlideShare is downloading. ×

Introduction To Bootstrap

Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Upcoming SlideShare
Bootstrap 3
Bootstrap 3
Loading in …3
×

Check these out next

1 of 21 Ad

Introduction To Bootstrap

Download to read offline

An introduction to the twitter bootstrap css framework. A responsive css framework for web app development. These are the slides from a presentation given at the Software Craftsmanship of McHenry County Meetup.

An introduction to the twitter bootstrap css framework. A responsive css framework for web app development. These are the slides from a presentation given at the Software Craftsmanship of McHenry County Meetup.

Advertisement
Advertisement

More Related Content

Similar to Introduction To Bootstrap (20)

Advertisement

Recently uploaded (20)

Introduction To Bootstrap

  1. 1. INTRODUCTION TO BOOTSTRAP A Responsive CSS Framework Rand Graham rmcore.com
  2. 2. 1. Introduction To Bootstrap Presentation 2. Cat Clicker App Presentation Overview rmcore.com
  3. 3. A Modern Web Page rmcore.com
  4. 4. View The Source (if you dare) That’s a lot of divs. rmcore.com
  5. 5. When you want to RTFM, first find the manual. See also: CSS Tricks Help For The CSS Newbie rmcore.com
  6. 6. Have You Heard The One About rmcore.com
  7. 7. You can roll your own grid system. Grid System Example rmcore.com
  8. 8. A Responsive Page
  9. 9. /* Document level adjustments */ body { font-size: 17px; } @media (max-width: 900px) { body { font-size: 15px; }} @media (max-width: 768px) { body{ font-size: 13px; }} The CSS Media Query Example media_type: all, print, screen, tv media_feature: width, min-width, max-width height, min-height, max-height Types and Features rmcore.com
  10. 10. Bootstrap Advantages Speeds development Cross browser Popularity Tool Support PineGrow Bootstrap Playground Theme Markets
  11. 11. Heavy pages Bootstrap Disadvantage - Weight rmcore.com
  12. 12. Silicon Valley Hierarchy of Needs rmcore.com
  13. 13. Full bootstrap.min. css 148KB Customized bootstrap.min.css 64KB Bootstrap Customize rmcore.com
  14. 14. “I’ve seen this website before.” Bootstrap Disadvantage - Same samey sameness rmcore.com
  15. 15. Common Classes by Example navbar-fixed-top navbar-inverse search-bar nav-bar-right glyphicon-search col-sm-3 left col-sm-9 list-group list-group-item rmcore.com
  16. 16. Visuals The application should display ● a list of at least 5 cats, listed by name ● an area to display the selected cat ● text showing the number of clicks In the cat display area, the following should be displayed ● the cat's name ● a picture of the cat Interaction ● When a cat name is clicked in the list, the cat display area should update to show the data for the selected cat. ● The number of clicks in the cat area should be unique to each cat, and should increment when the cat's picture is clicked. Requirements for Cat Clicker rmcore.com
  17. 17. Mockup - Full rmcore.com
  18. 18. Mockup - Mobile rmcore.com
  19. 19. Let’s See Some Code rmcore.com
  20. 20. Connect with me on twitter: @rdg_rmcore Read more at my website: http://rmcore.com/ Keep in Touch rmcore.com
  21. 21. Boots by dvids. Kitten by poplinre. "MaslowsHierarchyOfNeeds" by FireflySixtySeven Credits rmcore.com

×