j1-template 2020.0.10 → 2020.0.11

Sign up to get free protection for your applications and to get access to all the features.
Files changed (53) hide show
  1. checksums.yaml +4 -4
  2. data/_layouts/default.html +18 -8
  3. data/assets/data/ssm.html +5 -5
  4. data/assets/themes/j1/adapter/js/navigator.js +5 -1
  5. data/assets/themes/j1/core/css/theme_extensions.css +0 -9
  6. data/assets/themes/j1/core/css/theme_extensions.min.css +1 -1
  7. data/assets/themes/j1/core/css/uno.css +74 -15
  8. data/assets/themes/j1/core/css/uno.min.css +1 -1
  9. data/assets/themes/j1/core/css/vendor.css +6 -2
  10. data/assets/themes/j1/core/css/vendor.min.css +2 -2
  11. data/assets/themes/j1/core/js/template.js +6 -6
  12. data/assets/themes/j1/core/js/template.js.map +1 -1
  13. data/assets/themes/j1/core/js/template.min.js +1 -1
  14. data/lib/j1/version.rb +1 -1
  15. data/lib/starter_web/Gemfile +1 -1
  16. data/lib/starter_web/_config.yml +1 -1
  17. data/lib/starter_web/_data/modules/navigator_menu.yml +4 -0
  18. data/lib/starter_web/_data/template_settings.yml +22 -2
  19. data/lib/starter_web/package.json +1 -1
  20. data/lib/starter_web/pages/public/learn/{floating_sidebar.adoc → examples/floating_div.adoc} +27 -49
  21. data/lib/starter_web/pages/public/learn/kickstarter/web_in_a_day/000_includes/parts.asciidoc +1 -1
  22. data/lib/starter_web/pages/public/learn/roundtrip/000_bs_tour_api.adoc +2 -2
  23. data/lib/starter_web/pages/public/learn/roundtrip/000_includes/documents/410_table_3_column.asciidoc +1 -1
  24. data/lib/starter_web/pages/public/learn/roundtrip/200_typography.adoc +2 -2
  25. data/lib/starter_web/pages/public/learn/roundtrip/300_icon_fonts.adoc +4 -4
  26. data/lib/starter_web/pages/public/learn/roundtrip/400_asciidoc_extensions.adoc +1 -1
  27. data/lib/starter_web/pages/public/learn/roundtrip/420_responsive_tables_extensions.adoc +19 -19
  28. data/lib/starter_web/pages/public/learn/vtutorials/000_includes/documents/410_table_3_column.asciidoc +1 -1
  29. data/lib/starter_web/pages/public/previewer/000_includes/tables/mdi_icons/100_absolute_sizes.asciidoc +1 -1
  30. data/lib/starter_web/pages/public/previewer/000_includes/tables/mdi_icons/110_bs_grid_sizes.asciidoc +1 -1
  31. data/lib/starter_web/pages/public/previewer/000_includes/tables/mdi_icons/120_relative_sizes.asciidoc +1 -41
  32. data/lib/starter_web/pages/public/previewer/000_includes/tables/mdi_icons/200_rotate.asciidoc +1 -1
  33. data/lib/starter_web/pages/public/previewer/000_includes/tables/mdi_icons/300_flip.asciidoc +1 -1
  34. data/lib/starter_web/pages/public/previewer/000_includes/tables/mdi_icons/400_spin_pulsed.asciidoc +1 -1
  35. data/lib/starter_web/pages/public/previewer/000_includes/tables/mdi_icons/500_bw_color_palette.asciidoc +1 -1
  36. data/lib/starter_web/pages/public/previewer/000_includes/tables/mdi_icons/510_bs_color_palette.asciidoc +1 -1
  37. data/lib/starter_web/pages/public/previewer/000_includes/tables/mdi_icons/600_md_color_palette.asciidoc +1 -1
  38. data/lib/starter_web/pages/public/previewer/000_includes/tables/mdi_icons/601_md_color_palette_indigo.asciidoc +1 -1
  39. data/lib/starter_web/pages/public/previewer/000_includes/tables/mdi_icons/602_md_color_palette_pink.asciidoc +1 -1
  40. data/lib/starter_web/pages/public/previewer/000_includes/tables/twitter_emoji/100_bs_sizes.asciidoc +1 -1
  41. data/lib/starter_web/pages/public/previewer/000_includes/tables/twitter_emoji/100_relative_sizes.asciidoc +1 -1
  42. data/lib/starter_web/pages/public/previewer/000_includes/tables/twitter_emoji/200_rotate.asciidoc +1 -1
  43. data/lib/starter_web/pages/public/previewer/000_includes/tables/twitter_emoji/300_flip.asciidoc +1 -1
  44. data/lib/starter_web/pages/public/previewer/000_includes/tables/twitter_emoji/400_spin_pulsed.asciidoc +1 -1
  45. data/lib/starter_web/pages/public/previewer/bootstrap_theme.adoc +668 -859
  46. data/lib/starter_web/pages/public/previewer/mdb_preview/000_includes/attributes.asciidoc +69 -0
  47. data/lib/starter_web/pages/public/previewer/mdb_preview/000_includes/documents/100_buttons.asciidoc +170 -0
  48. data/lib/starter_web/pages/public/previewer/mdb_preview/mdb_previewer.adoc +52 -0
  49. data/lib/starter_web/pages/public/previewer/mdi_icons_preview.adoc +1 -1
  50. data/lib/starter_web/pages/public/previewer/twitter_emoji_preview.adoc +1 -1
  51. data/lib/starter_web/utilsrv/_defaults/package.json +1 -1
  52. data/lib/starter_web/utilsrv/package.json +1 -1
  53. metadata +6 -3
data/lib/starter_web/pages/public/learn/kickstarter/web_in_a_day/000_includes/parts.asciidoc CHANGED
@@ -61,7 +61,7 @@ Find here is a list of the basic Chocolatey commands used this section.
61
61
  And some more related ones. If you'd like to explore the Chocolatey CLI a bit
62
62
  *more*, give it a try before moving on.
63
63
 
64
- [cols="8a,4", options="header", role="table-responsive, full-width"]
64
+ [cols="8a,4", options="header", role="table-responsive-stacked-lg, full-width"]
65
65
  |===============================================================================
66
66
  |Command |Description
67
67
 
data/lib/starter_web/pages/public/learn/roundtrip/000_bs_tour_api.adoc CHANGED
@@ -116,7 +116,7 @@ var tour = Tour({
116
116
  });
117
117
  ----
118
118
 
119
- [cols="1,1,3a,7a", options="header", width="100%", role="table-responsive"]
119
+ [cols="1,1,3a,7a", options="header", width="100%", role="table-responsive-stacked-lg"]
120
120
  |===============================================================================
121
121
  |Name |Type |Default |Description
122
122
 
