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 ďŹle. 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 GemďŹle: gem âtwitter-bootstrap-railsâ
⢠Installthe required JS & CSS ďŹles with:
ârails g bootstrap:installâ
⢠Generate a layout with:
rails g bootstrap:layout LAYOUT_NAME ďŹxed/ďŹuid
i.e. ârails g boostrap:layout application ďŹxedâ
⢠See Railscasts:
http://railscasts.com/episodes/328-twitter-bootstrap-basics
http://railscasts.com/episodes/329-more-on-twitter-bootstrap
13. FORMS
⢠Automatic for input elements
⢠Versatile layout conďŹgurations
â˘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. 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>
16. 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.
19. ICONS
⢠Glyphicons - free to use
â˘2 sprite images (black & white)
glyphicons-halďŹings.png
glyphicons-halďŹings-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.