twitter-bootstrap-rails 3.2.2 → 4.0.0
Sign up to get free protection for your applications and to get access to all the features.
Potentially problematic release.
This version of twitter-bootstrap-rails might be problematic. Click here for more details.
- checksums.yaml +4 -4
- data/README.md +105 -130
- data/app/assets/fonts/glyphicons-halflings-regular.eot +0 -0
- data/app/assets/fonts/glyphicons-halflings-regular.svg +273 -214
- data/app/assets/fonts/glyphicons-halflings-regular.ttf +0 -0
- data/app/assets/fonts/glyphicons-halflings-regular.woff +0 -0
- data/app/assets/fonts/glyphicons-halflings-regular.woff2 +0 -0
- data/app/assets/javascripts/twitter/bootstrap/affix.js +46 -26
- data/app/assets/javascripts/twitter/bootstrap/alert.js +7 -5
- data/app/assets/javascripts/twitter/bootstrap/button.js +27 -17
- data/app/assets/javascripts/twitter/bootstrap/carousel.js +35 -21
- data/app/assets/javascripts/twitter/bootstrap/collapse.js +68 -27
- data/app/assets/javascripts/twitter/bootstrap/dropdown.js +55 -41
- data/app/assets/javascripts/twitter/bootstrap/modal.js +88 -31
- data/app/assets/javascripts/twitter/bootstrap/popover.js +5 -10
- data/app/assets/javascripts/twitter/bootstrap/scrollspy.js +28 -26
- data/app/assets/javascripts/twitter/bootstrap/tab.js +45 -18
- data/app/assets/javascripts/twitter/bootstrap/tooltip.js +111 -54
- data/app/assets/javascripts/twitter/bootstrap/transition.js +2 -2
- data/app/helpers/glyph_helper.rb +6 -3
- data/lib/generators/bootstrap/install/templates/bootstrap_and_overrides.css +3 -4
- data/lib/generators/bootstrap/install/templates/bootstrap_and_overrides.less +7 -18
- data/lib/generators/bootstrap/themed/templates/index.html.erb +2 -0
- data/lib/generators/bootstrap/themed/templates/index.html.haml +1 -0
- data/lib/generators/bootstrap/themed/templates/index.html.slim +2 -0
- data/lib/twitter/bootstrap/rails/version.rb +1 -1
- data/vendor/toolkit/twitter/bootstrap/alerts.less +5 -0
- data/vendor/toolkit/twitter/bootstrap/badges.less +14 -3
- data/vendor/toolkit/twitter/bootstrap/bootstrap.less +6 -0
- data/vendor/toolkit/twitter/bootstrap/breadcrumbs.less +0 -0
- data/vendor/toolkit/twitter/bootstrap/button-groups.less +13 -14
- data/vendor/toolkit/twitter/bootstrap/buttons.less +14 -7
- data/vendor/toolkit/twitter/bootstrap/carousel.less +34 -7
- data/vendor/toolkit/twitter/bootstrap/close.less +1 -0
- data/vendor/toolkit/twitter/bootstrap/code.less +0 -0
- data/vendor/toolkit/twitter/bootstrap/component-animations.less +3 -1
- data/vendor/toolkit/twitter/bootstrap/dropdowns.less +9 -8
- data/vendor/toolkit/twitter/bootstrap/forms.less +110 -41
- data/vendor/toolkit/twitter/bootstrap/glyphicons.less +80 -9
- data/vendor/toolkit/twitter/bootstrap/grid.less +0 -0
- data/vendor/toolkit/twitter/bootstrap/input-groups.less +8 -3
- data/vendor/toolkit/twitter/bootstrap/jumbotron.less +10 -4
- data/vendor/toolkit/twitter/bootstrap/labels.less +0 -0
- data/vendor/toolkit/twitter/bootstrap/list-group.less +11 -13
- data/vendor/toolkit/twitter/bootstrap/media.less +40 -30
- data/vendor/toolkit/twitter/bootstrap/mixins.less +1 -0
- data/vendor/toolkit/twitter/bootstrap/mixins/alerts.less +0 -0
- data/vendor/toolkit/twitter/bootstrap/mixins/background-variant.less +2 -1
- data/vendor/toolkit/twitter/bootstrap/mixins/border-radius.less +0 -0
- data/vendor/toolkit/twitter/bootstrap/mixins/buttons.less +19 -6
- data/vendor/toolkit/twitter/bootstrap/mixins/center-block.less +0 -0
- data/vendor/toolkit/twitter/bootstrap/mixins/clearfix.less +0 -0
- data/vendor/toolkit/twitter/bootstrap/mixins/forms.less +0 -0
- data/vendor/toolkit/twitter/bootstrap/mixins/gradients.less +0 -0
- data/vendor/toolkit/twitter/bootstrap/mixins/grid-framework.less +4 -4
- data/vendor/toolkit/twitter/bootstrap/mixins/grid.less +4 -4
- data/vendor/toolkit/twitter/bootstrap/mixins/hide-text.less +2 -2
- data/vendor/toolkit/twitter/bootstrap/mixins/image.less +0 -0
- data/vendor/toolkit/twitter/bootstrap/mixins/labels.less +1 -1
- data/vendor/toolkit/twitter/bootstrap/mixins/list-group.less +2 -1
- data/vendor/toolkit/twitter/bootstrap/mixins/nav-divider.less +0 -0
- data/vendor/toolkit/twitter/bootstrap/mixins/nav-vertical-align.less +0 -0
- data/vendor/toolkit/twitter/bootstrap/mixins/opacity.less +0 -0
- data/vendor/toolkit/twitter/bootstrap/mixins/pagination.less +2 -1
- data/vendor/toolkit/twitter/bootstrap/mixins/panels.less +0 -0
- data/vendor/toolkit/twitter/bootstrap/mixins/progress-bar.less +0 -0
- data/vendor/toolkit/twitter/bootstrap/mixins/reset-filter.less +0 -0
- data/vendor/toolkit/twitter/bootstrap/mixins/reset-text.less +18 -0
- data/vendor/toolkit/twitter/bootstrap/mixins/resize.less +0 -0
- data/vendor/toolkit/twitter/bootstrap/mixins/responsive-visibility.less +1 -1
- data/vendor/toolkit/twitter/bootstrap/mixins/size.less +0 -0
- data/vendor/toolkit/twitter/bootstrap/mixins/tab-focus.less +0 -0
- data/vendor/toolkit/twitter/bootstrap/mixins/table-row.less +0 -0
- data/vendor/toolkit/twitter/bootstrap/mixins/text-emphasis.less +2 -1
- data/vendor/toolkit/twitter/bootstrap/mixins/text-overflow.less +0 -0
- data/vendor/toolkit/twitter/bootstrap/mixins/vendor-prefixes.less +8 -5
- data/vendor/toolkit/twitter/bootstrap/modals.less +3 -3
- data/vendor/toolkit/twitter/bootstrap/navbar.less +6 -1
- data/vendor/toolkit/twitter/bootstrap/navs.less +1 -1
- data/vendor/toolkit/twitter/bootstrap/normalize.less +12 -13
- data/vendor/toolkit/twitter/bootstrap/pager.less +1 -2
- data/vendor/toolkit/twitter/bootstrap/pagination.less +5 -4
- data/vendor/toolkit/twitter/bootstrap/panels.less +27 -4
- data/vendor/toolkit/twitter/bootstrap/popovers.less +5 -7
- data/vendor/toolkit/twitter/bootstrap/print.less +96 -96
- data/vendor/toolkit/twitter/bootstrap/progress-bars.less +1 -14
- data/vendor/toolkit/twitter/bootstrap/responsive-embed.less +10 -9
- data/vendor/toolkit/twitter/bootstrap/responsive-utilities.less +0 -0
- data/vendor/toolkit/twitter/bootstrap/scaffolding.less +12 -1
- data/vendor/toolkit/twitter/bootstrap/tables.less +6 -5
- data/vendor/toolkit/twitter/bootstrap/theme.less +47 -16
- data/vendor/toolkit/twitter/bootstrap/thumbnails.less +1 -1
- data/vendor/toolkit/twitter/bootstrap/tooltip.less +13 -7
- data/vendor/toolkit/twitter/bootstrap/type.less +2 -8
- data/vendor/toolkit/twitter/bootstrap/utilities.less +0 -1
- data/vendor/toolkit/twitter/bootstrap/variables.less +36 -14
- data/vendor/toolkit/twitter/bootstrap/wells.less +0 -0
- metadata +45 -56
- data/app/assets/fonts/fontawesome-webfont.eot +0 -0
- data/app/assets/fonts/fontawesome-webfont.svg +0 -640
- data/app/assets/fonts/fontawesome-webfont.ttf +0 -0
- data/app/assets/fonts/fontawesome-webfont.woff +0 -0
- data/app/assets/stylesheets/twitter-bootstrap-static/fontawesome.css.erb +0 -2026
- data/vendor/static-source/fontawesome.less +0 -8
- data/vendor/toolkit/fontawesome/bordered-pulled.less +0 -16
- data/vendor/toolkit/fontawesome/core.less +0 -11
- data/vendor/toolkit/fontawesome/fixed-width.less +0 -6
- data/vendor/toolkit/fontawesome/font-awesome.less +0 -17
- data/vendor/toolkit/fontawesome/icons.less +0 -552
- data/vendor/toolkit/fontawesome/larger.less +0 -13
- data/vendor/toolkit/fontawesome/list.less +0 -19
- data/vendor/toolkit/fontawesome/mixins.less +0 -25
- data/vendor/toolkit/fontawesome/path.less +0 -14
- data/vendor/toolkit/fontawesome/rotated-flipped.less +0 -20
- data/vendor/toolkit/fontawesome/spinning.less +0 -29
- data/vendor/toolkit/fontawesome/stacked.less +0 -20
- data/vendor/toolkit/fontawesome/variables.less +0 -561
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA1:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 95c5367e90ff42aa6e3e6f34f994dfe7b5bf3385
|
4
|
+
data.tar.gz: 94de97bcb6dc03f1c2cfd67a4f0500816cf0ea79
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: a00ee57e25ff5b706d2075b0226f101eb4932001ec4f8dc088e488c99ac3c9d3ff27e4a4e51308ea0c2f8b809fd76621abb05630719ce103f39a9f3dc8e864cc
|
7
|
+
data.tar.gz: 650348b073474697a89bd68085524cad957b364c146e91d4da876d1b579707c79636b96a2f803602a72926e6c79ad855a5454dfb6e29a8e8946f2b6567c765f7
|
data/README.md
CHANGED
@@ -1,5 +1,6 @@
|
|
1
|
-
# Twitter Bootstrap for Rails 4
|
2
|
-
|
1
|
+
# Twitter Bootstrap for Rails 5 and Rails 4 Asset Pipeline
|
2
|
+
|
3
|
+
Bootstrap is a toolkit from Twitter designed to kickstart development of web apps and sites. It includes base CSS and HTML for typography, forms, buttons, tables, grids, navigation, and more.
|
3
4
|
|
4
5
|
twitter-bootstrap-rails project integrates Bootstrap CSS toolkit for Rails Asset Pipeline (Rails 4, 3.x versions are supported)
|
5
6
|
|
@@ -7,19 +8,21 @@ twitter-bootstrap-rails project integrates Bootstrap CSS toolkit for Rails Asset
|
|
7
8
|
[![Dependency Status](https://gemnasium.com/seyhunak/twitter-bootstrap-rails.svg?travis)](https://gemnasium.com/seyhunak/twitter-bootstrap-rails?travis)
|
8
9
|
[![Code Climate](https://codeclimate.com/github/seyhunak/twitter-bootstrap-rails/badges/gpa.svg)](https://codeclimate.com/github/seyhunak/twitter-bootstrap-rails?branch=master)
|
9
10
|
[![Coverage Status](https://coveralls.io/repos/seyhunak/twitter-bootstrap-rails/badge.png?branch=master)](https://coveralls.io/repos/seyhunak/twitter-bootstrap-rails/badge.png?branch=master)
|
10
|
-
[![
|
11
|
+
[![GitHub stars](https://img.shields.io/github/stars/seyhunak/twitter-bootstrap-rails.svg)](https://github.com/seyhunak/twitter-bootstrap-rails/stargazers)
|
12
|
+
[![GitHub forks](https://img.shields.io/github/forks/seyhunak/twitter-bootstrap-rails.svg)](https://github.com/seyhunak/twitter-bootstrap-rails/network)
|
13
|
+
[![GitHub issues](https://img.shields.io/github/issues/seyhunak/twitter-bootstrap-rails.svg)](https://github.com/seyhunak/twitter-bootstrap-rails/issues)
|
11
14
|
|
12
15
|
## Screencasts
|
13
16
|
#### Installing twitter-bootstrap-rails, generators, usage and more
|
14
17
|
<img width="180" height="35" src="http://oi49.tinypic.com/s5wn05.jpg"></img>
|
15
18
|
|
16
|
-
Screencasts provided by <a href="http://railscasts.com">
|
19
|
+
Screencasts provided by <a href="http://railscasts.com">RailsCasts</a> (Ryan Bates)
|
17
20
|
|
18
21
|
[Twitter Bootstrap Basics](http://railscasts.com/episodes/328-twitter-bootstrap-basics "Twitter Bootstrap Basics")
|
19
22
|
in this episode you will learn how to include Bootstrap into Rails application with the twitter-bootstrap-rails gem.
|
20
23
|
|
21
24
|
[More on Twitter Bootstrap](http://railscasts.com/episodes/329-more-on-twitter-bootstrap "More on Twitter Bootstrap")
|
22
|
-
in this episode continues on the Bootstrap project showing how to display flash messages, add form validations with SimpleForm,
|
25
|
+
in this episode continues on the Bootstrap project showing how to display flash messages, add form validations with SimpleForm, customise layout with variables, and switch to using Sass.
|
23
26
|
(Note: This episode is pro episode)
|
24
27
|
|
25
28
|
## Installing the Gem
|
@@ -28,7 +31,7 @@ The [Twitter Bootstrap Rails gem](http://rubygems.org/gems/twitter-bootstrap-rai
|
|
28
31
|
|
29
32
|
The plain CSS way is how Bootstrap is provided on [the official website](http://twbs.github.io/bootstrap/).
|
30
33
|
|
31
|
-
The [Less](http://lesscss.org/) way provides more
|
34
|
+
The [Less](http://lesscss.org/) way provides more customisation options, like changing theme colors and provides useful Less mixins for your code, but requires the
|
32
35
|
Less gem and the Ruby Racer Javascript runtime (not available on Microsoft Windows).
|
33
36
|
|
34
37
|
### Installing the Less stylesheets
|
@@ -123,7 +126,7 @@ You have to require Bootstrap LESS (bootstrap_and_overrides.css.less) in your ap
|
|
123
126
|
|
124
127
|
To use individual components from bootstrap, your bootstrap_and_overrides.less could look like this:
|
125
128
|
|
126
|
-
```
|
129
|
+
```less
|
127
130
|
// Core variables and mixins
|
128
131
|
@import "twitter/bootstrap/variables.less";
|
129
132
|
@import "twitter/bootstrap/mixins.less";
|
@@ -180,7 +183,7 @@ If you'd like to alter Bootstrap's own variables, or define your LESS
|
|
180
183
|
styles inheriting Bootstrap's mixins, you can do so inside bootstrap_and_overrides.css.less:
|
181
184
|
|
182
185
|
|
183
|
-
```
|
186
|
+
```less
|
184
187
|
@link-color: #ff0000;
|
185
188
|
```
|
186
189
|
|
@@ -198,48 +201,26 @@ If this is the case, you **must** use @import instead of `*=` in your manifest f
|
|
198
201
|
|
199
202
|
### Icons
|
200
203
|
|
201
|
-
By default, this gem
|
204
|
+
By default, this gem (when using less generator) won't enable standard Bootstraps's Glyphicons.
|
202
205
|
|
203
|
-
|
206
|
+
If you would like to restore the default Glyphicons, inside the generated `bootstrap_and_overrides.css.less` uncomment these lines:
|
204
207
|
|
205
|
-
|
206
|
-
|
207
|
-
|
208
|
-
|
209
|
-
@
|
210
|
-
@
|
211
|
-
@
|
212
|
-
@fontAwesomeTtfPath: asset-url("fontawesome-webfont.ttf");
|
213
|
-
@fontAwesomeSvgPath: asset-url("fontawesome-webfont.svg#fontawesomeregular");
|
214
|
-
@import "fontawesome/font-awesome";
|
215
|
-
```
|
216
|
-
|
217
|
-
**Before 2.2.7**
|
208
|
+
```less
|
209
|
+
// Glyphicons are not required by default, uncomment the following lines to enable them.
|
210
|
+
@glyphiconsEotPath: font-url("glyphicons-halflings-regular.eot");
|
211
|
+
@glyphiconsEotPath_iefix: font-url("glyphicons-halflings-regular.eot?#iefix");
|
212
|
+
@glyphiconsWoffPath: font-url("glyphicons-halflings-regular.woff");
|
213
|
+
@glyphiconsTtfPath: font-url("glyphicons-halflings-regular.ttf");
|
214
|
+
@glyphiconsSvgPath: font-url("glyphicons-halflings-regular.svg#glyphicons_halflingsregular");
|
218
215
|
|
219
|
-
|
220
|
-
// Font Awesome
|
221
|
-
@fontAwesomeEotPath: "/assets/fontawesome-webfont.eot";
|
222
|
-
@fontAwesomeEotPath_iefix: "/assets/fontawesome-webfont.eot?#iefix";
|
223
|
-
@fontAwesomeWoffPath: "/assets/fontawesome-webfont.woff";
|
224
|
-
@fontAwesomeTtfPath: "/assets/fontawesome-webfont.ttf";
|
225
|
-
@fontAwesomeSvgPath: "/assets/fontawesome-webfont.svg#fontawesomeregular";
|
226
|
-
@import "fontawesome";
|
216
|
+
@import "twitter/bootstrap/glyphicons.less";
|
227
217
|
```
|
228
218
|
|
229
|
-
|
219
|
+
This gem was used to bundle the excellent [Font-Awesome](http://fortawesome.github.io/Font-Awesome/) library.
|
220
|
+
However that was another maintenance effort that is not worth to do here.
|
230
221
|
|
231
|
-
|
232
|
-
|
233
|
-
// @fontAwesomeEotPath: asset-url("fontawesome-webfont.eot");
|
234
|
-
// @fontAwesomeEotPath_iefix: asset-url("fontawesome-webfont.eot?#iefix");
|
235
|
-
// @fontAwesomeWoffPath: asset-url("fontawesome-webfont.woff");
|
236
|
-
// @fontAwesomeTtfPath: asset-url("fontawesome-webfont.ttf");
|
237
|
-
// @fontAwesomeSvgPath: asset-url("fontawesome-webfont.svg#fontawesomeregular");
|
238
|
-
// @import "fontawesome/font-awesome";
|
239
|
-
|
240
|
-
// Glyphicons
|
241
|
-
@import "twitter/bootstrap/glyphicons.less";
|
242
|
-
```
|
222
|
+
For Rails projects that need it there is the [font-awesome-rails gem](https://github.com/bokmann/font-awesome-rails) that
|
223
|
+
provides same functionality that this gems was used to provide and it also have some other interesting features (e.g. view helpers).
|
243
224
|
|
244
225
|
## Using JavaScript
|
245
226
|
|
@@ -285,7 +266,7 @@ jQuery ->
|
|
285
266
|
You can create modals easily using the following example. The header, body, and footer all accept content_tag or plain html.
|
286
267
|
The href of the button to launch the modal must match the id of the modal dialog. It also accepts a block for the header, body, and footer. If you are getting a complaint about the modal_helper unable to merge a hash it is due to this.
|
287
268
|
|
288
|
-
|
269
|
+
```erb
|
289
270
|
<%= content_tag :a, "Modal", href: "#modal", class: 'btn', data: {toggle: 'modal'} %>
|
290
271
|
|
291
272
|
<%= modal_dialog id: "modal",
|
@@ -293,13 +274,12 @@ The href of the button to launch the modal must match the id of the modal dialog
|
|
293
274
|
body: { content: 'This is the body' },
|
294
275
|
footer: { content: content_tag(:button, 'Save', class: 'btn') } %>
|
295
276
|
|
296
|
-
|
277
|
+
```
|
297
278
|
|
298
279
|
### Navbar Helper
|
299
280
|
It should let you write things like:
|
300
281
|
|
301
|
-
|
302
|
-
|
282
|
+
```erb
|
303
283
|
<%= nav_bar fixed: :top, brand: "Fashionable Clicheizr 2.0", responsive: true do %>
|
304
284
|
<%= menu_group do %>
|
305
285
|
<%= menu_item "Home", root_path %>
|
@@ -327,101 +307,105 @@ It should let you write things like:
|
|
327
307
|
<% end %>
|
328
308
|
<% end %>
|
329
309
|
<% end %>
|
330
|
-
|
331
|
-
|
332
|
-
````
|
310
|
+
```
|
333
311
|
|
334
312
|
### Navbar scaffolding
|
335
313
|
|
336
314
|
In your view file (most likely application.html.erb) to get a basic navbar set up you need to do this:
|
337
315
|
|
338
|
-
|
316
|
+
```erb
|
339
317
|
<%= nav_bar %>
|
340
|
-
|
318
|
+
```
|
341
319
|
|
342
320
|
Which will render:
|
343
321
|
|
344
|
-
|
345
|
-
|
346
|
-
|
347
|
-
|
348
|
-
|
322
|
+
```html
|
323
|
+
<div class="navbar">
|
324
|
+
<div class="container">
|
325
|
+
</div>
|
326
|
+
</div>
|
327
|
+
```
|
349
328
|
|
350
329
|
### Fixed navbar
|
351
330
|
|
352
331
|
If you want the navbar to stick to the top of the screen, pass in the option like this:
|
353
332
|
|
354
|
-
|
333
|
+
```erb
|
355
334
|
<%= nav_bar fixed: :top %>
|
356
|
-
|
335
|
+
```
|
357
336
|
|
358
337
|
To render:
|
359
338
|
|
360
|
-
|
361
|
-
|
362
|
-
|
363
|
-
|
339
|
+
```html
|
340
|
+
<div class="navbar navbar-fixed-top">
|
341
|
+
<div class="container">
|
342
|
+
</div>
|
343
|
+
</div>
|
344
|
+
```
|
364
345
|
|
365
346
|
### Static navbar
|
366
347
|
|
367
348
|
If you want a full-width navbar that scrolls away with the page, pass in the option like this:
|
368
349
|
|
369
|
-
|
350
|
+
```erb
|
370
351
|
<%= nav_bar static: :top %>
|
371
|
-
|
352
|
+
```
|
372
353
|
|
373
354
|
To render:
|
374
355
|
|
375
|
-
|
376
|
-
|
377
|
-
|
378
|
-
|
379
|
-
|
356
|
+
```html
|
357
|
+
<div class="navbar navbar-static-top">
|
358
|
+
<div class="container">
|
359
|
+
</div>
|
360
|
+
</div>
|
361
|
+
```
|
380
362
|
|
381
363
|
### Brand name
|
382
364
|
|
383
365
|
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.
|
384
366
|
|
385
|
-
|
367
|
+
```erb
|
386
368
|
<%= nav_bar brand: "We're sooo web 2.0alizr", brand_link: account_dashboard_path %>
|
387
|
-
|
369
|
+
```
|
388
370
|
|
389
371
|
Which will render:
|
390
372
|
|
391
|
-
|
392
|
-
|
393
|
-
|
394
|
-
|
395
|
-
|
396
|
-
</
|
397
|
-
|
398
|
-
|
373
|
+
```html
|
374
|
+
<div class="navbar">
|
375
|
+
<div class="container">
|
376
|
+
<a class="navbar-brand" href="/accounts/dashboard">
|
377
|
+
We're sooo web 2.0alizr
|
378
|
+
</a>
|
379
|
+
</div>
|
380
|
+
</div>
|
381
|
+
```
|
399
382
|
|
400
383
|
### Optional responsive variation
|
401
384
|
|
402
385
|
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:
|
403
386
|
|
404
|
-
|
387
|
+
```erb
|
405
388
|
<%= nav_bar responsive: true %>
|
406
|
-
|
407
|
-
Which renders the html quite differently:
|
389
|
+
```
|
408
390
|
|
391
|
+
Which renders the html quite differently:
|
409
392
|
|
410
|
-
|
411
|
-
|
412
|
-
|
413
|
-
|
414
|
-
|
415
|
-
|
416
|
-
|
417
|
-
|
418
|
-
|
419
|
-
|
420
|
-
|
421
|
-
|
422
|
-
</div>
|
393
|
+
```html
|
394
|
+
<div class="navbar">
|
395
|
+
<div class="container">
|
396
|
+
<!-- .navbar-toggle is used as the toggle for collapsed navbar content -->
|
397
|
+
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
|
398
|
+
<span class="icon-bar"></span>
|
399
|
+
<span class="icon-bar"></span>
|
400
|
+
<span class="icon-bar"></span>
|
401
|
+
</button>
|
402
|
+
<!-- Everything in here gets hidden at 940px or less -->
|
403
|
+
<div class="navbar-collapse collapse">
|
404
|
+
<!-- menu items gets rendered here instead -->
|
423
405
|
</div>
|
424
|
-
|
406
|
+
</div>
|
407
|
+
</div>
|
408
|
+
```
|
425
409
|
|
426
410
|
### Nav links
|
427
411
|
|
@@ -437,8 +421,7 @@ menu_group only takes one argument - :pull - this moves the group left or right
|
|
437
421
|
|
438
422
|
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.
|
439
423
|
|
440
|
-
|
441
|
-
|
424
|
+
```erb
|
442
425
|
<%= nav_bar fixed: :top, brand: "Ninety Ten" do %>
|
443
426
|
<%= menu_group do %>
|
444
427
|
<%= menu_item "Home", root_path %>
|
@@ -458,14 +441,13 @@ menu_item generates a link wrapped in an li tag. It takes two arguments and an o
|
|
458
441
|
<% end %>
|
459
442
|
<% end %>
|
460
443
|
<% end %>
|
461
|
-
|
462
|
-
````
|
444
|
+
```
|
463
445
|
|
464
446
|
### Dropdown menus
|
465
447
|
|
466
448
|
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:
|
467
449
|
|
468
|
-
|
450
|
+
```erb
|
469
451
|
<%= nav_bar do %>
|
470
452
|
<%= menu_item "Home", root_path %>
|
471
453
|
|
@@ -479,15 +461,13 @@ For multi-level list options, where it makes logical sense to group menu items,
|
|
479
461
|
<%= menu_item "About Us", about_us_path %>
|
480
462
|
<%= menu_item "Contact", contact_path %>
|
481
463
|
<% end %>
|
482
|
-
|
483
|
-
````
|
464
|
+
```
|
484
465
|
|
485
466
|
### Dividers
|
486
467
|
|
487
468
|
Dividers are just vertical bars that visually separate logically disparate groups of menu items
|
488
469
|
|
489
|
-
|
490
|
-
|
470
|
+
```erb
|
491
471
|
<%= nav_bar fixed: :bottom do %>
|
492
472
|
<%= menu_item "Home", root_path %>
|
493
473
|
<%= menu_item "About Us", about_us_path %>
|
@@ -499,8 +479,7 @@ Dividers are just vertical bars that visually separate logically disparate group
|
|
499
479
|
<%= menu_item "Account Settings", edit_user_account_path(current_user, @account) %>
|
500
480
|
<%= menu_item "Log Out", log_out_path %>
|
501
481
|
<% end %>
|
502
|
-
|
503
|
-
````
|
482
|
+
```
|
504
483
|
|
505
484
|
### Forms in navbar
|
506
485
|
|
@@ -508,23 +487,23 @@ At the moment - this is just a how to...
|
|
508
487
|
|
509
488
|
You need to add this class to the form itself (Different form builders do this in different ways - please check out the relevant docs)
|
510
489
|
|
511
|
-
|
490
|
+
```css
|
512
491
|
.navbar-form
|
513
|
-
|
492
|
+
```
|
514
493
|
To pull the form left or right, add either of these classes:
|
515
|
-
|
494
|
+
```css
|
516
495
|
.pull-left
|
517
496
|
.pull-right
|
518
|
-
|
497
|
+
```
|
519
498
|
|
520
499
|
If you want the Bootstrap search box (I think it just rounds the corners), use:
|
521
|
-
|
500
|
+
```css
|
522
501
|
.navbar-search
|
523
|
-
|
502
|
+
```
|
524
503
|
Instead of:
|
525
|
-
|
504
|
+
```css
|
526
505
|
.navbar-form
|
527
|
-
|
506
|
+
```
|
528
507
|
|
529
508
|
To change the size of the form fields, use .span2 (or however many span widths you want) to the input itself.
|
530
509
|
|
@@ -532,7 +511,7 @@ To change the size of the form fields, use .span2 (or however many span widths y
|
|
532
511
|
|
533
512
|
You can shift things to the left or the right across the nav bar. It's easiest to do this on grouped menu items:
|
534
513
|
|
535
|
-
|
514
|
+
```erb
|
536
515
|
<%= nav_bar fixed: :bottom do %>
|
537
516
|
<% menu_group do %>
|
538
517
|
<%= menu_item "Home", root_path %>
|
@@ -545,24 +524,22 @@ You can shift things to the left or the right across the nav bar. It's easiest t
|
|
545
524
|
<%= menu_item "Log Out", log_out_path %>
|
546
525
|
<% end %>
|
547
526
|
<% end %>
|
548
|
-
|
549
|
-
````
|
527
|
+
```
|
550
528
|
|
551
529
|
### Text in the navbar
|
552
530
|
|
553
531
|
If you want to put regular plain text in the navbar anywhere, you do it like this:
|
554
532
|
|
555
|
-
|
533
|
+
```erb
|
556
534
|
<%= nav_bar brand: "Apple" do %>
|
557
535
|
<%= menu_text "We make shiny things" %>
|
558
536
|
<%= menu_item "Home", root_path %>
|
559
537
|
<%= menu_item "About Us", about_us_path %>
|
560
538
|
<% end %>
|
539
|
+
```
|
561
540
|
|
562
|
-
````
|
563
541
|
It also takes the :pull option to drag it to the left or right.
|
564
542
|
|
565
|
-
|
566
543
|
### Flash helper
|
567
544
|
|
568
545
|
Add flash helper `<%= bootstrap_flash %>` to your layout (built-in with layout generator).
|
@@ -625,6 +602,8 @@ Glyph:
|
|
625
602
|
<%= glyph(:pencil) %> <i class="icon-pencil"></i>
|
626
603
|
|
627
604
|
<%= glyph(:pencil, {tag: :span}) %> <span class="icon-pencil"></span>
|
605
|
+
|
606
|
+
<%= glyph(:pencil, {class: 'foo'}) %> <i class="icon-pencil foo"></i>
|
628
607
|
```
|
629
608
|
|
630
609
|
### I18n Internationalization Support
|
@@ -640,23 +619,19 @@ Please see CHANGELOG.md for more details
|
|
640
619
|
## Contributors & Patches & Forks
|
641
620
|
Please see CONTRIBUTERS.md for contributors list
|
642
621
|
|
643
|
-
|
644
622
|
## About Me
|
645
|
-
|
646
|
-
|
647
|
-
|
623
|
+
Senior Software Developer
|
624
|
+
Istanbul / Turkey
|
648
625
|
|
649
626
|
### Contact me
|
650
627
|
Seyhun Akyürek - seyhunak [at] gmail com
|
651
628
|
|
652
|
-
|
653
629
|
## Thanks
|
654
630
|
Bootstrap and all twitter-bootstrap-rails contributors
|
655
631
|
http://twbs.github.io/bootstrap
|
656
632
|
|
657
|
-
|
658
633
|
## License
|
659
|
-
Copyright (c)
|
634
|
+
Copyright (c) 2017 (since 2012) by Seyhun Akyürek
|
660
635
|
|
661
636
|
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:
|
662
637
|
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|