Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
INTRODUCTION TO BOOTSTRAP
A Responsive CSS Framework
Rand Graham
rmcore.com
1. Introduction To Bootstrap Presentation
2. Cat Clicker App
Presentation Overview
rmcore.com
A Modern Web Page
rmcore.com
View The Source (if you dare)
That’s a
lot of divs.
rmcore.com
When you want to RTFM,
first find the manual.
See also: CSS Tricks
Help For The CSS Newbie
rmcore.com
Have You Heard The One About
rmcore.com
You can roll your own grid system.
Grid System Example
rmcore.com
A Responsive Page
/* Document level adjustments */
body {
font-size: 17px; }
@media (max-width: 900px) {
body {
font-size: 15px; }}
@media (...
Bootstrap Advantages
Speeds development
Cross browser
Popularity
Tool Support
PineGrow
Bootstrap Playground
Theme Markets
Heavy pages
Bootstrap Disadvantage - Weight
rmcore.com
Silicon Valley Hierarchy of Needs
rmcore.com
Full bootstrap.min.
css
148KB
Customized
bootstrap.min.css
64KB
Bootstrap Customize
rmcore.com
“I’ve seen this website before.”
Bootstrap Disadvantage - Same samey sameness
rmcore.com
Common Classes by Example
navbar-fixed-top navbar-inverse search-bar
nav-bar-right
glyphicon-search
col-sm-3 left col-sm-9...
Visuals
The application should display
● a list of at least 5 cats, listed by name
● an area to display the selected cat
●...
Mockup - Full
rmcore.com
Mockup - Mobile
rmcore.com
Let’s See Some Code
rmcore.com
Connect with me on twitter:
@rdg_rmcore
Read more at my website:
http://rmcore.com/
Keep in Touch
rmcore.com
Boots by dvids.
Kitten by poplinre.
"MaslowsHierarchyOfNeeds" by FireflySixtySeven
Credits
rmcore.com
Nächste SlideShare
Wird geladen in …5
×

Introduction To Bootstrap

1.899 Aufrufe

Veröffentlicht am

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.

Veröffentlicht in: Software
  • Als Erste(r) kommentieren

  • Gehören Sie zu den Ersten, denen das gefällt!

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

×