TWITTER BOOTSTRAP         Darby Frey    darbyfrey@gmail.com        @darbyfrey
GRID : FLUID GRID : FIXED LAYOUT / FLUID     LAYOUT RESPONSIVE DESIGN :   TYPOGRAPHY : CODE VIEW TABLES :   FORMS : BUTTON...
GRID : FLUID GRID : FIXED LAYOUT / FLUID     LAYOUT RESPONSIVE DESIGN :   TYPOGRAPHY : CODE VIEW TABLES :   FORMS : BUTTON...
INSTALLATION                        The Less Easy Way• Download    jQuery & Bootstrap http://ajax.googleapis.com/ajax/libs...
INSTALLATION  The Less Easy Way
INSTALLATION                                              The Easy Way (Rails)• twitter-bootstrap-rails  gem    https://gi...
GRID• 12   column grid• 940px   wide fixed layout• Responsive• Fixedor Fluid layouts defined with:   class=”container” / cla...
GRID
ICONS• Glyphicons         - free to use•2    sprite images (black & white)     glyphicons-halflings.png     glyphicons-halfl...
ICONS
NAVBAR• Navbar   / Fixed Navbar (top/bottom)• Brand• Nav   links• Dropdown      menus• Embedded      Forms
NAVBAR scaffold nav links
NAVBAR  brand nav links
FORMS• Automatic        for input elements• Versatile     layout configurations•4   layout options - Vertical, Inline, Sear...
FORMS
BUTTONS• Super   easy to make nice looking buttons•3   sizes, 7 colors• Can   be added to any <a>, <button> or <input> ele...
TOOLTIPS & POPOVERS• Tooltips         & Popovers provide 2 ways of adding contextual information within an interface.• Con...
TOOLTIPS
POPOVERS
GRID : FLUID GRID : FIXED LAYOUT / FLUID     LAYOUT RESPONSIVE DESIGN :   TYPOGRAPHY : CODE VIEW TABLES :   FORMS : BUTTON...
LINKS• https://github.com/seyhunak/twitter-bootstrap-rails• https://github.com/thomas-mcdonald/bootstrap-sass• http://rail...
Twitter Bootstrap
Upcoming SlideShare
Loading in...5
×

Twitter Bootstrap

3,769

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,769
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
153
Comments
1
Likes
8
Embeds 0
No embeds

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
  • Twitter Bootstrap

    1. 1. TWITTER BOOTSTRAP Darby Frey darbyfrey@gmail.com @darbyfrey
    2. 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. 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. 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. 5. INSTALLATION The Less Easy Way
    6. 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. 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. 8. GRID
    9. 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. 10. ICONS
    11. 11. NAVBAR• Navbar / Fixed Navbar (top/bottom)• Brand• Nav links• Dropdown menus• Embedded Forms
    12. 12. NAVBAR scaffold nav links
    13. 13. NAVBAR brand nav links
    14. 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. 15. FORMS
    16. 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. 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. 18. TOOLTIPS
    19. 19. POPOVERS
    20. 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. 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)
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×