Introduction To Bootstrap
1 like3,044 views
The document provides an introduction to Bootstrap as a responsive CSS framework and discusses its advantages and disadvantages, including development speed and customization options. It outlines the requirements for a 'cat clicker' app, detailing its features and expected functionality. Additionally, it includes references to resources and mockups related to the project.
Introduction To Bootstrap
- 1. INTRODUCTION TO BOOTSTRAP A Responsive CSS Framework Rand Graham rmcore.com
- 2. 1. Introduction To Bootstrap Presentation 2. Cat Clicker App Presentation Overview rmcore.com
- 3. A Modern Web Page rmcore.com
- 4. View The Source (if you dare) That’s a lot of divs. rmcore.com
- 5. When you want to RTFM, first find the manual. See also: CSS Tricks Help For The CSS Newbie rmcore.com
- 6. Have You Heard The One About rmcore.com
- 7. You can roll your own grid system. Grid System Example rmcore.com
- 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. Bootstrap Advantages Speeds development Cross browser Popularity Tool Support PineGrow Bootstrap Playground Theme Markets
- 11. Heavy pages Bootstrap Disadvantage - Weight rmcore.com
- 12. Silicon Valley Hierarchy of Needs rmcore.com
- 14. “I’ve seen this website before.” Bootstrap Disadvantage - Same samey sameness rmcore.com
- 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. 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
- 19. Let’s See Some Code rmcore.com
- 20. Connect with me on twitter: @rdg_rmcore Read more at my website: http://rmcore.com/ Keep in Touch rmcore.com
- 21. Boots by dvids. Kitten by poplinre. "MaslowsHierarchyOfNeeds" by FireflySixtySeven Credits rmcore.com