Twitter Bootstrap (spring)
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
3,466
On Slideshare
3,461
From Embeds
5
Number of Embeds
2

Actions

Shares
Downloads
107
Comments
0
Likes
3

Embeds 5

https://twitter.com 3
http://us-w1.rockmelt.com 2

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n

Transcript

  • 1. TWITTER BOOTSTRAP Darby Frey darbyfrey@gmail.com @darbyfrey
  • 2. GRID : FLUID GRID : FIXED LAYOUT / FLUID LAYOUT RESPONSIVE DESIGN : TYPOGRAPHY : CODE VIEW TABLES : FORMS : BUTTONS : ICONS : BUTTONGROUPS : TABS : PILLS : NAV LISTS : NAVBAR BREADCRUMBS : PAGINATION : PAGER : INLINE LABELS BADGES : PAGE HEADERUNIT : HERO UNIT THUMBNAILS : ALERTS : PROGRESS BARS : WELLS CLOSE ICON : MODALS : DROPDOWNS : SCROLLSPYTOGGLABLE TABS : TOOLTIPS : POPOVERS : COLLAPSE CAROUSEL : TYPEAHEAD
  • 3. GRID : FLUID GRID : FIXED LAYOUT / FLUID LAYOUT RESPONSIVE DESIGN : TYPOGRAPHY : CODE VIEW TABLES : FORMS : BUTTONS : ICONS : BUTTONGROUPS : TABS : PILLS : NAV LISTS : NAVBAR BREADCRUMBS : PAGINATION : PAGER : INLINE LABELS BADGES : PAGE HEADERUNIT : HERO UNIT THUMBNAILS : ALERTS : PROGRESS BARS : WELLS CLOSE ICON : MODALS : DROPDOWNS : SCROLLSPYTOGGLABLE TABS : TOOLTIPS : POPOVERS : COLLAPSE CAROUSEL : TYPEAHEAD
  • 4. 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.
  • 5. INSTALLATION The Less Easy Way
  • 6. 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
  • 7. 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
  • 8. GRID
  • 9. NAVBAR• Navbar / Fixed Navbar (top/bottom)• Brand• Nav links• Dropdown menus• Embedded Forms
  • 10. NAVBAR scaffold nav links
  • 11. NAVBAR brand nav links
  • 12. 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
  • 13. FORMS
  • 14. 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>
  • 15. 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.
  • 16. TOOLTIPS
  • 17. POPOVERS
  • 18. 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.
  • 19. ICONS
  • 20. GRID : FLUID GRID : FIXED LAYOUT / FLUID LAYOUT RESPONSIVE DESIGN : TYPOGRAPHY : CODE VIEW TABLES : FORMS : BUTTONS : ICONS : BUTTONGROUPS : TABS : PILLS : NAV LISTS : NAVBAR BREADCRUMBS : PAGINATION : PAGER : INLINE LABELS BADGES : PAGE HEADERUNIT : HERO UNIT THUMBNAILS : ALERTS : PROGRESS BARS : WELLS CLOSE ICON : MODALS : DROPDOWNS : SCROLLSPYTOGGLABLE TABS : TOOLTIPS : POPOVERS : COLLAPSE CAROUSEL : TYPEAHEAD
  • 21. 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)• https://github.com/gabetax/twitter-bootstrap-kaminari-views