Your SlideShare is downloading. ×
Twitter Bootstrap
Twitter Bootstrap
Twitter Bootstrap
Twitter Bootstrap
Twitter Bootstrap
Twitter Bootstrap
Twitter Bootstrap
Twitter Bootstrap
Twitter Bootstrap
Twitter Bootstrap
Twitter Bootstrap
Twitter Bootstrap
Twitter Bootstrap
Twitter Bootstrap
Twitter Bootstrap
Twitter Bootstrap
Twitter Bootstrap
Twitter Bootstrap
Twitter Bootstrap
Twitter Bootstrap
Twitter Bootstrap
Twitter Bootstrap
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Twitter Bootstrap

3,730

Published on

Published in: Technology, Business
1 Comment
8 Likes
Statistics
Notes
  • Good one ..!!
    thank you
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
3,730
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
153
Comments
1
Likes
8
Embeds 0
No embeds

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)

    ×