Skip to content
This repository
Newer
Older
100644 719 lines (530 sloc) 25.188 kb
965ebd30 »
2014-03-11 Update README.md
1 # Twitter Bootstrap 2.3.2 for Rails Asset Pipeline
c3628b29 »
2013-10-11 reflect Bootstrap's org change
2 Bootstrap is a toolkit designed to kickstart development of webapps and sites. It includes base CSS and HTML for typography, forms, buttons, tables, grids, navigation, and more.
02c229c4 »
2011-10-16 init
3
81fd722c »
2014-01-17 Update README.md
4 twitter-bootstrap-rails project integrates Bootstrap CSS toolkit for Rails Asset Pipeline (Rails 4, 3.1, 3.2 are supported)
02c229c4 »
2011-10-16 init
5
965ebd30 »
2014-03-11 Update README.md
6 [gem]: https://rubygems.org/gems/twitter-bootstrap-rails
7 [travis]: http://travis-ci.org/seyhunak/twitter-bootstrap-rails
8 [gemnasium]: https://gemnasium.com/seyhunak/twitter-bootstrap-rails
9 [codeclimate]: https://codeclimate.com/github/seyhunak/twitter-bootstrap-rails
10 [coveralls]: https://coveralls.io/r/seyhunak/twitter-bootstrap-rails
11
d6764206 »
2013-03-05 badge update
12 [![Gem Version](https://badge.fury.io/rb/twitter-bootstrap-rails.png)][gem]
4bcc7a76 »
2013-03-05 fix
13 [![Build Status](https://secure.travis-ci.org/seyhunak/twitter-bootstrap-rails.png?branch=master)][travis]
14 [![Dependency Status](https://gemnasium.com/seyhunak/twitter-bootstrap-rails.png?travis)][gemnasium]
15 [![Code Climate](https://codeclimate.com/github/seyhunak/twitter-bootstrap-rails.png)][codeclimate]
d6764206 »
2013-03-05 badge update
16 [![Coverage Status](https://coveralls.io/repos/seyhunak/twitter-bootstrap-rails/badge.png?branch=master)][coveralls]
a716a4d4 »
2014-01-22 Update README.md
17 [![Bitdeli Badge](https://d2weczhvl823v0.cloudfront.net/seyhunak/twitter-bootstrap-rails/trend.png)](https://bitdeli.com/free "Bitdeli Badge")
31bfe3b7 »
2012-11-03 adding test app to docs
18
965ebd30 »
2014-03-11 Update README.md
19 ## Twitter Bootstrap 3.x.x
20 Use "bootstrap3" branch [Twitter Bootstrap 3.x.x](https://github.com/seyhunak/twitter-bootstrap-rails/tree/bootstrap3) (Latest Bootstrap 3 completely supported)
4bcc7a76 »
2013-03-05 fix
21
801bd66e »
2012-02-29 Update README.md
22 ## Screencasts
23 #### Installing twitter-bootstrap-rails, generators, usage and more
1a1ce46a »
2012-11-04 Update README.md
24 <img width="180" height="35" src="http://oi49.tinypic.com/s5wn05.jpg"></img>
25
26 Screencasts provided by <a href="http://railscasts.com">Railscasts</a> (Ryan Bates)
801bd66e »
2012-02-29 Update README.md
27
28 [Twitter Bootstrap Basics](http://railscasts.com/episodes/328-twitter-bootstrap-basics "Twitter Bootstrap Basics")
c3628b29 »
2013-10-11 reflect Bootstrap's org change
29 in this episode you will learn how to include Bootstrap into Rails application with the twitter-bootstrap-rails gem.
801bd66e »
2012-02-29 Update README.md
30
823abb66 »
2012-11-29 Added static stylesheets information to the README
31 [More on Twitter Bootstrap](http://railscasts.com/episodes/329-more-on-twitter-bootstrap "More on Twitter Bootstrap")
c3628b29 »
2013-10-11 reflect Bootstrap's org change
32 in this episode continues on the Bootstrap project showing how to display flash messages, add form validations with SimpleForm, customize layout with variables, and switch to using Sass.
801bd66e »
2012-02-29 Update README.md
33 (Note: This episode is pro episode)
34
35
1a1ce46a »
2012-11-04 Update README.md
36 ## Example Application
37 An example application is available at [toadkicker/teststrap](https://github.com/toadkicker/teststrap). You can view it running on heroku [here.](http://teststrap.herokuapp.com/) Contributions welcome.
38
39
823abb66 »
2012-11-29 Added static stylesheets information to the README
40 ## Installing the Gem
29405f97 »
2012-10-31 example gem file without js runtime
41
c3628b29 »
2013-10-11 reflect Bootstrap's org change
42 The [Twitter Bootstrap Rails gem](http://rubygems.org/gems/twitter-bootstrap-rails) can provide the Bootstrap stylesheets in two ways.
02c229c4 »
2011-10-16 init
43
c3628b29 »
2013-10-11 reflect Bootstrap's org change
44 The plain CSS way is how Bootstrap is provided on [the official website](http://twbs.github.io/bootstrap/).
823abb66 »
2012-11-29 Added static stylesheets information to the README
45
7ce3e7c2 »
2013-12-12 Update README.md
46 The [Less](http://lesscss.org/) way provides more customization options, like changing theme colors, and provides useful Less mixins for your code, but requires the
823abb66 »
2012-11-29 Added static stylesheets information to the README
47 Less gem and the Ruby Racer Javascript runtime (not available on Microsoft Windows).
48
49 ### Installing the Less stylesheets
50
7ce3e7c2 »
2013-12-12 Update README.md
51 To use Less stylesheets, you'll need the [less-rails gem](http://rubygems.org/gems/less-rails), and one of [JavaScript runtimes supported by CommonJS](https://github.com/cowboyd/commonjs.rb#supported-runtimes).
823abb66 »
2012-11-29 Added static stylesheets information to the README
52
53 Include these lines in the Gemfile to install the gems from [RubyGems.org](http://rubygems.org):
02c229c4 »
2011-10-16 init
54
da900c0f »
2012-04-09 Added syntax highlighting to the README.
55 ```ruby
29405f97 »
2012-10-31 example gem file without js runtime
56 gem "therubyracer"
bc29c3a5 »
2012-10-31 Just gem "less-rails" is enough as "less" is a dependency
57 gem "less-rails" #Sprockets (what Rails 3.1 uses for its asset pipeline) supports LESS
d901c175 »
2012-09-13 fix readme to not include assets group for gem install. updated chang…
58 gem "twitter-bootstrap-rails"
da900c0f »
2012-04-09 Added syntax highlighting to the README.
59 ```
02c229c4 »
2011-10-16 init
60
61 or you can install from latest build;
62
da900c0f »
2012-04-09 Added syntax highlighting to the README.
63 ```ruby
64 gem 'twitter-bootstrap-rails', :git => 'git://github.com/seyhunak/twitter-bootstrap-rails.git'
65 ```
02c229c4 »
2011-10-16 init
66
823abb66 »
2012-11-29 Added static stylesheets information to the README
67 Then run `bundle install` from the command line:
02c229c4 »
2011-10-16 init
68
69 bundle install
70
2b319805 »
2013-01-04 updating to 2.2.0
71 Then run the bootstrap generator to add Bootstrap includes into your assets:
02c229c4 »
2011-10-16 init
72
823abb66 »
2012-11-29 Added static stylesheets information to the README
73 rails generate bootstrap:install less
68ee3515 »
2011-11-21 updated to 1.4.1
74
b0d30d69 »
2014-02-05 Update README.md
75 If you need to skip coffeescript replacement into app generators, use:
76
77 rails generate bootstrap:install --no-coffeescript
78
823abb66 »
2012-11-29 Added static stylesheets information to the README
79 ### Installing the CSS stylesheets
0e1931d1 »
2011-12-11 fixes
80
823abb66 »
2012-11-29 Added static stylesheets information to the README
81 If you don't need to customize the stylesheets using Less, the only gem you need is the `twitter-bootstrap-rails` gem:
c5a0b381 »
2011-12-29 Update README.md
82
823abb66 »
2012-11-29 Added static stylesheets information to the README
83 ```ruby
84 gem "twitter-bootstrap-rails"
85 ```
c5a0b381 »
2011-12-29 Update README.md
86
823abb66 »
2012-11-29 Added static stylesheets information to the README
87 After running `bundle install`, run the generator:
c5a0b381 »
2011-12-29 Update README.md
88
823abb66 »
2012-11-29 Added static stylesheets information to the README
89 rails generate bootstrap:install static
0e1931d1 »
2011-12-11 fixes
90
823abb66 »
2012-11-29 Added static stylesheets information to the README
91 ## Generating layouts and views
c5a0b381 »
2011-12-29 Update README.md
92
c3628b29 »
2013-10-11 reflect Bootstrap's org change
93 You can run following generators to get started with Bootstrap quickly.
3f51bdfa »
2011-12-29 version 1.4.3
94
95
c3628b29 »
2013-10-11 reflect Bootstrap's org change
96 Layout (generates Bootstrap compatible layout) - (Haml and Slim supported)
c5a0b381 »
2011-12-29 Update README.md
97
98
3f51bdfa »
2011-12-29 version 1.4.3
99 Usage:
100
c5a0b381 »
2011-12-29 Update README.md
101
c61d4238 »
2012-10-23 fix layout type names of fixed and fluid in README.md
102 rails g bootstrap:layout [LAYOUT_NAME] [*fixed or fluid]
c5a0b381 »
2011-12-29 Update README.md
103
3f51bdfa »
2011-12-29 version 1.4.3
104
64a75dc9 »
2012-12-19 updated readme to add clarrification that fluid is the responsive lay…
105 Example of a fixed layout:
3f51bdfa »
2011-12-29 version 1.4.3
106
c5a0b381 »
2011-12-29 Update README.md
107
108 rails g bootstrap:layout application fixed
3f51bdfa »
2011-12-29 version 1.4.3
109
490c1ba2 »
2012-01-28 v2
110
64a75dc9 »
2012-12-19 updated readme to add clarrification that fluid is the responsive lay…
111 Example of a responsive layout:
112
113
114 rails g bootstrap:layout application fluid
115
116
c3628b29 »
2013-10-11 reflect Bootstrap's org change
117 Themed (generates Bootstrap compatible scaffold views.) - (Haml and Slim supported)
c5a0b381 »
2011-12-29 Update README.md
118
119
3f51bdfa »
2011-12-29 version 1.4.3
120 Usage:
121
c5a0b381 »
2011-12-29 Update README.md
122
3e388511 »
2012-02-04 fixes
123 rails g bootstrap:themed [RESOURCE_NAME]
490c1ba2 »
2012-01-28 v2
124
3f51bdfa »
2011-12-29 version 1.4.3
125
126 Example:
127
c5a0b381 »
2011-12-29 Update README.md
128
d1db5a2d »
2012-05-07 fixes #155. changed post to Post.
129 rails g scaffold Post title:string description:text
cf7e2754 »
2012-02-01 This is documentation change to fix errors when trying to run the boo…
130 rake db:migrate
6abe9448 »
2012-03-22 changed documentation regarding case of themed resource
131 rails g bootstrap:themed Posts
490c1ba2 »
2012-01-28 v2
132
d901c175 »
2012-09-13 fix readme to not include assets group for gem install. updated chang…
133 Notice the plural usage of the resource to generate bootstrap:themed.
0e1931d1 »
2011-12-11 fixes
134
02c229c4 »
2011-10-16 init
135 ## Using with Less
136
68ee3515 »
2011-11-21 updated to 1.4.1
137 Bootstrap was built with Preboot, an open-source pack of mixins and variables to be used in conjunction with Less, a CSS preprocessor for faster and easier web development.
02c229c4 »
2011-10-16 init
138
139 ## Using stylesheets with Less
140
a246e159 »
2012-02-15 Allow Bootstrap's Less variables to be overridden
141 You have to require Bootstrap LESS (bootstrap_and_overrides.css.less) in your application.css
02c229c4 »
2011-10-16 init
142
da900c0f »
2012-04-09 Added syntax highlighting to the README.
143 ```css
144 /*
145 *= require bootstrap_and_overrides
146 */
0e1931d1 »
2011-12-11 fixes
147
da900c0f »
2012-04-09 Added syntax highlighting to the README.
148 /* Your stylesheets goes here... */
149 ```
02c229c4 »
2011-10-16 init
150
d2940edf »
2012-11-13 updated readme with instructions on how to use individual components
151 To use individual components from bootstrap, your bootstrap_and_overrides.less could look like this:
152
153 ```css
154 @import "twitter/bootstrap/reset.less";
155 @import "twitter/bootstrap/variables.less";
156 @import "twitter/bootstrap/mixins.less";
157 @import "twitter/bootstrap/scaffolding.less";
158 @import "twitter/bootstrap/grid.less";
159 @import "twitter/bootstrap/layouts.less";
160 @import "twitter/bootstrap/type.less";
161 @import "twitter/bootstrap/forms.less";
162 @import "twitter/bootstrap/wells.less";
163 @import "twitter/bootstrap/component-animations.less";
164 @import "twitter/bootstrap/buttons.less";
165 @import "twitter/bootstrap/close.less";
166 @import "twitter/bootstrap/navs.less";
167 @import "twitter/bootstrap/navbar.less";
168 @import "twitter/bootstrap/labels-badges.less";
169 @import "twitter/bootstrap/hero-unit.less";
170 @import "twitter/bootstrap/utilities.less";
171 @import "twitter/bootstrap/responsive";
172 ```
173
a246e159 »
2012-02-15 Allow Bootstrap's Less variables to be overridden
174 If you'd like to alter Bootstrap's own variables, or define your LESS
175 styles inheriting Bootstrap's mixins, you can do so inside bootstrap_and_overrides.css.less:
3e388511 »
2012-02-04 fixes
176
24a76d12 »
2013-06-24 update instruction about FontAwesome integration in README.md (path h…
177
da900c0f »
2012-04-09 Added syntax highlighting to the README.
178 ```css
179 @linkColor: #ff0000;
180 ```
24a76d12 »
2013-06-24 update instruction about FontAwesome integration in README.md (path h…
181
4a66f996 »
2013-04-26 update readme to discuss manifest compile issues with SASS
182 ### SASS
183
184 If you are using SASS to compile your application.css (e.g. your manifest file is application.css.sass or application.css.scss) you may get this:
185
186 ```
187 Invalid CSS after "*": expected "{", was "= require twitt..."
188 (in app/assets/stylesheets/application.css)
189 (sass)
190 ```
191
192 If this is the case, you **must** use @import instead of `*=` in your manifest file, or don't compile your manifest with SASS.
02c229c4 »
2011-10-16 init
193
d94c6767 »
2013-01-05 Added info about Font Awesome support by default
194 ### Icons
195
196 By default, this gem overrides standard Bootstraps's Glyphicons with Font Awesome (http://fortawesome.github.com/Font-Awesome/).
24a76d12 »
2013-06-24 update instruction about FontAwesome integration in README.md (path h…
197
198 This should appear inside _bootstrap_and_overrides *(based on you twitter-bootstrap-rails version)*
199
200 **From 2.2.7**
201
202 ```css
203 // Font Awesome
204 @fontAwesomeEotPath: asset-url("fontawesome-webfont.eot");
205 @fontAwesomeEotPath_iefix: asset-url("fontawesome-webfont.eot?#iefix");
206 @fontAwesomeWoffPath: asset-url("fontawesome-webfont.woff");
207 @fontAwesomeTtfPath: asset-url("fontawesome-webfont.ttf");
208 @fontAwesomeSvgPath: asset-url("fontawesome-webfont.svg#fontawesomeregular");
209 @import "fontawesome/font-awesome";
210 ```
211
212 **Before 2.2.7**
d94c6767 »
2013-01-05 Added info about Font Awesome support by default
213
214 ```css
215 // Font Awesome
24a76d12 »
2013-06-24 update instruction about FontAwesome integration in README.md (path h…
216 @fontAwesomeEotPath: "/assets/fontawesome-webfont.eot";
217 @fontAwesomeEotPath_iefix: "/assets/fontawesome-webfont.eot?#iefix";
218 @fontAwesomeWoffPath: "/assets/fontawesome-webfont.woff";
219 @fontAwesomeTtfPath: "/assets/fontawesome-webfont.ttf";
220 @fontAwesomeSvgPath: "/assets/fontawesome-webfont.svg#fontawesomeregular";
221 @import "fontawesome";
222 ```
223
224 If you would like to restore the default Glyphicons, inside the _bootstrap_and_overrides.css.less_ remove the FontAwesome declaration and uncomment the line:
225
226 ```less
227 // Font Awesome
228 // @fontAwesomeEotPath: asset-url("fontawesome-webfont.eot");
229 // @fontAwesomeEotPath_iefix: asset-url("fontawesome-webfont.eot?#iefix");
230 // @fontAwesomeWoffPath: asset-url("fontawesome-webfont.woff");
231 // @fontAwesomeTtfPath: asset-url("fontawesome-webfont.ttf");
232 // @fontAwesomeSvgPath: asset-url("fontawesome-webfont.svg#fontawesomeregular");
233 // @import "fontawesome/font-awesome";
234
d94c6767 »
2013-01-05 Added info about Font Awesome support by default
235 // Glyphicons
236 @import "twitter/bootstrap/sprites.less";
237 ```
02c229c4 »
2011-10-16 init
238
7ce3e7c2 »
2013-12-12 Update README.md
239 ## Using JavaScript
02c229c4 »
2011-10-16 init
240
4a66f996 »
2013-04-26 update readme to discuss manifest compile issues with SASS
241 Require Bootstrap JS (bootstrap.js) in your application.js
02c229c4 »
2011-10-16 init
242
da900c0f »
2012-04-09 Added syntax highlighting to the README.
243 ```js
244 //= require twitter/bootstrap
02c229c4 »
2011-10-16 init
245
2b319805 »
2013-01-04 updating to 2.2.0
246 $(function(){
7ce3e7c2 »
2013-12-12 Update README.md
247 /* Your JavaScript goes here... */
da900c0f »
2012-04-09 Added syntax highlighting to the README.
248 });
249 ```
02c229c4 »
2011-10-16 init
250
d2940edf »
2012-11-13 updated readme with instructions on how to use individual components
251 If you want to customize what is loaded, your application.js would look something like this
252
253 ```js
254 #= require jquery
255 #= require jquery_ujs
256 #= require twitter/bootstrap/bootstrap-transition
257 #= require twitter/bootstrap/bootstrap-alert
258 #= require twitter/bootstrap/bootstrap-modal
259 #= require twitter/bootstrap/bootstrap-button
260 #= require twitter/bootstrap/bootstrap-collapse
261 ```
262
263 ...and so on for each bootstrap js component.
264
7ce3e7c2 »
2013-12-12 Update README.md
265 ## Using CoffeeScript (optionally)
02c229c4 »
2011-10-16 init
266
c3628b29 »
2013-10-11 reflect Bootstrap's org change
267 Using Bootstrap with the CoffeeScript is easy.
3f51bdfa »
2011-12-29 version 1.4.3
268 twitter-bootstrap-rails generates a "bootstrap.js.coffee" file for you
269 to /app/assets/javascripts/ folder.
95c302ae »
2012-02-18 update to 2.0.1.0
270
da900c0f »
2012-04-09 Added syntax highlighting to the README.
271 ```coffee
272 jQuery ->
9983a327 »
2013-06-30 Fixed jQuery selectors for tooltips and popovers in bootstrap.js and …
273 $("a[rel~=popover], .has-popover").popover()
274 $("a[rel~=tooltip], .has-tooltip").tooltip()
da900c0f »
2012-04-09 Added syntax highlighting to the README.
275 ```
02c229c4 »
2011-10-16 init
276
4b526ae4 »
2012-07-23 Update README.md
277 ## Using Helpers
278
91c4d283 »
2013-04-28 tests and docs for modal helper
279 ### Modal Helper
945797f2 »
2013-04-28 add some more explanation
280 You can create modals easily using the following example. The header, body, and footer all accept content_tag or plain html.
7ce3e7c2 »
2013-12-12 Update README.md
281 The href of the button to launch the modal must match the id of the modal dialog.
91c4d283 »
2013-04-28 tests and docs for modal helper
282
baf60a83 »
2013-06-06 Update README.md
283 ````
e4c51b5b »
2013-06-06 Update README.md
284 <%= content_tag :a, "Modal", :href => "#modal", :class => 'btn', :data => {:toggle => 'modal'} %>
91c4d283 »
2013-04-28 tests and docs for modal helper
285
286 <%= modal_dialog :id => "modal",
24a76d12 »
2013-06-24 update instruction about FontAwesome integration in README.md (path h…
287 :header => { :show_close => true, :dismiss => 'modal', :title => 'Modal header' },
91c4d283 »
2013-04-28 tests and docs for modal helper
288 :body => 'This is the body',
289 :footer => content_tag(:button, 'Save', :class => 'btn') %>
baf60a83 »
2013-06-06 Update README.md
290 ````
413b6ecc »
2013-06-03 Badge and label helpers
291
b816d72e »
2013-04-28 added documentation
292 ### Navbar Helper
293 It should let you write things like:
294
295 ````
296 <%= nav_bar :fixed => :top, :brand => "Fashionable Clicheizr 2.0", :responsive => true do %>
24a76d12 »
2013-06-24 update instruction about FontAwesome integration in README.md (path h…
297 <%= menu_group do %>
298 <%= menu_item "Home", root_path %>
299 <%= menu_divider %>
300 <%= drop_down "Products" do %>
301 <%= menu_item "Things you can't afford", expensive_products_path %>
302 <%= menu_item "Things that won't suit you anyway", harem_pants_path %>
303 <%= menu_item "Things you're not even cool enough to buy anyway", hipster_products_path %>
304 <% if current_user.lives_in_hackney? %>
305 <%= menu_item "Bikes", fixed_wheel_bikes_path %>
306 <% end %>
307 <% end %>
308 <%= menu_item "About Us", about_us_path %>
309 <%= menu_item "Contact", contact_path %>
310 <% end %>
311 <%= menu_group :pull => :right do %>
312 <% if current_user %>
313 <%= menu_item "Log Out", log_out_path %>
314 <% else %>
315 <%= form_for @user, :url => session_path(:user), html => {:class=> "navbar-form pull-right"} do |f| -%>
316 <p><%= f.text_field :email %></p>
317 <p><%= f.password_field :password %></p>
318 <p><%= f.submit "Sign in" %></p>
319 <% end -%>
320 <% end %>
321 <% end %>
b816d72e »
2013-04-28 added documentation
322 <% end %>
323 ````
324
325 ### Navbar scaffolding
326
327 In your view file (most likely application.html.erb) to get a basic navbar set up you need to do this:
328
329 ````
330 <%= nav_bar %>
331 ````
332
333 Which will render:
334
24a76d12 »
2013-06-24 update instruction about FontAwesome integration in README.md (path h…
335 <div class="navbar">
336 <div class="navbar-inner">
337 <div class="container">
338 </div>
339 </div>
340 </div>
91c4d283 »
2013-04-28 tests and docs for modal helper
341
b816d72e »
2013-04-28 added documentation
342
343 ### Fixed navbar
344
345 If you want the navbar to stick to the top of the screen, pass in the option like this:
346
347 ````
348 <%= nav_bar :fixed => :top %>
349 ````
350
351 To render:
352
24a76d12 »
2013-06-24 update instruction about FontAwesome integration in README.md (path h…
353 <div class="navbar navbar-fixed-top">
354 <div class="navbar-inner">
355 <div class="container">
356 </div>
357 </div>
358 </div>
b816d72e »
2013-04-28 added documentation
359
360 ### Static navbar
361
362 If you want a full-width navbar that scrolls away with the page, pass in the option like this:
363
364 ````
365 <%= nav_bar :static => :top %>
366 ````
367
368 To render:
369
24a76d12 »
2013-06-24 update instruction about FontAwesome integration in README.md (path h…
370 <div class="navbar navbar-static-top">
371 <div class="navbar-inner">
372 <div class="container">
373 </div>
374 </div>
375 </div>
b816d72e »
2013-04-28 added documentation
376
377
378 ### Brand name
379
380 Add the name of your site on the left hand edge of the navbar. By default, it will link to root_url. Passing a brand_link option will set the url to whatever you want.
381
382 ````
383 <%= nav_bar :brand => "We're sooo web 2.0alizr", :brand_link => account_dashboard_path %>
384 ````
385
386 Which will render:
387
24a76d12 »
2013-06-24 update instruction about FontAwesome integration in README.md (path h…
388 <div class="navbar">
389 <div class="navbar-inner">
390 <div class="container">
391 <a class="brand" href="/accounts/dashboard">
392 We're sooo web 2.0alizr
393 </a>
394 </div>
395 </div>
396 </div>
b816d72e »
2013-04-28 added documentation
397
398
399 ### Optional responsive variation
400
401 If you want the responsive version of the navbar to work (One that shrinks down on mobile devices etc.), you need to pass this option:
402
403 ````
404 <%= nav_bar :responsive => true %>
405 ````
406 Which renders the html quite differently:
407
408
24a76d12 »
2013-06-24 update instruction about FontAwesome integration in README.md (path h…
409 <div class="navbar">
410 <div class="navbar-inner">
411 <div class="container">
412 <!-- .btn-navbar is used as the toggle for collapsed navbar content -->
413 <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
414 <span class="icon-bar"></span>
415 <span class="icon-bar"></span>
416 <span class="icon-bar"></span>
417 </a>
418 <!-- Everything in here gets hidden at 940px or less -->
419 <div class="nav-collapse">
420 <!-- menu items gets rendered here instead -->
421 </div>
422 </div>
423 </div>
424 </div>
b816d72e »
2013-04-28 added documentation
425
426
427 ### Nav links
428
429 This is the 'meat' of the code where you define your menu items.
430
431 You can group menu items in theoretical boxes which you can apply logic to - e.g. show different collections for logged in users/logged out users, or simply right align a group.
432
433 The active menu item will be inferred from the link for now.
434
435 The important methods here are menu_group and menu_item.
436
437 menu_group only takes one argument - :pull - this moves the group left or right when passed :left or :right.
438
439 menu_item generates a link wrapped in an li tag. It takes two arguments and an options hash. The first argument is the name (the text that will appear in the menu), and the path (which defaults to "#" if left blank). The rest of the options are passed straight through to the link_to helper, so that you can add classes, ids, methods or data tags etc.
440
441 ````
442 <%= nav_bar :fixed => :top, :brand => "Ninety Ten" do %>
b92f03e1 »
2014-01-23 Fix nav bar example in README
443 <%= menu_group do %>
24a76d12 »
2013-06-24 update instruction about FontAwesome integration in README.md (path h…
444 <%= menu_item "Home", root_path %>
445 <%= menu_item "About Us", about_us_path %>
446 <%= menu_item "Contact", contact_path %>
447 <% end %>
448 <% if current_user %>
449 <%= menu_item "Log Out", log_out_path %>
450 <% else %>
b92f03e1 »
2014-01-23 Fix nav bar example in README
451 <%= menu_group :pull => :right do %>
24a76d12 »
2013-06-24 update instruction about FontAwesome integration in README.md (path h…
452 <%= menu_item "Sign Up", registration_path %>
b92f03e1 »
2014-01-23 Fix nav bar example in README
453 <%= form_for @user, :url => session_path(:user) do |f| -%>
24a76d12 »
2013-06-24 update instruction about FontAwesome integration in README.md (path h…
454 <p><%= f.text_field :email %></p>
455 <p><%= f.password_field :password %></p>
456 <p><%= f.submit "Sign in" %></p>
457 <% end -%>
458 <% end %>
459 <% end %>
b816d72e »
2013-04-28 added documentation
460 <% end %>
461 ````
462
463 ### Dropdown menus
464
465 For multi-level list options, where it makes logical sense to group menu items, or simply to save space if you have a lot of pages, you can group menu items into drop down lists like this:
466
467 ````
468 <%= nav_bar do %>
24a76d12 »
2013-06-24 update instruction about FontAwesome integration in README.md (path h…
469 <%= menu_item "Home", root_path %>
b816d72e »
2013-04-28 added documentation
470
24a76d12 »
2013-06-24 update instruction about FontAwesome integration in README.md (path h…
471 <%= drop_down "Products" do %>
472 <%= menu_item "Latest", latest_products_path %>
473 <%= menu_item "Top Sellers", popular_products_path %>
474 <%= drop_down_divider %>
475 <%= menu_item "Discount Items", discounted_products_path %>
476 <% end %>
b816d72e »
2013-04-28 added documentation
477
24a76d12 »
2013-06-24 update instruction about FontAwesome integration in README.md (path h…
478 <%= menu_item "About Us", about_us_path %>
479 <%= menu_item "Contact", contact_path %>
b816d72e »
2013-04-28 added documentation
480 <% end %>
481 ````
482
483 ### Dividers
484
485 Dividers are just vertical bars that visually separate logically disparate groups of menu items
486
487 ````
488 <%= nav_bar :fixed => :bottom do %>
24a76d12 »
2013-06-24 update instruction about FontAwesome integration in README.md (path h…
489 <%= menu_item "Home", root_path %>
490 <%= menu_item "About Us", about_us_path %>
491 <%= menu_item "Contact", contact_path %>
b816d72e »
2013-04-28 added documentation
492
24a76d12 »
2013-06-24 update instruction about FontAwesome integration in README.md (path h…
493 <%= menu_divider %>
b816d72e »
2013-04-28 added documentation
494
24a76d12 »
2013-06-24 update instruction about FontAwesome integration in README.md (path h…
495 <%= menu_item "Edit Profile", edit_user_path(current_user) %>
496 <%= menu_item "Account Settings", edit_user_account_path(current_user, @account) %>
497 <%= menu_item "Log Out", log_out_path %>
b816d72e »
2013-04-28 added documentation
498 <% end %>
499 ````
500
501 ### Forms in navbar
502
503 At the moment - this is just a how to...
504
505 You need to add this class to the form itself (Different form builders do this in different ways - please check out the relevant docs)
506
507 ````css
508 .navbar-form
509 ````
510 To pull the form left or right, add either of these classes:
511 ````css
512 .pull-left
513 .pull-right
514 ````
515
516 If you want the Bootstrap search box (I think it just rounds the corners), use:
517 ````css
518 .navbar-search
519 ````
520 Instead of:
521 ````css
522 .navbar-form
523 ````
524
525 To change the size of the form fields, use .span2 (or however many span widths you want) to the input itself.
526
527 ### Component alignment
528
529 You can shift things to the left or the right across the nav bar. It's easiest to do this on grouped menu items:
530
531 ````
532 <%= nav_bar :fixed => :bottom do %>
24a76d12 »
2013-06-24 update instruction about FontAwesome integration in README.md (path h…
533 <% menu_group do %>
534 <%= menu_item "Home", root_path %>
535 <%= menu_item "About Us", about_us_path %>
536 <%= menu_item "Contact", contact_path %>
537 <% end %>
538 <% menu_group :pull => :right do %>
539 <%= menu_item "Edit Profile", edit_user_path(current_user) %>
540 <%= menu_item "Account Settings", edit_user_account_path(current_user, @account) %>
541 <%= menu_item "Log Out", log_out_path %>
542 <% end %>
b816d72e »
2013-04-28 added documentation
543 <% end %>
544 ````
545
546 ### Text in the navbar
547
548 If you want to put regular plain text in the navbar anywhere, you do it like this:
549
550 ````
551 <%= nav_bar :brand => "Apple" do %>
24a76d12 »
2013-06-24 update instruction about FontAwesome integration in README.md (path h…
552 <%= menu_text "We make shiny things" %>
553 <%= menu_item "Home", root_path %>
554 <%= menu_item "About Us", about_us_path %>
b816d72e »
2013-04-28 added documentation
555 <% end %>
556 ````
557 It also takes the :pull option to drag it to the left or right.
558
413b6ecc »
2013-06-03 Badge and label helpers
559
4b526ae4 »
2012-07-23 Update README.md
560 ### Flash helper
91c4d283 »
2013-04-28 tests and docs for modal helper
561
497f778d »
2013-01-16 Update README.md
562 Add flash helper `<%= bootstrap_flash %>` to your layout (built-in with layout generator)
4b526ae4 »
2012-07-23 Update README.md
563
ebc1326e »
2012-12-08 add i18n breadcrumbs support
564 ### Breadcrumbs Helpers
ea5cb18e »
2013-01-16 Update README.md
565
0b51bdfb »
2013-08-07 bumping to 2.2.8
566 *Notice* If your application is using [breadcrumbs-on-rails](https://github.com/weppos/breadcrumbs_on_rails) you will have a namespace collision with the add_breadcrumb method.
567 You do not need to use these breadcrumb gems since this gem provides the same functionality out of the box without the additional dependency.
4a66f996 »
2013-04-26 update readme to discuss manifest compile issues with SASS
568
ea5cb18e »
2013-01-16 Update README.md
569 Add breadcrumbs helper `<%= render_breadcrumbs %>` to your layout.
7eb3d22e »
2013-10-15 Add breadcrumbs divider option to readme
570 You can also specify a divider for it like this: `<%= render_breadcrumbs('>') %>` (default divider is `/`).
ea5cb18e »
2013-01-16 Update README.md
571
ebc1326e »
2012-12-08 add i18n breadcrumbs support
572 ```ruby
573 class ApplicationController
e533eeb9 »
2013-10-18 README updated
574 add_breadcrumb :root # 'root_path' will be used as url
ebc1326e »
2012-12-08 add i18n breadcrumbs support
575 end
576 ```
577
578 ```ruby
2b319805 »
2013-01-04 updating to 2.2.0
579 class ExamplesController < ApplicationController
ebc1326e »
2012-12-08 add i18n breadcrumbs support
580 add_breadcrumb :index, :examples_path
581
e533eeb9 »
2013-10-18 README updated
582 def edit
ebc1326e »
2012-12-08 add i18n breadcrumbs support
583 @example = Example.find params[:id]
e533eeb9 »
2013-10-18 README updated
584 add_breadcrumb @example # @example.to_s as name, example_path(@example) as url
585 add_breadcrumb :edit, edit_example_path(@example)
ebc1326e »
2012-12-08 add i18n breadcrumbs support
586 end
587 end
588 ```
7ce3e7c2 »
2013-12-12 Update README.md
589 All symbolic names translated with I18n. See [I18n Internationalization Support](#i18n-internationalization-support)
e533eeb9 »
2013-10-18 README updated
590 section.
ebc1326e »
2012-12-08 add i18n breadcrumbs support
591
413b6ecc »
2013-06-03 Badge and label helpers
592 ### Element utility helpers
593
594 Badge:
d8f8c47e »
2013-06-03 uri_state added for chosen links
595 ```erb
596 <%= badge(12, :warning) %> <span class="badge badge-warning">12</span>
413b6ecc »
2013-06-03 Badge and label helpers
597 ```
598
599 Label:
d8f8c47e »
2013-06-03 uri_state added for chosen links
600 ```erb
601 <%= label('Gut!', :success) %> <span class="badge badge-success">Gut!</span>
413b6ecc »
2013-06-03 Badge and label helpers
602 ```
603
604 Glyph:
d8f8c47e »
2013-06-03 uri_state added for chosen links
605 ```erb
606 <%= glyph(:pencil) %> <i class="icon-pencil"></i>
413b6ecc »
2013-06-03 Badge and label helpers
607 ```
608
e533eeb9 »
2013-10-18 README updated
609 ###I18n Internationalization Support
7ce3e7c2 »
2013-12-12 Update README.md
610 The installer creates an English translation file for you and copies it to config/locales/en.bootstrap.yml
4a66f996 »
2013-04-26 update readme to discuss manifest compile issues with SASS
611
ebc1326e »
2012-12-08 add i18n breadcrumbs support
612
73dd5bcd »
2013-02-07 update documentation to handle devise specific problem
613 NOTE: If you are using Devise in your project, you must have a devise locale file
614 for handling flash messages, even if those messages are blank. See https://github.com/plataformatec/devise/wiki/I18n
ebc1326e »
2012-12-08 add i18n breadcrumbs support
615
02c229c4 »
2011-10-16 init
616 ## Changelog
617 <ul>
618 <li>Version 0.0.5 deprecated</li>
619 <li>Asset files updated to latest and removed version numbers</li>
620 <li>Implemented Less::Rails Railtie to use with LESS</li>
621 <li>Fixed railtie to only initialize Less when installed</li>
3f51bdfa »
2011-12-29 version 1.4.3
622 <li>New branch for the static version of Bootstrap (w/o Less) - check static branch</li>
02c229c4 »
2011-10-16 init
623 <li>Added path to support heroku deploy</li>
66e36a79 »
2011-10-16 fixes
624 <li>Rake precompile issue fixed</li>
68ee3515 »
2011-11-21 updated to 1.4.1
625 <li>Updated asset files to 1.4.0</li>
626 <li>Updated dependency less-rails (now requires 2.1.0)</li>
627 <li>Added generators</li>
0e1931d1 »
2011-12-11 fixes
628 <li>Fixed generators</li>
629 <li>Fixed class name conflicts from (bootstrap.js.coffee)</li>
3f51bdfa »
2011-12-29 version 1.4.3
630 <li>Fixed jquery-rails gem version dependency</li>
631 <li>Updated asset files</li>
632 <li>Added new generators (install, layout and themed)</li>
7ce3e7c2 »
2013-12-12 Update README.md
633 <li>Compatibility to Rails 3.2</li>
490c1ba2 »
2012-01-28 v2
634 <li>Transitioning to 2.0</li>
d50f451f »
2012-02-02 update
635 <li>Released gem v.2.0rc0</li>
02bdece1 »
2012-02-03 Update README.md
636 <li>Added Haml and Slim support</li>
bda87920 »
2012-02-04 Update README.md
637 <li>Added Responsive layout support</li>
3e388511 »
2012-02-04 fixes
638 <li>Fixes and release 2.0.0</li>
95c302ae »
2012-02-18 update to 2.0.1.0
639 <li>Updated to v2.0.1, versioned v2.0.1.0</li>
1860e9ed »
2012-02-26 2.0.3 release
640 <li>Released gem v.2.0.3</li>
40f2fa6e »
2012-04-05 Update README.md
641 <li>Released gem v.2.0.4</li>
642 <li>Released gem v.2.0.5</li>
643 <li>Added SimpleForm support</li>
644 <li>Added FontAwesome support</li>
645 <li>Released gem v.2.0.6</li>
abbb56dd »
2012-05-23 updated to 2.0.8
646 <li>Released gem v.2.0.7</li>
647 <li>Released gem v.2.0.8</li>
650b160c »
2012-06-06 Updated to v.2.0.9
648 <li>Released gem v.2.0.9 (Bootstrap 2.0.4 and FontAwesome 2.0 support)</li>
34c2d3fc »
2012-06-11 Updated to v.2.1.0
649 <li>Released gem v.2.1.0 (JRuby support)</li>
9ac5576d »
2012-07-17 updating to 2.1.1
650 <li>Released gem v.2.1.1 (minor fixes)</li>
4b526ae4 »
2012-07-23 Update README.md
651 <li>Flash block message helper added</li>
efc2fdc1 »
2012-08-21 minor fixes and updated to Twitter Bootstrap 2.1.0
652 <li>Released gem v.2.1.2 (minor fixes and updated to Twitter Bootstrap 2.1.0)</li>
d901c175 »
2012-09-13 fix readme to not include assets group for gem install. updated chang…
653 <li>Released gem v.2.1.3 (minor fixes and updated to Twitter Bootstrap 2.1.1)</li>
f2ea582e »
2012-10-15 updating to 2.1.4
654 <li>Released gem v.2.1.4 (minor fixes)</li>
7ce3e7c2 »
2013-12-12 Update README.md
655 <li>Released gem v.2.1.5 (minor fixes, install generator detects JavaScript template engine, updated to Twitter Bootstrap 2.2.1)</li>
7b4446d4 »
2012-11-03 v.2.1.6 (minor fixes)
656 <li>Released gem v.2.1.6 (minor fixes)</li>
823abb66 »
2012-11-29 Added static stylesheets information to the README
657 <li>Added static stylesheets support</li>
9f3d0f9b »
2012-12-10 updating to 2.1.8
658 <li>Released gem v.2.1.8 and updated to Twitter Bootstrap 2.2.2</li>
b97dc00a »
2012-12-12 updating to 2.1.9
659 <li>Released gem v.2.1.9</li>
2b319805 »
2013-01-04 updating to 2.2.0
660 <li>Released gem v.2.2.0 (Font Awesome 3)</li>
81f41674 »
2013-02-08 updating to v.2.2.1
661 <li>Released gem v.2.2.1 (minor fixes and updates)</li>
98d3f8c5 »
2013-02-08 Version bumped to 2.2.2
662 <li>Released gem v.2.2.2 (Bootstrap 2.3.0)</li>
cdfea683 »
2013-02-11 to v.2.2.3 - minor fixes
663 <li>Released gem v.2.2.3 (Minor fixes)</li>
081a1625 »
2013-02-17 bumping to v.2.2.4
664 <li>Released gem v.2.2.4 (Minor fixes)</li>
41fd3878 »
2013-03-04 Version bumped to 2.2.5
665 <li>Released gem v.2.2.5 (Bootstrap 2.3.1)</li>
9600dc26 »
2013-06-05 v.2.2.7
666 <li>Released gem v.2.2.6</li>
667 <li>Released gem v.2.2.7 (Fixes)</li>
0b51bdfb »
2013-08-07 bumping to 2.2.8
668 <li>Releases gem v.2.2.8</li>
02c229c4 »
2011-10-16 init
669 </ul>
670
68ee3515 »
2011-11-21 updated to 1.4.1
671
c66d0058 »
2012-01-28 v2
672 ## Contributors & Patches & Forks
673 <ul>
98d3f8c5 »
2013-02-08 Version bumped to 2.2.2
674 <li>Ben Lovell</li>
c66d0058 »
2012-01-28 v2
675 <li>Daniel Morris</li>
676 <li>Bradly Feeley</li>
677 <li>Guilherme Moreira</li>
678 <li>Alex Behar</li>
679 <li>Brandon Keene</li>
680 <li>Anthony Corcutt</li>
681 <li>Colin Warren</li>
682 <li>Giovanni Cappellotto</li>
683 <li>Masakuni Kato</li>
6a8eec93 »
2012-01-31 Update README.md
684 <li>Gudleik Rasch</li>
3aaf933b »
2012-02-03 Update README.md
685 <li>Thomas Volkmar Worm</li>
90a9ca9a »
2012-03-12 updated twitter-bootstrap to v2.0.2
686 <li>Thiago Almeida</li>
40f2fa6e »
2012-04-05 Update README.md
687 <li>Sébastien Grosjean</li>
688 <li>Nick DeSteffen</li>
ce0e02e6 »
2012-04-24 Updated bootstrap to 2.0.3
689 <li>Christian Joudrey</li>
d901c175 »
2012-09-13 fix readme to not include assets group for gem install. updated chang…
690 <li>Todd Baur</li>
823abb66 »
2012-11-29 Added static stylesheets information to the README
691 <li>Leonid Shevtsov</li>
c66d0058 »
2012-01-28 v2
692 </ul>
693
7cafa289 »
2014-01-17 Update README.md
694 ### Contribute and Earn Bitcoin
695 Make commits and get tips for it
696 [![tip for next commit](http://tip4commit.com/projects/13.svg)](http://tip4commit.com/projects/13)
697
698
1a1ce46a »
2012-11-04 Update README.md
699 ## About Me
b0d30d69 »
2014-02-05 Update README.md
700 CTO / Senior Developer / Programmer
81fd722c »
2014-01-17 Update README.md
701 @useful (Usefulideas) Istanbul / Turkey
801bd66e »
2012-02-29 Update README.md
702
7cafa289 »
2014-01-17 Update README.md
703
1a1ce46a »
2012-11-04 Update README.md
704 ### Contact me
02c229c4 »
2011-10-16 init
705 Seyhun Akyürek - seyhunak [at] gmail com
9cc2f40f »
2012-02-23 Update README.md
706
1a1ce46a »
2012-11-04 Update README.md
707
02c229c4 »
2011-10-16 init
708 ## Thanks
c3628b29 »
2013-10-11 reflect Bootstrap's org change
709 Bootstrap and all twitter-bootstrap-rails contributors
ca0cb4fb »
2013-08-11 Update Bootstrap links in README
710 http://twbs.github.io/bootstrap
02c229c4 »
2011-10-16 init
711
712
713 ## License
81fd722c »
2014-01-17 Update README.md
714 Copyright (c) 2014 Seyhun Akyürek
02c229c4 »
2011-10-16 init
715
716 Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
717 The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
718 THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
Something went wrong with that request. Please try again.