introduction to bootstrap
TRANSCRIPT
INTRODUCTION TO BOOTSTRAPA Responsive CSS Framework
Rand Grahamrmcore.com
1. Introduction To Bootstrap Presentation
2. Cat Clicker App
Presentation Overview
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
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 (max-width: 768px) { body{ font-size: 13px; }}
The CSS Media Query
Example
media_type: all, print, screen, tv
media_feature: width, min-width, max-widthheight, min-height, max-height
Types and Features
rmcore.com
Bootstrap Advantages
Speeds developmentCross browserPopularityTool Support
PineGrow
Bootstrap Playground
Theme Markets
Full bootstrap.min.css148KB
Customizedbootstrap.min.css64KB
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
list-group
list-group-item
rmcore.com
VisualsThe 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
Let’s See Some Code
rmcore.com
Connect with me on twitter: @rdg_rmcoreRead more at my website:http://rmcore.com/
Keep in Touch
rmcore.com
Boots by dvids.Kitten by poplinre."MaslowsHierarchyOfNeeds" by FireflySixtySeven
Credits
rmcore.com