Twitter Bootstrap
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
  • Good one ..!!
    thank you
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
4,434
On Slideshare
4,426
From Embeds
8
Number of Embeds
2

Actions

Shares
Downloads
152
Comments
1
Likes
7

Embeds 8

http://www.linkedin.com 4
https://www.linkedin.com 4

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. 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.
  • 10. ICONS
  • 11. NAVBAR• Navbar / Fixed Navbar (top/bottom)• Brand• Nav links• Dropdown menus• Embedded Forms
  • 12. NAVBAR scaffold nav links
  • 13. NAVBAR brand nav links
  • 14. 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
  • 15. FORMS
  • 16. 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>
  • 17. 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.
  • 18. TOOLTIPS
  • 19. POPOVERS
  • 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)