bh 0.0.8 → 1.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/.gitignore +1 -0
- data/CHANGELOG.md +4 -0
- data/README.md +26 -536
- data/lib/bh/version.rb +1 -1
- data/spec/helpers/form_for_helper_spec.rb +4 -4
- data/spec/helpers/navbar_helper_spec.rb +1 -1
- metadata +2 -3
- data/TODO.md +0 -298
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA1:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: d19ffd1af7584fc65268ba67ae824b0c2f961cbe
|
|
4
|
+
data.tar.gz: dc511c0f04f95149ce54c4ed3bf603cbaa9eb901
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 8e21c514874f252828111769a977e9ddf4fa319b28463a2d13d1e31a6b623ed67ee596ab17a49a7bacf3f1d118a47dba512792281b6a98478fd7685f24fcad14
|
|
7
|
+
data.tar.gz: d7607b91299a8b4bfafc883c78427461a078d4e5526388c135b0a25eaca0ff64de0874c4268360bbdd9e69eec9f5ad80c793c93c715384ebfdcdef88d1097a19
|
data/.gitignore
CHANGED
data/CHANGELOG.md
CHANGED
|
@@ -6,6 +6,10 @@ For more information about changelogs, check
|
|
|
6
6
|
[Keep a Changelog](http://keepachangelog.com) and
|
|
7
7
|
[Vandamme](http://tech-angels.github.io/vandamme).
|
|
8
8
|
|
|
9
|
+
## 1.0.0 - 2014-09-09
|
|
10
|
+
|
|
11
|
+
* No changes
|
|
12
|
+
|
|
9
13
|
## 0.0.8 - 2014-08-25
|
|
10
14
|
|
|
11
15
|
* [FEATURE] Add `button_to` helper
|
data/README.md
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
Bh
|
|
1
|
+
Bh · Bootstrap Helpers
|
|
2
2
|
======================
|
|
3
3
|
|
|
4
4
|
Bh provides a set of helpers that streamlines the use of
|
|
5
|
-
[Bootstrap components](http://getbootstrap.com/components) in
|
|
5
|
+
[Bootstrap components](http://getbootstrap.com/components) in Ruby views.
|
|
6
6
|
|
|
7
7
|
The **full documentation** is available at [rubydoc.info](http://rubydoc.info/github/Fullscreen/bh/master/frames).
|
|
8
8
|
|
|
@@ -41,12 +41,22 @@ The example above can be rewritten with just one line of code:
|
|
|
41
41
|
You can use only the ones you need and even mix-and-match the "standard way"
|
|
42
42
|
of writing Bootstrap components (many HTML lines) with the "Bh way".
|
|
43
43
|
|
|
44
|
+
A comprehensive guide to Bh helpers
|
|
45
|
+
===================================
|
|
46
|
+
|
|
47
|
+
All the helpers available in Bh are detailed on the [Bh homepage](http://fullscreen.github.io/bh):
|
|
48
|
+
|
|
49
|
+
[](http://fullscreen.github.io/bh)
|
|
50
|
+
|
|
51
|
+
Please proceed to [http://fullscreen.github.io/bh](http://fullscreen.github.io/bh) for more details and examples on how to use Bh.
|
|
52
|
+
|
|
53
|
+
|
|
44
54
|
How to install
|
|
45
55
|
==============
|
|
46
56
|
|
|
47
57
|
Bh is meant to be included in Rails apps by adding this line to the Gemfile:
|
|
48
58
|
|
|
49
|
-
gem 'bh', '~> 0.0
|
|
59
|
+
gem 'bh', '~> 1.0.0'
|
|
50
60
|
|
|
51
61
|
Since the gem follows [Semantic Versioning](http://semver.org),
|
|
52
62
|
indicating the full version in your Gemfile (~> *major*.*minor*.*patch*)
|
|
@@ -54,541 +64,22 @@ guarantees that your project won’t occur in any error when you `bundle update`
|
|
|
54
64
|
and a new version of Bh is released.
|
|
55
65
|
|
|
56
66
|
Adding `bh` to your Gemfile is all you need!
|
|
57
|
-
From now on, you will be able to use any
|
|
58
|
-
|
|
59
|
-
AlertHelper
|
|
60
|
-
===========
|
|
61
|
-
|
|
62
|
-
To include [Boostrap alert boxes](http://getbootstrap.com/components/#alerts)
|
|
63
|
-
in your Rails views, you can use the [alert_box](http://rubydoc.info/github/Fullscreen/bh/master/Bh/AlertHelper) helper.
|
|
64
|
-
Here are some examples.
|
|
65
|
-
|
|
66
|
-
Basic alerts
|
|
67
|
-
------------
|
|
68
|
-
|
|
69
|
-
```rhtml
|
|
70
|
-
<%= alert_box 'You accepted the Terms of service.' %>
|
|
71
|
-
```
|
|
72
|
-
|
|
73
|
-
will generate the HTML to render an *info* alert:
|
|
74
|
-
|
|
75
|
-
```html
|
|
76
|
-
<div class="alert alert-info" role="alert">You accepted the Terms of service.</div>
|
|
77
|
-
```
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
Dismissible alerts
|
|
82
|
-
------------------
|
|
83
|
-
|
|
84
|
-
```rhtml
|
|
85
|
-
<%= alert_box 'You accepted the Terms of service.', dismissible: true %>
|
|
86
|
-
```
|
|
87
|
-
|
|
88
|
-
will generate the HTML to render an alert with an `×` to close it:
|
|
89
|
-
|
|
90
|
-
```html
|
|
91
|
-
<div class="alert alert-info" role="alert">
|
|
92
|
-
<button class="close" data-dismiss="alert" type="button">
|
|
93
|
-
<span aria-hidden="true">×</span><span class="sr-only">Close</span>
|
|
94
|
-
</button>
|
|
95
|
-
You accepted the Terms of service.
|
|
96
|
-
</div>
|
|
97
|
-
```
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
Contextual alerts
|
|
102
|
-
-----------------
|
|
103
|
-
|
|
104
|
-
```rhtml
|
|
105
|
-
<%= alert_box 'You accepted the Terms of service.', context: :success %>
|
|
106
|
-
```
|
|
107
|
-
|
|
108
|
-
will generate the HTML to render a *success* alert (green background):
|
|
109
|
-
|
|
110
|
-
```html
|
|
111
|
-
<div class="alert alert-success" role="alert">You accepted the Terms of service.</div>
|
|
112
|
-
```
|
|
113
|
-
|
|
114
|
-
Available contexts are `:success`, `:info` (default), `:warning`, `:danger`.
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
Priority alerts
|
|
119
|
-
---------------
|
|
120
|
-
|
|
121
|
-
Since a common use of alert boxes in Rails applications is to display
|
|
122
|
-
[flash messages](http://api.rubyonrails.org/classes/ActionDispatch/Flash/FlashHash.html),
|
|
123
|
-
the `alert_box` helper accepts the priority of the flash message as an option.
|
|
124
|
-
|
|
125
|
-
```rhtml
|
|
126
|
-
<%= alert_box 'You accepted the Terms of service.', priority: :notice %>
|
|
127
|
-
```
|
|
128
|
-
|
|
129
|
-
will generate the HTML to render a dismissible *success* alert (green background):
|
|
130
|
-
|
|
131
|
-
```html
|
|
132
|
-
<div class="alert alert-success" role="alert">
|
|
133
|
-
<button class="close" data-dismiss="alert" type="button">
|
|
134
|
-
<span aria-hidden="true">×</span><span class="sr-only">Close</span>
|
|
135
|
-
</button>
|
|
136
|
-
You accepted the Terms of service.
|
|
137
|
-
</div>
|
|
138
|
-
```
|
|
139
|
-
|
|
140
|
-
Available priorities are `:alert`, `:notice`.
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
Complex alerts
|
|
145
|
-
--------------
|
|
146
|
-
|
|
147
|
-
```rhtml
|
|
148
|
-
<%= alert_box context: :success, dismissible: true do %>
|
|
149
|
-
<strong>Thanks!</strong> You accepted the <%= link_to 'Terms of service', '/terms' %>.
|
|
150
|
-
<% end %>
|
|
151
|
-
```
|
|
152
|
-
|
|
153
|
-
will generate the HTML to render a dismissible *success* alert that includes
|
|
154
|
-
highlighted text and appropriately styled links:
|
|
155
|
-
|
|
156
|
-
```html
|
|
157
|
-
<div class="alert alert-success" role="alert">
|
|
158
|
-
<button class="close" data-dismiss="alert" type="button">
|
|
159
|
-
<span aria-hidden="true">×</span><span class="sr-only">Close</span>
|
|
160
|
-
</button>
|
|
161
|
-
<strong>Thanks!</strong> You accepted the <a href="/terms" class="alert-link">Terms of service</a>.
|
|
162
|
-
</div>
|
|
163
|
-
```
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
CdnHelper
|
|
168
|
-
=========
|
|
169
|
-
|
|
170
|
-
To load the CSS and JS files of Bootstrap from
|
|
171
|
-
[BootstrapCDN](http://getbootstrap.com/getting-started/#download), you can use
|
|
172
|
-
the [bootstrap_css](http://rubydoc.info/github/Fullscreen/bh/master/Bh/CdnHelper),
|
|
173
|
-
[bootstrap_theme_css](http://rubydoc.info/github/Fullscreen/bh/master/Bh/CdnHelper) and
|
|
174
|
-
[bootstrap_js](http://rubydoc.info/github/Fullscreen/bh/master/Bh/CdnHelper) helpers.
|
|
175
|
-
Here are some examples.
|
|
176
|
-
|
|
177
|
-
Load the latest Bootstrap assets
|
|
178
|
-
--------------------------------
|
|
179
|
-
|
|
180
|
-
```rhtml
|
|
181
|
-
<%= stylesheet_link_tag bootstrap_css, bootstrap_theme_css, :application %>
|
|
182
|
-
<%= javascript_include_tag bootstrap_js, :application %>
|
|
183
|
-
```
|
|
184
|
-
|
|
185
|
-
will generate the HTML to load the latest versions of Bootstrap CSS, Bootstrap
|
|
186
|
-
Theme CSS and Bootstrap JS from MaxCDN, before your application assets:
|
|
187
|
-
|
|
188
|
-
```html
|
|
189
|
-
<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" media="screen" rel="stylesheet" type="text/css" />
|
|
190
|
-
<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css" media="screen" rel="stylesheet" type="text/css" />
|
|
191
|
-
<link href="/assets/application.css" media="screen" rel="stylesheet" type="text/css" />
|
|
192
|
-
|
|
193
|
-
<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js" type="text/javascript"></script>
|
|
194
|
-
<script src="/assets/application.js" type="text/javascript"></script>
|
|
195
|
-
```
|
|
196
|
-
|
|
197
|
-
Load a specific version of a Bootstrap asset
|
|
198
|
-
--------------------------------------------
|
|
199
|
-
|
|
200
|
-
```rhtml
|
|
201
|
-
<%= stylesheet_link_tag bootstrap_css(version: '3.1.0', minified: false, scheme: :http) %>
|
|
202
|
-
```
|
|
203
|
-
|
|
204
|
-
will generate the HTML to load the non-minified 3.1.0 versions of Bootstrap CSS
|
|
205
|
-
over HTTP scheme:
|
|
206
|
-
|
|
207
|
-
```html
|
|
208
|
-
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.css" media="screen" rel="stylesheet" type="text/css" />
|
|
209
|
-
```
|
|
210
|
-
|
|
211
|
-
GlyphiconHelper
|
|
212
|
-
===============
|
|
213
|
-
|
|
214
|
-
To display [glyphicons](http://getbootstrap.com/components/#glyphicons),
|
|
215
|
-
you can use the
|
|
216
|
-
[glyphicon](http://rubydoc.info/github/Fullscreen/bh/master/Bh/GlyphiconHelper) helper.
|
|
217
|
-
Here are some examples.
|
|
218
|
-
|
|
219
|
-
Display the "zoom in" icon
|
|
220
|
-
--------------------------
|
|
221
|
-
|
|
222
|
-
```rhtml
|
|
223
|
-
<%= glyphicon :ok, title: 'Approved' %>
|
|
224
|
-
```
|
|
225
|
-
|
|
226
|
-
will generate the HTML to render an "ok" icon with the "Approved" title:
|
|
227
|
-
|
|
228
|
-
```html
|
|
229
|
-
<span class="glyphicon glyphicon-ok" title="Approved"></span>
|
|
230
|
-
```
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
Available glyphicons are listed in [Boostrap documentation](http://getbootstrap.com/components/#glyphicons).
|
|
235
|
-
|
|
236
|
-
PanelHelper
|
|
237
|
-
===========
|
|
238
|
-
|
|
239
|
-
To include [Boostrap panels](http://getbootstrap.com/components/#panels)
|
|
240
|
-
in your Rails views, you can use the
|
|
241
|
-
[panel](http://rubydoc.info/github/Fullscreen/bh/master/Bh/PanelHelper) helper.
|
|
242
|
-
Here are some examples.
|
|
243
|
-
|
|
244
|
-
Basic panel
|
|
245
|
-
-----------
|
|
246
|
-
|
|
247
|
-
```rhtml
|
|
248
|
-
<%= panel body: 'You accepted the Terms of service.' %>
|
|
249
|
-
```
|
|
250
|
-
|
|
251
|
-
will generate the HTML to render a basic panel:
|
|
252
|
-
|
|
253
|
-
```html
|
|
254
|
-
<div class="panel panel-default">
|
|
255
|
-
<div class="panel-body">You accepted the Terms of service.</div>
|
|
256
|
-
</div>
|
|
257
|
-
```
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
Panel with heading
|
|
261
|
-
------------------
|
|
262
|
-
|
|
263
|
-
```rhtml
|
|
264
|
-
<%= panel body: 'You accepted the Terms of service.', heading: 'Congratulations' %>
|
|
265
|
-
```
|
|
266
|
-
|
|
267
|
-
will generate the HTML to render a panel with a heading:
|
|
268
|
-
|
|
269
|
-
```html
|
|
270
|
-
<div class="panel panel-default">
|
|
271
|
-
<div class="panel-heading">Congratulations</div>
|
|
272
|
-
<div class="panel-body">You accepted the Terms of service.</div>
|
|
273
|
-
</div>
|
|
274
|
-
```
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
Panel with title
|
|
279
|
-
----------------
|
|
280
|
-
|
|
281
|
-
```rhtml
|
|
282
|
-
<%= panel body: 'You accepted the Terms of service.', title: 'Congratulations' %>
|
|
283
|
-
```
|
|
284
|
-
|
|
285
|
-
will generate the HTML to render a panel with a title:
|
|
286
|
-
|
|
287
|
-
```html
|
|
288
|
-
<div class="panel panel-default">
|
|
289
|
-
<div class="panel-heading">
|
|
290
|
-
<h3 class="panel-title">Congratulations</h3>
|
|
291
|
-
</div>
|
|
292
|
-
<div class="panel-body">You accepted the Terms of service.</div>
|
|
293
|
-
</div>
|
|
294
|
-
```
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
Contextual panel
|
|
299
|
-
----------------
|
|
300
|
-
|
|
301
|
-
```rhtml
|
|
302
|
-
<%= panel body: 'You accepted the Terms of service.', title: 'Congratulations', context: :success %>
|
|
303
|
-
```
|
|
304
|
-
|
|
305
|
-
will generate the HTML to render a *success* panel (green background):
|
|
306
|
-
|
|
307
|
-
```html
|
|
308
|
-
<div class="panel panel-success">
|
|
309
|
-
<div class="panel-heading">
|
|
310
|
-
<h3 class="panel-title">Congratulations</h3>
|
|
311
|
-
</div>
|
|
312
|
-
<div class="panel-body">You accepted the Terms of service.</div>
|
|
313
|
-
</div>
|
|
314
|
-
```
|
|
315
|
-
|
|
316
|
-
Available contexts are `:default` (default), `:primary`, `:success`, `:info`,
|
|
317
|
-
`:warning` and `:danger`.
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
Complex panels
|
|
322
|
-
--------------
|
|
323
|
-
|
|
324
|
-
```rhtml
|
|
325
|
-
<%= panel tag: :aside do %>
|
|
326
|
-
<div class='panel-body'>You accepted the Terms of service. <%= glyphicon :ok %></div>
|
|
327
|
-
<div class='panel-footer'><h4>Thanks</h4></div>
|
|
328
|
-
<% end %>
|
|
329
|
-
```
|
|
330
|
-
|
|
331
|
-
will generate the HTML to render an aside panel with HTML body and footer:
|
|
332
|
-
|
|
333
|
-
```html
|
|
334
|
-
<aside class="panel panel-default">
|
|
335
|
-
<div class="panel-body">
|
|
336
|
-
You accepted the Terms of service.
|
|
337
|
-
<span class="glyphicon glyphicon-ok"></span>
|
|
338
|
-
</div>
|
|
339
|
-
<div class="panel-footer"><h4>Thanks</h4></div>
|
|
340
|
-
</aside>
|
|
341
|
-
```
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
PanelRowHelper
|
|
347
|
-
==============
|
|
348
|
-
|
|
349
|
-
To include a row of [Boostrap panels](http://getbootstrap.com/components/#panels)
|
|
350
|
-
in your Rails views, you can use the
|
|
351
|
-
[panel_row](http://rubydoc.info/github/Fullscreen/bh/master/Bh/PanelRowHelper) helper.
|
|
352
|
-
Here are some examples.
|
|
353
|
-
|
|
354
|
-
Basic row of panels
|
|
355
|
-
-------------------
|
|
356
|
-
|
|
357
|
-
```rhtml
|
|
358
|
-
<%= panel_row column_class: 'col-sm-4' do %>
|
|
359
|
-
<%= panel body: 'Panel #1' %>
|
|
360
|
-
<%= panel body: 'Panel #2' %>
|
|
361
|
-
<%= panel body: 'Panel #3' %>
|
|
362
|
-
<% end %>
|
|
363
|
-
```
|
|
364
|
-
|
|
365
|
-
will generate the HTML to render a row of three basic panels:
|
|
366
|
-
|
|
367
|
-
```html
|
|
368
|
-
<div class="row">
|
|
369
|
-
<div class="col-sm-4">
|
|
370
|
-
<div class="panel panel-default"><div class="panel-body">Panel #1</div></div>
|
|
371
|
-
</div>
|
|
372
|
-
<div class="col-sm-4">
|
|
373
|
-
<div class="panel panel-default"><div class="panel-body">Panel #2</div></div>
|
|
374
|
-
</div>
|
|
375
|
-
<div class="col-sm-4">
|
|
376
|
-
<div class="panel panel-default"><div class="panel-body">Panel #3</div></div>
|
|
377
|
-
</div>
|
|
378
|
-
</div>
|
|
379
|
-
```
|
|
380
|
-
|
|
381
|
-
|
|
382
|
-
|
|
383
|
-
Complex row of panels
|
|
384
|
-
---------------------
|
|
385
|
-
|
|
386
|
-
```rhtml
|
|
387
|
-
<%= panel_row column_class: 'col-sm-4' do %>
|
|
388
|
-
<%= panel title: 'User', context: :info do %>
|
|
389
|
-
<div class='panel-body'><%= glyphicon :user %> John Smith</div>
|
|
390
|
-
<% end %>
|
|
391
|
-
<%= panel title: 'Phone' do %>
|
|
392
|
-
<div class='panel-body'><%= glyphicon :earphone %> 323-555-5555</div>
|
|
393
|
-
<% end %>
|
|
394
|
-
<%= panel title: 'City' do %>
|
|
395
|
-
<div class='panel-body'><%= glyphicon :record %> Los Angeles, CA</div>
|
|
396
|
-
<% end %>
|
|
397
|
-
<% end %>
|
|
398
|
-
```
|
|
399
|
-
|
|
400
|
-
will generate the HTML to render a row of three panels with title and HTML body:
|
|
401
|
-
|
|
402
|
-
```html
|
|
403
|
-
<div class="row">
|
|
404
|
-
<div class="col-sm-4"><div class="panel panel-info">
|
|
405
|
-
<div class="panel-heading"><h3 class="panel-title">User</h3></div>
|
|
406
|
-
<div class="panel-body"><span class="glyphicon glyphicon-user"></span> John Smith</div>
|
|
407
|
-
</div></div>
|
|
408
|
-
<div class="col-sm-4"><div class="panel panel-default">
|
|
409
|
-
<div class="panel-heading"><h3 class="panel-title">Phone</h3></div>
|
|
410
|
-
<div class="panel-body"><span class="glyphicon glyphicon-earphone"></span> 323-555-5555</div>
|
|
411
|
-
</div></div>
|
|
412
|
-
<div class="col-sm-4"><div class="panel panel-default">
|
|
413
|
-
<div class="panel-heading"><h3 class="panel-title">City</h3></div>
|
|
414
|
-
<div class="panel-body"><span class="glyphicon glyphicon-record"></span> Los Angeles, CA</div>
|
|
415
|
-
</div></div>
|
|
416
|
-
</div>
|
|
417
|
-
```
|
|
418
|
-
|
|
419
|
-
|
|
420
|
-
|
|
421
|
-
ModalHelper
|
|
422
|
-
===========
|
|
67
|
+
From now on, you will be able to use any Bh helper in your ERB views.
|
|
423
68
|
|
|
424
|
-
|
|
425
|
-
in your Rails views, you can use the
|
|
426
|
-
[modal](http://rubydoc.info/github/Fullscreen/bh/master/Bh/ModalHelper) helper.
|
|
427
|
-
Here are some examples.
|
|
428
|
-
|
|
429
|
-
Basic modal
|
|
430
|
-
-----------
|
|
431
|
-
|
|
432
|
-
```rhtml
|
|
433
|
-
<%= modal title: 'Terms of service', body: 'Do what you want!' %>
|
|
434
|
-
```
|
|
435
|
-
|
|
436
|
-
will generate the HTML to render a button that toggles a model when clicked:
|
|
437
|
-
|
|
438
|
-
```html
|
|
439
|
-
<button class="btn btn-default" data-toggle="modal" data-target="#modal-8684506463">
|
|
440
|
-
Terms of service
|
|
441
|
-
</button>
|
|
442
|
-
<div class="modal fade" id="modal-8684506463" tabindex="-1" role="dialog" aria-labelledby="label-modal-8684506463" aria-hidden="true" style="display: none;">
|
|
443
|
-
<div class="modal-dialog">
|
|
444
|
-
<div class="modal-content">
|
|
445
|
-
<div class="modal-header">
|
|
446
|
-
<button type="button" class="close" data-dismiss="modal">
|
|
447
|
-
<span aria-hidden="true">×</span><span class="sr-only">Close</span>
|
|
448
|
-
</button>
|
|
449
|
-
<h4 class="modal-title" id="label-modal-8684506463">Terms of service</h4>
|
|
450
|
-
</div>
|
|
451
|
-
<div class="modal-body">Do what you want!</div>
|
|
452
|
-
</div>
|
|
453
|
-
</div>
|
|
454
|
-
</div>
|
|
455
|
-
```
|
|
456
|
-
|
|
457
|
-
|
|
458
|
-
|
|
459
|
-
Complex modal
|
|
460
|
-
-------------
|
|
461
|
-
|
|
462
|
-
```rhtml
|
|
463
|
-
<%= modal title: 'Terms of service', size: :small, button: {caption: 'Continue', size: :large, context: :info} do %>
|
|
464
|
-
Please accept the Terms of service.
|
|
465
|
-
<div class="modal-footer"><button type="button" class="btn btn-primary">Accept</button></div>
|
|
466
|
-
<% end %>
|
|
467
|
-
```
|
|
468
|
-
|
|
469
|
-
will generate the HTML to render a large, *info* button (blue background) with
|
|
470
|
-
the caption "Continue" that toggles a small modal with a title and HTML content:
|
|
471
|
-
|
|
472
|
-
```html
|
|
473
|
-
<button class="btn btn-info btn-lg" data-toggle="modal" data-target="#modal-8022670096">
|
|
474
|
-
Continue
|
|
475
|
-
</button>
|
|
476
|
-
<div class="modal fade in" id="modal-8022670096" tabindex="-1" role="dialog" aria-labelledby="label-modal-8022670096" aria-hidden="false" style="display: block;">
|
|
477
|
-
<div class="modal-dialog modal-sm">
|
|
478
|
-
<div class="modal-content">
|
|
479
|
-
<div class="modal-header">
|
|
480
|
-
<button type="button" class="close" data-dismiss="modal">
|
|
481
|
-
<span aria-hidden="true">×</span><span class="sr-only">Close</span>
|
|
482
|
-
</button>
|
|
483
|
-
<h4 class="modal-title" id="label-modal-8022670096">Terms of service</h4>
|
|
484
|
-
</div>
|
|
485
|
-
Please accept the Terms of service.
|
|
486
|
-
<div class="modal-footer"><button type="button" class="btn btn-primary">Accept</button></div>
|
|
487
|
-
</div>
|
|
488
|
-
</div>
|
|
489
|
-
</div>
|
|
490
|
-
```
|
|
491
|
-
|
|
492
|
-
|
|
493
|
-
|
|
494
|
-
FormForHelper
|
|
69
|
+
How to update
|
|
495
70
|
=============
|
|
496
71
|
|
|
497
|
-
|
|
498
|
-
|
|
499
|
-
|
|
500
|
-
helper.
|
|
501
|
-
|
|
502
|
-
By default, Bh does not override the `form_for` method provided by [ActionView](http://api.rubyonrails.org/classes/ActionView/Helpers/FormHelper.html#method-i-form_for).
|
|
503
|
-
To apply Bootstrap classes and attributes, you **must** set the `:layout` option to
|
|
504
|
-
|
|
505
|
-
* `:basic`, in order to get a [Basic form](http://getbootstrap.com/css/#forms-example)
|
|
506
|
-
* `:horizontal`, in order to get a [Horizontal form](http://getbootstrap.com/css/#forms-horizontal)
|
|
507
|
-
* `:inline`, in order to get an [Inline form](http://getbootstrap.com/css/#forms-inline)
|
|
508
|
-
|
|
509
|
-
Here is how a form with a text field and a submit button looks like with each layout:
|
|
510
|
-
|
|
511
|
-
```rhtml
|
|
512
|
-
<%= form_for @user, layout: :basic do |f| %>
|
|
513
|
-
<%= f.text_field :name %>
|
|
514
|
-
<%= f.submit %>
|
|
515
|
-
<% end %>
|
|
516
|
-
```
|
|
517
|
-
|
|
518
|
-
|
|
519
|
-
|
|
72
|
+
Whenever a new version is released, the [CHANGELOG file](https://github.com/claudiob/bh/blob/master/CHANGELOG.md)
|
|
73
|
+
will include a description of what features have changed and how to upgrade
|
|
74
|
+
your code, if necessary.
|
|
520
75
|
|
|
521
|
-
|
|
522
|
-
<%= form_for @user, layout: :horizontal do |f| %>
|
|
523
|
-
<%= f.text_field :name %>
|
|
524
|
-
<%= f.submit %>
|
|
525
|
-
<% end %>
|
|
526
|
-
```
|
|
527
|
-
|
|
528
|
-
|
|
529
|
-
|
|
530
|
-
```rhtml
|
|
531
|
-
<%= form_for @user, layout: :inline do |f| %>
|
|
532
|
-
<%= f.text_field :name %>
|
|
533
|
-
<%= f.submit %>
|
|
534
|
-
<% end %>
|
|
535
|
-
```
|
|
536
|
-
|
|
537
|
-
|
|
538
|
-
|
|
539
|
-
|
|
540
|
-
NavHelper
|
|
541
|
-
===========
|
|
542
|
-
|
|
543
|
-
To include [Boostrap navs](http://getbootstrap.com/components/#nav)
|
|
544
|
-
in your Rails views, you can use the
|
|
545
|
-
[nav](http://rubydoc.info/github/Fullscreen/bh/master/Bh/NavHelper) helper.
|
|
546
|
-
Here are some examples.
|
|
547
|
-
|
|
548
|
-
Justified tabs nav
|
|
549
|
-
------------------
|
|
550
|
-
|
|
551
|
-
```rhtml
|
|
552
|
-
<%= nav layout: :justified do %>
|
|
553
|
-
<%= link_to 'Home', root_path %>
|
|
554
|
-
<%= link_to 'Profile', profile_path %>
|
|
555
|
-
<% end %>
|
|
556
|
-
```
|
|
557
|
-
|
|
558
|
-
will generate the HTML to render a nav with two links (wrapped in the
|
|
559
|
-
appropriate list items, as specified by Bootstrap documentation):
|
|
560
|
-
|
|
561
|
-
```html
|
|
562
|
-
<ul class="nav nav-tabs nav-justified" role="tablist">
|
|
563
|
-
<li class="active"><a href="/">Home</a></li>
|
|
564
|
-
<li><a href="/profile">Profile</a></li>
|
|
565
|
-
</ul>
|
|
566
|
-
```
|
|
567
|
-
|
|
568
|
-
|
|
569
|
-
|
|
570
|
-
Stacked pills nav
|
|
571
|
-
-----------------
|
|
572
|
-
|
|
573
|
-
```rhtml
|
|
574
|
-
<%= nav as: :pills, layout: :stacked do %>
|
|
575
|
-
<%= link_to 'Home', root_path %>
|
|
576
|
-
<%= link_to 'Profile', profile_path %>
|
|
577
|
-
<% end %>
|
|
578
|
-
|
|
579
|
-
```
|
|
580
|
-
|
|
581
|
-
will generate the HTML to render a stacked *pills* nav:
|
|
582
|
-
|
|
583
|
-
```html
|
|
584
|
-
<ul class="nav nav-pills nav-stacked" role="tablist">
|
|
585
|
-
<li class="active"><a href="/">Home</a></li>
|
|
586
|
-
<li><a href="/profile">Profile</a></li>
|
|
587
|
-
</ul>
|
|
588
|
-
```
|
|
76
|
+
The full [history of Bh versions](https://gemnasium.com/gems/bh/versions) is also available.
|
|
589
77
|
|
|
590
|
-
|
|
78
|
+
To stay updated with the latest releases, to receive code examples,
|
|
79
|
+
implementation details and announcements, please consider subscribing to the
|
|
80
|
+
[Bh mailing list](http://eepurl.com/2Hwfb):
|
|
591
81
|
|
|
82
|
+
[](http://eepurl.com/2Hwfb)
|
|
592
83
|
|
|
593
84
|
How to release new versions
|
|
594
85
|
===========================
|
|
@@ -602,8 +93,8 @@ document the changes in CHANGELOG.md and README.md, bump the version, then run
|
|
|
602
93
|
rake release
|
|
603
94
|
|
|
604
95
|
Remember that the bh gem follows [Semantic Versioning](http://semver.org).
|
|
605
|
-
Any new release that is fully backward-compatible should bump the *patch* version (
|
|
606
|
-
Any new version that breaks compatibility should bump the *minor* version (
|
|
96
|
+
Any new release that is fully backward-compatible should bump the *patch* version (1.0.x).
|
|
97
|
+
Any new version that breaks compatibility should bump the *minor* version (1.x.0)
|
|
607
98
|
|
|
608
99
|
How to contribute
|
|
609
100
|
=================
|
|
@@ -612,8 +103,7 @@ Bh needs your support!
|
|
|
612
103
|
|
|
613
104
|
If you find that a method is missing, fork the project, add the missing code,
|
|
614
105
|
write the appropriate tests, then submit a pull request, and it will gladly
|
|
615
|
-
be merged!
|
|
616
|
-
[TODO](https://github.com/Fullscreen/bh/blob/master/TODO.md).
|
|
106
|
+
be merged!
|
|
617
107
|
|
|
618
108
|
To run the tests, simply type `rspec` on the command line.
|
|
619
109
|
|
data/lib/bh/version.rb
CHANGED
|
@@ -10,7 +10,7 @@ describe 'form_for' do
|
|
|
10
10
|
describe 'without a :layout option' do
|
|
11
11
|
let(:options) { {} }
|
|
12
12
|
|
|
13
|
-
specify 'does not apply
|
|
13
|
+
specify 'does not apply Bootstrap attributes to the form' do
|
|
14
14
|
expect(form).not_to include 'role="form"'
|
|
15
15
|
end
|
|
16
16
|
end
|
|
@@ -18,7 +18,7 @@ describe 'form_for' do
|
|
|
18
18
|
describe 'with layout: :horizontal' do
|
|
19
19
|
let(:options) { {layout: :horizontal} }
|
|
20
20
|
|
|
21
|
-
specify 'applies
|
|
21
|
+
specify 'applies Bootstrap attributes of an horizontal form' do
|
|
22
22
|
expect(form).to include 'role="form"'
|
|
23
23
|
expect(form).to include 'class="form-horizontal"'
|
|
24
24
|
end
|
|
@@ -27,7 +27,7 @@ describe 'form_for' do
|
|
|
27
27
|
describe 'with layout: :inline' do
|
|
28
28
|
let(:options) { {layout: :inline} }
|
|
29
29
|
|
|
30
|
-
specify 'applies
|
|
30
|
+
specify 'applies Bootstrap attributes of an inline form' do
|
|
31
31
|
expect(form).to include 'role="form"'
|
|
32
32
|
expect(form).to include 'class="form-inline"'
|
|
33
33
|
end
|
|
@@ -36,7 +36,7 @@ describe 'form_for' do
|
|
|
36
36
|
describe 'with any other value for :layout' do
|
|
37
37
|
let(:options) { {layout: :basic} }
|
|
38
38
|
|
|
39
|
-
specify 'applies
|
|
39
|
+
specify 'applies Bootstrap attributes of a basic form' do
|
|
40
40
|
expect(form).to include 'role="form"'
|
|
41
41
|
end
|
|
42
42
|
end
|
|
@@ -12,7 +12,7 @@ describe 'navbar' do
|
|
|
12
12
|
let(:block) { Proc.new {} }
|
|
13
13
|
let(:options) { {} }
|
|
14
14
|
|
|
15
|
-
specify 'applies
|
|
15
|
+
specify 'applies Bootstrap attributes to the navbar' do
|
|
16
16
|
expect(html).to match %r{<nav.+? role="navigation">}
|
|
17
17
|
end
|
|
18
18
|
|
metadata
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: bh
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 0.0
|
|
4
|
+
version: 1.0.0
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- Claudio Baccigalupo
|
|
8
8
|
autorequire:
|
|
9
9
|
bindir: bin
|
|
10
10
|
cert_chain: []
|
|
11
|
-
date: 2014-
|
|
11
|
+
date: 2014-09-09 00:00:00.000000000 Z
|
|
12
12
|
dependencies:
|
|
13
13
|
- !ruby/object:Gem::Dependency
|
|
14
14
|
name: activesupport
|
|
@@ -137,7 +137,6 @@ files:
|
|
|
137
137
|
- MIT-LICENSE
|
|
138
138
|
- README.md
|
|
139
139
|
- Rakefile
|
|
140
|
-
- TODO.md
|
|
141
140
|
- bh.gemspec
|
|
142
141
|
- gemfiles/Gemfile.rails-3.x
|
|
143
142
|
- gemfiles/Gemfile.rails-4.x
|
data/TODO.md
DELETED
|
@@ -1,298 +0,0 @@
|
|
|
1
|
-
|
|
2
|
-
Modals
|
|
3
|
-
======
|
|
4
|
-
|
|
5
|
-
Use the `modal` helper to insert a button that will toggle any type of
|
|
6
|
-
[modal](http://getbootstrap.com/javascript/#modals) provided by Bootstrap.
|
|
7
|
-
|
|
8
|
-
Basic modals
|
|
9
|
-
------------
|
|
10
|
-
|
|
11
|
-
```erb
|
|
12
|
-
<%= modal 'Click to toggle a modal', 'I am the content of the modal' %>
|
|
13
|
-
```
|
|
14
|
-
|
|
15
|
-
will generate the HTML to render a button that, when clicked, will toggle
|
|
16
|
-
a modal with some simple text:
|
|
17
|
-
|
|
18
|
-
```html
|
|
19
|
-
<button class="btn btn-primary" data-toggle="modal" data-target="#myModal">
|
|
20
|
-
Click to toggle a modal
|
|
21
|
-
</button>
|
|
22
|
-
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
|
|
23
|
-
<div class="modal-dialog">
|
|
24
|
-
<div class="modal-content">
|
|
25
|
-
<div class="modal-body">
|
|
26
|
-
I am the content of the modal
|
|
27
|
-
</div>
|
|
28
|
-
</div>
|
|
29
|
-
</div>
|
|
30
|
-
</div>
|
|
31
|
-
```
|
|
32
|
-
|
|
33
|
-
Complex modals
|
|
34
|
-
--------------
|
|
35
|
-
|
|
36
|
-
```erb
|
|
37
|
-
<%= modal 'Delete account', title: 'Confirm your action', dismissible: true, context: :danger, button_class: 'btn-sm', modal_class: 'modal-sm' do %>
|
|
38
|
-
You are about to delete your account. Would you like to proceed?
|
|
39
|
-
<%= footer do %>
|
|
40
|
-
<button class="btn btn-danger">Yes, delete my account</button>
|
|
41
|
-
<% end %>
|
|
42
|
-
<% end %>
|
|
43
|
-
|
|
44
|
-
will generate the HTML to render a small "danger" (red) button that, when
|
|
45
|
-
clicked, will toggle a small, dismissible modal with a title, some text, and a
|
|
46
|
-
footer with a call-to-action:
|
|
47
|
-
|
|
48
|
-
```html
|
|
49
|
-
<button class="btn btn-danger btn-sm" data-toggle="modal" data-target="#myModal">
|
|
50
|
-
Delete account
|
|
51
|
-
</button>
|
|
52
|
-
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
|
|
53
|
-
<div class="modal-dialog modal-sm">
|
|
54
|
-
<div class="modal-content">
|
|
55
|
-
<div class="modal-header">
|
|
56
|
-
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
|
|
57
|
-
<h4 class="modal-title" id="mySmallModalLabel">Confirm your action</h4>
|
|
58
|
-
</div>
|
|
59
|
-
<div class="modal-body">
|
|
60
|
-
You are about to delete your account. Would you like to proceed?
|
|
61
|
-
</div>
|
|
62
|
-
<div class="modal-footer">
|
|
63
|
-
<button class="btn btn-danger">Yes, delete my account</button>
|
|
64
|
-
</div>
|
|
65
|
-
</div>
|
|
66
|
-
</div>
|
|
67
|
-
</div>
|
|
68
|
-
```
|
|
69
|
-
|
|
70
|
-
Panels
|
|
71
|
-
======
|
|
72
|
-
|
|
73
|
-
Use the `panel` helper to insert any type of
|
|
74
|
-
[panel](http://getbootstrap.com/components/#panels) provided by Bootstrap.
|
|
75
|
-
|
|
76
|
-
Basic panels
|
|
77
|
-
------------
|
|
78
|
-
|
|
79
|
-
```erb
|
|
80
|
-
<%= panel 'You have the right to remain silent...' %>
|
|
81
|
-
```
|
|
82
|
-
|
|
83
|
-
will generate the HTML to render a basic panel:
|
|
84
|
-
|
|
85
|
-
```html
|
|
86
|
-
<div class="panel panel-default">
|
|
87
|
-
<div class="panel-body">
|
|
88
|
-
You have the right to remain silent...
|
|
89
|
-
</div>
|
|
90
|
-
</div>
|
|
91
|
-
```
|
|
92
|
-
|
|
93
|
-
Panels with title
|
|
94
|
-
-----------------
|
|
95
|
-
|
|
96
|
-
```erb
|
|
97
|
-
<%= panel 'You have the right to remain silent...', title: 'Your rights' %>
|
|
98
|
-
```
|
|
99
|
-
|
|
100
|
-
will generate the HTML to render a panel with a simple title header:
|
|
101
|
-
|
|
102
|
-
```html
|
|
103
|
-
<div class="panel panel-default">
|
|
104
|
-
<div class="panel-heading">
|
|
105
|
-
<h2 class="panel-title">Your rights</h2>
|
|
106
|
-
</div>
|
|
107
|
-
<div class="panel-body">
|
|
108
|
-
You have the right to remain silent...
|
|
109
|
-
</div>
|
|
110
|
-
</div>
|
|
111
|
-
```
|
|
112
|
-
|
|
113
|
-
Body and title can be passed as blocks if they are more than plain text:
|
|
114
|
-
|
|
115
|
-
```erb
|
|
116
|
-
<%= panel do %>
|
|
117
|
-
<strong>Hey!</strong> You have the right to remain silent...
|
|
118
|
-
<%= title tag: :h3, do %>
|
|
119
|
-
<strong>Your rights</strong> (from our <%= link_to '/terms', 'Terms of service' %>)
|
|
120
|
-
<% end %>
|
|
121
|
-
<% end %>
|
|
122
|
-
```
|
|
123
|
-
|
|
124
|
-
will generate
|
|
125
|
-
|
|
126
|
-
```html
|
|
127
|
-
<div class="panel panel-info">
|
|
128
|
-
<div class="panel-heading">
|
|
129
|
-
<h3 class="panel-title">
|
|
130
|
-
<strong>Your rights</strong> (from our <a href="/terms">Terms of service</a>)
|
|
131
|
-
</h2>
|
|
132
|
-
</div>
|
|
133
|
-
<div class="panel-body">
|
|
134
|
-
<strong>Hey!</strong> You have the right to remain silent...
|
|
135
|
-
</div>
|
|
136
|
-
</div>
|
|
137
|
-
```
|
|
138
|
-
|
|
139
|
-
Contextual panels
|
|
140
|
-
-----------------
|
|
141
|
-
|
|
142
|
-
```erb
|
|
143
|
-
<%= panel 'You have the right to remain silent...', title: 'Your rights', context: :warning %>
|
|
144
|
-
```
|
|
145
|
-
|
|
146
|
-
will generate the HTML to render a "warning" (orange border) panel:
|
|
147
|
-
|
|
148
|
-
```html
|
|
149
|
-
<div class="panel panel-warning">
|
|
150
|
-
<div class="panel-heading">
|
|
151
|
-
<h2 class="panel-title">
|
|
152
|
-
Your rights
|
|
153
|
-
</h2>
|
|
154
|
-
</div>
|
|
155
|
-
<div class="panel-body">
|
|
156
|
-
You have the right to remain silent...
|
|
157
|
-
</div>
|
|
158
|
-
</div>
|
|
159
|
-
```
|
|
160
|
-
|
|
161
|
-
Panels with footer
|
|
162
|
-
------------------
|
|
163
|
-
|
|
164
|
-
```erb
|
|
165
|
-
<%= panel do %>
|
|
166
|
-
You have the right to remain silent...
|
|
167
|
-
<%= footer do %>
|
|
168
|
-
<button class="btn btn-primary">Accept</button>
|
|
169
|
-
<% end %>
|
|
170
|
-
<% end %>
|
|
171
|
-
```
|
|
172
|
-
|
|
173
|
-
will generate the HTML to render a panel with a button in the footer:
|
|
174
|
-
|
|
175
|
-
```html
|
|
176
|
-
<div class="panel panel-default">
|
|
177
|
-
<div class="panel-body">
|
|
178
|
-
You have the right to remain silent...
|
|
179
|
-
</div>
|
|
180
|
-
<div class="panel-footer">
|
|
181
|
-
<button class="btn btn-primary">Accept</button>
|
|
182
|
-
</div>
|
|
183
|
-
</div>
|
|
184
|
-
```
|
|
185
|
-
|
|
186
|
-
<!--
|
|
187
|
-
TODO
|
|
188
|
-
Both panel and modal should accept a title to override the header, or a header,
|
|
189
|
-
or none of them and then they should not have the header component at all.
|
|
190
|
-
For the size, though, they are different.
|
|
191
|
-
-->
|
|
192
|
-
|
|
193
|
-
Navbar
|
|
194
|
-
======
|
|
195
|
-
|
|
196
|
-
Basic navbar
|
|
197
|
-
------------
|
|
198
|
-
|
|
199
|
-
```erb
|
|
200
|
-
<%= navbar do %>
|
|
201
|
-
<%= nav do %>
|
|
202
|
-
<%= link_to 'Posts', '/posts' %>
|
|
203
|
-
<%= link_to 'Users', '/users' %>
|
|
204
|
-
<% end %>
|
|
205
|
-
<% end %>
|
|
206
|
-
```
|
|
207
|
-
|
|
208
|
-
will generate the HTML to render an default navbar with two links:
|
|
209
|
-
|
|
210
|
-
```html
|
|
211
|
-
<nav class="navbar" role="navigation">
|
|
212
|
-
<div class="container">
|
|
213
|
-
<div class="navbar-header">
|
|
214
|
-
<button class="navbar-toggle" data-target="#bs-example-navbar-collapse-1" data-toggle="collapse" type="button">
|
|
215
|
-
<span class="sr-only">Toggle navigation</span>
|
|
216
|
-
<span class="icon-bar"></span>
|
|
217
|
-
<span class="icon-bar"></span>
|
|
218
|
-
<span class="icon-bar"></span>
|
|
219
|
-
</button>
|
|
220
|
-
</div>
|
|
221
|
-
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
|
|
222
|
-
<ul class="nav navbar-nav">
|
|
223
|
-
<li><a href="/posts">Posts</a></li>
|
|
224
|
-
<li><a href="/users">Users</a></li>
|
|
225
|
-
</ul>
|
|
226
|
-
</div>
|
|
227
|
-
</div>
|
|
228
|
-
</nav>
|
|
229
|
-
```
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
Complex navbar
|
|
233
|
-
--------------
|
|
234
|
-
|
|
235
|
-
<%= navbar fixed: :top, inverted: true do %>
|
|
236
|
-
<%= brand do %>
|
|
237
|
-
<%= link_to image_tag('logo.png', alt: 'Company Name'), '/' %>
|
|
238
|
-
<% end %>
|
|
239
|
-
<%= nav do %>
|
|
240
|
-
<%= link_to 'Posts', '/posts' %>
|
|
241
|
-
<%= link_to 'Users', '/users' %>
|
|
242
|
-
<% end %>
|
|
243
|
-
<%= nav align: :right do %>
|
|
244
|
-
<%= link_to 'Log in', '/login' %>
|
|
245
|
-
<% end %>
|
|
246
|
-
<% end %>
|
|
247
|
-
|
|
248
|
-
<!-- NOTE: to align a form to the right, it's not necessary to put it inside
|
|
249
|
-
a "nav align: :right", it's enough to have the form directly, but form_for
|
|
250
|
-
should be smart enough to add the 'navbar-form' class for better alignment -->
|
|
251
|
-
|
|
252
|
-
<style>body {padding-top: 70px}</style>
|
|
253
|
-
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
|
|
254
|
-
<div class="container">
|
|
255
|
-
<div class="navbar-header">
|
|
256
|
-
<button class="navbar-toggle" data-target="#bs-example-navbar-collapse-1" data-toggle="collapse" type="button">
|
|
257
|
-
<span class="sr-only">Toggle navigation</span>
|
|
258
|
-
<span class="icon-bar"></span>
|
|
259
|
-
<span class="icon-bar"></span>
|
|
260
|
-
<span class="icon-bar"></span>
|
|
261
|
-
</button>
|
|
262
|
-
<a href="/" class="navbar-brand">
|
|
263
|
-
<img alt="Company Name" src="/logo.png">
|
|
264
|
-
</a>
|
|
265
|
-
</div>
|
|
266
|
-
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
|
|
267
|
-
<ul class="nav navbar-nav">
|
|
268
|
-
<li class="active"><a href="/posts">Posts</a></li>
|
|
269
|
-
<li><a href="/users">Users</a></li>
|
|
270
|
-
</ul>
|
|
271
|
-
<ul class="nav navbar-nav navbar-right">
|
|
272
|
-
<li><a href="/login">Log in</a></li>
|
|
273
|
-
</ul>
|
|
274
|
-
</div>
|
|
275
|
-
</div>
|
|
276
|
-
</nav>
|
|
277
|
-
|
|
278
|
-
Forms
|
|
279
|
-
=====
|
|
280
|
-
|
|
281
|
-
<%= form_for %>
|
|
282
|
-
<%= button_to %>
|
|
283
|
-
<%= link_to %>
|
|
284
|
-
|
|
285
|
-
Buttons
|
|
286
|
-
=======
|
|
287
|
-
|
|
288
|
-
<!-- TODO: explain that button_to is smarter, same for form_for, link_to
|
|
289
|
-
they add extra-classes based on the context -->
|
|
290
|
-
|
|
291
|
-
Viewport meta tag
|
|
292
|
-
=================
|
|
293
|
-
|
|
294
|
-
<%= viewport_meta_tag %>
|
|
295
|
-
|
|
296
|
-
generates
|
|
297
|
-
|
|
298
|
-
<meta name="viewport" content="width=device-width, initial-scale=1">
|