twitter-bootstrap-rails 3.2.2 → 5.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 +5 -5
- data/README.md +181 -134
- 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/breadcrumbs.rb +1 -1
- data/lib/twitter/bootstrap/rails/engine.rb +1 -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/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/mixins.less +1 -0
- 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 +49 -61
- 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
|
-
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
2
|
+
SHA256:
|
3
|
+
metadata.gz: c22dd03425d9d876d8563659b4ff85bd06f489094a856ee80d49bea70e201625
|
4
|
+
data.tar.gz: '05648115025a10a130d39f3d8b34c190d1f4c849caa6a3c756d598dbafc8e0a1'
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 8c27809488b7509303e4b52414d4a491004575b2a415952275c7675f15065cb9c8368892a640158f0d7af61a92f0ced4bd4251acd4e626273900d25330dc9b2d
|
7
|
+
data.tar.gz: dd99e0e82399a6b69cb25d018a7b5f5205fe80cb10ec9056fde9c9bcd0eb308555e5dcc491bc6db263b938602fa7be79f8d24d90705917b4cc4fdf039aba6bd8
|
data/README.md
CHANGED
@@ -1,25 +1,30 @@
|
|
1
|
-
# Twitter Bootstrap for Rails
|
2
|
-
Bootstrap is a toolkit from Twitter designed to kickstart development of webapps and sites. It includes base CSS and HTML for typography, forms, buttons, tables, grids, navigation, and more.
|
1
|
+
# Twitter Bootstrap for Rails 6, 5 and 4 Asset Pipeline
|
3
2
|
|
4
|
-
|
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.
|
4
|
+
|
5
|
+
twitter-bootstrap-rails project integrates Bootstrap CSS toolkit for Rails Asset Pipeline (Rails 6, Rails 5 and Rails 3.x versions are supported)
|
5
6
|
|
6
7
|
[![Gem Version](https://badge.fury.io/rb/twitter-bootstrap-rails.svg)](http://badge.fury.io/rb/twitter-bootstrap-rails)
|
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
|
-
[![Coverage Status](https://coveralls.io/repos/seyhunak/twitter-bootstrap-rails/badge.
|
10
|
-
[![
|
10
|
+
[![Coverage Status](https://coveralls.io/repos/seyhunak/twitter-bootstrap-rails/badge.svg?branch=master)](https://coveralls.io/repos/seyhunak/twitter-bootstrap-rails/badge.svg?branch=master)
|
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)
|
14
|
+
|
15
|
+
[![OpenCollective](https://opencollective.com/twitter-bootstrap-rails/backers/badge.svg)](#backers)
|
16
|
+
[![OpenCollective](https://opencollective.com/twitter-bootstrap-rails/sponsors/badge.svg)](#sponsors)
|
11
17
|
|
12
18
|
## Screencasts
|
13
19
|
#### Installing twitter-bootstrap-rails, generators, usage and more
|
14
|
-
<img width="180" height="35" src="http://oi49.tinypic.com/s5wn05.jpg"></img>
|
15
20
|
|
16
|
-
Screencasts provided by <a href="http://railscasts.com">
|
21
|
+
Screencasts provided by <a href="http://railscasts.com">RailsCasts</a> (Ryan Bates)
|
17
22
|
|
18
23
|
[Twitter Bootstrap Basics](http://railscasts.com/episodes/328-twitter-bootstrap-basics "Twitter Bootstrap Basics")
|
19
24
|
in this episode you will learn how to include Bootstrap into Rails application with the twitter-bootstrap-rails gem.
|
20
25
|
|
21
26
|
[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,
|
27
|
+
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
28
|
(Note: This episode is pro episode)
|
24
29
|
|
25
30
|
## Installing the Gem
|
@@ -28,7 +33,7 @@ The [Twitter Bootstrap Rails gem](http://rubygems.org/gems/twitter-bootstrap-rai
|
|
28
33
|
|
29
34
|
The plain CSS way is how Bootstrap is provided on [the official website](http://twbs.github.io/bootstrap/).
|
30
35
|
|
31
|
-
The [Less](http://lesscss.org/) way provides more
|
36
|
+
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
37
|
Less gem and the Ruby Racer Javascript runtime (not available on Microsoft Windows).
|
33
38
|
|
34
39
|
### Installing the Less stylesheets
|
@@ -73,6 +78,8 @@ After running `bundle install`, run the generator:
|
|
73
78
|
|
74
79
|
rails generate bootstrap:install static
|
75
80
|
|
81
|
+
If your Rails server is running, make sure to restart it.
|
82
|
+
|
76
83
|
## Generating layouts and views
|
77
84
|
|
78
85
|
You can run following generators to get started with Bootstrap quickly.
|
@@ -123,7 +130,7 @@ You have to require Bootstrap LESS (bootstrap_and_overrides.css.less) in your ap
|
|
123
130
|
|
124
131
|
To use individual components from bootstrap, your bootstrap_and_overrides.less could look like this:
|
125
132
|
|
126
|
-
```
|
133
|
+
```less
|
127
134
|
// Core variables and mixins
|
128
135
|
@import "twitter/bootstrap/variables.less";
|
129
136
|
@import "twitter/bootstrap/mixins.less";
|
@@ -180,7 +187,7 @@ If you'd like to alter Bootstrap's own variables, or define your LESS
|
|
180
187
|
styles inheriting Bootstrap's mixins, you can do so inside bootstrap_and_overrides.css.less:
|
181
188
|
|
182
189
|
|
183
|
-
```
|
190
|
+
```less
|
184
191
|
@link-color: #ff0000;
|
185
192
|
```
|
186
193
|
|
@@ -198,48 +205,26 @@ If this is the case, you **must** use @import instead of `*=` in your manifest f
|
|
198
205
|
|
199
206
|
### Icons
|
200
207
|
|
201
|
-
By default, this gem
|
202
|
-
|
203
|
-
This should appear inside _bootstrap_and_overrides *(based on you twitter-bootstrap-rails version)*
|
208
|
+
By default, this gem (when using less generator) won't enable standard Bootstraps's Glyphicons.
|
204
209
|
|
205
|
-
|
206
|
-
|
207
|
-
```css
|
208
|
-
// Font Awesome
|
209
|
-
@fontAwesomeEotPath: asset-url("fontawesome-webfont.eot");
|
210
|
-
@fontAwesomeEotPath_iefix: asset-url("fontawesome-webfont.eot?#iefix");
|
211
|
-
@fontAwesomeWoffPath: asset-url("fontawesome-webfont.woff");
|
212
|
-
@fontAwesomeTtfPath: asset-url("fontawesome-webfont.ttf");
|
213
|
-
@fontAwesomeSvgPath: asset-url("fontawesome-webfont.svg#fontawesomeregular");
|
214
|
-
@import "fontawesome/font-awesome";
|
215
|
-
```
|
210
|
+
If you would like to restore the default Glyphicons, inside the generated `bootstrap_and_overrides.css.less` uncomment these lines:
|
216
211
|
|
217
|
-
|
212
|
+
```less
|
213
|
+
// Glyphicons are not required by default, uncomment the following lines to enable them.
|
214
|
+
@glyphiconsEotPath: font-url("glyphicons-halflings-regular.eot");
|
215
|
+
@glyphiconsEotPath_iefix: font-url("glyphicons-halflings-regular.eot?#iefix");
|
216
|
+
@glyphiconsWoffPath: font-url("glyphicons-halflings-regular.woff");
|
217
|
+
@glyphiconsTtfPath: font-url("glyphicons-halflings-regular.ttf");
|
218
|
+
@glyphiconsSvgPath: font-url("glyphicons-halflings-regular.svg#glyphicons_halflingsregular");
|
218
219
|
|
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";
|
220
|
+
@import "twitter/bootstrap/glyphicons.less";
|
227
221
|
```
|
228
222
|
|
229
|
-
|
223
|
+
This gem was used to bundle the excellent [Font-Awesome](http://fortawesome.github.io/Font-Awesome/) library.
|
224
|
+
However that was another maintenance effort that is not worth to do here.
|
230
225
|
|
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
|
-
```
|
226
|
+
For Rails projects that need it there is the [font-awesome-rails gem](https://github.com/bokmann/font-awesome-rails) that
|
227
|
+
provides same functionality that this gems was used to provide and it also have some other interesting features (e.g. view helpers).
|
243
228
|
|
244
229
|
## Using JavaScript
|
245
230
|
|
@@ -285,7 +270,7 @@ jQuery ->
|
|
285
270
|
You can create modals easily using the following example. The header, body, and footer all accept content_tag or plain html.
|
286
271
|
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
272
|
|
288
|
-
|
273
|
+
```erb
|
289
274
|
<%= content_tag :a, "Modal", href: "#modal", class: 'btn', data: {toggle: 'modal'} %>
|
290
275
|
|
291
276
|
<%= modal_dialog id: "modal",
|
@@ -293,13 +278,12 @@ The href of the button to launch the modal must match the id of the modal dialog
|
|
293
278
|
body: { content: 'This is the body' },
|
294
279
|
footer: { content: content_tag(:button, 'Save', class: 'btn') } %>
|
295
280
|
|
296
|
-
|
281
|
+
```
|
297
282
|
|
298
283
|
### Navbar Helper
|
299
284
|
It should let you write things like:
|
300
285
|
|
301
|
-
|
302
|
-
|
286
|
+
```erb
|
303
287
|
<%= nav_bar fixed: :top, brand: "Fashionable Clicheizr 2.0", responsive: true do %>
|
304
288
|
<%= menu_group do %>
|
305
289
|
<%= menu_item "Home", root_path %>
|
@@ -327,101 +311,105 @@ It should let you write things like:
|
|
327
311
|
<% end %>
|
328
312
|
<% end %>
|
329
313
|
<% end %>
|
330
|
-
|
331
|
-
|
332
|
-
````
|
314
|
+
```
|
333
315
|
|
334
316
|
### Navbar scaffolding
|
335
317
|
|
336
318
|
In your view file (most likely application.html.erb) to get a basic navbar set up you need to do this:
|
337
319
|
|
338
|
-
|
320
|
+
```erb
|
339
321
|
<%= nav_bar %>
|
340
|
-
|
322
|
+
```
|
341
323
|
|
342
324
|
Which will render:
|
343
325
|
|
344
|
-
|
345
|
-
|
346
|
-
|
347
|
-
|
348
|
-
|
326
|
+
```html
|
327
|
+
<div class="navbar">
|
328
|
+
<div class="container">
|
329
|
+
</div>
|
330
|
+
</div>
|
331
|
+
```
|
349
332
|
|
350
333
|
### Fixed navbar
|
351
334
|
|
352
335
|
If you want the navbar to stick to the top of the screen, pass in the option like this:
|
353
336
|
|
354
|
-
|
337
|
+
```erb
|
355
338
|
<%= nav_bar fixed: :top %>
|
356
|
-
|
339
|
+
```
|
357
340
|
|
358
341
|
To render:
|
359
342
|
|
360
|
-
|
361
|
-
|
362
|
-
|
363
|
-
|
343
|
+
```html
|
344
|
+
<div class="navbar navbar-fixed-top">
|
345
|
+
<div class="container">
|
346
|
+
</div>
|
347
|
+
</div>
|
348
|
+
```
|
364
349
|
|
365
350
|
### Static navbar
|
366
351
|
|
367
352
|
If you want a full-width navbar that scrolls away with the page, pass in the option like this:
|
368
353
|
|
369
|
-
|
354
|
+
```erb
|
370
355
|
<%= nav_bar static: :top %>
|
371
|
-
|
356
|
+
```
|
372
357
|
|
373
358
|
To render:
|
374
359
|
|
375
|
-
|
376
|
-
|
377
|
-
|
378
|
-
|
379
|
-
|
360
|
+
```html
|
361
|
+
<div class="navbar navbar-static-top">
|
362
|
+
<div class="container">
|
363
|
+
</div>
|
364
|
+
</div>
|
365
|
+
```
|
380
366
|
|
381
367
|
### Brand name
|
382
368
|
|
383
369
|
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
370
|
|
385
|
-
|
371
|
+
```erb
|
386
372
|
<%= nav_bar brand: "We're sooo web 2.0alizr", brand_link: account_dashboard_path %>
|
387
|
-
|
373
|
+
```
|
388
374
|
|
389
375
|
Which will render:
|
390
376
|
|
391
|
-
|
392
|
-
|
393
|
-
|
394
|
-
|
395
|
-
|
396
|
-
</
|
397
|
-
|
398
|
-
|
377
|
+
```html
|
378
|
+
<div class="navbar">
|
379
|
+
<div class="container">
|
380
|
+
<a class="navbar-brand" href="/accounts/dashboard">
|
381
|
+
We're sooo web 2.0alizr
|
382
|
+
</a>
|
383
|
+
</div>
|
384
|
+
</div>
|
385
|
+
```
|
399
386
|
|
400
387
|
### Optional responsive variation
|
401
388
|
|
402
389
|
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
390
|
|
404
|
-
|
391
|
+
```erb
|
405
392
|
<%= nav_bar responsive: true %>
|
406
|
-
|
407
|
-
Which renders the html quite differently:
|
393
|
+
```
|
408
394
|
|
395
|
+
Which renders the html quite differently:
|
409
396
|
|
410
|
-
|
411
|
-
|
412
|
-
|
413
|
-
|
414
|
-
|
415
|
-
|
416
|
-
|
417
|
-
|
418
|
-
|
419
|
-
|
420
|
-
|
421
|
-
|
422
|
-
</div>
|
397
|
+
```html
|
398
|
+
<div class="navbar">
|
399
|
+
<div class="container">
|
400
|
+
<!-- .navbar-toggle is used as the toggle for collapsed navbar content -->
|
401
|
+
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
|
402
|
+
<span class="icon-bar"></span>
|
403
|
+
<span class="icon-bar"></span>
|
404
|
+
<span class="icon-bar"></span>
|
405
|
+
</button>
|
406
|
+
<!-- Everything in here gets hidden at 940px or less -->
|
407
|
+
<div class="navbar-collapse collapse">
|
408
|
+
<!-- menu items gets rendered here instead -->
|
423
409
|
</div>
|
424
|
-
|
410
|
+
</div>
|
411
|
+
</div>
|
412
|
+
```
|
425
413
|
|
426
414
|
### Nav links
|
427
415
|
|
@@ -437,8 +425,7 @@ menu_group only takes one argument - :pull - this moves the group left or right
|
|
437
425
|
|
438
426
|
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
427
|
|
440
|
-
|
441
|
-
|
428
|
+
```erb
|
442
429
|
<%= nav_bar fixed: :top, brand: "Ninety Ten" do %>
|
443
430
|
<%= menu_group do %>
|
444
431
|
<%= menu_item "Home", root_path %>
|
@@ -458,14 +445,13 @@ menu_item generates a link wrapped in an li tag. It takes two arguments and an o
|
|
458
445
|
<% end %>
|
459
446
|
<% end %>
|
460
447
|
<% end %>
|
461
|
-
|
462
|
-
````
|
448
|
+
```
|
463
449
|
|
464
450
|
### Dropdown menus
|
465
451
|
|
466
452
|
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
453
|
|
468
|
-
|
454
|
+
```erb
|
469
455
|
<%= nav_bar do %>
|
470
456
|
<%= menu_item "Home", root_path %>
|
471
457
|
|
@@ -479,15 +465,13 @@ For multi-level list options, where it makes logical sense to group menu items,
|
|
479
465
|
<%= menu_item "About Us", about_us_path %>
|
480
466
|
<%= menu_item "Contact", contact_path %>
|
481
467
|
<% end %>
|
482
|
-
|
483
|
-
````
|
468
|
+
```
|
484
469
|
|
485
470
|
### Dividers
|
486
471
|
|
487
472
|
Dividers are just vertical bars that visually separate logically disparate groups of menu items
|
488
473
|
|
489
|
-
|
490
|
-
|
474
|
+
```erb
|
491
475
|
<%= nav_bar fixed: :bottom do %>
|
492
476
|
<%= menu_item "Home", root_path %>
|
493
477
|
<%= menu_item "About Us", about_us_path %>
|
@@ -499,8 +483,7 @@ Dividers are just vertical bars that visually separate logically disparate group
|
|
499
483
|
<%= menu_item "Account Settings", edit_user_account_path(current_user, @account) %>
|
500
484
|
<%= menu_item "Log Out", log_out_path %>
|
501
485
|
<% end %>
|
502
|
-
|
503
|
-
````
|
486
|
+
```
|
504
487
|
|
505
488
|
### Forms in navbar
|
506
489
|
|
@@ -508,23 +491,23 @@ At the moment - this is just a how to...
|
|
508
491
|
|
509
492
|
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
493
|
|
511
|
-
|
494
|
+
```css
|
512
495
|
.navbar-form
|
513
|
-
|
496
|
+
```
|
514
497
|
To pull the form left or right, add either of these classes:
|
515
|
-
|
498
|
+
```css
|
516
499
|
.pull-left
|
517
500
|
.pull-right
|
518
|
-
|
501
|
+
```
|
519
502
|
|
520
503
|
If you want the Bootstrap search box (I think it just rounds the corners), use:
|
521
|
-
|
504
|
+
```css
|
522
505
|
.navbar-search
|
523
|
-
|
506
|
+
```
|
524
507
|
Instead of:
|
525
|
-
|
508
|
+
```css
|
526
509
|
.navbar-form
|
527
|
-
|
510
|
+
```
|
528
511
|
|
529
512
|
To change the size of the form fields, use .span2 (or however many span widths you want) to the input itself.
|
530
513
|
|
@@ -532,7 +515,7 @@ To change the size of the form fields, use .span2 (or however many span widths y
|
|
532
515
|
|
533
516
|
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
517
|
|
535
|
-
|
518
|
+
```erb
|
536
519
|
<%= nav_bar fixed: :bottom do %>
|
537
520
|
<% menu_group do %>
|
538
521
|
<%= menu_item "Home", root_path %>
|
@@ -545,24 +528,22 @@ You can shift things to the left or the right across the nav bar. It's easiest t
|
|
545
528
|
<%= menu_item "Log Out", log_out_path %>
|
546
529
|
<% end %>
|
547
530
|
<% end %>
|
548
|
-
|
549
|
-
````
|
531
|
+
```
|
550
532
|
|
551
533
|
### Text in the navbar
|
552
534
|
|
553
535
|
If you want to put regular plain text in the navbar anywhere, you do it like this:
|
554
536
|
|
555
|
-
|
537
|
+
```erb
|
556
538
|
<%= nav_bar brand: "Apple" do %>
|
557
539
|
<%= menu_text "We make shiny things" %>
|
558
540
|
<%= menu_item "Home", root_path %>
|
559
541
|
<%= menu_item "About Us", about_us_path %>
|
560
542
|
<% end %>
|
543
|
+
```
|
561
544
|
|
562
|
-
````
|
563
545
|
It also takes the :pull option to drag it to the left or right.
|
564
546
|
|
565
|
-
|
566
547
|
### Flash helper
|
567
548
|
|
568
549
|
Add flash helper `<%= bootstrap_flash %>` to your layout (built-in with layout generator).
|
@@ -625,6 +606,8 @@ Glyph:
|
|
625
606
|
<%= glyph(:pencil) %> <i class="icon-pencil"></i>
|
626
607
|
|
627
608
|
<%= glyph(:pencil, {tag: :span}) %> <span class="icon-pencil"></span>
|
609
|
+
|
610
|
+
<%= glyph(:pencil, {class: 'foo'}) %> <i class="icon-pencil foo"></i>
|
628
611
|
```
|
629
612
|
|
630
613
|
### I18n Internationalization Support
|
@@ -640,23 +623,87 @@ Please see CHANGELOG.md for more details
|
|
640
623
|
## Contributors & Patches & Forks
|
641
624
|
Please see CONTRIBUTERS.md for contributors list
|
642
625
|
|
643
|
-
|
644
626
|
## About Me
|
645
|
-
|
646
|
-
|
647
|
-
|
648
|
-
|
649
|
-
### Contact me
|
650
|
-
Seyhun Akyürek - seyhunak [at] gmail com
|
627
|
+
Senior Software Developer Istanbul / Turkey
|
628
|
+
seyhunak [at] gmail com
|
651
629
|
|
630
|
+
## Hire Me
|
631
|
+
[![Hire Me !](https://img.shields.io/badge/Hire%20Me-for%20your%20project%20on%20PPH-red?s?style=social&logo=ios&logoColor=blue&labelColor=black&color=blue)](http://pph.me/seyhunak)
|
652
632
|
|
653
633
|
## Thanks
|
654
634
|
Bootstrap and all twitter-bootstrap-rails contributors
|
655
635
|
http://twbs.github.io/bootstrap
|
656
636
|
|
637
|
+
## Backers
|
638
|
+
Support us with a monthly donation and help us continue our activities. [[Become a backer](https://opencollective.com/twitter-bootstrap-rails#backer)]
|
639
|
+
|
640
|
+
<a href="https://opencollective.com/twitter-bootstrap-rails/backer/0/website" target="_blank"><img src="https://opencollective.com/twitter-bootstrap-rails/backer/0/avatar.svg"></a>
|
641
|
+
<a href="https://opencollective.com/twitter-bootstrap-rails/backer/1/website" target="_blank"><img src="https://opencollective.com/twitter-bootstrap-rails/backer/1/avatar.svg"></a>
|
642
|
+
<a href="https://opencollective.com/twitter-bootstrap-rails/backer/2/website" target="_blank"><img src="https://opencollective.com/twitter-bootstrap-rails/backer/2/avatar.svg"></a>
|
643
|
+
<a href="https://opencollective.com/twitter-bootstrap-rails/backer/3/website" target="_blank"><img src="https://opencollective.com/twitter-bootstrap-rails/backer/3/avatar.svg"></a>
|
644
|
+
<a href="https://opencollective.com/twitter-bootstrap-rails/backer/4/website" target="_blank"><img src="https://opencollective.com/twitter-bootstrap-rails/backer/4/avatar.svg"></a>
|
645
|
+
<a href="https://opencollective.com/twitter-bootstrap-rails/backer/5/website" target="_blank"><img src="https://opencollective.com/twitter-bootstrap-rails/backer/5/avatar.svg"></a>
|
646
|
+
<a href="https://opencollective.com/twitter-bootstrap-rails/backer/6/website" target="_blank"><img src="https://opencollective.com/twitter-bootstrap-rails/backer/6/avatar.svg"></a>
|
647
|
+
<a href="https://opencollective.com/twitter-bootstrap-rails/backer/7/website" target="_blank"><img src="https://opencollective.com/twitter-bootstrap-rails/backer/7/avatar.svg"></a>
|
648
|
+
<a href="https://opencollective.com/twitter-bootstrap-rails/backer/8/website" target="_blank"><img src="https://opencollective.com/twitter-bootstrap-rails/backer/8/avatar.svg"></a>
|
649
|
+
<a href="https://opencollective.com/twitter-bootstrap-rails/backer/9/website" target="_blank"><img src="https://opencollective.com/twitter-bootstrap-rails/backer/9/avatar.svg"></a>
|
650
|
+
<a href="https://opencollective.com/twitter-bootstrap-rails/backer/10/website" target="_blank"><img src="https://opencollective.com/twitter-bootstrap-rails/backer/10/avatar.svg"></a>
|
651
|
+
<a href="https://opencollective.com/twitter-bootstrap-rails/backer/11/website" target="_blank"><img src="https://opencollective.com/twitter-bootstrap-rails/backer/11/avatar.svg"></a>
|
652
|
+
<a href="https://opencollective.com/twitter-bootstrap-rails/backer/12/website" target="_blank"><img src="https://opencollective.com/twitter-bootstrap-rails/backer/12/avatar.svg"></a>
|
653
|
+
<a href="https://opencollective.com/twitter-bootstrap-rails/backer/13/website" target="_blank"><img src="https://opencollective.com/twitter-bootstrap-rails/backer/13/avatar.svg"></a>
|
654
|
+
<a href="https://opencollective.com/twitter-bootstrap-rails/backer/14/website" target="_blank"><img src="https://opencollective.com/twitter-bootstrap-rails/backer/14/avatar.svg"></a>
|
655
|
+
<a href="https://opencollective.com/twitter-bootstrap-rails/backer/15/website" target="_blank"><img src="https://opencollective.com/twitter-bootstrap-rails/backer/15/avatar.svg"></a>
|
656
|
+
<a href="https://opencollective.com/twitter-bootstrap-rails/backer/16/website" target="_blank"><img src="https://opencollective.com/twitter-bootstrap-rails/backer/16/avatar.svg"></a>
|
657
|
+
<a href="https://opencollective.com/twitter-bootstrap-rails/backer/17/website" target="_blank"><img src="https://opencollective.com/twitter-bootstrap-rails/backer/17/avatar.svg"></a>
|
658
|
+
<a href="https://opencollective.com/twitter-bootstrap-rails/backer/18/website" target="_blank"><img src="https://opencollective.com/twitter-bootstrap-rails/backer/18/avatar.svg"></a>
|
659
|
+
<a href="https://opencollective.com/twitter-bootstrap-rails/backer/19/website" target="_blank"><img src="https://opencollective.com/twitter-bootstrap-rails/backer/19/avatar.svg"></a>
|
660
|
+
<a href="https://opencollective.com/twitter-bootstrap-rails/backer/20/website" target="_blank"><img src="https://opencollective.com/twitter-bootstrap-rails/backer/20/avatar.svg"></a>
|
661
|
+
<a href="https://opencollective.com/twitter-bootstrap-rails/backer/21/website" target="_blank"><img src="https://opencollective.com/twitter-bootstrap-rails/backer/21/avatar.svg"></a>
|
662
|
+
<a href="https://opencollective.com/twitter-bootstrap-rails/backer/22/website" target="_blank"><img src="https://opencollective.com/twitter-bootstrap-rails/backer/22/avatar.svg"></a>
|
663
|
+
<a href="https://opencollective.com/twitter-bootstrap-rails/backer/23/website" target="_blank"><img src="https://opencollective.com/twitter-bootstrap-rails/backer/23/avatar.svg"></a>
|
664
|
+
<a href="https://opencollective.com/twitter-bootstrap-rails/backer/24/website" target="_blank"><img src="https://opencollective.com/twitter-bootstrap-rails/backer/24/avatar.svg"></a>
|
665
|
+
<a href="https://opencollective.com/twitter-bootstrap-rails/backer/25/website" target="_blank"><img src="https://opencollective.com/twitter-bootstrap-rails/backer/25/avatar.svg"></a>
|
666
|
+
<a href="https://opencollective.com/twitter-bootstrap-rails/backer/26/website" target="_blank"><img src="https://opencollective.com/twitter-bootstrap-rails/backer/26/avatar.svg"></a>
|
667
|
+
<a href="https://opencollective.com/twitter-bootstrap-rails/backer/27/website" target="_blank"><img src="https://opencollective.com/twitter-bootstrap-rails/backer/27/avatar.svg"></a>
|
668
|
+
<a href="https://opencollective.com/twitter-bootstrap-rails/backer/28/website" target="_blank"><img src="https://opencollective.com/twitter-bootstrap-rails/backer/28/avatar.svg"></a>
|
669
|
+
<a href="https://opencollective.com/twitter-bootstrap-rails/backer/29/website" target="_blank"><img src="https://opencollective.com/twitter-bootstrap-rails/backer/29/avatar.svg"></a>
|
670
|
+
|
671
|
+
## Sponsors
|
672
|
+
Become a sponsor and get your logo on our README on Github with a link to your site. [[Become a sponsor](https://opencollective.com/twitter-bootstrap-rails#sponsor)]
|
673
|
+
|
674
|
+
<a href="https://opencollective.com/twitter-bootstrap-rails/sponsor/0/website" target="_blank"><img src="https://opencollective.com/twitter-bootstrap-rails/sponsor/0/avatar.svg"></a>
|
675
|
+
<a href="https://opencollective.com/twitter-bootstrap-rails/sponsor/1/website" target="_blank"><img src="https://opencollective.com/twitter-bootstrap-rails/sponsor/1/avatar.svg"></a>
|
676
|
+
<a href="https://opencollective.com/twitter-bootstrap-rails/sponsor/2/website" target="_blank"><img src="https://opencollective.com/twitter-bootstrap-rails/sponsor/2/avatar.svg"></a>
|
677
|
+
<a href="https://opencollective.com/twitter-bootstrap-rails/sponsor/3/website" target="_blank"><img src="https://opencollective.com/twitter-bootstrap-rails/sponsor/3/avatar.svg"></a>
|
678
|
+
<a href="https://opencollective.com/twitter-bootstrap-rails/sponsor/4/website" target="_blank"><img src="https://opencollective.com/twitter-bootstrap-rails/sponsor/4/avatar.svg"></a>
|
679
|
+
<a href="https://opencollective.com/twitter-bootstrap-rails/sponsor/5/website" target="_blank"><img src="https://opencollective.com/twitter-bootstrap-rails/sponsor/5/avatar.svg"></a>
|
680
|
+
<a href="https://opencollective.com/twitter-bootstrap-rails/sponsor/6/website" target="_blank"><img src="https://opencollective.com/twitter-bootstrap-rails/sponsor/6/avatar.svg"></a>
|
681
|
+
<a href="https://opencollective.com/twitter-bootstrap-rails/sponsor/7/website" target="_blank"><img src="https://opencollective.com/twitter-bootstrap-rails/sponsor/7/avatar.svg"></a>
|
682
|
+
<a href="https://opencollective.com/twitter-bootstrap-rails/sponsor/8/website" target="_blank"><img src="https://opencollective.com/twitter-bootstrap-rails/sponsor/8/avatar.svg"></a>
|
683
|
+
<a href="https://opencollective.com/twitter-bootstrap-rails/sponsor/9/website" target="_blank"><img src="https://opencollective.com/twitter-bootstrap-rails/sponsor/9/avatar.svg"></a>
|
684
|
+
<a href="https://opencollective.com/twitter-bootstrap-rails/sponsor/10/website" target="_blank"><img src="https://opencollective.com/twitter-bootstrap-rails/sponsor/10/avatar.svg"></a>
|
685
|
+
<a href="https://opencollective.com/twitter-bootstrap-rails/sponsor/11/website" target="_blank"><img src="https://opencollective.com/twitter-bootstrap-rails/sponsor/11/avatar.svg"></a>
|
686
|
+
<a href="https://opencollective.com/twitter-bootstrap-rails/sponsor/12/website" target="_blank"><img src="https://opencollective.com/twitter-bootstrap-rails/sponsor/12/avatar.svg"></a>
|
687
|
+
<a href="https://opencollective.com/twitter-bootstrap-rails/sponsor/13/website" target="_blank"><img src="https://opencollective.com/twitter-bootstrap-rails/sponsor/13/avatar.svg"></a>
|
688
|
+
<a href="https://opencollective.com/twitter-bootstrap-rails/sponsor/14/website" target="_blank"><img src="https://opencollective.com/twitter-bootstrap-rails/sponsor/14/avatar.svg"></a>
|
689
|
+
<a href="https://opencollective.com/twitter-bootstrap-rails/sponsor/15/website" target="_blank"><img src="https://opencollective.com/twitter-bootstrap-rails/sponsor/15/avatar.svg"></a>
|
690
|
+
<a href="https://opencollective.com/twitter-bootstrap-rails/sponsor/16/website" target="_blank"><img src="https://opencollective.com/twitter-bootstrap-rails/sponsor/16/avatar.svg"></a>
|
691
|
+
<a href="https://opencollective.com/twitter-bootstrap-rails/sponsor/17/website" target="_blank"><img src="https://opencollective.com/twitter-bootstrap-rails/sponsor/17/avatar.svg"></a>
|
692
|
+
<a href="https://opencollective.com/twitter-bootstrap-rails/sponsor/18/website" target="_blank"><img src="https://opencollective.com/twitter-bootstrap-rails/sponsor/18/avatar.svg"></a>
|
693
|
+
<a href="https://opencollective.com/twitter-bootstrap-rails/sponsor/19/website" target="_blank"><img src="https://opencollective.com/twitter-bootstrap-rails/sponsor/19/avatar.svg"></a>
|
694
|
+
<a href="https://opencollective.com/twitter-bootstrap-rails/sponsor/20/website" target="_blank"><img src="https://opencollective.com/twitter-bootstrap-rails/sponsor/20/avatar.svg"></a>
|
695
|
+
<a href="https://opencollective.com/twitter-bootstrap-rails/sponsor/21/website" target="_blank"><img src="https://opencollective.com/twitter-bootstrap-rails/sponsor/21/avatar.svg"></a>
|
696
|
+
<a href="https://opencollective.com/twitter-bootstrap-rails/sponsor/22/website" target="_blank"><img src="https://opencollective.com/twitter-bootstrap-rails/sponsor/22/avatar.svg"></a>
|
697
|
+
<a href="https://opencollective.com/twitter-bootstrap-rails/sponsor/23/website" target="_blank"><img src="https://opencollective.com/twitter-bootstrap-rails/sponsor/23/avatar.svg"></a>
|
698
|
+
<a href="https://opencollective.com/twitter-bootstrap-rails/sponsor/24/website" target="_blank"><img src="https://opencollective.com/twitter-bootstrap-rails/sponsor/24/avatar.svg"></a>
|
699
|
+
<a href="https://opencollective.com/twitter-bootstrap-rails/sponsor/25/website" target="_blank"><img src="https://opencollective.com/twitter-bootstrap-rails/sponsor/25/avatar.svg"></a>
|
700
|
+
<a href="https://opencollective.com/twitter-bootstrap-rails/sponsor/26/website" target="_blank"><img src="https://opencollective.com/twitter-bootstrap-rails/sponsor/26/avatar.svg"></a>
|
701
|
+
<a href="https://opencollective.com/twitter-bootstrap-rails/sponsor/27/website" target="_blank"><img src="https://opencollective.com/twitter-bootstrap-rails/sponsor/27/avatar.svg"></a>
|
702
|
+
<a href="https://opencollective.com/twitter-bootstrap-rails/sponsor/28/website" target="_blank"><img src="https://opencollective.com/twitter-bootstrap-rails/sponsor/28/avatar.svg"></a>
|
703
|
+
<a href="https://opencollective.com/twitter-bootstrap-rails/sponsor/29/website" target="_blank"><img src="https://opencollective.com/twitter-bootstrap-rails/sponsor/29/avatar.svg"></a>
|
657
704
|
|
658
705
|
## License
|
659
|
-
Copyright (c)
|
706
|
+
Copyright (c) 2017 (since 2012) by Seyhun Akyürek
|
660
707
|
|
661
708
|
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
709
|
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
Binary file
|