5. 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.
7. 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
10. 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.
15. 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
17. 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>
18. 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.