@@ -381,7 +381,7 @@ tour.addStep({
381
381
 
382
382
  // |Name |Type |Description |Default
383
383
 
384
- [cols="1,1,3a,7a", options="header", width="100%", role="table-responsive"]
384
+ [cols="1,1,3a,7a", options="header", width="100%", role="table-responsive-stacked-lg"]
385
385
  |===============================================================================
386
386
  |Name |Type |Default |Description
387
387
 
data/lib/starter_web/pages/public/learn/roundtrip/000_includes/documents/410_table_3_column.asciidoc CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  .Selected extended BS modal examples
3
- [cols="6a,3a,3a", options="header", width="100%", role="table-responsive"]
3
+ [cols="6a,3a,3a", options="header", width="100%", role="table-responsive-stacked-lg"]
4
4
  |===============================================================================
5
5
  |Postion |Class | Example
6
6
 
data/lib/starter_web/pages/public/learn/roundtrip/200_typography.adoc CHANGED
@@ -194,7 +194,7 @@ base.
194
194
  That way, five series are available by the five scale factors. See the following
195
195
  table how `r-text` scales.
196
196
 
197
- [cols="3,2,7a", options="header", role="table-responsive mb-5"]
197
+ [cols="3,2,7a", options="header", role="table-responsive-stacked-lg mb-5"]
198
198
  |===============================================================================
199
199
  |Property | Factor |Example text
200
200
 
@@ -287,7 +287,7 @@ The design for the Bootstrap *nav pills* were change into MD Design. As all
287
287
  elements available with J1 Template, the _Meterial Design_ color palette is
288
288
  used. All Bootstrap base classes can be used to colorize:
289
289
 
290
- [cols="5,7a", options="header", role="table-responsive mb-5"]
290
+ [cols="5,7a", options="header", role="table-responsive-stacked-lg mb-5"]
291
291
  |===============================================================================
292
292
  |Property | Example
293
293
 
data/lib/starter_web/pages/public/learn/roundtrip/300_icon_fonts.adoc CHANGED
@@ -89,7 +89,7 @@ project to create an increased icon-set based on _Google_'s official repository
89
89
  and MD style specification.
90
90
 
91
91
  .Material Design Icons
92
- [cols="2a,3a,4a,3a", options="header", width="100%", role="rtable_v table-responsive mt-3"]
92
+ [cols="2a,3a,4a,3a", options="header", width="100%", role="table-responsive-stacked-lg mt-3"]
93
93
  |===============================================================================
94
94
  |Size |Modifier |Markup |Render
95
95
 
@@ -223,7 +223,7 @@ and the MIT License.
223
223
  ====
224
224
 
225
225
  .FontAwesome Icons
226
- [cols="2a,3a,4a,3a", options="header", width="100%", role="rtable_v table-responsive mt-3"]
226
+ [cols="2a,3a,4a,3a", options="header", width="100%", role="table-responsive-stacked-lg mt-3"]
227
227
  |===============================================================================
228
228
  |Size |Modifier |Markup |Render
229
229
 
@@ -366,7 +366,7 @@ Currently, over 40,000 vector icons are available for many different use cases.
366
366
  Find some examples below.
367
367
 
368
368
  .Brand Icons
369
- [cols="2a,3a,4a,3a", options="header", width="100%", role="rtable_v table-responsive mt-3"]
369
+ [cols="2a,3a,4a,3a", options="header", width="100%", role="table-responsive-stacked-lg mt-3"]
370
370
  |===============================================================================
371
371
  |Size |Modifier |Markup |Render
372
372
 
@@ -391,7 +391,7 @@ iconify:logos:atom[5x]
391
391
  |===============================================================================
392
392
 
393
393
  .Medical Icons
394
- [cols="2a,3a,4a,3a", options="header", width="100%", role="rtable_v table-responsive mt-3"]
394
+ [cols="2a,3a,4a,3a", options="header", width="100%", role="table-responsive-stacked-lg mt-3"]
395
395
  |===============================================================================
396
396
  |Size |Modifier |Markup |Render
397
397
 
data/lib/starter_web/pages/public/learn/roundtrip/400_asciidoc_extensions.adoc CHANGED
@@ -453,7 +453,7 @@ All *macro* types available for `lorem:` to be used for blind *text* can be
453
453
  found with the following table below.
454
454
 
455
455
  //.Tabelle
456
- [cols="5,2,5a", options="header", role="table-responsive mb-2"]
456
+ [cols="5,2,5a", options="header", role="table-responsive-stacked-lg mb-2"]
457
457
  |===============================================================================
458
458
  |Macro | Type |Example
459
459
 
data/lib/starter_web/pages/public/learn/roundtrip/420_responsive_tables_extensions.adoc CHANGED
@@ -74,17 +74,17 @@ for tables viewed on desktop *and* mobile devices, three types of responsive
74
74
  tables are implemented:
75
75
 
76
76
  .Types of responsive tables
77
- [cols="2a,4a,6a", options="header", width="100%", role="table-responsive-stacked-lg mt-3"]
77
+ [cols="2a,4a,6a", options="header", width="100%", role="table-responsive-stacked-lg-stacked-lg mt-3"]
78
78
  |===============================================================================
79
79
  |Type |Style |Description
80
80
 
81
81
  |Bootstrap
82
- |`table-responsive`
83
- |The adding the class `table-responsive`, it creates a responsive table based
82
+ |`table-responsive-stacked-lg`
83
+ |The adding the class `table-responsive-stacked-lg`, it creates a responsive table based
84
84
  on BS CSS styles. The table will then *scroll horizontally* on small devices.
85
85
  Making *any* table responsive across all viewports, the additonal class
86
- `table-responsive` is to applied. For specific (Bootstrap) breakpoints, the
87
- classes `table-responsive{-sm\|-md\|-lg\|-xl}` are available to have better
86
+ `table-responsive-stacked-lg` is to applied. For specific (Bootstrap) breakpoints, the
87
+ classes `table-responsive-stacked-lg{-sm\|-md\|-lg\|-xl}` are available to have better
88
88
  control on what viewport sizes tables are being transformed.
89
89
 
90
90
  |R Tables
@@ -99,17 +99,17 @@ J1 is `r-text-300`.
99
99
  |`no-r-text`
100
100
  |If the responsive text feature from J1 is *not* wanted, the CSS class
101
101
  `no-r-text` is to be applied. F (fixed) tables are *not responsive* per
102
- default, but in combination with the CSS class `table-responsive` (Bootstrap),
102
+ default, but in combination with the CSS class `table-responsive-stacked-lg` (Bootstrap),
103
103
  this type behaves like classic Bootstrap responsive table (see above).
104
104
 
105
105
  |S Tables
106
- |`table-responsive-stacked`
107
- |The style `table-responsive-stacked` *rebuilds* a table. The header is set
106
+ |`table-responsive-stacked-lg-stacked`
107
+ |The style `table-responsive-stacked-lg-stacked` *rebuilds* a table. The header is set
108
108
  to *invisible* and all *columns* gets vertically *stacked* as *rows*. For
109
- specific (Bootstrap) breakpoints, the classes `table-responsive-stacked{-sm\|-md\|-lg\|-xl}`
109
+ specific (Bootstrap) breakpoints, the classes `table-responsive-stacked-lg-stacked{-sm\|-md\|-lg\|-xl}`
110
110
  are available to have better control on what viewport sizes tables are
111
- being transformed. The class `table-responsive-stacked` is using the breakpoint
112
- at *768px* what is the same as `table-responsive-stacked-md`
111
+ being transformed. The class `table-responsive-stacked-lg-stacked` is using the breakpoint
112
+ at *768px* what is the same as `table-responsive-stacked-lg-stacked-md`
113
113
 
114
114
  |===============================================================================
115
115
 
@@ -120,7 +120,7 @@ The styles for responsive tables takes effect for *default* if the viewport
120
120
  devices like tablets or mobiles.
121
121
 
122
122
  The styles for F *and* S Tables can be combined with the *Bootstrap* responsive
123
- table approach (`table-responsive`).
123
+ table approach (`table-responsive-stacked-lg`).
124
124
  ====
125
125
 
126
126
  To see the transformation o table in action, resize for desktop devices the
@@ -141,7 +141,7 @@ on smaller viewports. From a specified breakpoint and up, the table will
141
141
  behave normally and do not scroll horizontally.
142
142
 
143
143
  .Bootstrap F Table (fixed font size)
144
- [cols="6a,6a", options="header", width="100%", role="table-responsive-lg no-r-text mt-3"]
144
+ [cols="6a,6a", options="header", width="100%", role="table-responsive-stacked-lg-lg no-r-text mt-3"]
145
145
  |===============================================================================
146
146
  |Variable |Description
147
147
 
@@ -163,7 +163,7 @@ Post's front matter by specifying a new date/time in the format
163
163
 
164
164
 
165
165
  .Bootstrap R Table (responsive text size)
166
- [cols="6a,6a", options="header", width="100%", role="table-responsive-lg mt-3"]
166
+ [cols="6a,6a", options="header", width="100%", role="table-responsive-stacked-lg-lg mt-3"]
167
167
  |===============================================================================
168
168
  |Variable |Description
169
169
 
@@ -184,7 +184,7 @@ Post's front matter by specifying a new date/time in the format
184
184
  |===============================================================================
185
185
 
186
186
  .S table (stacked, responsive text size)
187
- [cols="6a,6a", options="header", width="100%", role="table-responsive-stacked-lg mt-3"]
187
+ [cols="6a,6a", options="header", width="100%", role="table-responsive-stacked-lg-stacked-lg mt-3"]
188
188
  |===============================================================================
189
189
  |Variable |Description
190
190
 
@@ -209,8 +209,8 @@ Post's front matter by specifying a new date/time in the format
209
209
 
210
210
  Responsive Bootstrap tables support tables to be *scrolled horizontally*
211
211
  on smaller viewports. Making any table responsive across all viewports, the
212
- additonal class `table-responsive` is used. For specific (Bootstrap)
213
- breakpoints, the classes `table-responsive{-sm|-md|-lg|-xl}` are available
212
+ additonal class `table-responsive-stacked-lg` is used. For specific (Bootstrap)
213
+ breakpoints, the classes `table-responsive-stacked-lg{-sm|-md|-lg|-xl}` are available
214
214
  to have better control on what viewport sizes table are transformed.
215
215
  From a specified breakpoint and up, the table will behave normally and do
216
216
  not scroll horizontally.
@@ -220,7 +220,7 @@ clips off any content that goes beyond the bottom or top edges of the table.
220
220
  In particular, this can clip off dropdown menus and other third-party widgets.
221
221
 
222
222
  .Bootstrap R Table (fixed text size)
223
- [cols="2,2,2,3,3", options="header", width="100%", role="no-r-text table-responsive-lg mt-3"]
223
+ [cols="2,2,2,3,3", options="header", width="100%", role="no-r-text table-responsive-stacked-lg-lg mt-3"]
224
224
  |===============================================================================
225
225
  |Parameter |Type |Default |Description |Example
226
226
 
@@ -246,7 +246,7 @@ the form `#RRGGBB`
246
246
 
247
247
 
248
248
  .S table (stacked, responsive text size))
249
- [cols="2,2,2,3,3", options="header", width="100%", role="table-responsive-stacked-lg mt-3"]
249
+ [cols="2,2,2,3,3", options="header", width="100%", role="table-responsive-stacked-lg-stacked-lg mt-3"]
250
250
  |===============================================================================
251
251
  |Parameter |Type |Default |Description |Example
252
252
 
data/lib/starter_web/pages/public/learn/vtutorials/000_includes/documents/410_table_3_column.asciidoc CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  .Selected extended BS modal examples
3
- [cols="6a,3a,3a", options="header", width="100%", role="table-responsive"]
3
+ [cols="6a,3a,3a", options="header", width="100%", role="table-responsive-stacked-lg"]
4
4
  |===============================================================================
5
5
  |Postion |Class | Example
6
6
 
data/lib/starter_web/pages/public/previewer/000_includes/tables/mdi_icons/100_absolute_sizes.asciidoc CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  .Fixed (absolute) sizes
3
- [cols="2,1,9a", options="header", role="table-responsive mb-5"]
3
+ [cols="2,1,9a", options="header", role="table-responsive-stacked-lg mb-5"]
4
4
  |===============================================================================
5
5
  |Class |Result |Code
6
6
 
data/lib/starter_web/pages/public/previewer/000_includes/tables/mdi_icons/110_bs_grid_sizes.asciidoc CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  .Bootstrap (BS) grid sizes
3
- [cols="2,1,9a", options="header", role="table-responsive mb-5"]
3
+ [cols="2,1,9a", options="header", role="table-responsive-stacked-lg mb-5"]
4
4
  |===============================================================================
5
5
  |Class |Result |Code
6
6
 
data/lib/starter_web/pages/public/previewer/000_includes/tables/mdi_icons/120_relative_sizes.asciidoc CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  .Relative sizes
3
- [cols="2,1,9a", options="header", role="table-responsive mb-5"]
3
+ [cols="2,^2m,8a", options="header", role="table-responsive-stacked-lg mb-5"]
4
4
  |===============================================================================
5
5
  |Class |Result |Code
6
6
 
@@ -44,44 +44,4 @@
44
44
  <i class="mdi mdi-5x mdi-account"></i>
45
45
  ----
46
46
 
47
- |`mdi-6x`
48
- ^|pass:[<i class="mdi mdi-6x mdi-account"></i>]
49
- |
50
- [source, html]
51
- ----
52
- <i class="mdi mdi-6x mdi-account"></i>
53
- ----
54
-
55
- |`mdi-7x`
56
- ^|pass:[<i class="mdi mdi-7x mdi-account"></i>]
57
- |
58
- [source, html]
59
- ----
60
- <i class="mdi mdi-7x mdi-account"></i>
61
- ----
62
-
63
- |`mdi-8x`
64
- ^|pass:[<i class="mdi mdi-8x mdi-account"></i>]
65
- |
66
- [source, html]
67
- ----
68
- <i class="mdi mdi-1x mdi-account"></i>
69
- ----
70
-
71
- |`mdi-9x`
72
- ^|pass:[<i class="mdi mdi-9x mdi-account"></i>]
73
- |
74
- [source, html]
75
- ----
76
- <i class="mdi mdi-9x mdi-account"></i>
77
- ----
78
-
79
- |`mdi-10x`
80
- ^|pass:[<i class="mdi mdi-10x mdi-account"></i>]
81
- |
82
- [source, html]
83
- ----
84
- <i class="mdi mdi-10x mdi-account"></i>
85
- ----
86
-
87
47
  |===============================================================================
data/lib/starter_web/pages/public/previewer/000_includes/tables/mdi_icons/200_rotate.asciidoc CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  .Rotate icons
3
- [cols="2,1,9a", options="header", role="table-responsive mb-5"]
3
+ [cols="2,1,9a", options="header", role="table-responsive-stacked-lg mb-5"]
4
4
  |===============================================================================
5
5
  |Class |Result |Code
6
6
 
data/lib/starter_web/pages/public/previewer/000_includes/tables/mdi_icons/300_flip.asciidoc CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  .Flip icons
3
- [cols="2,1,9a", options="header", role="table-responsive mb-5"]
3
+ [cols="2,1,9a", options="header", role="table-responsive-stacked-lg mb-5"]
4
4
  |===============================================================================
5
5
  |Class |Result |Code
6
6
 
data/lib/starter_web/pages/public/previewer/000_includes/tables/mdi_icons/400_spin_pulsed.asciidoc CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  .Animate icons
3
- [cols="2,1,9a", options="header", role="table-responsive mb-5"]
3
+ [cols="2,1,9a", options="header", role="table-responsive-stacked-lg mb-5"]
4
4
  |===============================================================================
5
5
  |Class |Result |Code
6
6
 
data/lib/starter_web/pages/public/previewer/000_includes/tables/mdi_icons/500_bw_color_palette.asciidoc CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  .Black and White color palette
3
- [cols="2,1,9a", options="header", role="table-responsive mb-5"]
3
+ [cols="2,1,9a", options="header", role="table-responsive-stacked-lg mb-5"]
4
4
  |===============================================================================
5
5
  |Class |Result |Code
6
6
 
data/lib/starter_web/pages/public/previewer/000_includes/tables/mdi_icons/510_bs_color_palette.asciidoc CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  .Bootstrap (BS) color palette
3
- [cols="2,1,9a", options="header", role="table-responsive mb-5"]
3
+ [cols="2,1,9a", options="header", role="table-responsive-stacked-lg mb-5"]
4
4
  |===============================================================================
5
5
  |Class |Result |Code
6
6
 
data/lib/starter_web/pages/public/previewer/000_includes/tables/mdi_icons/600_md_color_palette.asciidoc CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  .Material Design (MD) color palette
3
- [cols="2,1,9a", options="header", role="table-responsive mb-5"]
3
+ [cols="2,1,9a", options="header", role="table-responsive-stacked-lg mb-5"]
4
4
  |===============================================================================
5
5
  |Class |Result |Code
6
6
 
data/lib/starter_web/pages/public/previewer/000_includes/tables/mdi_icons/601_md_color_palette_indigo.asciidoc CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  .MD colors - Indigo
3
- [cols="2,1,9a", options="header", role="table-responsive mb-5"]
3
+ [cols="2,1,9a", options="header", role="table-responsive-stacked-lg mb-5"]
4
4
  |===============================================================================
5
5
  |Class |Result |Code
6
6
 
data/lib/starter_web/pages/public/previewer/000_includes/tables/mdi_icons/602_md_color_palette_pink.asciidoc CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  .MD colors - Pink
3
- [cols="2,1,9a", options="header", role="table-responsive mb-5"]
3
+ [cols="2,1,9a", options="header", role="table-responsive-stacked-lg mb-5"]
4
4
  |===============================================================================
5
5
  |Class |Result |Code
6
6
 
data/lib/starter_web/pages/public/previewer/000_includes/tables/twitter_emoji/100_bs_sizes.asciidoc CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  .Bootstrap (BS) grid sizes
3
- [cols="2,1,9a", options="header", role="table-responsive mb-5"]
3
+ [cols="2,1,9a", options="header", role="table-responsive-stacked-lg mb-5"]
4
4
  |===============================================================================
5
5
  |Class |Result |Code
6
6
 
data/lib/starter_web/pages/public/previewer/000_includes/tables/twitter_emoji/100_relative_sizes.asciidoc CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  .Relative sizes
3
- [cols="2,1,9a", options="header", role="table-responsive mb-5"]
3
+ [cols="2,1,9a", options="header", role="table-responsive-stacked-lg mb-5"]
4
4
  |===============================================================================
5
5
  |Class |Result |Code
6
6
 
data/lib/starter_web/pages/public/previewer/000_includes/tables/twitter_emoji/200_rotate.asciidoc CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  .Rotate icons
3
- [cols="2,1,9a", options="header", role="table-responsive mb-5"]
3
+ [cols="2,1,9a", options="header", role="table-responsive-stacked-lg mb-5"]
4
4
  |===============================================================================
5
5
  |Class |Result |Code
6
6
 
data/lib/starter_web/pages/public/previewer/000_includes/tables/twitter_emoji/300_flip.asciidoc CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  .Flip icons
3
- [cols="2,1,9a", options="header", role="table-responsive mb-5"]
3
+ [cols="2,1,9a", options="header", role="table-responsive-stacked-lg mb-5"]
4
4
  |===============================================================================
5
5
  |Class |Result |Code
6
6
 
data/lib/starter_web/pages/public/previewer/000_includes/tables/twitter_emoji/400_spin_pulsed.asciidoc CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  .Animate icons
3
- [cols="2,1,9a", options="header", role="table-responsive mb-5"]
3
+ [cols="2,1,9a", options="header", role="table-responsive-stacked-lg mb-5"]
4
4
  |===============================================================================
5
5
  |Class |Result |Code
6
6
 
data/lib/starter_web/pages/public/previewer/bootstrap_theme.adoc CHANGED
@@ -110,101 +110,115 @@ support for the collapse plugin.
110
110
  pass:[<i class="mdi mdi-book-open mdi-24px mdi-md-bg-primary"></i>]
111
111
  Refer to: link:{bs_doc_components_navbar}[Bootstrap Docs, window="_blank"].
112
112
 
113
+ Theming the navbar has never been easier thanks to the combination of
114
+ theming classes and background-color utilities. Choose from `.navbar-light`
115
+ for use with light background colors, or '.navbar-dark' for dark background
116
+ colors. Then, customize with `.bg-*` utilities.
117
+
113
118
  ++++
114
- <!-- Navbar
115
- ============================================================================ -->
116
- <div class="bs-docs-section clearfix">
117
- <div class="row mb-5">
118
- <div class="col-md-12">
119
- <div class="bs-component mb-2">
120
- <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
121
- <a class="navbar-brand" href="#">Navbar</a>
122
- <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor01" aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation">
123
- <span class="navbar-toggler-icon"></span>
124
- </button>
125
- <div class="collapse navbar-collapse" id="navbarColor01">
126
- <ul class="navbar-nav mr-auto">
127
- <li class="nav-item active">
128
- <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
129
- </li>
130
- <li class="nav-item">
131
- <a class="nav-link" href="#">Features</a>
132
- </li>
133
- <li class="nav-item">
134
- <a class="nav-link" href="#">Pricing</a>
135
- </li>
136
- <li class="nav-item">
137
- <a class="nav-link" href="#">About</a>
138
- </li>
139
- </ul>
140
- <form class="form-inline my-2 my-lg-0">
141
- <input class="form-control mr-sm-2" type="text" placeholder="Search">
142
- <button class="btn btn-secondary btn-raised my-2 my-sm-0" type="submit">Search</button>
143
- </form>
144
- </div>
145
- </nav>
146
- </div>
147
- <div class="bs-component mb-2">
148
- <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
149
- <a class="navbar-brand" href="#">Navbar</a>
150
- <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor02" aria-controls="navbarColor02" aria-expanded="false" aria-label="Toggle navigation">
151
- <span class="navbar-toggler-icon"></span>
152
- </button>
153
- <div class="collapse navbar-collapse" id="navbarColor02">
154
- <ul class="navbar-nav mr-auto">
155
- <li class="nav-item active">
156
- <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
157
- </li>
158
- <li class="nav-item">
159
- <a class="nav-link" href="#">Features</a>
160
- </li>
161
- <li class="nav-item">
162
- <a class="nav-link" href="#">Pricing</a>
163
- </li>
164
- <li class="nav-item">
165
- <a class="nav-link" href="#">About</a>
166
- </li>
167
- </ul>
168
- <form class="form-inline my-2 my-lg-0">
169
- <input class="form-control mr-sm-2" type="text" placeholder="Search">
170
- <button class="btn btn-secondary btn-raised my-2 my-sm-0" type="submit">Search</button>
171
- </form>
172
- </div>
173
- </nav>
174
- </div>
175
- <div class="bs-component mb-2">
176
- <nav class="navbar navbar-expand-lg navbar-light bg-light">
177
- <a class="navbar-brand" href="#">Navbar</a>
178
- <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor03" aria-controls="navbarColor03" aria-expanded="false" aria-label="Toggle navigation">
179
- <span class="navbar-toggler-icon"></span>
180
- </button>
181
- <div class="collapse navbar-collapse" id="navbarColor03">
182
- <ul class="navbar-nav mr-auto">
183
- <li class="nav-item active">
184
- <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
185
- </li>
186
- <li class="nav-item">
187
- <a class="nav-link" href="#">Features</a>
188
- </li>
189
- <li class="nav-item">
190
- <a class="nav-link" href="#">Pricing</a>
191
- </li>
192
- <li class="nav-item">
193
- <a class="nav-link" href="#">About</a>
194
- </li>
195
- </ul>
196
- <form class="form-inline my-2 my-lg-0">
197
- <input class="form-control mr-sm-2" type="text" placeholder="Search">
198
- <button class="btn btn-secondary btn-raised my-2 my-sm-0" type="submit">Search</button>
199
- </form>
200
- </div>
201
- </nav>
202
- </div>
119
+ <div class="doc-example">
120
+ <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
121
+ <a class="navbar-brand" href="#">Navbar<div class="ripple-container"></div></a>
122
+ <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor01" aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation">
123
+ <span class="navbar-toggler-icon"></span>
124
+ </button>
125
+
126
+ <div class="collapse navbar-collapse" id="navbarColor01">
127
+ <ul class="navbar-nav mr-auto">
128
+ <li class="nav-item active">
129
+ <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
130
+ </li>
131
+ <li class="nav-item">
132
+ <a class="nav-link" href="#">Features</a>
133
+ </li>
134
+ <li class="nav-item">
135
+ <a class="nav-link" href="#">Pricing</a>
136
+ </li>
137
+ <li class="nav-item">
138
+ <a class="nav-link" href="#">About</a>
139
+ </li>
140
+ </ul>
141
+ <form class="form-inline">
142
+ <span class="bmd-form-group"><input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search"></span>
143
+ <button class="btn btn-outline-info my-2 my-sm-0" type="submit">Search</button>
144
+ </form>
203
145
  </div>
204
- </div>
146
+ </nav>
147
+
148
+ <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
149
+ <a class="navbar-brand" href="#">Navbar</a>
150
+ <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor02" aria-controls="navbarColor02" aria-expanded="false" aria-label="Toggle navigation">
151
+ <span class="navbar-toggler-icon"></span>
152
+ </button>
153
+
154
+ <div class="collapse navbar-collapse" id="navbarColor02">
155
+ <ul class="navbar-nav mr-auto">
156
+ <li class="nav-item active">
157
+ <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
158
+ </li>
159
+ <li class="nav-item">
160
+ <a class="nav-link" href="#">Features</a>
161
+ </li>
162
+ <li class="nav-item">
163
+ <a class="nav-link" href="#">Pricing</a>
164
+ </li>
165
+ <li class="nav-item">
166
+ <a class="nav-link" href="#">About</a>
167
+ </li>
168
+ </ul>
169
+ <form class="form-inline">
170
+ <span class="bmd-form-group"><input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search"></span>
171
+ <button class="btn btn-outline-light my-2 my-sm-0" type="submit">Search</button>
172
+ </form>
173
+ </div>
174
+ </nav>
175
+
176
+ <nav class="navbar navbar-expand-lg navbar-light" style="background-color: #e3f2fd;">
177
+ <a class="navbar-brand" href="#">Navbar</a>
178
+ <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor03" aria-controls="navbarColor03" aria-expanded="false" aria-label="Toggle navigation">
179
+ <span class="navbar-toggler-icon"></span>
180
+ </button>
181
+
182
+ <div class="collapse navbar-collapse" id="navbarColor03">
183
+ <ul class="navbar-nav mr-auto">
184
+ <li class="nav-item active">
185
+ <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
186
+ </li>
187
+ <li class="nav-item">
188
+ <a class="nav-link" href="#">Features</a>
189
+ </li>
190
+ <li class="nav-item">
191
+ <a class="nav-link" href="#">Pricing</a>
192
+ </li>
193
+ <li class="nav-item">
194
+ <a class="nav-link" href="#">About</a>
195
+ </li>
196
+ </ul>
197
+ <form class="form-inline">
198
+ <span class="bmd-form-group"><input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search"></span>
199
+ <button class="btn btn-outline-primary my-2 my-sm-0" type="submit">Search</button>
200
+ </form>
201
+ </div>
202
+ </nav>
205
203
  </div>
206
204
  ++++
207
205
 
206
+ [source, html, role="noclip"]
207
+ ----
208
+ <nav class="navbar navbar-dark bg-dark">
209
+ <!-- Navbar content -->
210
+ </nav>
211
+
212
+ <nav class="navbar navbar-dark bg-primary">
213
+ <!-- Navbar content -->
214
+ </nav>
215
+
216
+ <nav class="navbar navbar-light" style="background-color: #e3f2fd;">
217
+ <!-- Navbar content -->
218
+ </nav>
219
+ ----
220
+
221
+
208
222
  == Buttons
209
223
 
210
224
  Use Bootstrap’s custom button styles for actions in forms, dialogs, and
@@ -215,169 +229,125 @@ with a few extras thrown in for more control.
215
229
  pass:[<i class="mdi mdi-book-open mdi-24px mdi-md-bg-primary"></i>]
216
230
  Refer to: link:{bs_doc_components_buttons}[Bootstrap Docs, window="_blank"].
217
231
 
232
+ === Active buttons
233
+ Buttons will appear pressed (with a darker background, darker border, and
234
+ inset shadow) when active.
235
+ ++++
236
+ <div class="doc-example mb-3">
237
+ <button type="button" class="btn btn-primary btn-raised">Primary</button>
238
+ <button type="button" class="btn btn-secondary btn-raised">Secondary</button>
239
+ <button type="button" class="btn btn-success btn-raised">Success</button>
240
+ <button type="button" class="btn btn-info btn-raised">Info</button>
241
+ <button type="button" class="btn btn-warning btn-raised">Warning</button>
242
+ <button type="button" class="btn btn-danger btn-raised">Danger</button>
243
+ <button type="button" class="btn btn-link btn-raised">Link</button>
244
+ </div>
218
245
  ++++
219
- <!-- Buttons
220
- ============================================================================ -->
221
- <div class="bs-docs-section">
222
- <div class="row mb-4">
223
- <div class="col-md-10">
224
- <p class="bs-component">
225
- <button type="button" class="btn btn-primary btn-raised">Primary</button>
226
- <button type="button" class="btn btn-secondary btn-raised">Secondary</button>
227
- <button type="button" class="btn btn-success btn-raised">Success</button>
228
- <button type="button" class="btn btn-info btn-raised">Info</button>
229
- <button type="button" class="btn btn-warning btn-raised">Warning</button>
230
- <button type="button" class="btn btn-danger btn-raised">Danger</button>
231
- <button type="button" class="btn btn-link btn-raised">Link</button>
232
- </p>
233
- <p class="bs-component">
234
- <button type="button" class="btn btn-primary btn-raised disabled">Primary</button>
235
- <button type="button" class="btn btn-secondary btn-raised disabled">Secondary</button>
236
- <button type="button" class="btn btn-success btn-raised disabled">Success</button>
237
- <button type="button" class="btn btn-info btn-raised disabled">Info</button>
238
- <button type="button" class="btn btn-warning btn-raised disabled">Warning</button>
239
- <button type="button" class="btn btn-danger btn-raised disabled">Danger</button>
240
- <button type="button" class="btn btn-link btn-raised disabled">Link</button>
241
- </p>
242
- <p class="bs-component">
243
- <button type="button" class="btn btn-outline-primary btn-raised">Primary</button>
244
- <button type="button" class="btn btn-outline-secondary btn-raised">Secondary</button>
245
- <button type="button" class="btn btn-outline-success btn-raised">Success</button>
246
- <button type="button" class="btn btn-outline-info btn-raised">Info</button>
247
- <button type="button" class="btn btn-outline-warning btn-raised">Warning</button>
248
- <button type="button" class="btn btn-outline-danger btn-raised">Danger</button>
249
- </p>
250
- <div class="bs-component">
251
- <div class="btn-group" role="group" aria-label="Button group with nested dropdown">
252
- <button type="button" class="btn btn-primary btn-raised">Primary</button>
253
- <div class="btn-group" role="group">
254
- <button id="btnGroupDrop1" type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
255
- <div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
256
- <a class="dropdown-item" href="#">Dropdown link</a>
257
- <a class="dropdown-item" href="#">Dropdown link</a>
258
- </div>
259
- </div>
260
- </div>
261
- <div class="btn-group" role="group" aria-label="Button group with nested dropdown">
262
- <button type="button" class="btn btn-success btn-raised">Success</button>
263
- <div class="btn-group" role="group">
264
- <button id="btnGroupDrop2" type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
265
- <div class="dropdown-menu" aria-labelledby="btnGroupDrop2">
266
- <a class="dropdown-item" href="#">Dropdown link</a>
267
- <a class="dropdown-item" href="#">Dropdown link</a>
268
- </div>
269
- </div>
270
- </div>
271
- <div class="btn-group" role="group" aria-label="Button group with nested dropdown">
272
- <button type="button" class="btn btn-info">Info</button>
273
- <div class="btn-group" role="group">
274
- <button id="btnGroupDrop3" type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
275
- <div class="dropdown-menu" aria-labelledby="btnGroupDrop3">
276
- <a class="dropdown-item" href="#">Dropdown link</a>
277
- <a class="dropdown-item" href="#">Dropdown link</a>
278
- </div>
279
- </div>
280
- </div>
281
- <div class="btn-group" role="group" aria-label="Button group with nested dropdown">
282
- <button type="button" class="btn btn-danger">Danger</button>
283
- <div class="btn-group" role="group">
284
- <button id="btnGroupDrop4" type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
285
- <div class="dropdown-menu" aria-labelledby="btnGroupDrop4">
286
- <a class="dropdown-item" href="#">Dropdown link</a>
287
- <a class="dropdown-item" href="#">Dropdown link</a>
288
- </div>
289
- </div>
290
- </div>
291
- </div>
292
- <div class="bs-component mt-2">
293
- <button type="button" class="btn btn-primary btn-raised btn-lg">Large button</button>
294
- <button type="button" class="btn btn-primary btn-raised">Default button</button>
295
- <button type="button" class="btn btn-primary btn-raised btn-sm">Small button</button>
296
- </div>
297
- </div>
298
- <div class="col-md-12">
299
- <p class="bs-component mt-2">
300
- <button type="button" class="btn btn-primary btn-raised btn-lg btn-block">Block level button</button>
301
- </p>
302
- <div class="bs-component" style="margin-bottom: 15px;">
303
- <div class="btn-group" data-toggle="buttons">
304
- <label class="btn btn-primary btn-raised active">
305
- <input type="checkbox" checked> Checkbox 1
306
- </label>
307
- <label class="btn btn-primary btn-raised">
308
- <input type="checkbox"> Checkbox 2
309
- </label>
310
- <label class="btn btn-primary btn-raised">
311
- <input type="checkbox"> Checkbox 3
312
- </label>
313
- </div>
314
- </div>
315
- <div class="bs-component" style="margin-bottom: 15px;">
316
- <div class="btn-group" data-toggle="buttons">
317
- <label class="btn btn-primary btn-raised active">
318
- <input type="radio" name="options" id="option1" checked> Radio 1
319
- </label>
320
- <label class="btn btn-primary btn-raised">
321
- <input type="radio" name="options" id="option2"> Radio 2
322
- </label>
323
- <label class="btn btn-primary btn-raised">
324
- <input type="radio" name="options" id="option3"> Radio 3
325
- </label>
326
- </div>
327
- </div>
328
246
 
329
- <div class="bs-component">
330
- <div class="btn-group-vertical" role="group" aria-label="Vertical button group">
331
- <button type="button" class="btn btn-primary btn-raised">Button</button>
332
- <button type="button" class="btn btn-primary btn-raised">Button</button>
333
- <button type="button" class="btn btn-primary btn-raised">Button</button>
334
- <button type="button" class="btn btn-primary btn-raised">Button</button>
335
- <button type="button" class="btn btn-primary btn-raised">Button</button>
336
- <button type="button" class="btn btn-primary btn-raised">Button</button>
337
- </div>
338
- </div>
339
- <!--
340
- <div class="bs-component">
341
- <div class="btn-group-vertical" data-toggle="buttons">
342
- <button type="button" class="btn btn-primary btn-raised">Button</button>
343
- <button type="button" class="btn btn-primary btn-raised">Button</button>
344
- <button type="button" class="btn btn-primary btn-raised">Button</button>
345
- <button type="button" class="btn btn-primary btn-raised">Button</button>
346
- <button type="button" class="btn btn-primary btn-raised">Button</button>
347
- <button type="button" class="btn btn-primary btn-raised">Button</button>
348
- </div>
349
- </div>
350
- -->
351
- <div class="bs-component mt-2 mb-2">
352
- <div class="btn-group" role="group" aria-label="Basic example">
353
- <button type="button" class="btn btn-secondary btn-raised">Left</button>
354
- <button type="button" class="btn btn-secondary btn-raised">Middle</button>
355
- <button type="button" class="btn btn-secondary btn-raised">Right</button>
356
- </div>
357
- </div>
358
- <div class="bs-component mt-2 mb-2">
359
- <div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
360
- <div class="btn-group mr-2" role="group" aria-label="First group">
361
- <button type="button" class="btn btn-secondary btn-raised">1</button>
362
- <button type="button" class="btn btn-secondary btn-raised">2</button>
363
- <button type="button" class="btn btn-secondary btn-raised">3</button>
364
- <button type="button" class="btn btn-secondary btn-raised">4</button>
365
- </div>
366
- <div class="btn-group mr-2" role="group" aria-label="Second group">
367
- <button type="button" class="btn btn-secondary btn-raised">5</button>
368
- <button type="button" class="btn btn-secondary btn-raised">6</button>
369
- <button type="button" class="btn btn-secondary btn-raised">7</button>
370
- </div>
371
- <div class="btn-group" role="group" aria-label="Third group">
372
- <button type="button" class="btn btn-secondary btn-raised">8</button>
373
- </div>
374
- </div>
375
- </div>
376
- </div>
247
+ === Disabled buttons
248
+ Buttons look inactive by adding the disabled boolean attribute to any
249
+ <button> element.
250
+ ++++
251
+ <div class="doc-example mb-3">
252
+ <button type="button" class="btn btn-primary btn-raised disabled">Primary</button>
253
+ <button type="button" class="btn btn-secondary btn-raised disabled">Secondary</button>
254
+ <button type="button" class="btn btn-success btn-raised disabled">Success</button>
255
+ <button type="button" class="btn btn-info btn-raised disabled">Info</button>
256
+ <button type="button" class="btn btn-warning btn-raised disabled">Warning</button>
257
+ <button type="button" class="btn btn-danger btn-raised disabled">Danger</button>
258
+ <button type="button" class="btn btn-link btn-raised disabled">Link</button>
259
+ </div>
260
+ ++++
261
+
262
+ === Outline buttons
263
+ In need of a button, but not the hefty background colors they bring? Replace
264
+ the default modifier classes with the `.btn-outline-*` ones to remove all
265
+ background images and colors on any button.
266
+
267
+ ++++
268
+ <div class="doc-example mb-3">
269
+ <button type="button" class="btn btn-outline-primary btn-raised">Primary</button>
270
+ <button type="button" class="btn btn-outline-secondary btn-raised">Secondary</button>
271
+ <button type="button" class="btn btn-outline-success btn-raised">Success</button>
272
+ <button type="button" class="btn btn-outline-info btn-raised">Info</button>
273
+ <button type="button" class="btn btn-outline-warning btn-raised">Warning</button>
274
+ <button type="button" class="btn btn-outline-danger btn-raised">Danger</button>
275
+ </div>
276
+ ++++
277
+
278
+ === Button sizes
279
+
280
+ Beside the default size, small and large buttons are available.
281
+
282
+ ++++
283
+ <div class="doc-example mb-3">
284
+ <button type="button" class="btn btn-primary btn-raised btn-lg">Large button</button>
285
+ <button type="button" class="btn btn-primary btn-raised">Default button</button>
286
+ <button type="button" class="btn btn-primary btn-raised btn-sm">Small button</button>
287
+ </div>
288
+ ++++
289
+
290
+ === Block level button
291
+
292
+ Create block level buttons—those that span the full width of a parent—by
293
+ adding .btn-block.
294
+
295
+ ++++
296
+ <div class="doc-example mb-3">
297
+ <button type="button" class="btn btn-primary btn-lg btn-block btn-raised">Block level button</button>
298
+ <button type="button" class="btn btn-secondary btn-lg btn-block btn-raised">Block level button</button>
299
+ </div>
300
+ ++++
301
+
302
+ === Toggle button
303
+
304
+ ++++
305
+ <div class="doc-example mb-3">
306
+ <button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false" autocomplete="off">
307
+ Single toggle
308
+ </button>
309
+ </div>
310
+ ++++
311
+
312
+ === Checkbox and radio buttons
313
+
314
+ Bootstrap’s .button styles can be applied to other elements, such as
315
+ `<label>`, to provide checkbox or radio style button toggling. The checked
316
+ state for these buttons is only updated via click event on the button.
317
+
318
+ ++++
319
+ <div class="doc-example mb-3">
320
+ <div class="btn-group" data-toggle="buttons">
321
+ <label class="btn btn-primary btn-raised active">
322
+ <input type="checkbox" checked> Checkbox 1
323
+ </label>
324
+ <label class="btn btn-primary btn-raised">
325
+ <input type="checkbox"> Checkbox 2
326
+ </label>
327
+ <label class="btn btn-primary btn-raised">
328
+ <input type="checkbox"> Checkbox 3
329
+ </label>
377
330
  </div>
378
331
  </div>
379
332
  ++++
380
333
 
334
+ ++++
335
+ <div class="doc-example mb-5">
336
+ <div class="btn-group btn-group-toggle" data-toggle="buttons">
337
+ <label class="btn btn-secondary btn-raised active">
338
+ <input type="radio" name="options" id="option1" autocomplete="off" checked> Active
339
+ </label>
340
+ <label class="btn btn-secondary btn-raised">
341
+ <input type="radio" name="options" id="option2" autocomplete="off"> Radio
342
+ </label>
343
+ <label class="btn btn-secondary btn-raised">
344
+ <input type="radio" name="options" id="option3" autocomplete="off"> Radio
345
+ </label>
346
+ </div>
347
+ </div>
348
+ ++++
349
+
350
+
381
351
  == Typography
382
352
 
383
353
  Bootstrap sets basic global display, typography, and link styles. When more
@@ -390,13 +360,10 @@ customize their browser defaults as needed.
390
360
  pass:[<i class="mdi mdi-book-open mdi-24px mdi-md-bg-primary"></i>]
391
361
  Refer to: link:{bs_doc_content_typography}[Bootstrap Docs, window="_blank"].
392
362
 
363
+ === Headings
364
+
393
365
  ++++
394
- <!-- Typography
395
- ============================================================================ -->
396
- <div class="bs-docs-section">
397
- <!-- Typography - Headings
398
- ========================================================================== -->
399
- <!-- Headings -->
366
+ <div class="doc-example mb-3">
400
367
  <div class="row mb-5">
401
368
  <div class="col-md-4">
402
369
  <div class="bs-component">
@@ -416,7 +383,7 @@ Refer to: link:{bs_doc_content_typography}[Bootstrap Docs, window="_blank"].
416
383
  <div class="col-md-4">
417
384
  <div class="bs-component">
418
385
  <h3 class="notoc">Example body text</h2>
419
- <p>Nullam quis risus eget <a href="#">urna mollis ornare</a> vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.</p>
386
+ <p>Nullam quis risus eget <a href="javascript:(void)">urna mollis ornare</a> vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.</p>
420
387
  <p><small>This line of text is meant to be treated as fine print.</small></p>
421
388
  <p>The following is <strong>rendered as bold text</strong>.</p>
422
389
  <p>The following is <em>rendered as italicized text</em>.</p>
@@ -435,15 +402,14 @@ Refer to: link:{bs_doc_content_typography}[Bootstrap Docs, window="_blank"].
435
402
  </div>
436
403
  </div>
437
404
  </div>
405
+ </div>
406
+ ++++
407
+
408
+ === Blockquotes
438
409
 
439
- <!-- Typography - Blockquotes
440
- ========================================================================== -->
410
+ ++++
411
+ <div class="doc-example mb-3">
441
412
  <div class="row">
442
- <div class="col-md-12">
443
- <h2 id="type-blockquotes" class="notoc">Blockquotes</h3>
444
- </div>
445
- </div>
446
- <div class="row mb-5">
447
413
  <div class="col-md-6">
448
414
  <div class="bs-component">
449
415
  <blockquote class="blockquote">
@@ -468,7 +434,7 @@ Refer to: link:{bs_doc_content_typography}[Bootstrap Docs, window="_blank"].
468
434
 
469
435
  Due to the widespread use of tables across third-party widgets like calendars
470
436
  and date pickers, we’ve designed our tables to be opt-in. Just add the base
471
- class .table to any <table>, then extend with custom styles or our various
437
+ class `.table` to any `<table>`, then extend with custom styles or our various
472
438
  included modifier classes.
473
439
 
474
440
  Using the most basic table markup, here’s how .table-based tables look in
@@ -478,71 +444,64 @@ tables will be styled in the same manner as the parent.
478
444
  pass:[<i class="mdi mdi-book-open mdi-24px mdi-md-bg-primary"></i>]
479
445
  Refer to: link:{bs_doc_content_tables}[Bootstrap Docs, window="_blank"].
480
446
 
481
- ++++
482
- <!-- Tables
483
- ============================================================================ -->
484
- <div class="bs-docs-section">
485
- <div class="row mb-5">
486
- <div class="col-md-12">
487
447
 
488
- <div class="bs-component">
489
- <table class="table table-striped table-hover table-bordered">
490
- <thead class="thead-inverse">
491
- <tr>
492
- <th>#</th>
493
- <th>Column heading</th>
494
- <th>Column heading</th>
495
- <th>Column heading</th>
496
- </tr>
497
- </thead>
498
- <tbody>
499
- <tr>
500
- <td>1</td>
501
- <td>Column content</td>
502
- <td>Column content</td>
503
- <td>Column content</td>
504
- </tr>
505
- <tr>
506
- <td>2</td>
507
- <td>Column content</td>
508
- <td>Column content</td>
509
- <td>Column content</td>
510
- </tr>
511
- <tr class="table-info">
512
- <td>3</td>
513
- <td>Column content</td>
514
- <td>Column content</td>
515
- <td>Column content</td>
516
- </tr>
517
- <tr class="table-success">
518
- <td>4</td>
519
- <td>Column content</td>
520
- <td>Column content</td>
521
- <td>Column content</td>
522
- </tr>
523
- <tr class="table-danger">
524
- <td>5</td>
525
- <td>Column content</td>
526
- <td>Column content</td>
527
- <td>Column content</td>
528
- </tr>
529
- <tr class="table-warning">
530
- <td>6</td>
531
- <td>Column content</td>
532
- <td>Column content</td>
533
- <td>Column content</td>
534
- </tr>
535
- <tr class="table-active">
536
- <td>7</td>
537
- <td>Column content</td>
538
- <td>Column content</td>
539
- <td>Column content</td>
540
- </tr>
541
- </tbody>
542
- </table>
543
- </div>
544
- <!-- /example -->
545
- </div>
448
+ ++++
449
+ <div class="doc-example mb-3">
450
+ <div class="bs-component">
451
+ <table class="table table-striped table-hover table-bordered">
452
+ <thead>
453
+ <tr>
454
+ <th>#</th>
455
+ <th>Column heading</th>
456
+ <th>Column heading</th>
457
+ <th>Column heading</th>
458
+ </tr>
459
+ </thead>
460
+ <tbody>
461
+ <tr>
462
+ <td>1</td>
463
+ <td>Column content</td>
464
+ <td>Column content</td>
465
+ <td>Column content</td>
466
+ </tr>
467
+ <tr>
468
+ <td>2</td>
469
+ <td>Column content</td>
470
+ <td>Column content</td>
471
+ <td>Column content</td>
472
+ </tr>
473
+ <tr class="table-info">
474
+ <td>3</td>
475
+ <td>Column content</td>
476
+ <td>Column content</td>
477
+ <td>Column content</td>
478
+ </tr>
479
+ <tr class="table-success">
480
+ <td>4</td>
481
+ <td>Column content</td>
482
+ <td>Column content</td>
483
+ <td>Column content</td>
484
+ </tr>
485
+ <tr class="table-danger">
486
+ <td>5</td>
487
+ <td>Column content</td>
488
+ <td>Column content</td>
489
+ <td>Column content</td>
490
+ </tr>
491
+ <tr class="table-warning">
492
+ <td>6</td>
493
+ <td>Column content</td>
494
+ <td>Column content</td>
495
+ <td>Column content</td>
496
+ </tr>
497
+ <tr class="table-active">
498
+ <td>7</td>
499
+ <td>Column content</td>
500
+ <td>Column content</td>
501
+ <td>Column content</td>
502
+ </tr>
503
+ </tbody>
504
+ </table>
546
505
  </div>
547
506
  </div>
548
507
  ++++
@@ -564,80 +523,75 @@ pass:[]
564
523
  Refer to: link:{bs_doc_components_forms}[Bootstrap Docs, window="_blank"].
565
524
 
566
525
  ++++
567
- <!-- Forms
568
- ============================================================================ -->
569
- <div class="bs-docs-section">
570
- <div class="row ml-1 mr-1 mb-5">
571
-
572
- <form autocomplete="off">
573
- <div class="form-group">
574
- <label for="exampleInputEmail1" class="bmd-label-floating">Email address</label>
575
- <input type="email" class="form-control" id="exampleInputEmail1" autocomplete="none">
576
- <span class="form-clear d-none"><i class="mdi mdi-2x mdi-format-clear"></i></span>
577
- <span class="bmd-help">We'll never share your email with anyone else.</span>
578
- </div>
579
- <div class="form-group">
580
- <label for="exampleInputPassword1" class="bmd-label-floating">Password</label>
581
- <input type="password" class="form-control" id="exampleInputPassword1">
582
- <span class="form-clear d-none"><i class="mdi mdi-2x mdi-format-clear"></i></span>
583
- </div>
584
- <div class="form-group">
585
- <label for="exampleSelect1" class="bmd-label-floating">Example select</label>
586
- <select class="form-control" id="exampleSelect1">
587
- <option>1</option>
588
- <option>2</option>
589
- <option>3</option>
590
- <option>4</option>
591
- <option>5</option>
592
- </select>
593
- </div>
594
- <div class="form-group">
595
- <label for="exampleSelect2" class="bmd-label-floating">Example multiple select</label>
596
- <select multiple class="form-control" id="exampleSelect2">
597
- <option>1</option>
598
- <option>2</option>
599
- <option>3</option>
600
- <option>4</option>
601
- <option>5</option>
602
- </select>
603
- </div>
604
- <div class="form-group">
605
- <label for="exampleTextarea" class="bmd-label-floating">Example textarea</label>
606
- <textarea class="form-control" id="exampleTextarea" rows="3"></textarea>
607
- </div>
608
- <div class="form-group">
609
- <label for="exampleInputFile" class="bmd-label-floating">File input</label>
610
- <input type="file" class="form-control-file" id="exampleInputFile">
611
- <small class="text-muted">This is some placeholder block-level help text for the above input. It's a bit lighter and easily wraps to a new line.</small>
612
- </div>
613
- <div class="radio">
614
- <label>
615
- <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
616
- Option one is this and that&mdash;be sure to include why it's great
617
- </label>
618
- </div>
619
- <div class="radio">
620
- <label>
621
- <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
622
- Option two can be something else and selecting it will deselect option one
623
- </label>
624
- </div>
625
- <div class="radio disabled">
626
- <label>
627
- <input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled>
628
- Option three is disabled
629
- </label>
630
- </div>
631
- <div class="checkbox">
632
- <label>
633
- <input type="checkbox"> Check me out
634
- </label>
635
- </div>
636
- <button class="btn btn-default">Cancel</button>
637
- <button type="submit" class="btn btn-primary btn-raised">Submit</button>
638
- </form>
526
+ <div class="doc-example mb-3">
527
+ <form>
528
+ <div class="form-group">
529
+ <label for="exampleInputEmail1" class="bmd-label-floating">Email address</label>
530
+ <input type="email" class="form-control" id="exampleInputEmail1" autocomplete="none">
531
+ <span class="form-clear d-none"><i class="mdi mdi-2x mdi-format-clear"></i></span>
532
+ <span class="bmd-help">We'll never share your email with anyone else.</span>
533
+ </div>
534
+ <div class="form-group">
535
+ <label for="exampleInputPassword1" class="bmd-label-floating">Password</label>
536
+ <input type="password" class="form-control" id="exampleInputPassword1">
537
+ <span class="form-clear d-none"><i class="mdi mdi-2x mdi-format-clear"></i></span>
538
+ </div>
539
+ <div class="form-group form-check">
540
+ <input type="checkbox" class="form-check-input" id="exampleCheck1">
541
+ <label class="form-check-label" for="exampleCheck1">Check me out</label>
542
+ </div>
543
+ <button type="submit" class="btn btn-primary btn-raised">Submit</button>
544
+ </form>
545
+ </div>
546
+ ++++
639
547
 
640
- </div>
548
+ Textual form controls—like <input>s, <select>s, and <textarea>s—are styled with
549
+ the .form-control class. Included are styles for general appearance, focus
550
+ state, sizing, and more.
551
+
552
+ ++++
553
+ <div class="doc-example mb-3">
554
+ <form>
555
+ <div class="form-group">
556
+ <label for="exampleInputEmail1">Email address</label>
557
+ <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="name@example.com">
558
+ </div>
559
+ <div class="form-group">
560
+ <label for="exampleFormControlSelect1">Example select</label>
561
+ <select class="form-control" id="exampleFormControlSelect1">
562
+ <option>1</option>
563
+ <option>2</option>
564
+ <option>3</option>
565
+ <option>4</option>
566
+ <option>5</option>
567
+ </select>
568
+ </div>
569
+ <div class="form-group">
570
+ <label for="exampleFormControlSelect2">Example multiple select</label>
571
+ <select multiple class="form-control" id="exampleFormControlSelect2">
572
+ <option>option 1</option>
573
+ <option>option 2</option>
574
+ <option>option 3</option>
575
+ </select>
576
+ </div>
577
+ <div class="form-group">
578
+ <label for="exampleFormControlTextarea1">Example textarea</label>
579
+ <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
580
+ </div>
581
+ </form>
582
+ </div>
583
+ ++++
584
+
585
+ For file inputs, swap the .form-control for .form-control-file.
586
+
587
+ ++++
588
+ <div class="doc-example mb-3">
589
+ <form>
590
+ <div class="form-group">
591
+ <label for="exampleFormControlFile1">Example file input</label>
592
+ <input type="file" class="form-control-file" id="exampleFormControlFile1">
593
+ </div>
594
+ </form>
641
595
  </div>
642
596
  ++++
643
597
 
@@ -662,117 +616,107 @@ a tabbed interface. Use them to create tabbable regions with our tab
662
616
  JavaScript plugin.
663
617
 
664
618
  ++++
665
- <!-- Navs - Tabs
666
- ============================================================================ -->
667
- <div class="bs-docs-section">
668
- <div class="row mb-5">
669
-
670
- <div class="col-md-10">
671
- <div class="bs-component">
672
- <ul class="nav nav-tabs">
673
- <li class="nav-item">
674
- <a class="nav-link active" data-toggle="tab" href="#home">Home</a>
675
- </li>
676
- <li class="nav-item">
677
- <a class="nav-link" data-toggle="tab" href="#profile">Profile</a>
678
- </li>
679
- <li class="nav-item dropdown">
680
- <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
681
- <div class="dropdown-menu">
682
- <a class="dropdown-item" href="#">Action</a>
683
- <a class="dropdown-item" href="#">Another action</a>
684
- <a class="dropdown-item" href="#">Something else here</a>
685
- <div class="dropdown-divider"></div>
686
- <a class="dropdown-item" href="#">Separated link</a>
687
- </div>
688
- </li>
689
- <li class="nav-item">
690
- <a class="nav-link disabled" href="#">Disabled</a>
691
- </li>
692
- </ul>
693
- <div id="myTabContent" class="tab-content">
694
- <div class="tab-pane fade active in" id="home">
695
- <p>Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.</p>
696
- </div>
697
- <div class="tab-pane fade" id="profile">
698
- <p>Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit.</p>
699
- </div>
700
- <div class="tab-pane fade" id="dropdown1">
701
- <p>Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork.</p>
702
- </div>
703
- <div class="tab-pane fade" id="dropdown2">
704
- <p>Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out master cleanse gluten-free squid scenester freegan cosby sweater. Fanny pack portland seitan DIY, art party locavore wolf cliche high life echo park Austin. Cred vinyl keffiyeh DIY salvia PBR, banh mi before they sold out farm-to-table VHS viral locavore cosby sweater.</p>
705
- </div>
619
+ <div class="doc-example mb-3">
620
+ <div class="bs-component">
621
+ <ul class="nav nav-tabs">
622
+ <li class="nav-item">
623
+ <a class="nav-link active" data-toggle="tab" href="#home">Home</a>
624
+ </li>
625
+ <li class="nav-item">
626
+ <a class="nav-link" data-toggle="tab" href="#profile">Profile</a>
627
+ </li>
628
+ <li class="nav-item dropdown">
629
+ <a class="nav-link dropdown-toggle" data-toggle="dropdown"
630
+ href="javascript:(void)"
631
+ role="button"
632
+ aria-haspopup="true" aria-expanded="false">
633
+ Dropdown
634
+ </a>
635
+ <div class="dropdown-menu">
636
+ <a class="dropdown-item" href="javascript:(void)">Action</a>
637
+ <a class="dropdown-item" href="javascript:(void)">Another action</a>
638
+ <a class="dropdown-item" href="javascript:(void)">Something else here</a>
639
+ <div class="dropdown-divider"></div>
640
+ <a class="dropdown-item" href="javascript:(void)">Separated link</a>
706
641
  </div>
642
+ </li>
643
+ <li class="nav-item">
644
+ <a class="nav-link disabled" href="javascript:(void)">Disabled</a>
645
+ </li>
646
+ </ul>
647
+ <div id="myTabContent" class="tab-content">
648
+ <div class="tab-pane fade active in" id="home">
649
+ <p>Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.</p>
650
+ </div>
651
+ <div class="tab-pane fade" id="profile">
652
+ <p>Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit.</p>
653
+ </div>
654
+ <div class="tab-pane fade" id="dropdown1">
655
+ <p>Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork.</p>
656
+ </div>
657
+ <div class="tab-pane fade" id="dropdown2">
658
+ <p>Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out master cleanse gluten-free squid scenester freegan cosby sweater. Fanny pack portland seitan DIY, art party locavore wolf cliche high life echo park Austin. Cred vinyl keffiyeh DIY salvia PBR, banh mi before they sold out farm-to-table VHS viral locavore cosby sweater.</p>
707
659
  </div>
708
660
  </div>
709
-
710
661
  </div>
711
662
  </div>
712
663
  ++++
713
664
 
665
+
714
666
  === Pills
715
667
 
716
- Take that same HTML as Tabs, but use .nav-pills class instead:
668
+ Take that same HTML as Tabs, but use .nav-pills class instead.
717
669
 
718
670
  ++++
719
- <!-- Navs - Pills
720
- ============================================================================ -->
721
- <div class="bs-docs-section">
722
- <div class="row mb-5">
723
- <div class="col-md-10">
724
-
725
- <h5 class="notoc">Standard Pills</h5>
726
- <div class="bs-component">
727
- <ul class="nav nav-pills">
728
- <li class="nav-item">
729
- <a class="nav-link active" href="#">Active</a>
730
- </li>
731
- <li class="nav-item dropdown">
732
- <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
733
- <div class="dropdown-menu">
734
- <a class="dropdown-item" href="#">Action</a>
735
- <a class="dropdown-item" href="#">Another action</a>
736
- <a class="dropdown-item" href="#">Something else here</a>
737
- <div class="dropdown-divider"></div>
738
- <a class="dropdown-item" href="#">Separated link</a>
739
- </div>
740
- </li>
741
- <li class="nav-item">
742
- <a class="nav-link" href="#">Link</a>
743
- </li>
744
- <li class="nav-item">
745
- <a class="nav-link disabled" href="#">Disabled</a>
746
- </li>
747
- </ul>
748
- </div>
749
- <br>
750
- <h5 class="notoc">Stacked Pills (vertical)</h5>
751
- <div class="bs-component">
752
- <ul class="nav nav-pills flex-column">
753
- <li class="nav-item">
754
- <a class="nav-link active" href="#">Active</a>
755
- </li>
756
- <li class="nav-item dropdown">
757
- <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
758
- <div class="dropdown-menu">
759
- <a class="dropdown-item" href="#">Action</a>
760
- <a class="dropdown-item" href="#">Another action</a>
761
- <a class="dropdown-item" href="#">Something else here</a>
762
- <div class="dropdown-divider"></div>
763
- <a class="dropdown-item" href="#">Separated link</a>
764
- </div>
765
- </li>
766
- <li class="nav-item">
767
- <a class="nav-link" href="#">Link</a>
768
- </li>
769
- <li class="nav-item">
770
- <a class="nav-link disabled" href="#">Disabled</a>
771
- </li>
772
- </ul>
773
- </div>
774
- </div>
775
-
671
+ <div class="doc-example mb-3">
672
+ <h5 class="notoc">Standard Pills</h5>
673
+ <div class="bs-component">
674
+ <ul class="nav nav-pills">
675
+ <li class="nav-item">
676
+ <a class="nav-link active" href="javascript:(void)">Active</a>
677
+ </li>
678
+ <li class="nav-item dropdown">
679
+ <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="javascript:(void)" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
680
+ <div class="dropdown-menu">
681
+ <a class="dropdown-item" href="javascript:(void)">Action</a>
682
+ <a class="dropdown-item" href="javascript:(void)">Another action</a>
683
+ <a class="dropdown-item" href="javascript:(void)">Something else here</a>
684
+ <div class="dropdown-divider"></div>
685
+ <a class="dropdown-item" href="javascript:(void)">Separated link</a>
686
+ </div>
687
+ </li>
688
+ <li class="nav-item">
689
+ <a class="nav-link" href="javascript:(void)">Link</a>
690
+ </li>
691
+ <li class="nav-item">
692
+ <a class="nav-link disabled" href="javascript:(void)">Disabled</a>
693
+ </li>
694
+ </ul>
695
+ </div>
696
+ <br>
697
+ <h5 class="notoc">Stacked Pills (vertical)</h5>
698
+ <div class="bs-component">
699
+ <ul class="nav nav-pills flex-column">
700
+ <li class="nav-item">
701
+ <a class="nav-link active" href="javascript:(void)">Active</a>
702
+ </li>
703
+ <li class="nav-item dropdown">
704
+ <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="javascript:(void)" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
705
+ <div class="dropdown-menu">
706
+ <a class="dropdown-item" href="javascript:(void)">Action</a>
707
+ <a class="dropdown-item" href="javascript:(void)">Another action</a>
708
+ <a class="dropdown-item" href="javascript:(void)">Something else here</a>
709
+ <div class="dropdown-divider"></div>
710
+ <a class="dropdown-item" href="javascript:(void)">Separated link</a>
711
+ </div>
712
+ </li>
713
+ <li class="nav-item">
714
+ <a class="nav-link" href="javascript:(void)">Link</a>
715
+ </li>
716
+ <li class="nav-item">
717
+ <a class="nav-link disabled" href="javascript:(void)">Disabled</a>
718
+ </li>
719
+ </ul>
776
720
  </div>
777
721
  </div>
778
722
  ++++
@@ -785,28 +729,20 @@ hierarchy that automatically adds separators via CSS.
785
729
  Separators are automatically added in CSS through ::before and content.
786
730
 
787
731
  ++++
788
- <!-- Navs - Breadcrumbs
789
- ============================================================================ -->
790
- <div class="bs-docs-section">
791
- <div class="row mb-5">
792
-
793
- <div class="col-md-10">
794
- <div class="bs-component">
795
- <ol class="breadcrumb">
796
- <li class="breadcrumb-item active">Home</li>
797
- </ol>
798
- <ol class="breadcrumb">
799
- <li class="breadcrumb-item"><a href="#">Home</a></li>
800
- <li class="breadcrumb-item active">Library</li>
801
- </ol>
802
- <ol class="breadcrumb">
803
- <li class="breadcrumb-item"><a href="#">Home</a></li>
804
- <li class="breadcrumb-item"><a href="#">Library</a></li>
805
- <li class="breadcrumb-item active">Data</li>
806
- </ol>
807
- </div>
808
- </div>
809
-
732
+ <div class="doc-example mb-3">
733
+ <div class="bs-component">
734
+ <ol class="breadcrumb">
735
+ <li class="breadcrumb-item active">Home</li>
736
+ </ol>
737
+ <ol class="breadcrumb">
738
+ <li class="breadcrumb-item"><a href="javascript:(void)">Home</a></li>
739
+ <li class="breadcrumb-item active">Library</li>
740
+ </ol>
741
+ <ol class="breadcrumb">
742
+ <li class="breadcrumb-item"><a href="javascript:(void)">Home</a></li>
743
+ <li class="breadcrumb-item"><a href="javascript:(void)">Library</a></li>
744
+ <li class="breadcrumb-item active">Data</li>
745
+ </ol>
810
746
  </div>
811
747
  </div>
812
748
  ++++
@@ -820,90 +756,81 @@ the number of available links. Use a wrapping
820
756
  it as a navigation section to screen readers and other assistive technologies.
821
757
 
822
758
  ++++
823
- <!-- Navs - Pagination
824
- ============================================================================ -->
825
-
826
- <div class="row mb-5">
827
- <div class="col-md-10">
828
- <div class="bs-component">
829
-
830
- <div>
831
- <ul class="pagination">
832
- <li class="page-item disabled">
833
- <a class="page-link" href="#">&laquo;</a>
834
- </li>
835
- <li class="page-item active">
836
- <a class="page-link" href="#">1</a>
837
- </li>
838
- <li class="page-item">
839
- <a class="page-link" href="#">2</a>
840
- </li>
841
- <li class="page-item">
842
- <a class="page-link" href="#">3</a>
843
- </li>
844
- <li class="page-item">
845
- <a class="page-link" href="#">4</a>
846
- </li>
847
- <li class="page-item">
848
- <a class="page-link" href="#">5</a>
849
- </li>
850
- <li class="page-item">
851
- <a class="page-link" href="#">&raquo;</a>
852
- </li>
853
- </ul>
854
- </div>
855
- <div>
856
- <ul class="pagination pagination-lg">
857
- <li class="page-item disabled">
858
- <a class="page-link" href="#">&laquo;</a>
859
- </li>
860
- <li class="page-item active">
861
- <a class="page-link" href="#">1</a>
862
- </li>
863
- <li class="page-item">
864
- <a class="page-link" href="#">2</a>
865
- </li>
866
- <li class="page-item">
867
- <a class="page-link" href="#">3</a>
868
- </li>
869
- <li class="page-item">
870
- <a class="page-link" href="#">4</a>
871
- </li>
872
- <li class="page-item">
873
- <a class="page-link" href="#">5</a>
874
- </li>
875
- <li class="page-item">
876
- <a class="page-link" href="#">&raquo;</a>
877
- </li>
878
- </ul>
879
- </div>
880
- <div>
881
- <ul class="pagination pagination-sm">
882
- <li class="page-item disabled">
883
- <a class="page-link" href="#">&laquo;</a>
884
- </li>
885
- <li class="page-item active">
886
- <a class="page-link" href="#">1</a>
887
- </li>
888
- <li class="page-item">
889
- <a class="page-link" href="#">2</a>
890
- </li>
891
- <li class="page-item">
892
- <a class="page-link" href="#">3</a>
893
- </li>
894
- <li class="page-item">
895
- <a class="page-link" href="#">4</a>
896
- </li>
897
- <li class="page-item">
898
- <a class="page-link" href="#">5</a>
899
- </li>
900
- <li class="page-item">
901
- <a class="page-link" href="#">&raquo;</a>
902
- </li>
903
- </ul>
904
- </div>
905
-
906
- </div>
759
+ <div class="doc-example mb-3">
760
+ <div>
761
+ <ul class="pagination">
762
+ <li class="page-item disabled">
763
+ <a class="page-link" href="javascript:(void)">&laquo;</a>
764
+ </li>
765
+ <li class="page-item active">
766
+ <a class="page-link" href="javascript:(void)">1</a>
767
+ </li>
768
+ <li class="page-item">
769
+ <a class="page-link" href="javascript:(void)">2</a>
770
+ </li>
771
+ <li class="page-item">
772
+ <a class="page-link" href="javascript:(void)">3</a>
773
+ </li>
774
+ <li class="page-item">
775
+ <a class="page-link" href="javascript:(void)">4</a>
776
+ </li>
777
+ <li class="page-item">
778
+ <a class="page-link" href="javascript:(void)">5</a>
779
+ </li>
780
+ <li class="page-item">
781
+ <a class="page-link" href="javascript:(void)">&raquo;</a>
782
+ </li>
783
+ </ul>
784
+ </div>
785
+ <div>
786
+ <ul class="pagination pagination-lg">
787
+ <li class="page-item disabled">
788
+ <a class="page-link" href="javascript:(void)">&laquo;</a>
789
+ </li>
790
+ <li class="page-item active">
791
+ <a class="page-link" href="javascript:(void)">1</a>
792
+ </li>
793
+ <li class="page-item">
794
+ <a class="page-link" href="javascript:(void)">2</a>
795
+ </li>
796
+ <li class="page-item">
797
+ <a class="page-link" href="javascript:(void)">3</a>
798
+ </li>
799
+ <li class="page-item">
800
+ <a class="page-link" href="javascript:(void)">4</a>
801
+ </li>
802
+ <li class="page-item">
803
+ <a class="page-link" href="javascript:(void)">5</a>
804
+ </li>
805
+ <li class="page-item">
806
+ <a class="page-link" href="javascript:(void)">&raquo;</a>
807
+ </li>
808
+ </ul>
809
+ </div>
810
+ <div>
811
+ <ul class="pagination pagination-sm">
812
+ <li class="page-item disabled">
813
+ <a class="page-link" href="javascript:(void)">&laquo;</a>
814
+ </li>
815
+ <li class="page-item active">
816
+ <a class="page-link" href="javascript:(void)">1</a>
817
+ </li>
818
+ <li class="page-item">
819
+ <a class="page-link" href="javascript:(void)">2</a>
820
+ </li>
821
+ <li class="page-item">
822
+ <a class="page-link" href="javascript:(void)">3</a>
823
+ </li>
824
+ <li class="page-item">
825
+ <a class="page-link" href="javascript:(void)">4</a>
826
+ </li>
827
+ <li class="page-item">
828
+ <a class="page-link" href="javascript:(void)">5</a>
829
+ </li>
830
+ <li class="page-item">
831
+ <a class="page-link" href="javascript:(void)">&raquo;</a>
832
+ </li>
833
+ </ul>
907
834
  </div>
908
835
  </div>
909
836
  ++++
@@ -912,7 +839,6 @@ it as a navigation section to screen readers and other assistive technologies.
912
839
 
913
840
  lorem:sentences[5]
914
841
 
915
-
916
842
  === Alerts
917
843
 
918
844
  Alerts provide contextual feedback messages for typical user actions with the
@@ -927,16 +853,14 @@ pass:[]
927
853
  Refer to: link:{bs_doc_components_alerts}[Bootstrap Docs, window="_blank"].
928
854
 
929
855
  ++++
930
- <!-- Indicators - Alerts
931
- ============================================================================ -->
932
- <div class="bs-docs-section">
856
+ <div class="doc-example mb-3">
933
857
  <div class="row mb-3">
934
858
  <div class="col-md-12">
935
859
  <div class="bs-component">
936
860
  <div class="alert alert-dismissible alert-warning">
937
861
  <button type="button" class="close" data-dismiss="alert">&times;</button>
938
862
  <h4 class="alert-heading notoc">Warning!</h4>
939
- <p class="mb-0">Best check yo self, you're not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, <a href="#" class="alert-link">vel scelerisque nisl consectetur et</a>.</p>
863
+ <p class="mb-0">Best check yo self, you're not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, <a href="javascript:(void)" class="alert-link">vel scelerisque nisl consectetur et</a>.</p>
940
864
  </div>
941
865
  </div>
942
866
  </div>
@@ -946,7 +870,7 @@ Refer to: link:{bs_doc_components_alerts}[Bootstrap Docs, window="_blank"].
946
870
  <div class="bs-component">
947
871
  <div class="alert alert-dismissible alert-danger">
948
872
  <button type="button" class="close" data-dismiss="alert">&times;</button>
949
- <strong>Oh snap!</strong> <a href="#" class="alert-link">Change a few things up</a> and try submitting again.
873
+ <strong>Oh snap!</strong> <a href="javascript:(void)" class="alert-link">Change a few things up</a> and try submitting again.
950
874
  </div>
951
875
  </div>
952
876
  </div>
@@ -954,7 +878,7 @@ Refer to: link:{bs_doc_components_alerts}[Bootstrap Docs, window="_blank"].
954
878
  <div class="bs-component">
955
879
  <div class="alert alert-dismissible alert-success">
956
880
  <button type="button" class="close" data-dismiss="alert">&times;</button>
957
- <strong>Well done!</strong> You successfully read <a href="#" class="alert-link">this important alert message</a>.
881
+ <strong>Well done!</strong> You successfully read <a href="javascript:(void)" class="alert-link">this important alert message</a>.
958
882
  </div>
959
883
  </div>
960
884
  </div>
@@ -962,7 +886,7 @@ Refer to: link:{bs_doc_components_alerts}[Bootstrap Docs, window="_blank"].
962
886
  <div class="bs-component">
963
887
  <div class="alert alert-dismissible alert-info">
964
888
  <button type="button" class="close" data-dismiss="alert">&times;</button>
965
- <strong>Heads up!</strong> This <a href="#" class="alert-link">alert needs your attention</a>, but it's not super important.
889
+ <strong>Heads up!</strong> This <a href="javascript:(void)" class="alert-link">alert needs your attention</a>, but it's not super important.
966
890
  </div>
967
891
  </div>
968
892
  </div>
@@ -986,32 +910,26 @@ pass:[]
986
910
  Refer to: link:{bs_doc_components_badges}[Bootstrap Docs, window="_blank"].
987
911
 
988
912
  ++++
989
- <!-- Indicators - Badges
990
- ============================================================================ -->
991
- <div class="bs-docs-section mb-4">
992
- <div class="row">
993
- <div class="col-md-10">
994
- <div class="bs-component mb-3">
995
- <span class="badge badge-primary">Primary</span>
996
- <span class="badge badge-secondary">Secondary</span>
997
- <span class="badge badge-success">Success</span>
998
- <span class="badge badge-danger">Danger</span>
999
- <span class="badge badge-warning">Warning</span>
1000
- <span class="badge badge-info">Info</span>
1001
- <span class="badge badge-light">Light</span>
1002
- <span class="badge badge-dark">Dark</span>
1003
- </div>
1004
- <div class="bs-component mb-4">
1005
- <span class="badge badge-pill badge-primary">Primary</span>
1006
- <span class="badge badge-pill badge-secondary">Secondary</span>
1007
- <span class="badge badge-pill badge-success">Success</span>
1008
- <span class="badge badge-pill badge-danger">Danger</span>
1009
- <span class="badge badge-pill badge-warning">Warning</span>
1010
- <span class="badge badge-pill badge-info">Info</span>
1011
- <span class="badge badge-pill badge-light">Light</span>
1012
- <span class="badge badge-pill badge-dark">Dark</span>
1013
- </div>
1014
- </div>
913
+ <div class="doc-example mb-3">
914
+ <div class="bs-component mb-3">
915
+ <span class="badge badge-primary">Primary</span>
916
+ <span class="badge badge-secondary">Secondary</span>
917
+ <span class="badge badge-success">Success</span>
918
+ <span class="badge badge-danger">Danger</span>
919
+ <span class="badge badge-warning">Warning</span>
920
+ <span class="badge badge-info">Info</span>
921
+ <span class="badge badge-light">Light</span>
922
+ <span class="badge badge-dark">Dark</span>
923
+ </div>
924
+ <div class="bs-component mb-4">
925
+ <span class="badge badge-pill badge-primary">Primary</span>
926
+ <span class="badge badge-pill badge-secondary">Secondary</span>
927
+ <span class="badge badge-pill badge-success">Success</span>
928
+ <span class="badge badge-pill badge-danger">Danger</span>
929
+ <span class="badge badge-pill badge-warning">Warning</span>
930
+ <span class="badge badge-pill badge-info">Info</span>
931
+ <span class="badge badge-pill badge-light">Light</span>
932
+ <span class="badge badge-pill badge-dark">Dark</span>
1015
933
  </div>
1016
934
  </div>
1017
935
  ++++
@@ -1030,18 +948,10 @@ Refer to: link:{bs_doc_components_progress}[Bootstrap Docs, window="_blank"].
1030
948
  === Basic
1031
949
 
1032
950
  ++++
1033
- <!-- Progress - Basic
1034
- ============================================================================ -->
1035
- <div class="bs-docs-section">
1036
- <div class="row mb-5">
1037
- <div class="col-md-10">
1038
-
1039
- <div class="bs-component">
1040
- <div class="progress">
1041
- <div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
1042
- </div>
1043
- </div>
1044
-
951
+ <div class="doc-example mb-3">
952
+ <div class="bs-component">
953
+ <div class="progress">
954
+ <div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
1045
955
  </div>
1046
956
  </div>
1047
957
  </div>
@@ -1050,27 +960,19 @@ Refer to: link:{bs_doc_components_progress}[Bootstrap Docs, window="_blank"].
1050
960
  === Contextual alternatives
1051
961
 
1052
962
  ++++
1053
- <!-- Progress - Contextual alternatives
1054
- ============================================================================ -->
1055
- <div class="bs-docs-section">
1056
- <div class="row mb-5">
1057
- <div class="col-md-10">
1058
-
1059
- <div class="bs-component">
1060
- <div class="progress">
1061
- <div class="progress-bar bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
1062
- </div>
1063
- <div class="progress">
1064
- <div class="progress-bar bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
1065
- </div>
1066
- <div class="progress">
1067
- <div class="progress-bar bg-warning" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
1068
- </div>
1069
- <div class="progress">
1070
- <div class="progress-bar bg-danger" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
1071
- </div>
1072
- </div>
1073
-
963
+ <div class="doc-example mb-3">
964
+ <div class="bs-component">
965
+ <div class="progress">
966
+ <div class="progress-bar bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
967
+ </div>
968
+ <div class="progress">
969
+ <div class="progress-bar bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
970
+ </div>
971
+ <div class="progress">
972
+ <div class="progress-bar bg-warning" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
973
+ </div>
974
+ <div class="progress">
975
+ <div class="progress-bar bg-danger" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
1074
976
  </div>
1075
977
  </div>
1076
978
  </div>
@@ -1079,20 +981,12 @@ Refer to: link:{bs_doc_components_progress}[Bootstrap Docs, window="_blank"].
1079
981
  === Multiple bars
1080
982
 
1081
983
  ++++
1082
- <!-- Progress - Multiple bars
1083
- ============================================================================ -->
1084
- <div class="bs-docs-section">
1085
- <div class="row mb-5">
1086
- <div class="col-md-10">
1087
-
1088
- <div class="bs-component">
1089
- <div class="progress">
1090
- <div class="progress-bar" role="progressbar" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
1091
- <div class="progress-bar bg-success" role="progressbar" style="width: 30%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
1092
- <div class="progress-bar bg-info" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
1093
- </div>
1094
- </div>
1095
-
984
+ <div class="doc-example mb-3">
985
+ <div class="bs-component">
986
+ <div class="progress">
987
+ <div class="progress-bar" role="progressbar" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
988
+ <div class="progress-bar bg-success" role="progressbar" style="width: 30%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
989
+ <div class="progress-bar bg-info" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
1096
990
  </div>
1097
991
  </div>
1098
992
  </div>
@@ -1101,30 +995,22 @@ Refer to: link:{bs_doc_components_progress}[Bootstrap Docs, window="_blank"].
1101
995
  === Striped
1102
996
 
1103
997
  ++++
1104
- <!-- Progress - Striped
1105
- ============================================================================ -->
1106
- <div class="bs-docs-section">
1107
- <div class="row mb-5">
1108
- <div class="col-md-10">
1109
-
1110
- <div class="bs-component">
1111
- <div class="progress">
1112
- <div class="progress-bar progress-bar-striped" role="progressbar" style="width: 10%" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
1113
- </div>
1114
- <div class="progress">
1115
- <div class="progress-bar progress-bar-striped bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
1116
- </div>
1117
- <div class="progress">
1118
- <div class="progress-bar progress-bar-striped bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
1119
- </div>
1120
- <div class="progress">
1121
- <div class="progress-bar progress-bar-striped bg-warning" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
1122
- </div>
1123
- <div class="progress">
1124
- <div class="progress-bar progress-bar-striped bg-danger" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
1125
- </div>
1126
- </div>
1127
-
998
+ <div class="doc-example mb-3">
999
+ <div class="bs-component">
1000
+ <div class="progress">
1001
+ <div class="progress-bar progress-bar-striped" role="progressbar" style="width: 10%" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
1002
+ </div>
1003
+ <div class="progress">
1004
+ <div class="progress-bar progress-bar-striped bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
1005
+ </div>
1006
+ <div class="progress">
1007
+ <div class="progress-bar progress-bar-striped bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
1008
+ </div>
1009
+ <div class="progress">
1010
+ <div class="progress-bar progress-bar-striped bg-warning" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
1011
+ </div>
1012
+ <div class="progress">
1013
+ <div class="progress-bar progress-bar-striped bg-danger" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
1128
1014
  </div>
1129
1015
  </div>
1130
1016
  </div>
@@ -1133,18 +1019,10 @@ Refer to: link:{bs_doc_components_progress}[Bootstrap Docs, window="_blank"].
1133
1019
  === Animated
1134
1020
 
1135
1021
  ++++
1136
- <!-- Progress - Animated
1137
- ============================================================================ -->
1138
- <div class="bs-docs-section">
1139
- <div class="row mb-5">
1140
- <div class="col-md-10">
1141
-
1142
- <div class="bs-component">
1143
- <div class="progress">
1144
- <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%"></div>
1145
- </div>
1146
- </div>
1147
-
1022
+ <div class="doc-example mb-3">
1023
+ <div class="bs-component">
1024
+ <div class="progress">
1025
+ <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%"></div>
1148
1026
  </div>
1149
1027
  </div>
1150
1028
  </div>
@@ -1152,7 +1030,7 @@ Refer to: link:{bs_doc_components_progress}[Bootstrap Docs, window="_blank"].
1152
1030
 
1153
1031
  == Containers
1154
1032
 
1155
- lorem:sentences[5]
1033
+ lorem:sentences[3]
1156
1034
 
1157
1035
  lorem:sentences[2]
1158
1036
 
@@ -1164,22 +1042,16 @@ pass:[]
1164
1042
  Refer to: link:{bs_doc_components_jumbotron}[Bootstrap Docs, window="_blank"].
1165
1043
 
1166
1044
  ++++
1167
- <!-- Containers - Jumbotron
1168
- ============================================================================ -->
1169
- <div class="bs-docs-section">
1170
- <div class="row mb-3">
1171
- <div class="col-md-10">
1172
- <div class="bs-component">
1173
- <div class="jumbotron">
1174
- <h1 class="display-3">Hello, world!</h1>
1175
- <p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
1176
- <hr class="my-4">
1177
- <p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
1178
- <p class="lead">
1179
- <a class="btn btn-primary btn-raised btn-lg" href="#" role="button">Learn more</a>
1180
- </p>
1181
- </div>
1182
- </div>
1045
+ <div class="doc-example mb-3">
1046
+ <div class="bs-component">
1047
+ <div class="jumbotron">
1048
+ <h1 class="display-3">Hello, world!</h1>
1049
+ <p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
1050
+ <hr class="my-4">
1051
+ <p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
1052
+ <p class="lead">
1053
+ <a class="btn btn-primary btn-raised btn-lg" href="javascript:(void)" role="button">Learn more</a>
1054
+ </p>
1183
1055
  </div>
1184
1056
  </div>
1185
1057
  </div>
@@ -1194,11 +1066,8 @@ pass:[]
1194
1066
  Refer to: link:{bs_doc_components_list_group}[Bootstrap Docs, window="_blank"].
1195
1067
 
1196
1068
  ++++
1197
- <!-- Containers - List groups
1198
- ============================================================================ -->
1199
- <div class="bs-docs-section">
1069
+ <div class="doc-example mb-3">
1200
1070
  <div class="row mb-5">
1201
-
1202
1071
  <div class="col-md-4">
1203
1072
  <div class="bs-component">
1204
1073
  <ul class="list-group">
@@ -1221,12 +1090,12 @@ Refer to: link:{bs_doc_components_list_group}[Bootstrap Docs, window="_blank"].
1221
1090
  <div class="col-md-4">
1222
1091
  <div class="bs-component">
1223
1092
  <div class="list-group">
1224
- <a href="#" class="list-group-item list-group-item-action active">
1093
+ <a href="javascript:(void)" class="list-group-item list-group-item-action active">
1225
1094
  Cras justo odio
1226
1095
  </a>
1227
- <a href="#" class="list-group-item list-group-item-action">Dapibus ac facilisis
1096
+ <a href="javascript:(void)" class="list-group-item list-group-item-action">Dapibus ac facilisis
1228
1097
  </a>
1229
- <a href="#" class="list-group-item list-group-item-action disabled">Morbi leo risus
1098
+ <a href="javascript:(void)" class="list-group-item list-group-item-action disabled">Morbi leo risus
1230
1099
  </a>
1231
1100
  </div>
1232
1101
  </div>
@@ -1235,7 +1104,7 @@ Refer to: link:{bs_doc_components_list_group}[Bootstrap Docs, window="_blank"].
1235
1104
  <div class="col-md-4">
1236
1105
  <div class="bs-component">
1237
1106
  <div class="list-group">
1238
- <a href="#" class="list-group-item list-group-item-action flex-column align-items-start active">
1107
+ <a href="javascript:(void)" class="list-group-item list-group-item-action flex-column align-items-start active">
1239
1108
  <div class="d-flex w-100 justify-content-between">
1240
1109
  <h5 class="mb-1 notoc">List group item heading</h5>
1241
1110
  <small>3 days ago</small>
@@ -1243,7 +1112,7 @@ Refer to: link:{bs_doc_components_list_group}[Bootstrap Docs, window="_blank"].
1243
1112
  <p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
1244
1113
  <small>Donec id elit non mi porta.</small>
1245
1114
  </a>
1246
- <a href="#" class="list-group-item list-group-item-action flex-column align-items-start">
1115
+ <a href="javascript:(void)" class="list-group-item list-group-item-action flex-column align-items-start">
1247
1116
  <div class="d-flex w-100 justify-content-between">
1248
1117
  <h5 class="mb-1 notoc">List group item heading</h5>
1249
1118
  <small class="text-muted">3 days ago</small>
@@ -1259,6 +1128,7 @@ Refer to: link:{bs_doc_components_list_group}[Bootstrap Docs, window="_blank"].
1259
1128
  </div>
1260
1129
  ++++
1261
1130
 
1131
+
1262
1132
  === Cards
1263
1133
 
1264
1134
  Bootstrap’s cards provide a flexible and extensible content container with
@@ -1281,8 +1151,9 @@ Refer to: link:{bs_doc_components_cards}[Bootstrap Docs, window="_blank"].
1281
1151
  ++++
1282
1152
  <!-- Containers - Cards
1283
1153
  ============================================================================ -->
1284
- <div class="bs-docs-section">
1285
- <div class="row mb-5">
1154
+
1155
+ <div class="doc-example mb-3">
1156
+ <div class="row">
1286
1157
 
1287
1158
  <div class="col-md-4">
1288
1159
  <div class="bs-component">
@@ -1424,8 +1295,8 @@ Refer to: link:{bs_doc_components_cards}[Bootstrap Docs, window="_blank"].
1424
1295
  <li class="list-group-item">Vestibulum at eros</li>
1425
1296
  </ul>
1426
1297
  <div class="card-body">
1427
- <a href="#" class="card-link">Card link</a>
1428
- <a href="#" class="card-link">Another link</a>
1298
+ <a href="javascript:(void)" class="card-link">Card link</a>
1299
+ <a href="javascript:(void)" class="card-link">Another link</a>
1429
1300
  </div>
1430
1301
  <div class="card-footer text-muted">
1431
1302
  2 days ago
@@ -1436,8 +1307,8 @@ Refer to: link:{bs_doc_components_cards}[Bootstrap Docs, window="_blank"].
1436
1307
  <h4 class="card-title notoc">Card title</h4>
1437
1308
  <h6 class="card-subtitle mb-2 text-muted notoc">Card subtitle</h6>
1438
1309
  <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
1439
- <a href="#" class="card-link">Card link</a>
1440
- <a href="#" class="card-link">Another link</a>
1310
+ <a href="javascript:(void)" class="card-link">Card link</a>
1311
+ <a href="javascript:(void)" class="card-link">Another link</a>
1441
1312
  </div>
1442
1313
  </div>
1443
1314
  </div>
@@ -1462,16 +1333,20 @@ content scrolls instead.
1462
1333
  pass:[<i class="mdi mdi-book-open mdi-24px mdi-md-bg-primary"></i>]
1463
1334
  Refer to: link:{bs_doc_components_modal}[Bootstrap Docs, window="_blank"].
1464
1335
 
1465
- ==== Base Modal
1336
+ .Modal types
1337
+ [cols="3a,7a,2a", options="header", width="100%", role="table-responsive mt-3"]
1338
+ |===============================================================================
1339
+ |Type |Description |Launch
1466
1340
 
1467
- Toggle a working modal demo by clicking the button below. It will slide
1341
+ |*Base*
1342
+ |Toggle a working modal demo by clicking the button below. It will slide
1468
1343
  down and fade in from the top of the page.
1469
-
1344
+ |
1470
1345
  ++++
1471
1346
  <div class="ml-2 mb-5">
1472
1347
  <!-- Button trigger modal -->
1473
1348
  <button type="button" class="btn btn-primary btn-round btn-raised" data-toggle="modal" data-target="#exampleSimpleModal">
1474
- Launch Modal
1349
+ Launch
1475
1350
  </button>
1476
1351
  </div>
1477
1352
 
@@ -1497,16 +1372,16 @@ down and fade in from the top of the page.
1497
1372
  </div>
1498
1373
  ++++
1499
1374
 
1500
- ==== Scrolling long content
1501
-
1502
- When modals become too long for the user’s viewport or device, they scroll
1503
- independent of the page itself. Try the demo below to see what we mean.
1504
-
1375
+ |*Scrolling long content*
1376
+ |When modals become too long for the user’s viewport or device, they scroll
1377
+ independent of the page itself. Try the demo and resize your browser for
1378
+ the height.
1379
+ |
1505
1380
  ++++
1506
1381
  <div class="ml-2 mb-5">
1507
1382
  <!-- Button trigger modal -->
1508
1383
  <button type="button" class="btn btn-primary btn-round btn-raised" data-toggle="modal" data-target="#exampleModalLong">
1509
- Launch Modal
1384
+ Launch
1510
1385
  </button>
1511
1386
  </div>
1512
1387
 
@@ -1549,15 +1424,14 @@ independent of the page itself. Try the demo below to see what we mean.
1549
1424
  </div>
1550
1425
  ++++
1551
1426
 
1552
- ==== Vertically centered
1553
-
1554
- Add `.modal-dialog-centered` to `.modal-dialog` to vertically center the modal.
1555
-
1427
+ |*Vertically centered*
1428
+ |For important messages, center the modal.
1429
+ |
1556
1430
  ++++
1557
1431
  <div class="ml-2 mb-5">
1558
1432
  <!-- Button trigger modal -->
1559
1433
  <button type="button" class="btn btn-primary btn-round btn-raised" data-toggle="modal" data-target="#exampleModalVerticalCenter">
1560
- Launch Modal
1434
+ Launch
1561
1435
  </button>
1562
1436
  </div>
1563
1437
 
@@ -1586,15 +1460,14 @@ Add `.modal-dialog-centered` to `.modal-dialog` to vertically center the modal.
1586
1460
  ++++
1587
1461
 
1588
1462
 
1589
- ==== Contact Form
1590
-
1591
- Add `.modal-dialog-centered` to `.modal-dialog` to vertically center the modal.
1592
-
1463
+ |*Form*
1464
+ |To save space on forms, dialogs can be part of a modal.
1465
+ |
1593
1466
  ++++
1594
1467
  <div class="ml-2 mb-5">
1595
1468
  <!-- Button trigger modal -->
1596
1469
  <button type="button" class="btn btn-primary btn-round btn-raised" data-toggle="modal" data-target="#modalContactForm">
1597
- Launch Modal
1470
+ Launch
1598
1471
  </button>
1599
1472
  </div>
1600
1473
 
@@ -1641,15 +1514,14 @@ Add `.modal-dialog-centered` to `.modal-dialog` to vertically center the modal.
1641
1514
  </div>
1642
1515
  ++++
1643
1516
 
1644
- ==== Fluid Modal
1645
-
1646
- Add `.modal-dialog-centered` to `.modal-dialog` to vertically center the modal.
1647
-
1517
+ |*Fluid*
1518
+ |For e.g larger summaries, a vertical fluid modal can be used for that.
1519
+ |
1648
1520
  ++++
1649
1521
  <div class="ml-2 mb-5">
1650
1522
  <!-- Button trigger modal -->
1651
1523
  <button type="button" class="btn btn-primary btn-round btn-raised" data-toggle="modal" data-target="#fluidModalRightSuccess">
1652
- Launch Modal
1524
+ Launch
1653
1525
  </button>
1654
1526
  </div>
1655
1527
 
@@ -1713,18 +1585,15 @@ Add `.modal-dialog-centered` to `.modal-dialog` to vertically center the modal.
1713
1585
  <!-- Full Height Modal Right Success-->
1714
1586
  ++++
1715
1587
 
1716
-
1717
-
1718
- ==== Tooltips and Popovers
1719
-
1720
- Tooltips and popovers can be placed within modals as needed. When modals are
1588
+ |*Tooltips and Popovers*
1589
+ |Tooltips and popovers can be placed within modals as needed. When modals are
1721
1590
  closed, any tooltips and popovers within are also automatically dismissed.
1722
-
1591
+ |
1723
1592
  ++++
1724
1593
  <div class="ml-2 mb-5">
1725
1594
  <!-- Button trigger modal -->
1726
1595
  <button type="button" class="btn btn-primary btn-round btn-raised" data-toggle="modal" data-target="#exampleModalTooltip">
1727
- Launch Modal
1596
+ Launch
1728
1597
  </button>
1729
1598
  </div>
1730
1599
 
@@ -1743,7 +1612,7 @@ closed, any tooltips and popovers within are also automatically dismissed.
1743
1612
  <p>This <a href="#" role="button" class="btn btn-secondary btn-round btn-raised popover-test" data-toggle="popover" title="Popover title" data-content="Popover body content is set in this attribute.">button</a> triggers a popover on click.</p>
1744
1613
  <hr>
1745
1614
  <h5>Tooltips in a modal</h5>
1746
- <p><a href="#" class="tooltip-test" data-toggle="tooltip" title="Tooltip">This link</a> and <a href="#" class="tooltip-test" data-toggle="tooltip" title="Tooltip">that link</a> have tooltips on hover.</p>
1615
+ <p><a href="javascript:(void)" class="tooltip-test" data-toggle="tooltip" title="Tooltip">This link</a> and <a href="#" class="tooltip-test" data-toggle="tooltip" title="Tooltip">that link</a> have tooltips on hover.</p>
1747
1616
  </div>
1748
1617
  <div class="modal-footer">
1749
1618
  <button type="button" class="btn btn-secondary btn-round btn-raised mr-2" data-dismiss="modal">Close</button>
@@ -1754,6 +1623,7 @@ closed, any tooltips and popovers within are also automatically dismissed.
1754
1623
  </div>
1755
1624
  ++++
1756
1625
 
1626
+ |===============================================================================
1757
1627
 
1758
1628
  === Popovers
1759
1629
 
@@ -1768,22 +1638,12 @@ pass:[]
1768
1638
  Refer to: link:{bs_doc_components_popovers}[Bootstrap Docs, window="_blank"].
1769
1639
 
1770
1640
  ++++
1771
- <!-- Dialogs - Popovers
1772
- ============================================================================ -->
1773
- <div class="bs-docs-section">
1774
- <div class="row mb-5">
1775
-
1776
- <div class="col-md-8">
1777
- <div class="bs-component mt-3 mb-4">
1778
- <button type="button" class="btn btn-secondary btn-raised" title="Popover Title" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">Top</button>
1779
- <button type="button" class="btn btn-secondary btn-raised" title="Popover Title" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus
1780
- sagittis lacus vel augue laoreet rutrum faucibus.">Bottom</button>
1781
- <button type="button" class="btn btn-secondary btn-raised" title="Popover Title" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">Right</button>
1782
- <button type="button" class="btn btn-secondary btn-raised" title="Popover Title" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">Left</button>
1783
- </div>
1784
- </div>
1785
-
1786
- </div>
1641
+ <div class="doc-example mb-3">
1642
+ <button type="button" class="btn btn-secondary btn-raised" title="Popover Title" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">Top</button>
1643
+ <button type="button" class="btn btn-secondary btn-raised" title="Popover Title" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus
1644
+ sagittis lacus vel augue laoreet rutrum faucibus.">Bottom</button>
1645
+ <button type="button" class="btn btn-secondary btn-raised" title="Popover Title" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">Right</button>
1646
+ <button type="button" class="btn btn-secondary btn-raised" title="Popover Title" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">Left</button>
1787
1647
  </div>
1788
1648
  ++++
1789
1649
 
@@ -1800,61 +1660,10 @@ pass:[]
1800
1660
  Refer to: link:{bs_doc_components_tooltips}[Bootstrap Docs, window="_blank"].
1801
1661
 
1802
1662
  ++++
1803
- <!-- Dialogs - Tooltips
1804
- ============================================================================ -->
1805
- <div class="bs-docs-section">
1806
- <div class="row mb-5">
1807
-
1808
- <div class="col-md-8">
1809
- <div class="bs-component mt-3 mb-4">
1810
- <button type="button" class="btn btn-secondary btn-raised" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Top</button>
1811
- <button type="button" class="btn btn-secondary btn-raised" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Bottom</button>
1812
- <button type="button" class="btn btn-secondary btn-raised" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Right</button>
1813
- <button type="button" class="btn btn-secondary btn-raised" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Left</button>
1814
- </div>
1815
- </div>
1816
-
1817
- </div>
1663
+ <div class="doc-example mb-3">
1664
+ <button type="button" class="btn btn-secondary btn-raised" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Top</button>
1665
+ <button type="button" class="btn btn-secondary btn-raised" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Bottom</button>
1666
+ <button type="button" class="btn btn-secondary btn-raised" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Right</button>
1667
+ <button type="button" class="btn btn-secondary btn-raised" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Left</button>
1818
1668
  </div>
1819
1669
  ++++
1820
-
1821
-
1822
- /////
1823
- See: https://stackoverflow.com/questions/15738259/disabling-chrome-autofill
1824
- <script>
1825
- $(document).ready(function () {
1826
- $('input').attr('autocomplete', 'false');
1827
- });
1828
- </script>
1829
-
1830
- (function($) {
1831
- $.fn.autoCompleteFix = function(opt) {
1832
- var ro = 'readonly', settings = $.extend({
1833
- attribute : 'autocomplete',
1834
- trigger : {
1835
- disable : ["off"],
1836
- },
1837
- focus : function() {
1838
- $(this).removeAttr(ro);
1839
- },
1840
- force : false
1841
- }, opt);
1842
-
1843
- $(this).each(function(i, el) {
1844
- el = $(el);
1845
-
1846
- if(el.is('form')) {
1847
- var force = (-1 !== $.inArray(el.attr(settings.attribute), settings.trigger.disable))
1848
- el.find('input').autoCompleteFix({force:force});
1849
- } else {
1850
- var disabled = -1 !== $.inArray(el.attr(settings.attribute), settings.trigger.disable);
1851
- var enabled = -1 !== $.inArray(el.attr(settings.attribute), settings.trigger.enable);
1852
- if (settings.force && !enabled || disabled)
1853
- el.attr(ro, ro).focus(settings.focus).val("");
1854
- }
1855
- });
1856
- };
1857
- $('form').autoCompleteFix();
1858
- })(jQuery);
1859
-
1860
- /////