1. TWITTER BOOTSTRAP
Darby Frey
darbyfrey@gmail.com
@darbyfrey

3. GRID : FLUID GRID : FIXED LAYOUT / FLUID
LAYOUT RESPONSIVE DESIGN :
TYPOGRAPHY : CODE VIEW TABLES :
FORMS : BUTTONS : ICONS : BUTTON
GROUPS : TABS : PILLS : NAV LISTS : NAVBAR
BREADCRUMBS : PAGINATION : PAGER :
INLINE LABELS BADGES : PAGE HEADER
UNIT : HERO UNIT THUMBNAILS : ALERTS :
PROGRESS BARS : WELLS CLOSE ICON :
MODALS : DROPDOWNS : SCROLLSPY
TOGGLABLE TABS : TOOLTIPS : POPOVERS :
COLLAPSE CAROUSEL : TYPEAHEAD

4. GRID : FLUID GRID : FIXED LAYOUT / FLUID
LAYOUT RESPONSIVE DESIGN :
TYPOGRAPHY : CODE VIEW TABLES :
FORMS : BUTTONS : ICONS : BUTTON
GROUPS : TABS : PILLS : NAV LISTS : NAVBAR
BREADCRUMBS : PAGINATION : PAGER :
INLINE LABELS BADGES : PAGE HEADER
UNIT : HERO UNIT THUMBNAILS : ALERTS :
PROGRESS BARS : WELLS CLOSE ICON :
MODALS : DROPDOWNS : SCROLLSPY
TOGGLABLE TABS : TOOLTIPS : POPOVERS :
COLLAPSE CAROUSEL : TYPEAHEAD

5. INSTALLATION
The Less Easy Way
• Download jQuery & Bootstrap
http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js
http://twitter.github.com/bootstrap/assets/bootstrap.zip
• Unzip file. Put CSS, Javascripts and Images in the correct
folders.
• Add <link> and <script> tags to your layout.

6. INSTALLATION
The Less Easy Way

7. INSTALLATION
The Easy Way (Rails)
• twitter-bootstrap-rails gem
https://github.com/seyhunak/twitter-bootstrap-rails
• In your Gemfile: gem “twitter-bootstrap-rails”
• Installthe required JS & CSS files with:
“rails g bootstrap:install”
• Generate a layout with:
rails g bootstrap:layout LAYOUT_NAME fixed/fluid
i.e. “rails g boostrap:layout application fixed”
• See Railscasts:
http://railscasts.com/episodes/328-twitter-bootstrap-basics
http://railscasts.com/episodes/329-more-on-twitter-bootstrap

8. GRID
• 12 column grid
• 940px wide fixed layout
• Responsive
• Fixedor Fluid layouts defined with:
class=”container” / class=”row”
class=”container-fluid” / class=”row-fluid”
• Define columns with class=”span*” and class=”offset*”
* = your column size

9. GRID

10. ICONS
• Glyphicons - free to use
•2 sprite images (black & white)
glyphicons-halflings.png
glyphicons-halflings-white.png
• To use, just add the icon name as
a class to an <i> tag.
• Example:
<i class=”icon-star”></i>
<i class=”icon-star icon-white”></i>
• Useful for adding visual context to interactions.

11. ICONS

12. NAVBAR
• Navbar / Fixed Navbar (top/bottom)
• Brand
• Nav links
• Dropdown menus
• Embedded Forms

13. NAVBAR
scaffold
nav links

14. NAVBAR
brand
nav links

15. FORMS
• Automatic for input elements
• Versatile layout configurations
•4 layout options - Vertical, Inline, Search and Horizontal
adding class to form tag sets the layout: class=“form-inline”, class=”form-horizontal”, etc.
• Witha little work you can create just about any form you
need without much CSS

16. FORMS

17. BUTTONS
• Super easy to make nice looking buttons
•3 sizes, 7 colors
• Can be added to any <a>, <button> or <input> element.
• <button class=”btn”>BUTTON</button>
• <button class=”btn btn-primary”>BUTTON</button>

18. TOOLTIPS & POPOVERS
• Tooltips
& Popovers provide 2 ways of adding contextual
information within an interface.
• Content included in <a> tag using the title or data attributes.

19. TOOLTIPS

20. POPOVERS

21. GRID : FLUID GRID : FIXED LAYOUT / FLUID
LAYOUT RESPONSIVE DESIGN :
TYPOGRAPHY : CODE VIEW TABLES :
FORMS : BUTTONS : ICONS : BUTTON
GROUPS : TABS : PILLS : NAV LISTS : NAVBAR
BREADCRUMBS : PAGINATION : PAGER :
INLINE LABELS BADGES : PAGE HEADER
UNIT : HERO UNIT THUMBNAILS : ALERTS :
PROGRESS BARS : WELLS CLOSE ICON :
MODALS : DROPDOWNS : SCROLLSPY
TOGGLABLE TABS : TOOLTIPS : POPOVERS :
COLLAPSE CAROUSEL : TYPEAHEAD

22. LINKS
• https://github.com/seyhunak/twitter-bootstrap-rails
• https://github.com/thomas-mcdonald/bootstrap-sass
• http://railscasts.com/episodes/328-twitter-bootstrap-basics
• http://railscasts.com/episodes/329-more-on-twitter-bootstrap
• http://bootswatch.com/ (free)
• http://wrapbootstrap.com/ (paid)