• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Twitter Bootstrap
 

Twitter Bootstrap

on

  • 4,179 views

 

Statistics

Views

Total Views
4,179
Views on SlideShare
4,172
Embed Views
7

Actions

Likes
7
Downloads
149
Comments
1

2 Embeds 7

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

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

11 of 1 previous next

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • Good one ..!!
    thank you
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n

Twitter Bootstrap Twitter Bootstrap Presentation Transcript

  • TWITTER BOOTSTRAP Darby Frey darbyfrey@gmail.com @darbyfrey
  • 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
  • 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
  • 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.
  • INSTALLATION The Less Easy Way
  • 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
  • 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
  • GRID
  • 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.
  • 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, 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
  • FORMS
  • 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>
  • 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.
  • TOOLTIPS
  • POPOVERS
  • 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
  • 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)