j1-template 2021.0.15 → 2021.1.3

Sign up to get free protection for your applications and to get access to all the features.
Files changed (438) hide show
  1. checksums.yaml +4 -4
  2. data/_includes/themes/j1/blocks/footer/boxes/legal_statements.proc +4 -0
  3. data/_includes/themes/j1/layouts/layout_metadata_generator.html +54 -39
  4. data/_includes/themes/j1/modules/connectors/ad/google-adsense.html +15 -7
  5. data/_includes/themes/j1/modules/connectors/ads +4 -6
  6. data/_includes/themes/j1/modules/connectors/analytic/google-analytics.html +1 -1
  7. data/_includes/themes/j1/modules/connectors/analytics +5 -4
  8. data/_includes/themes/j1/modules/connectors/comment/disqus.html +1 -1
  9. data/_includes/themes/j1/modules/connectors/comments +7 -6
  10. data/_includes/themes/j1/modules/connectors/translator +3 -4
  11. data/_includes/themes/j1/modules/navigator/generator.html +2 -38
  12. data/_includes/themes/j1/modules/navigator/generator.org.html +232 -0
  13. data/_includes/themes/j1/modules/navigator/procedures/topsearch.proc +2 -2
  14. data/_includes/themes/j1/procedures/global/create_bs_button.proc +64 -22
  15. data/_includes/themes/j1/procedures/posts/collate_timeline.proc +14 -10
  16. data/_layouts/default.html +11 -1
  17. data/apps/public/cc/index.adoc +13 -4
  18. data/assets/data/authclient.html +234 -228
  19. data/assets/data/banner.html +34 -31
  20. data/assets/data/cookiebar.html +205 -198
  21. data/assets/data/fam.html +7 -2
  22. data/assets/data/footer.html +4 -0
  23. data/assets/data/footer.new.1.html +256 -0
  24. data/assets/data/footer.new.2.html +256 -0
  25. data/assets/data/footer.org.html +249 -0
  26. data/assets/data/galleries.json +2 -2
  27. data/assets/data/gallery_customizer.html +16 -6
  28. data/assets/data/menu.html +7 -2
  29. data/assets/data/mmenu.html +6 -2
  30. data/assets/data/mmenu_sidebar.html +5 -1
  31. data/assets/data/mmenu_toc.html +4 -0
  32. data/assets/data/panel.html +23 -15
  33. data/assets/data/quicklinks.html +6 -1
  34. data/assets/error_pages/HTTP204.html +2 -1
  35. data/assets/error_pages/HTTP400.html +2 -1
  36. data/assets/error_pages/HTTP401.html +2 -1
  37. data/assets/error_pages/HTTP403.html +2 -1
  38. data/assets/error_pages/HTTP404.html +2 -1
  39. data/assets/error_pages/HTTP500.html +2 -1
  40. data/assets/error_pages/HTTP501.html +2 -1
  41. data/assets/error_pages/HTTP502.html +2 -1
  42. data/assets/error_pages/HTTP503.html +2 -1
  43. data/assets/error_pages/HTTP520.html +2 -1
  44. data/assets/error_pages/HTTP521.html +2 -1
  45. data/assets/error_pages/HTTP533.html +2 -1
  46. data/assets/themes/j1/adapter/js/asciidoctor.js +166 -0
  47. data/assets/themes/j1/adapter/js/carousel.js +24 -0
  48. data/assets/themes/j1/adapter/js/fam.js +8 -12
  49. data/assets/themes/j1/adapter/js/j1.js +83 -28
  50. data/assets/themes/j1/adapter/js/j1.new.js +1878 -0
  51. data/assets/themes/j1/adapter/js/j1.org.js +1874 -0
  52. data/assets/themes/j1/adapter/js/{jf_gallery.js → justifiedGallery.js} +9 -9
  53. data/assets/themes/j1/adapter/js/{gallery_customizer.js → justifiedGalleryCustomizer.js} +14 -13
  54. data/assets/themes/j1/adapter/js/logger.js +35 -23
  55. data/assets/themes/j1/adapter/js/mmenu.js +8 -4
  56. data/assets/themes/j1/adapter/js/navigator.js +72 -32
  57. data/assets/themes/j1/adapter/js/themer.js +19 -40
  58. data/assets/themes/j1/core/css/themes/uno-dark/bootstrap.css +17 -14
  59. data/assets/themes/j1/core/css/themes/uno-dark/bootstrap.min.css +1 -1
  60. data/assets/themes/j1/core/css/themes/uno-light/bootstrap.css +3959 -239
  61. data/assets/themes/j1/core/css/themes/uno-light/bootstrap.min.css +1 -1
  62. data/assets/themes/j1/core/css/vendor.css +14 -2
  63. data/assets/themes/j1/core/css/vendor.min.css +1 -1
  64. data/assets/themes/j1/core/js/template.js +8 -2
  65. data/assets/themes/j1/core/js/template.js.map +1 -1
  66. data/assets/themes/j1/core/js/template.min.js +8 -2
  67. data/assets/themes/j1/core/js/template.min.js.map +1 -1
  68. data/assets/themes/j1/modules/_lightGallery/css/core/lg-fb-comment-box.css +58 -0
  69. data/assets/themes/j1/modules/_lightGallery/css/core/lg-fb-comment-box.min.css +5 -0
  70. data/assets/themes/j1/modules/_lightGallery/css/core/lg-transitions.css +778 -0
  71. data/assets/themes/j1/modules/_lightGallery/css/core/lg-transitions.min.css +5 -0
  72. data/assets/themes/j1/modules/_lightGallery/css/core/lightgallery.css +981 -0
  73. data/assets/themes/j1/modules/_lightGallery/css/core/lightgallery.min.css +5 -0
  74. data/assets/themes/j1/modules/_lightGallery/css/fonts/lg.eot +0 -0
  75. data/assets/themes/j1/modules/_lightGallery/css/fonts/lg.svg +47 -0
  76. data/assets/themes/j1/modules/_lightGallery/css/fonts/lg.ttf +0 -0
  77. data/assets/themes/j1/modules/_lightGallery/css/fonts/lg.woff +0 -0
  78. data/assets/themes/j1/modules/_lightGallery/css/img/loading.gif +0 -0
  79. data/assets/themes/j1/modules/_lightGallery/css/img/video-play.png +0 -0
  80. data/assets/themes/j1/modules/_lightGallery/css/img/vimeo-play.png +0 -0
  81. data/assets/themes/j1/modules/_lightGallery/css/img/youtube-play.png +0 -0
  82. data/assets/themes/j1/modules/_lightGallery/css/themes/icons/animation-w.png +0 -0
  83. data/assets/themes/j1/modules/_lightGallery/css/themes/icons/customize-w.png +0 -0
  84. data/assets/themes/j1/modules/_lightGallery/css/themes/icons/dynamic-w.png +0 -0
  85. data/assets/themes/j1/modules/_lightGallery/css/themes/icons/facebook-icon.svg +10 -0
  86. data/assets/themes/j1/modules/_lightGallery/css/themes/icons/googleplus-icon.svg +30 -0
  87. data/assets/themes/j1/modules/_lightGallery/css/themes/icons/html5-w.png +0 -0
  88. data/assets/themes/j1/modules/_lightGallery/css/themes/icons/linked-in.png +0 -0
  89. data/assets/themes/j1/modules/_lightGallery/css/themes/icons/module-w.png +0 -0
  90. data/assets/themes/j1/modules/_lightGallery/css/themes/icons/play-button.png +0 -0
  91. data/assets/themes/j1/modules/_lightGallery/css/themes/icons/responsive-w.png +0 -0
  92. data/assets/themes/j1/modules/_lightGallery/css/themes/icons/thumb-w.png +0 -0
  93. data/assets/themes/j1/modules/_lightGallery/css/themes/icons/touch-w.png +0 -0
  94. data/assets/themes/j1/modules/_lightGallery/css/themes/icons/twitter-icon.svg +15 -0
  95. data/assets/themes/j1/modules/_lightGallery/css/themes/icons/twitter.png +0 -0
  96. data/assets/themes/j1/modules/_lightGallery/css/themes/icons/video1-w.png +0 -0
  97. data/assets/themes/j1/modules/_lightGallery/css/themes/icons/zoom-w.png +0 -0
  98. data/assets/themes/j1/modules/_lightGallery/css/themes/icons/zoom.png +0 -0
  99. data/assets/themes/j1/modules/_lightGallery/css/themes/uno.css +262 -0
  100. data/assets/themes/j1/modules/_lightGallery/css/themes/uno.min.css +15 -0
  101. data/assets/themes/j1/modules/_lightGallery/js/core/lightgallery.js +1362 -0
  102. data/assets/themes/j1/modules/_lightGallery/js/core/lightgallery.min.js +4 -0
  103. data/assets/themes/j1/modules/_lightGallery/js/modules/j1/j1-video.js +402 -0
  104. data/assets/themes/j1/modules/_lightGallery/js/modules/j1/j1-video.min.js +8 -0
  105. data/assets/themes/j1/modules/_lightGallery/js/modules/lg-autoplay.js +206 -0
  106. data/assets/themes/j1/modules/_lightGallery/js/modules/lg-autoplay.min.js +5 -0
  107. data/assets/themes/j1/modules/_lightGallery/js/modules/lg-fullscreen.js +126 -0
  108. data/assets/themes/j1/modules/_lightGallery/js/modules/lg-fullscreen.min.js +5 -0
  109. data/assets/themes/j1/modules/_lightGallery/js/modules/lg-hash.js +101 -0
  110. data/assets/themes/j1/modules/_lightGallery/js/modules/lg-hash.min.js +5 -0
  111. data/assets/themes/j1/modules/_lightGallery/js/modules/lg-pager.js +105 -0
  112. data/assets/themes/j1/modules/_lightGallery/js/modules/lg-pager.min.js +5 -0
  113. data/assets/themes/j1/modules/_lightGallery/js/modules/lg-share.js +107 -0
  114. data/assets/themes/j1/modules/_lightGallery/js/modules/lg-share.min.js +5 -0
  115. data/assets/themes/j1/modules/_lightGallery/js/modules/lg-thumbnail.js +478 -0
  116. data/assets/themes/j1/modules/_lightGallery/js/modules/lg-thumbnail.min.js +5 -0
  117. data/assets/themes/j1/modules/_lightGallery/js/modules/lg-video.js +342 -0
  118. data/assets/themes/j1/modules/_lightGallery/js/modules/lg-video.min.js +5 -0
  119. data/assets/themes/j1/modules/_lightGallery/js/modules/lg-zoom.js +527 -0
  120. data/assets/themes/j1/modules/_lightGallery/js/modules/lg-zoom.min.js +5 -0
  121. data/assets/themes/j1/modules/iframeResizer/examples/frame.absolute.html +4 -2
  122. data/assets/themes/j1/modules/iframeResizer/examples/frame.content.html +4 -3
  123. data/assets/themes/j1/modules/iframeResizer/examples/frame.hover.html +4 -2
  124. data/assets/themes/j1/modules/iframeResizer/examples/frame.nested.html +4 -2
  125. data/assets/themes/j1/modules/iframeResizer/examples/frame.textarea.html +4 -2
  126. data/assets/themes/j1/modules/iframeResizer/examples/frame.tolerance.html +4 -2
  127. data/assets/themes/j1/modules/iframeResizer/examples/index.html +2 -0
  128. data/assets/themes/j1/modules/iframeResizer/examples/two.html +4 -2
  129. data/assets/themes/j1/modules/lightGallery/js/core/j1/lightgallery-x.js +1368 -0
  130. data/assets/themes/j1/modules/lightGallery/js/core/j1/lightgallery-x.min.js +10 -0
  131. data/assets/themes/j1/modules/lightGallery/js/modules/j1/j1-x-video.js +344 -0
  132. data/assets/themes/j1/modules/lightGallery/js/modules/j1/j1-x-video.min.js +7 -0
  133. data/assets/themes/j1/modules/log4javascript/docs/backwardsincompatibilities.html +90 -0
  134. data/assets/themes/j1/modules/log4javascript/docs/distribution.html +87 -0
  135. data/assets/themes/j1/modules/log4javascript/docs/index.html +190 -0
  136. data/assets/themes/j1/modules/log4javascript/docs/lite.html +182 -0
  137. data/assets/themes/j1/modules/log4javascript/docs/manual.html +3217 -0
  138. data/assets/themes/j1/modules/log4javascript/docs/manual_lite.html +383 -0
  139. data/assets/themes/j1/modules/log4javascript/docs/quickstart.html +230 -0
  140. data/assets/themes/j1/modules/log4javascript/docs/whatsnew.html +86 -0
  141. data/assets/themes/j1/modules/log4javascript/js/log4javascript.js +5826 -0
  142. data/assets/themes/j1/modules/{util/js/log4javascript.js → log4javascript/js/log4javascript.min.js} +17 -0
  143. data/exe/j1 +1 -1
  144. data/lib/j1/commands/generate.rb +32 -9
  145. data/lib/{patches/rubygems/eventmachine-1.2.7-x64-mingw32/lib/2.6 → j1/patches/rubygems/eventmachine-1.2.7-x64-mingw32/lib/2.7}/fastfilereaderext.so +0 -0
  146. data/lib/{patches/rubygems/eventmachine-1.2.7-x64-mingw32/lib/2.6 → j1/patches/rubygems/eventmachine-1.2.7-x64-mingw32/lib/2.7}/rubyeventmachine.so +0 -0
  147. data/lib/j1/patches/rubygems/execjs-2.7.0/lib/execjs/external_runtime.rb +246 -0
  148. data/lib/j1/version.rb +3 -3
  149. data/lib/j1_app.rb +1 -1
  150. data/lib/j1_app/j1_auth_manager/auth_manager.rb +8 -2
  151. data/lib/j1_app/j1_site_manager/static_site.no-cross-origin.rb +94 -0
  152. data/lib/j1_app/j1_site_manager/static_site.rb +13 -11
  153. data/lib/starter_web/Gemfile +20 -14
  154. data/lib/starter_web/_config.yml +78 -122
  155. data/lib/starter_web/_data/_defaults/j1_config.yml +460 -0
  156. data/lib/starter_web/_data/_defaults/resources.yml +626 -325
  157. data/lib/starter_web/_data/apps/defaults/{justified_gallery.yml → justifiedGallery.yml} +2 -2
  158. data/lib/starter_web/_data/apps/defaults/{gallery_customizer.yml → justifiedGalleryCustomizer.yml} +1 -0
  159. data/lib/starter_web/_data/apps/defaults/{light_gallery.yml → lightGallery.yml} +0 -0
  160. data/lib/starter_web/_data/apps/{justified_gallery.yml → justifiedGallery.yml} +7 -7
  161. data/lib/starter_web/_data/apps/{gallery_customizer.yml → justifiedGalleryCustomizer.yml} +0 -0
  162. data/lib/starter_web/_data/apps/{light_gallery.yml → lightGallery.yml} +0 -0
  163. data/lib/starter_web/_data/blocks/banner.yml +45 -51
  164. data/lib/starter_web/_data/blocks/footer.yml +15 -3
  165. data/lib/starter_web/_data/blocks/panel.yml +13 -13
  166. data/lib/starter_web/_data/builder/blog_navigator.yml +6 -1
  167. data/lib/starter_web/_data/j1_config.yml +8 -7
  168. data/lib/starter_web/_data/layouts/blog_archive.yml +9 -0
  169. data/lib/starter_web/_data/layouts/collection.yml +10 -0
  170. data/lib/starter_web/_data/layouts/default.yml +25 -59
  171. data/lib/starter_web/_data/layouts/home.yml +6 -5
  172. data/lib/starter_web/_data/layouts/page.yml +1 -1
  173. data/lib/starter_web/_data/modules/authentication.yml +11 -100
  174. data/lib/starter_web/_data/modules/defaults/authentication.yml +1 -0
  175. data/lib/starter_web/_data/modules/defaults/cookiebar.yml +1 -0
  176. data/lib/starter_web/_data/modules/defaults/log4javascript.yml +37 -40
  177. data/lib/starter_web/_data/modules/defaults/navigator.yml +5 -2
  178. data/lib/starter_web/_data/modules/defaults/quicksearch.yml +2 -0
  179. data/lib/starter_web/_data/modules/log4javascript.yml +11 -83
  180. data/lib/starter_web/_data/modules/navigator.yml +24 -21
  181. data/lib/starter_web/_data/modules/navigator_menu.yml +27 -8
  182. data/lib/starter_web/_data/modules/quicksearch.yml +2 -0
  183. data/lib/starter_web/_data/plugins/defaults/paginator.yml +15 -12
  184. data/lib/starter_web/_data/plugins/paginator.yml +5 -3
  185. data/lib/starter_web/_data/private.yml +29 -57
  186. data/lib/starter_web/_data/resources.yml +37 -17
  187. data/lib/starter_web/_data/utilities/defaults/util_srv.yml +49 -3
  188. data/lib/starter_web/_data/utilities/util_srv.yml +8 -65
  189. data/lib/starter_web/_includes/attributes.asciidoc +10 -6
  190. data/lib/starter_web/_plugins/asciidoctor-extensions/callout.rb +47 -5
  191. data/lib/starter_web/_plugins/asciidoctor-extensions/conum.rb +28 -1
  192. data/lib/starter_web/_plugins/lunr_index.rb +17 -2
  193. data/lib/starter_web/assets/images/collections/blog/featured/dynamic-web-access.png +0 -0
  194. data/lib/starter_web/assets/images/collections/blog/featured/jamstack-generators.gif +0 -0
  195. data/lib/starter_web/assets/images/collections/blog/featured/jamstack-generators.jpg +0 -0
  196. data/lib/starter_web/assets/images/collections/blog/featured/static-web-access.png +0 -0
  197. data/lib/starter_web/assets/images/modules/attics/christa-dodoo-1920x1280.jpg +0 -0
  198. data/lib/starter_web/assets/images/modules/attics/leon-1920x1280.jpg +0 -0
  199. data/lib/starter_web/assets/images/modules/attics/machine-generator-1920x1280.jpg +0 -0
  200. data/lib/starter_web/assets/images/modules/icons/j1/j1-256x256.gif +0 -0
  201. data/lib/starter_web/collections/posts/public/featured/_posts/0000-00-00-welcome-to-j1.adoc.erb +42 -49
  202. data/lib/starter_web/collections/posts/public/featured/_posts/{2020-06-01-about-cookies.adoc → 2020-01-01-about-cookies.adoc} +37 -42
  203. data/lib/starter_web/collections/posts/public/featured/_posts/{2020-05-01-top-site-generators.adoc → 2021-03-01-site-generators.adoc} +51 -31
  204. data/lib/starter_web/collections/posts/public/featured/_posts/2021-03-03-about-j1.adoc +119 -0
  205. data/lib/starter_web/collections/posts/public/featured/_posts/_includes/attributes.asciidoc +4 -0
  206. data/lib/starter_web/collections/posts/public/series/_posts/2020-01-01-post-test-series.adoc +2 -8
  207. data/lib/starter_web/collections/posts/public/series/_posts/2020-01-02-post-test-series.adoc +3 -10
  208. data/lib/starter_web/collections/posts/public/series/_posts/2020-01-03-post-test-series.adoc +3 -10
  209. data/lib/starter_web/collections/posts/public/series/_posts/2020-01-04-post-test-series.adoc +3 -10
  210. data/lib/starter_web/collections/posts/public/wikipedia/_posts/2016-11-20-minneapolis.adoc +4 -2
  211. data/lib/starter_web/collections/posts/public/wikipedia/_posts/2016-11-24-narcisse-snake-dens.adoc +4 -2
  212. data/lib/starter_web/collections/posts/public/wikipedia/_posts/2016-11-26-columbia-river.adoc +4 -2
  213. data/lib/starter_web/dot.gitattributes +1 -1
  214. data/lib/starter_web/dot.gitignore +5 -1
  215. data/lib/starter_web/index.html +7 -13
  216. data/lib/starter_web/package.json +5 -4
  217. data/lib/starter_web/pages/public/about/about_site.adoc +1 -1
  218. data/lib/starter_web/pages/public/asciidoc_skeletons/_templates/asciidoc-extensions/gallery.asciidoc +1 -1
  219. data/lib/starter_web/pages/public/asciidoc_skeletons/book/000_intro.adoc +7 -1
  220. data/lib/starter_web/pages/public/asciidoc_skeletons/book/100_chapter.adoc +5 -1
  221. data/lib/starter_web/pages/public/asciidoc_skeletons/book/200_chapter.adoc +7 -2
  222. data/lib/starter_web/pages/public/asciidoc_skeletons/book/900_references.adoc +5 -0
  223. data/lib/starter_web/pages/public/asciidoc_skeletons/book/book.adoc +7 -2
  224. data/lib/starter_web/pages/public/asciidoc_skeletons/multi-document/100_chapter.asciidoc +1 -1
  225. data/lib/starter_web/pages/public/asciidoc_skeletons/multi-document/200_chapter.asciidoc +2 -2
  226. data/lib/starter_web/pages/public/asciidoc_skeletons/multi-document/multi.adoc +7 -2
  227. data/lib/starter_web/pages/public/asciidoc_skeletons/simple-document/simple.adoc +6 -1
  228. data/lib/starter_web/pages/public/blog/navigator/archive.html +41 -25
  229. data/lib/starter_web/pages/public/blog/navigator/archive/categoryview.html +49 -29
  230. data/lib/starter_web/pages/public/blog/navigator/archive/dateview.html +47 -30
  231. data/lib/starter_web/pages/public/blog/navigator/archive/tagview.html +42 -14
  232. data/lib/starter_web/pages/public/blog/navigator/index.html +2 -5
  233. data/lib/starter_web/pages/public/learn/roundtrip/100_present_images.adoc +45 -48
  234. data/lib/starter_web/pages/public/learn/roundtrip/100_present_images.org.asciidoc +244 -0
  235. data/lib/starter_web/pages/public/learn/roundtrip/100_present_videos.adoc +21 -20
  236. data/lib/starter_web/pages/public/learn/roundtrip/200_typography.adoc +6 -2
  237. data/lib/starter_web/pages/public/learn/roundtrip/300_icon_fonts.adoc +39 -35
  238. data/lib/starter_web/pages/public/learn/roundtrip/400_asciidoc_extensions.adoc +38 -36
  239. data/lib/starter_web/pages/public/learn/roundtrip/410_bs_modals_extentions.adoc +16 -14
  240. data/lib/starter_web/pages/public/learn/roundtrip/420_responsive_tables_extensions.adoc +11 -9
  241. data/lib/starter_web/pages/public/learn/roundtrip/500_themes.adoc +30 -27
  242. data/lib/starter_web/pages/public/learn/roundtrip/600_quicksearch.adoc +51 -50
  243. data/lib/starter_web/pages/public/learn/roundtrip/_includes/documents/100_gistblock.asciidoc +1 -1
  244. data/lib/starter_web/pages/public/learn/where_to_go.adoc +33 -22
  245. data/lib/starter_web/pages/public/legal/en/100_copyright.adoc +116 -0
  246. data/lib/starter_web/pages/public/legal/en/200_impress.adoc +82 -0
  247. data/lib/starter_web/pages/public/legal/en/300_privacy.adoc +77 -53
  248. data/lib/starter_web/pages/public/legal/en/400_comment_policy.adoc +123 -0
  249. data/lib/starter_web/pages/public/panels/intro_panel/panel.adoc +85 -72
  250. data/lib/starter_web/pages/public/previewer/bootstrap_theme.adoc +1 -1
  251. data/lib/starter_web/pages/public/previewer/iframer.adoc +1 -1
  252. data/lib/starter_web/pages/public/previewer/justified_gallery.html +3 -3
  253. data/lib/starter_web/pages/public/previewer/md_color_palette.adoc +1 -1940
  254. data/lib/starter_web/pages/public/previewer/mdi_icons_preview.adoc +7 -9
  255. data/lib/starter_web/pages/public/previewer/rouge.adoc +1 -1
  256. data/lib/starter_web/pages/public/previewer/twitter_emoji_preview.adoc +1 -1
  257. data/lib/starter_web/utilsrv/_defaults/package.json +13 -9
  258. data/lib/starter_web/utilsrv/package.json +6 -2
  259. data/lib/starter_web/utilsrv/server.js +228 -55
  260. metadata +106 -216
  261. data/assets/data/menu.1.html +0 -505
  262. data/lib/starter_web/_data/_defaults/j1_light_gallery.yml +0 -110
  263. data/lib/starter_web/_data/_defaults/template_settings.yml +0 -258
  264. data/lib/starter_web/_data/plugins/defaults/notebooks.yml +0 -61
  265. data/lib/starter_web/_data/plugins/notebooks.yml +0 -70
  266. data/lib/starter_web/_data/private.yml@localhost +0 -199
  267. data/lib/starter_web/assets/images/collections/blog/featured/staticgen.jpg +0 -0
  268. data/lib/starter_web/assets/images/modules/attics/aditya-joshi-1920x1280.jpg +0 -0
  269. data/lib/starter_web/assets/images/modules/attics/alex-holyoake-1920x1280.jpg +0 -0
  270. data/lib/starter_web/assets/images/modules/attics/anaya-katlego-1920x1280.jpg +0 -0
  271. data/lib/starter_web/assets/images/modules/attics/antonella-lombardi-1920x1280.jpg +0 -0
  272. data/lib/starter_web/assets/images/modules/attics/antonino-visalli-1920x1280.jpg +0 -0
  273. data/lib/starter_web/assets/images/modules/attics/banner/docker-1280x600-bw.jpg +0 -0
  274. data/lib/starter_web/assets/images/modules/attics/banner/jekyll.1200x600-bw.jpg +0 -0
  275. data/lib/starter_web/assets/images/modules/attics/banner/signpost-1920x800-bw.jpg +0 -0
  276. data/lib/starter_web/assets/images/modules/attics/banner/water-journal-1280x600.jpg +0 -0
  277. data/lib/starter_web/assets/images/modules/attics/banner/write-1280x600-bw.jpg +0 -0
  278. data/lib/starter_web/assets/images/modules/attics/brandon-mowinkel-1920x1280.jpg +0 -0
  279. data/lib/starter_web/assets/images/modules/attics/daniel-jensen-1920x1280.jpg +0 -0
  280. data/lib/starter_web/assets/images/modules/attics/florian-olivo-1920x1280.jpg +0 -0
  281. data/lib/starter_web/assets/images/modules/attics/go-up-1920x1280-bw.jpg +0 -0
  282. data/lib/starter_web/assets/images/modules/attics/ian-schneider-1920x1280.jpg +0 -0
  283. data/lib/starter_web/assets/images/modules/attics/jason-rosewell-1920x1280.jpg +0 -0
  284. data/lib/starter_web/assets/images/modules/attics/joel-filipe-1920x1280.jpg +0 -0
  285. data/lib/starter_web/assets/images/modules/attics/lianhao-1920x1280.jpg +0 -0
  286. data/lib/starter_web/assets/images/modules/attics/library-1920x1280-bw.jpg +0 -0
  287. data/lib/starter_web/assets/images/modules/attics/mae-mue-1920x1280-v.jpg +0 -0
  288. data/lib/starter_web/assets/images/modules/attics/mae-mue-1920x1280.jpg +0 -0
  289. data/lib/starter_web/assets/images/modules/attics/markus-spiske-1920x1280.jpg +0 -0
  290. data/lib/starter_web/assets/images/modules/attics/markus-spiske.jpg +0 -0
  291. data/lib/starter_web/assets/images/modules/attics/markus-spiske3-1920x1280.jpg +0 -0
  292. data/lib/starter_web/assets/images/modules/attics/modules-apps-1920x1280.jpg +0 -0
  293. data/lib/starter_web/assets/images/modules/attics/nicola-styles-1920x1280.jpg +0 -0
  294. data/lib/starter_web/assets/images/modules/attics/no-time-1920x1280.jpg +0 -0
  295. data/lib/starter_web/assets/images/modules/attics/nousnou-iwasaki-1920x1280.jpg +0 -0
  296. data/lib/starter_web/assets/images/modules/attics/premium-1920x1280-bw.jpg +0 -0
  297. data/lib/starter_web/assets/images/modules/attics/responsive-text-1920x1280.jpg +0 -0
  298. data/lib/starter_web/assets/images/modules/attics/robert-v-ruggiero-1920x1280.jpg +0 -0
  299. data/lib/starter_web/assets/images/modules/attics/romain-vignes-1920x1280.jpg +0 -0
  300. data/lib/starter_web/assets/images/modules/attics/spider-web-1920x1200-bw.jpg +0 -0
  301. data/lib/starter_web/assets/images/modules/attics/the-place-1920x1280.jpg +0 -0
  302. data/lib/starter_web/assets/images/modules/icons/algolia/search-by-algolia.png +0 -0
  303. data/lib/starter_web/assets/images/modules/icons/d1/d1-256x256.png +0 -0
  304. data/lib/starter_web/assets/images/modules/icons/d1/d1-32x32.ico +0 -0
  305. data/lib/starter_web/assets/images/modules/icons/d1/d1-512x512.png +0 -0
  306. data/lib/starter_web/assets/images/modules/icons/d1/d1-64x64.png +0 -0
  307. data/lib/starter_web/assets/images/modules/icons/d1/d1.ico +0 -0
  308. data/lib/starter_web/assets/images/modules/icons/d1/favicon.ico +0 -0
  309. data/lib/starter_web/assets/images/modules/icons/d1/scalable/d1.svg +0 -2025
  310. data/lib/starter_web/assets/images/modules/icons/netlify/nf-logo.png +0 -0
  311. data/lib/starter_web/assets/images/modules/icons/p1/favicon.ico +0 -0
  312. data/lib/starter_web/assets/images/modules/icons/p1/p1-256x256.png +0 -0
  313. data/lib/starter_web/assets/images/modules/icons/p1/p1-32x32.ico +0 -0
  314. data/lib/starter_web/assets/images/modules/icons/p1/p1-512x512.png +0 -0
  315. data/lib/starter_web/assets/images/modules/icons/p1/p1-64x64.png +0 -0
  316. data/lib/starter_web/assets/images/modules/icons/p1/p1.ico +0 -0
  317. data/lib/starter_web/assets/images/modules/icons/p1/scalable/p1.svg +0 -2020
  318. data/lib/starter_web/assets/images/modules/icons/patreon/favicon-16x16.png +0 -0
  319. data/lib/starter_web/assets/images/modules/icons/patreon/favicon-32x32.png +0 -0
  320. data/lib/starter_web/assets/images/pages/j1_webhooks/000_browser_console-1280x600.jpg +0 -0
  321. data/lib/starter_web/assets/images/pages/j1_webhooks/001_smee_channel-1280x400.jpg +0 -0
  322. data/lib/starter_web/assets/images/pages/j1_webhooks/002_gh_repo_settings-1280x800.jpg +0 -0
  323. data/lib/starter_web/assets/images/pages/j1_webhooks/003_gh_webhook_settings-1280x1000.jpg +0 -0
  324. data/lib/starter_web/assets/images/pages/j1_webhooks/004_gh_webhook_settings-post-1280x600.jpg +0 -0
  325. data/lib/starter_web/assets/images/pages/j1_webhooks/005_smee_channel_ping_receive-1280x800.jpg +0 -0
  326. data/lib/starter_web/assets/images/pages/j1_webhooks/006_gh_redeliver_payload-1280x900.jpg +0 -0
  327. data/lib/starter_web/assets/images/pages/j1_webhooks/007_receive_redelivered_payload-1280x800.jpg +0 -0
  328. data/lib/starter_web/assets/images/pages/j1_webhooks/base/000_browser_console.jpg +0 -0
  329. data/lib/starter_web/assets/images/pages/j1_webhooks/base/000_smee_channel.jpg +0 -0
  330. data/lib/starter_web/assets/images/pages/j1_webhooks/base/002_gh_repo-settings.jpg +0 -0
  331. data/lib/starter_web/assets/images/pages/j1_webhooks/base/003_gh_webhook_settings.jpg +0 -0
  332. data/lib/starter_web/assets/images/pages/j1_webhooks/base/004_gh_webhook_settings-post.jpg +0 -0
  333. data/lib/starter_web/assets/images/pages/j1_webhooks/base/005_smee_channel_ping_received.jpg +0 -0
  334. data/lib/starter_web/assets/images/pages/j1_webhooks/base/006_gh_redeliver_payload.jpg +0 -0
  335. data/lib/starter_web/assets/images/pages/j1_webhooks/base/007_receive_redelivered_payload.jpg +0 -0
  336. data/lib/starter_web/assets/images/pages/j1_webhooks/base/webhook_flow.jpg +0 -0
  337. data/lib/starter_web/assets/images/pages/j1_webhooks/flows/webhook_flow-1920x1280.jpg +0 -0
  338. data/lib/starter_web/assets/images/pages/j1_webhooks/scaleable/webhook_flow.svg +0 -432
  339. data/lib/starter_web/assets/images/pages/j1_webhooks/uml/auth_mgmr_signin_request_flow.uxf +0 -632
  340. data/lib/starter_web/assets/images/pages/j1_webhooks/uml/webhook_flow.uxf +0 -648
  341. data/lib/starter_web/assets/images/pages/kickstarter/web_in_a_day/get-started-1920x1280-bw.jpg +0 -0
  342. data/lib/starter_web/assets/images/pages/kickstarter/web_in_a_day/intro/130_layout_inheritance.png +0 -0
  343. data/lib/starter_web/assets/images/pages/kickstarter/web_in_a_day/intro/content_inheritance.png +0 -0
  344. data/lib/starter_web/assets/images/pages/kickstarter/web_in_a_day/intro/content_inheritance_thumb.png +0 -0
  345. data/lib/starter_web/assets/images/pages/kickstarter/web_in_a_day/intro/html_layout.png +0 -0
  346. data/lib/starter_web/assets/images/pages/kickstarter/web_in_a_day/intro/j1-quickstart-windows.png +0 -0
  347. data/lib/starter_web/assets/images/pages/kickstarter/web_in_a_day/intro/j1-template-theme.jpg +0 -0
  348. data/lib/starter_web/assets/images/pages/kickstarter/web_in_a_day/intro/j1_layout.png +0 -0
  349. data/lib/starter_web/assets/images/pages/kickstarter/web_in_a_day/intro/jekyll-minima-theme.png +0 -0
  350. data/lib/starter_web/assets/images/pages/kickstarter/web_in_a_day/intro/lane_inheritance.png +0 -0
  351. data/lib/starter_web/assets/images/pages/kickstarter/web_in_a_day/intro/layout_inheritance.png +0 -0
  352. data/lib/starter_web/assets/images/pages/kickstarter/web_in_a_day/preparations/msys_installation.jpg +0 -0
  353. data/lib/starter_web/assets/images/pages/log4j/apache-log4j-logo.png +0 -0
  354. data/lib/starter_web/assets/images/pages/log4r/code-1920x600.jpg +0 -0
  355. data/lib/starter_web/assets/images/pages/log4r/log4r-logo.png +0 -0
  356. data/lib/starter_web/assets/images/pages/log_expert/image_000.png +0 -0
  357. data/lib/starter_web/assets/images/pages/log_expert/image_001.png +0 -0
  358. data/lib/starter_web/assets/images/pages/log_expert/image_002.png +0 -0
  359. data/lib/starter_web/assets/images/pages/log_expert/image_003.png +0 -0
  360. data/lib/starter_web/assets/images/pages/log_expert/image_004.png +0 -0
  361. data/lib/starter_web/assets/images/pages/log_expert/image_005.png +0 -0
  362. data/lib/starter_web/assets/images/pages/log_expert/image_006.png +0 -0
  363. data/lib/starter_web/assets/images/pages/log_expert/image_007.png +0 -0
  364. data/lib/starter_web/assets/images/pages/log_expert/image_008.png +0 -0
  365. data/lib/starter_web/assets/images/pages/log_expert/image_009.png +0 -0
  366. data/lib/starter_web/assets/images/pages/log_expert/image_010.png +0 -0
  367. data/lib/starter_web/assets/images/pages/log_expert/image_011.png +0 -0
  368. data/lib/starter_web/assets/images/pages/log_expert/image_012.png +0 -0
  369. data/lib/starter_web/assets/images/pages/log_expert/image_013.png +0 -0
  370. data/lib/starter_web/assets/images/pages/log_expert/image_014.png +0 -0
  371. data/lib/starter_web/assets/images/pages/log_expert/image_015.png +0 -0
  372. data/lib/starter_web/assets/images/pages/log_expert/image_016.png +0 -0
  373. data/lib/starter_web/assets/images/pages/log_expert/image_017.png +0 -0
  374. data/lib/starter_web/assets/images/pages/log_expert/image_018.png +0 -0
  375. data/lib/starter_web/assets/images/pages/log_expert/image_019.png +0 -0
  376. data/lib/starter_web/assets/images/pages/log_expert/image_020.png +0 -0
  377. data/lib/starter_web/assets/images/pages/log_expert/image_021.png +0 -0
  378. data/lib/starter_web/assets/images/pages/log_expert/image_022.png +0 -0
  379. data/lib/starter_web/assets/images/pages/log_expert/image_023.png +0 -0
  380. data/lib/starter_web/assets/images/pages/log_expert/image_024.png +0 -0
  381. data/lib/starter_web/assets/images/pages/log_expert/image_025.png +0 -0
  382. data/lib/starter_web/assets/images/pages/log_expert/image_026.png +0 -0
  383. data/lib/starter_web/assets/images/pages/log_expert/image_027.png +0 -0
  384. data/lib/starter_web/assets/images/pages/log_expert/image_028.png +0 -0
  385. data/lib/starter_web/assets/images/pages/log_expert/image_029.png +0 -0
  386. data/lib/starter_web/assets/images/pages/log_expert/image_030.png +0 -0
  387. data/lib/starter_web/assets/images/pages/log_expert/image_031.png +0 -0
  388. data/lib/starter_web/assets/images/pages/log_expert/image_032.png +0 -0
  389. data/lib/starter_web/assets/images/pages/log_expert/image_033.png +0 -0
  390. data/lib/starter_web/assets/images/pages/log_expert/image_034.png +0 -0
  391. data/lib/starter_web/assets/images/pages/log_expert/image_035.png +0 -0
  392. data/lib/starter_web/assets/images/pages/log_expert/image_036.png +0 -0
  393. data/lib/starter_web/assets/images/pages/log_expert/image_037.png +0 -0
  394. data/lib/starter_web/assets/images/pages/log_expert/image_038.png +0 -0
  395. data/lib/starter_web/assets/images/pages/log_expert/image_039.png +0 -0
  396. data/lib/starter_web/assets/images/pages/log_expert/image_040.png +0 -0
  397. data/lib/starter_web/assets/images/pages/log_expert/image_041.png +0 -0
  398. data/lib/starter_web/assets/images/pages/log_expert/image_042.png +0 -0
  399. data/lib/starter_web/assets/images/pages/log_expert/image_043.png +0 -0
  400. data/lib/starter_web/assets/images/pages/log_expert/image_044.png +0 -0
  401. data/lib/starter_web/assets/images/pages/log_expert/image_045.png +0 -0
  402. data/lib/starter_web/assets/images/pages/log_expert/image_046.png +0 -0
  403. data/lib/starter_web/assets/images/pages/log_expert/image_047.png +0 -0
  404. data/lib/starter_web/assets/images/pages/log_expert/image_048.png +0 -0
  405. data/lib/starter_web/assets/images/pages/log_expert/image_049.png +0 -0
  406. data/lib/starter_web/assets/images/pages/log_expert/image_050.png +0 -0
  407. data/lib/starter_web/assets/images/pages/log_expert/image_051.png +0 -0
  408. data/lib/starter_web/assets/images/pages/log_expert/image_052.png +0 -0
  409. data/lib/starter_web/assets/images/pages/log_expert/image_053.png +0 -0
  410. data/lib/starter_web/assets/images/pages/log_expert/image_054.png +0 -0
  411. data/lib/starter_web/assets/images/pages/log_expert/image_055.png +0 -0
  412. data/lib/starter_web/assets/images/pages/log_expert/image_056.png +0 -0
  413. data/lib/starter_web/assets/images/pages/log_expert/image_057.png +0 -0
  414. data/lib/starter_web/assets/images/pages/material/apple-touch-icon.png +0 -0
  415. data/lib/starter_web/assets/images/pages/pen/jquery/jQuery-logo.png +0 -0
  416. data/lib/starter_web/assets/images/pages/pen/jquery/jquery-banner-1280x600.jpg +0 -0
  417. data/lib/starter_web/assets/images/pages/pen/jquery/jquery-banner-1920x800.jpg +0 -0
  418. data/lib/starter_web/assets/images/pages/pen/jquery/src/JQuery-Logo.svg +0 -122
  419. data/lib/starter_web/assets/images/pages/pen/jquery/src/banner.psd +0 -0
  420. data/lib/starter_web/assets/images/pages/winlogbeat/coordinate-map.png +0 -0
  421. data/lib/starter_web/assets/images/pages/winlogbeat/kibana-powershell.jpg +0 -0
  422. data/lib/starter_web/assets/images/pages/winlogbeat/option_ignore_outgoing.png +0 -0
  423. data/lib/starter_web/assets/images/pages/winlogbeat/winlogbeat-dashboard.png +0 -0
  424. data/lib/starter_web/assets/images/pages/writers_guide/1280px-PDCA_Process.png +0 -0
  425. data/lib/starter_web/assets/images/pages/writers_guide/annie-spratt-1920x1280.jpg +0 -0
  426. data/lib/starter_web/assets/images/pages/writers_guide/deming-cycle.png +0 -0
  427. data/lib/starter_web/assets/images/pages/writers_guide/humble-lamb-1920x1280.jpg +0 -0
  428. data/lib/starter_web/assets/images/pages/writers_guide/john-schnobrich-1920x1280.jpg +0 -0
  429. data/lib/starter_web/assets/images/pages/writers_guide/sigmund-1920x1280.jpg +0 -0
  430. data/lib/starter_web/collections/posts/public/series/_posts/_includes/attributes.asciidoc +0 -37
  431. data/lib/starter_web/collections/posts/public/series/_posts/_includes/documents/readme +0 -0
  432. data/lib/starter_web/collections/posts/public/series/_posts/_includes/tables/debug_variables.asciidoc +0 -47
  433. data/lib/starter_web/pages/protected/site_search.adoc +0 -180
  434. data/lib/starter_web/pages/public/asciidoc_skeletons/book/book.pdf +1 -5439
  435. data/lib/starter_web/pages/public/legal/en/000_copyright.adoc +0 -93
  436. data/lib/starter_web/pages/public/legal/en/100_impress.adoc +0 -55
  437. data/lib/starter_web/pages/public/legal/en/200_terms_of_use.adoc +0 -53
  438. data/lib/starter_web/pages/public/legal/en/eu/cookie.policy.asciidoc +0 -50
@@ -0,0 +1,123 @@
1
+ ---
2
+ title: Comment Policy
3
+ tagline: discuss with respect
4
+ date: 2021-03-30 00:00:00 +100
5
+ description: >
6
+ We love comments and appreciate the time that our visitors
7
+ spend to share ideas and give feedback. Thank you to everyone
8
+ who comments at {j1--site-name}.
9
+
10
+ tags: [ Legal ]
11
+ categories: [ Comments, Policy ]
12
+
13
+ sitemap: false
14
+ robots:
15
+ index: false
16
+ follow: false
17
+
18
+ fam_menu_id: page_ctrl_simple
19
+ scrollbar: false
20
+ comments: false
21
+ toc: true
22
+
23
+ permalink: /pages/public/legal/en/comment_policy/
24
+ regenerate: true
25
+
26
+ resources: []
27
+ resource_options:
28
+ - attic:
29
+ padding_top: 400
30
+ padding_bottom: 50
31
+ opacity: 0.5
32
+ slides:
33
+ - url: /assets/images/modules/attics/leon-1920x1280.jpg
34
+ alt: Photo by Leon on Unsplash
35
+ badge:
36
+ type: unsplash
37
+ author: Leon
38
+ href: https://unsplash.com/@myleon
39
+ ---
40
+
41
+ // Page Initializer
42
+ // =============================================================================
43
+ // Enable the Liquid Preprocessor
44
+ :page-liquid:
45
+
46
+ // Set (local) page attributes here
47
+ // -----------------------------------------------------------------------------
48
+ // :page--attr: <attr-value>
49
+ :disqus: true
50
+
51
+ // Load Liquid procedures
52
+ // -----------------------------------------------------------------------------
53
+ {% capture load_attributes %}themes/{{site.template.name}}/procedures/global/attributes_loader.proc{%endcapture%}
54
+
55
+ // Load page attributes
56
+ // -----------------------------------------------------------------------------
57
+ {% include {{load_attributes}} scope="global" %}
58
+
59
+
60
+ // Page content
61
+ // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
62
+
63
+ // Include sub-documents
64
+ // -----------------------------------------------------------------------------
65
+
66
+ We love comments and appreciate our visitor's time to share ideas and give
67
+ feedback. Thank you to everyone who places a comment on the {j1--site-name}
68
+ website.
69
+
70
+ ifeval::[{disqus} == true]
71
+ To access the public commenting feature, you will need to register for
72
+ an account as an individual at _Disqus_. One of the primary purposes of
73
+ encouraging comments on the {j1--site-name} website is to promote a sense
74
+ of community.
75
+
76
+ NOTE: _Disqus_ (/dɪsˈkʌs/) is a blog comment hosting service for websites
77
+ and online communities that use a networked platform. The company's
78
+ platform includes various features, such as social integration, social
79
+ networking, user profiles, spam and moderation tools, analytics,
80
+ email notifications, and mobile commenting.
81
+ endif::[]
82
+
83
+ == Discuss with Respect
84
+
85
+ One of the most important aspects of a helpful blog is the conversation
86
+ that occurs through comments that visitors publish on blog posts. However,
87
+ comment conversations can sometimes take a negative turn or feature spam
88
+ links. That's why it's helpful to have a blog comment policy. Visitors
89
+ understand what is and is not acceptable when commenting on your blog posts.
90
+
91
+ == Comments are Welcome
92
+
93
+ Comments are welcomed and encouraged on this site, but there are some
94
+ instances where comments will be edited or deleted. The owner of this site
95
+ reserves the right to edit or delete any comments submitted to the blog
96
+ without notice.
97
+
98
+ This comment policy is subject to change at any time:
99
+
100
+ Promotional::
101
+ Comments deemed to be spam or solely promotional in nature will be
102
+ deleted. Including a link to relevant content is permitted, but comments
103
+ should be relevant to the post topic.
104
+
105
+ Profanity::
106
+ Comments including profanity will be deleted.
107
+
108
+ Roughly language::
109
+ Comments containing language or concepts that could be deemed offensive
110
+ will be deleted. Note this may include abusive, threatening, pornographic,
111
+ offensive, misleading, or libelous language.
112
+
113
+ Attack::
114
+ Comments that attack an individual directly will be deleted.
115
+
116
+ Harassing::
117
+ Comments that harass other posters will be deleted. While conversation and
118
+ the sharing of different ideas are encouraged, all comments need to be
119
+ respectful towards our contributors and those leaving comments.
120
+
121
+ Anonymous::
122
+ Anonymous comments will be deleted. We only accept comments from people who
123
+ identify themselves.
@@ -1,27 +1,34 @@
1
1
  ---
2
2
  title: J1 Template
3
3
  tagline: creating responsive websites
4
- date: 2020-11-03 00:00:00
4
+ date: 2020-11-03 00:00:00 +100
5
5
  description: >
6
- A good user experience browsing a Web is one of
7
- the most important features a site has to offer as
8
- a must. Beside excellent content. Presenting content
9
- at it’s best on all devices, for all window sizes makes
10
- an excellent Web brilliant. J1 Template support your Web
11
- for full responsiveness, for the best user experience on
12
- all modern devices.
6
+ A good user experience browsing a Web site is one of the most important
7
+ features a website offers as a must, besides excellent content. Presenting
8
+ content at its best on all devices for all window sizes makes a great Web
9
+ brilliant. J1 Template supports your Web for full responsiveness, for the
10
+ best user experience on all modern devices.
13
11
 
14
12
 
15
13
  tags: [ Jekyll, Template ]
16
14
  categories: [ Info, Introduction ]
17
15
 
16
+ robots:
17
+ index: false
18
+ follow: false
19
+
20
+
21
+ comments: false
22
+ fam_menu_id: page_ctrl_simple
23
+
18
24
  permalink: /pages/public/panels/intro_panel/
19
- regenerate: false
25
+ regenerate: true
20
26
 
21
27
  resources: [
22
28
  clipboard, rouge, carousel, lightbox,
23
- justified_gallery, light_gallery
29
+ justifiedGallery, lightGallery
24
30
  ]
31
+
25
32
  resource_options:
26
33
  - attic:
27
34
  padding_top: 400
@@ -46,22 +53,21 @@ resource_options:
46
53
  image::/assets/images/pages/panels/responsive-text-1920x800.jpg[{{page.title}}]
47
54
 
48
55
  A good user experience browsing a Web site is one of the most important
49
- feature a site has to offer as a must. Beside excellent content. Presenting
50
- content at its best on all devices, for all window sizes makes an excellent
51
- Web brilliant. J1 Template supports your Web for full responsiveness, for
52
- the best user experience on all modern devices.
56
+ features a website offers as a must, besides excellent content. Presenting
57
+ content at its best on all devices for all window sizes makes a great Web
58
+ brilliant. J1 Template supports your Web for full responsiveness, for the
59
+ best user experience on all modern devices.
53
60
 
54
61
  === Bootstrap 4 Integration
55
62
 
56
63
  To not sidetrack your audience by irritating user interface (UI) components,
57
- J1 Template is based on Bootstrap. Bootstrap is one of the most popular
58
- frameworks for web development used today. J1 is based on Bootstrap V4, the
59
- last current version to support your visitors by common elements for navigation,
60
- data input, tables, and many other components more.
64
+ the J1 Template is based on Bootstrap. Bootstrap is one of the most popular
65
+ frameworks for web development used today. J1 is based on Bootstrap V4,
66
+ the last current version to support your visitors by common navigation
67
+ elements, data input, tables, and many other components.
61
68
 
62
- For your development projects, Bootstrap simplifies HTML programming a lot,
63
- offers excellent JS support for interactive components like navigation
64
- elements, cards, forms, etc.
69
+ Bootstrap simplifies HTML programming a lot, offers excellent JS support
70
+ for interactive components like navigation elements, cards, forms, etc.
65
71
 
66
72
  [[current-technology]]
67
73
  == HTML5 · CSS3 · JS
@@ -76,62 +82,69 @@ of web development, languages, and tools.
76
82
 
77
83
  === Coding web pages
78
84
 
79
- J1 is using HTML5, the latest major version of HTML, for structuring content
80
- on the World Wide Web. The current version of the HTML standard offers a lot
81
- of new features including detailed processing models to support more
85
+ J1 uses HTML5, the latest major HTML version, for structuring content
86
+ on the World Wide Web. The HTML standard's current version many new features,
87
+ including detailed processing models to support more
82
88
  interoperable implementations. It extends and improves HTML markups available
83
89
  in older versions.
84
90
 
85
91
  HTML5 introduces application programming interfaces (APIs) for more complex
86
92
  web applications. For the same reasons, the new HTML standard is also a good
87
- choice for modern cross-platform mobile applications, because it includes
93
+ choice for modern cross-platform mobile applications because it includes
88
94
  features designed with mobile devices in mind.
89
95
 
90
96
  Many new features are included with HTML5. To natively support multimedia and
91
97
  graphical content, the new `<video>`, `<audio>` and `<canvas>` elements were
92
- added. Besides this, support for *SVG* (scalable vector graphics), an API called
93
- *MathML* for mathematical formulas and a grid system called *Flex* are now
94
- available.
98
+ added. Besides this, *SVG* (scalable vector graphics) support an API called
99
+ *MathML* for mathematical formulas, and Flex's grid system is now available.
95
100
 
96
101
  The new standard allows to use so-called *semantic* markup elements for your
97
102
  documents. New structure elements such as `<main>`, `<section>`, `<article>`,
98
103
  `<header>` or `<footer>` (and many more) were added. Better structured HTML
99
104
  code can help people having disabilities to read the pages presented better.
100
105
 
101
- *CSS* (cascadeded style sheets) is designed to enable the *separation* of
102
- presentation and content. Including layout, colors, and fonts for example.
103
- This separation improves content accessibility, provide more flexibility and
104
- control in the presentation.
106
+ *CSS* (cascading style sheets) is designed to enable the *separation* of
107
+ presentation and content, including layout, colors, and fonts. This separation
108
+ improves content accessibility, provides more flexibility and control for
109
+ the presentation.
105
110
 
106
111
  Separation of formatting and content also makes it feasible to present the
107
- same page in different styles. For example, the *themes feature* of J1 Template
108
- makes use of this.
112
+ same page in different styles. For example, the *themes feature* of the J1
113
+ Template makes use of this.
109
114
 
110
- *CSS3*, the current standard for cascadeded style sheets, is divided into
111
- several separated components called *modules*. Each module adds new capabilities
112
- or extends features defined in the former CSS2 standard. HTML5 in combination
113
- with CSS3 allows creating modern and modular code for web pages that can be
115
+ *CSS3*, the current standard for cascaded style sheets, is divided into
116
+ several separate components called *modules*. Each module adds new
117
+ capabilities or extends features defined in the former CSS2 standard. HTML5,
118
+ in combination with CSS3, allows creating modern and modular code for web pages
114
119
  viewed on all current devices like Mobiles, Tablets, or the classic Desktop PC.
115
- The new HTML5 elements plus CSS3 modules can be used as a replacement for
116
- proprietary solutions like _Adobe Flash_ to build modern webpages based on
117
- open standards.
120
+ The new HTML5 elements plus CSS3 modules can replace proprietary solutions
121
+ like _Adobe Flash_ to build modern web pages based on open standards
122
+
123
+ *CSS3*, the current standard for cascading style sheets, is divided into
124
+ several separate components called modules. Each module adds new capabilities
125
+ or extends features defined in the former CSS2 standard. HTML5, in combination
126
+ with CSS3, allows creating modern and modular code for web pages that can be
127
+ viewed on all current devices like Mobiles, Tablets, or the classic Desktop
128
+ PC. The new HTML5 elements plus CSS3 modules can replace proprietary
129
+ solutions like Adobe Flash to build modern web pages based on open standards.
130
+
118
131
 
119
132
  === Javascript
120
133
 
121
134
  [role="mb-3"]
122
135
  image::/assets/images/pages/panels/modules-apps-1920x800.jpg[{{page.title}}]
123
136
 
124
- JavaScript is a text-based programming language used both on the client-side
125
- and server-side that allows you to make web pages interactive. Where HTML and
126
- CSS are languages that give structure and style to web pages, JavaScript gives
127
- web pages interactive elements that engage a user.
137
+ JavaScript is a text-based programming language used on the client-side and
138
+ server-side to make web pages interactive. HTML and CSS are languages that
139
+ give structure and style to web pages, and JavaScript provides web pages
140
+ interactive elements that engage a user.
128
141
 
129
142
  Content placement and basic methods for the dynamic of elements can be done
130
143
  using pure HTML5 and CSS3. For more complex solutions like *modules* (to
131
- provide dynamic, interactive elements), the support of *Javascript* for a
144
+ provide dynamic, interactive features), the support of *Javascript* for a
132
145
  webpage is needed.
133
146
 
134
- JavaScript is used for J1 mainly as a client-side script-engine. A client-side
147
+ JavaScript is used for J1 mainly as a client-side script engine. A client-side
135
148
  script is a programming language that performs its tasks entirely on the
136
149
  client's machine and does not need to interact with the server to function.
137
150
 
@@ -139,13 +152,13 @@ Some of the dynamic website enhancements performed by JavaScript are:
139
152
 
140
153
  * Loading (new) content or data onto the page without reloading the page
141
154
  * Rollover effects and dropdown menus
142
- * Animating page elements such as fading, resizing or relocating
155
+ * Animating page elements such as fading, resizing, or relocating
143
156
  * Playing audio and video
144
157
 
145
158
  J1 Template has build-in a wide range of JS-powered modules to support a
146
- website e.g. by a powerful navigation system, for presenting image data in
147
- galleries, lightboxes, and so on. Good news are: no programming JavaScript
148
- is needed to use the build-in JS-based modules.
159
+ website, e.g., by a powerful navigation system, for presenting image data
160
+ in galleries, lightboxes, and so on. The good news is: no programming
161
+ JavaScript is needed to use the build-in JS-based modules.
149
162
 
150
163
  [[launch-ready]]
151
164
  == Start in No Time
@@ -161,46 +174,46 @@ your content is done automatically and allows you to concentrate on what
161
174
  truly matters: your content.
162
175
 
163
176
  Using J1, you can instantly start a web project by creating your content and
164
- not by start learning the deep web development technologies.
177
+ not earning the deep of web development technologies.
165
178
 
166
179
  === Create your Web
167
180
 
168
- J1 is highly customizable. Based on a pure configuration, a website can be
181
+ J1 is highly customizable. Based on a pure configuration, websites are
169
182
  created. The template system creates static web pages using Jekyll as the
170
- base HTML code generator. Static websites are fast and secure but simple
171
- to manage. No complex database systems and PHP interfaces are needed.
183
+ base HTML code generator. Static websites are fast and secure but
184
+ straightforward to manage. No complex database systems and PHP interfaces
185
+ are needed.
172
186
 
173
- To present a static website, only a web server environment is needed. To
174
- publish a website on the Internet, many possible platforms can be used like
175
- Github, Netlify, or Heroku for example - for free!
187
+ For managing static websites, only a web server environment is needed. Publish
188
+ a site on the Internet, possible platforms can be used like Github, Netlify,
189
+ or Heroku, for free!
176
190
 
177
191
  The Internet is not a peaceful place. Every site accessible from the public
178
192
  is attacked from the first second if published. Static websites are robust,
179
- fast and that’s import: intrinsically secure. That means: not changeable.
180
- No offender attacking your website can break your site. Because it’s static
193
+ fast, and that’s import: intrinsically secure. That means: not changeable.
194
+ No offender attacking your website can break your site because it’s static,
181
195
  or in other words: unchangeable, unbreakable from its nature.
182
196
 
183
- This makes a static website for the better.
197
+ That makes a static website for the better.
184
198
 
185
199
  === Modules and Apps
186
200
 
187
- Its predictable what base components are needed for a modern website. For
188
- Content Management Systems (CMS) like WordPress, Joomla, or Drupal a huge
189
- number of modules are available to extend a site by e.g. Apps like image
190
- galleries, video players, calendars, etc.
201
+ It's predictable what base components are needed for a modern website. For
202
+ Content Management Systems (CMS) like WordPress, Joomla, or Drupal, many
203
+ modules are available to extend a site by, e.g., Apps like image galleries,
204
+ video players, calendars, etc.
191
205
 
192
- This is a bit different for static webs as they don’t have a central Management
206
+ That is a bit different for static webs as they don’t have a central Management
193
207
  System as CMS does to integrate external code. There no ecosystem, no
194
208
  marketplace to get apps and modules from.
195
209
 
196
210
  gallery::jg_old_times[]
197
211
 
198
212
  Luckily, it is not that hard to integrate external components into the world
199
- of Jekyll. But one of the objectives of J1 is to give people a ready-to-use
200
- toolset without the need to install, to integrate components that are expected
201
- as a need.
213
+ of Jekyll. One of J1 is to give people a ready-to-use toolset without the
214
+ need to install, to integrate features that are expected as a need.
202
215
 
203
- A rich set of modules are already included. The modules support common use
216
+ A rich set of modules are already included. The modules support usual use
204
217
  cases of a website like a flexible navigation system, a local search,
205
- lightboxes to present pictures and videos, little helpers for scrolling or
206
- to automatically create TOCs (table of contents) for a page.
218
+ lightboxes to present pictures and videos, little helpers for scrolling,
219
+ or to automatically create TOCs (table of contents) for a page.
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  title: Theme previewer
3
3
  tagline: common components
4
- date: 2020-11-08 00:00:00
4
+ date: 2020-11-08 00:00:00 +100
5
5
  description: >
6
6
  Bootstrap is a HTML, CSS & JS Library that focuses on
7
7
  simplifying the development of modern web pages. The
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  title: Framer
3
3
  tagline: automagic iframes
4
- date: 2020-11-08 00:00:00
4
+ date: 2020-11-08 00:00:00 +100
5
5
  description: >
6
6
  Test page for J1 module framer. Framer enables the automatic
7
7
  resizing of the height and width of both same and cross domain
@@ -3,7 +3,7 @@ layout: raw
3
3
 
4
4
  title: Gallery Previewer
5
5
  tagline: manage galleries your way
6
- date: 2020-11-08 00:00:00
6
+ date: 2020-11-08 00:00:00 +100
7
7
  description: >
8
8
  To create modern image and video galleries, J1 Template implements
9
9
  the jQuery plugin JustifiedGallery. The module is a great tool to
@@ -22,7 +22,7 @@ toc: false
22
22
  permalink: /pages/public/previewer/justified_gallery/
23
23
  regenerate: false
24
24
 
25
- resources: [ gallery_customizer, justified_gallery, light_gallery ]
25
+ resources: [ lightGallery, justifiedGallery, justifiedGalleryCustomizer ]
26
26
  resource_options:
27
27
  - attic:
28
28
  padding_top: 400
@@ -37,5 +37,5 @@ resource_options:
37
37
  href: https://unsplash.com/@tents_and_tread
38
38
  ---
39
39
 
40
- <!-- [INFO ] [j1.gallery_customizer ] [Placement of the content] -->
40
+ <!-- [INFO ] [j1.justifiedGalleryCustomizer ] [Placement of the content] -->
41
41
  <div id="customizer" class="mb-5"></div>
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  title: J1 Colors
3
3
  tagline: md color palette
4
- date: 2021-01-08 00:00:00
4
+ date: 2021-01-08 00:00:00 +100
5
5
  description: >
6
6
  The color palette used by J1 Template is based on
7
7
  the definitions of Google's Material Design (MD).
@@ -509,1942 +509,3 @@ better reading or orientation.
509
509
  </div>
510
510
  </div>
511
511
  ++++
512
-
513
- == Navbars
514
-
515
- See examples for Bootstrap’s powerful, responsive navigation header, the
516
- navbar. Includes support for branding, navigation, and more, including
517
- support for the collapse plugin.
518
-
519
- mdi:bootstrap[24px, mdi-md-deep-purple]
520
- link:{url-bs-docs--components-navbar}[Bootstrap Docs {char-middot} Navbar, {browser-window--new}]
521
-
522
- Theming the navbar has never been easier thanks to the combination of
523
- theming classes and background-color utilities. Choose from `.navbar-light`
524
- for use with light background colors, or '.navbar-dark' for dark background
525
- colors. Then, customize with `.bg-*` utilities.
526
-
527
- ++++
528
- <div class="doc-example mb-3">
529
- <nav class="navbar navbar-expand-lg navbar-dark bg-dark mb-1">
530
- <a class="navbar-brand" href="#">Navbar<div class="ripple-container"></div></a>
531
- <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor01" aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation">
532
- <span class="navbar-toggler-icon"></span>
533
- </button>
534
-
535
- <div class="collapse navbar-collapse" id="navbarColor01">
536
- <ul class="navbar-nav mr-auto">
537
- <li class="nav-item active">
538
- <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
539
- </li>
540
- <li class="nav-item">
541
- <a class="nav-link" href="#">Features</a>
542
- </li>
543
- <li class="nav-item">
544
- <a class="nav-link" href="#">Pricing</a>
545
- </li>
546
- <li class="nav-item">
547
- <a class="nav-link" href="#">About</a>
548
- </li>
549
- </ul>
550
- <form class="form-inline">
551
- <span class="bmd-form-group"><input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search"></span>
552
- <button class="btn btn-outline-info my-2 my-sm-0" type="submit">Search</button>
553
- </form>
554
- </div>
555
- </nav>
556
-
557
- <nav class="navbar navbar-expand-lg navbar-dark bg-primary mb-1">
558
- <a class="navbar-brand" href="#">Navbar</a>
559
- <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor02" aria-controls="navbarColor02" aria-expanded="false" aria-label="Toggle navigation">
560
- <span class="navbar-toggler-icon"></span>
561
- </button>
562
-
563
- <div class="collapse navbar-collapse" id="navbarColor02">
564
- <ul class="navbar-nav mr-auto">
565
- <li class="nav-item active">
566
- <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
567
- </li>
568
- <li class="nav-item">
569
- <a class="nav-link" href="#">Features</a>
570
- </li>
571
- <li class="nav-item">
572
- <a class="nav-link" href="#">Pricing</a>
573
- </li>
574
- <li class="nav-item">
575
- <a class="nav-link" href="#">About</a>
576
- </li>
577
- </ul>
578
- <form class="form-inline">
579
- <span class="bmd-form-group"><input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search"></span>
580
- <button class="btn btn-outline-light my-2 my-sm-0" type="submit">Search</button>
581
- </form>
582
- </div>
583
- </nav>
584
-
585
- <nav class="navbar navbar-expand-lg navbar-light" style="background-color: #e3f2fd;">
586
- <a class="navbar-brand" href="#">Navbar</a>
587
- <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor03" aria-controls="navbarColor03" aria-expanded="false" aria-label="Toggle navigation">
588
- <span class="navbar-toggler-icon"></span>
589
- </button>
590
-
591
- <div class="collapse navbar-collapse" id="navbarColor03">
592
- <ul class="navbar-nav mr-auto">
593
- <li class="nav-item active">
594
- <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
595
- </li>
596
- <li class="nav-item">
597
- <a class="nav-link" href="#">Features</a>
598
- </li>
599
- <li class="nav-item">
600
- <a class="nav-link" href="#">Pricing</a>
601
- </li>
602
- <li class="nav-item">
603
- <a class="nav-link" href="#">About</a>
604
- </li>
605
- </ul>
606
- <form class="form-inline">
607
- <span class="bmd-form-group"><input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search"></span>
608
- <button class="btn btn-outline-primary my-2 my-sm-0" type="submit">Search</button>
609
- </form>
610
- </div>
611
- </nav>
612
- </div>
613
- ++++
614
-
615
- [source, html, role="noclip"]
616
- ----
617
- <nav class="navbar navbar-dark bg-dark">
618
- <!-- Navbar content -->
619
- </nav>
620
-
621
- <nav class="navbar navbar-dark bg-primary">
622
- <!-- Navbar content -->
623
- </nav>
624
-
625
- <nav class="navbar navbar-light" style="background-color: #e3f2fd;">
626
- <!-- Navbar content -->
627
- </nav>
628
- ----
629
-
630
-
631
- == Buttons
632
-
633
- Use Bootstrap’s custom button styles for actions in forms, dialogs, and
634
- more with support for multiple sizes, states, and more. Bootstrap includes
635
- several predefined button styles, each serving its own semantic purpose,
636
- with a few extras thrown in for more control.
637
-
638
- // pass:[<i class="mdi mdi-bootstrap mdi-md-deep-purple mdi-24px"></i>]
639
- // mdi:bootstrap[24px, mdi-pulsed mdi-md-deep-purple]
640
- mdi:bootstrap[24px, mdi-md-deep-purple]
641
- link:{url-bs-docs--components-buttons}[Bootstrap Docs {char-middot} Buttons, {browser-window--new}]
642
-
643
- === Active buttons
644
-
645
- Buttons will appear pressed (with a darker background, darker border, and
646
- inset shadow) when active.
647
- ++++
648
- <div class="doc-example mb-3">
649
- <button type="button" class="btn btn-primary btn-raised">Primary</button>
650
- <button type="button" class="btn btn-primary btn-raised">Secondary</button>
651
- <button type="button" class="btn btn-success btn-raised">Success</button>
652
- <button type="button" class="btn btn-info btn-raised">Info</button>
653
- <button type="button" class="btn btn-warning btn-raised">Warning</button>
654
- <button type="button" class="btn btn-danger btn-raised">Danger</button>
655
- <button type="button" class="btn btn-link btn-raised">Link</button>
656
- </div>
657
- ++++
658
-
659
- [source, html, role="noclip"]
660
- ----
661
- <button type="button" class="btn btn-primary btn-raised">Primary</button>
662
- <button type="button" class="btn btn-primary btn-raised">Secondary</button>
663
- <button type="button" class="btn btn-success btn-raised">Success</button>
664
- <button type="button" class="btn btn-info btn-raised">Info</button>
665
- <button type="button" class="btn btn-warning btn-raised">Warning</button>
666
- <button type="button" class="btn btn-danger btn-raised">Danger</button>
667
- <button type="button" class="btn btn-link btn-raised">Link</button>
668
- ----
669
-
670
-
671
- === Disabled buttons
672
-
673
- Buttons look inactive by adding the disabled boolean attribute to any
674
- <button> element.
675
- ++++
676
- <div class="doc-example mb-3">
677
- <button type="button" class="btn btn-primary btn-raised disabled">Primary</button>
678
- <button type="button" class="btn btn-primary btn-raised disabled">Secondary</button>
679
- <button type="button" class="btn btn-success btn-raised disabled">Success</button>
680
- <button type="button" class="btn btn-info btn-raised disabled">Info</button>
681
- <button type="button" class="btn btn-warning btn-raised disabled">Warning</button>
682
- <button type="button" class="btn btn-danger btn-raised disabled">Danger</button>
683
- <button type="button" class="btn btn-link btn-raised disabled">Link</button>
684
- </div>
685
- ++++
686
-
687
- [source, html, role="noclip"]
688
- ----
689
- <button type="button" class="btn btn-primary btn-raised disabled">Primary</button>
690
- <button type="button" class="btn btn-primary btn-raised disabled">Secondary</button>
691
- <button type="button" class="btn btn-success btn-raised disabled">Success</button>
692
- <button type="button" class="btn btn-info btn-raised disabled">Info</button>
693
- <button type="button" class="btn btn-warning btn-raised disabled">Warning</button>
694
- <button type="button" class="btn btn-danger btn-raised disabled">Danger</button>
695
- <button type="button" class="btn btn-link btn-raised disabled">Link</button>
696
- ----
697
-
698
- === Outline buttons
699
-
700
- In need of a button, but not the hefty background colors they bring? Replace
701
- the default modifier classes with the `.btn-outline-*` ones to remove all
702
- background images and colors on any button.
703
-
704
- ++++
705
- <div class="doc-example mb-3">
706
- <button type="button" class="btn btn-outline-primary btn-raised">Primary</button>
707
- <button type="button" class="btn btn-outline-secondary btn-raised">Secondary</button>
708
- <button type="button" class="btn btn-outline-success btn-raised">Success</button>
709
- <button type="button" class="btn btn-outline-info btn-raised">Info</button>
710
- <button type="button" class="btn btn-outline-warning btn-raised">Warning</button>
711
- <button type="button" class="btn btn-outline-danger btn-raised">Danger</button>
712
- </div>
713
- ++++
714
-
715
- [source, html, role="noclip"]
716
- ----
717
- <button type="button" class="btn btn-outline-primary btn-raised">Primary</button>
718
- <button type="button" class="btn btn-outline-secondary btn-raised">Secondary</button>
719
- <button type="button" class="btn btn-outline-success btn-raised">Success</button>
720
- <button type="button" class="btn btn-outline-info btn-raised">Info</button>
721
- <button type="button" class="btn btn-outline-warning btn-raised">Warning</button>
722
- <button type="button" class="btn btn-outline-danger btn-raised">Danger</button>
723
- ----
724
-
725
- === Flat buttons
726
-
727
- Flat buttons are text-only buttons. They may be used in dialogs, toolbars,
728
- or inline. They do not lift, but fill with color on press.
729
-
730
- ++++
731
- <div class="doc-example">
732
- <button type="button" class="btn btn-primary">Primary</button>
733
- <button type="button" class="btn btn-secondary">Secondary</button>
734
- <button type="button" class="btn btn-success">Success</button>
735
- <button type="button" class="btn btn-info">Info</button>
736
- <button type="button" class="btn btn-warning">Warning</button>
737
- <button type="button" class="btn btn-danger">Danger</button>
738
- <button type="button" class="btn btn-link">Link</button>
739
- </div>
740
- ++++
741
-
742
- [source, html, role="noclip"]
743
- ----
744
- <button type="button" class="btn btn-primary">Primary</button>
745
- <button type="button" class="btn btn-secondary">Secondary</button>
746
- <button type="button" class="btn btn-success">Success</button>
747
- <button type="button" class="btn btn-info">Info</button>
748
- <button type="button" class="btn btn-warning">Warning</button>
749
- <button type="button" class="btn btn-danger">Danger</button>
750
- <button type="button" class="btn btn-link">Link</button>
751
- ----
752
-
753
-
754
- === Button sizes
755
-
756
- Beside the default size, small and large buttons are available.
757
-
758
- ++++
759
- <div class="doc-example mb-3">
760
- <button type="button" class="btn btn-primary btn-raised btn-lg">Large button</button>
761
- <button type="button" class="btn btn-primary btn-raised">Default button</button>
762
- <button type="button" class="btn btn-primary btn-raised btn-sm">Small button</button>
763
- </div>
764
- ++++
765
-
766
- [source, html, role="noclip"]
767
- ----
768
- <button type="button" class="btn btn-primary btn-raised btn-lg">Large button</button>
769
- <button type="button" class="btn btn-primary btn-raised">Default button</button>
770
- <button type="button" class="btn btn-primary btn-raised btn-sm">Small button</button>
771
- ----
772
-
773
- === Block level button
774
-
775
- Create block level buttons—those that span the full width of a parent—by
776
- adding .btn-block.
777
-
778
- ++++
779
- <div class="doc-example mb-3">
780
- <button type="button" class="btn btn-primary btn-lg btn-block btn-raised">Block level button</button>
781
- <button type="button" class="btn btn-secondary btn-lg btn-block btn-raised">Block level button</button>
782
- </div>
783
- ++++
784
-
785
- [source, html, role="noclip"]
786
- ----
787
- <button type="button"
788
- class="btn btn-primary btn-lg btn-block btn-raised">
789
- Block level button
790
- </button>
791
- <button type="button"
792
- class="btn btn-secondary btn-lg btn-block btn-raised">
793
- Block level button
794
- </button>
795
- ----
796
-
797
- === Toggle button
798
-
799
- ++++
800
- <div class="doc-example mb-3">
801
- <button type="button" class="btn btn-primary btn-raised" data-toggle="button" aria-pressed="false" autocomplete="off">
802
- Single toggle
803
- </button>
804
- </div>
805
- ++++
806
-
807
- [source, html, role="noclip"]
808
- ----
809
- <button type="button" class="btn btn-primary btn-raised"
810
- data-toggle="button" aria-pressed="false" autocomplete="off">
811
- Single toggle
812
- </button>
813
- ----
814
-
815
- === Checkboxes and Radio buttons
816
-
817
- Bootstrap’s .button styles can be applied to other elements, such as
818
- `<label>`, to provide checkbox or radio style button toggling. The checked
819
- state for these buttons is only updated via click event on the button.
820
-
821
- ++++
822
- <div class="doc-example mb-3">
823
- <div class="btn-group btn-group-toggle" data-toggle="buttons">
824
- <label class="btn btn-primary btn-raised btn-flex active">
825
- <input type="radio" name="options" id="option1" autocomplete="off" checked> Active
826
- </label>
827
- <label class="btn btn-primary btn-raised btn-flex">
828
- <input type="radio" name="options" id="option2" autocomplete="off"> Radio
829
- </label>
830
- <label class="btn btn-primary btn-raised btn-flex">
831
- <input type="radio" name="options" id="option3" autocomplete="off"> Radio
832
- </label>
833
- </div>
834
- </div>
835
- ++++
836
-
837
- [source, html, role="noclip"]
838
- ----
839
- <div class="btn-group btn-group-toggle" data-toggle="buttons">
840
- <label class="btn btn-primary btn-raised btn-flex active">
841
- <input type="radio" name="options" id="option1" autocomplete="off" checked> Active
842
- </label>
843
- <label class="btn btn-primary btn-raised btn-flex">
844
- <input type="radio" name="options" id="option2" autocomplete="off"> Radio
845
- </label>
846
- <label class="btn btn-primary btn-raised btn-flex">
847
- <input type="radio" name="options" id="option3" autocomplete="off"> Radio
848
- </label>
849
- </div>
850
- ----
851
-
852
- === Floating action buttons
853
-
854
- A floating action button represents the primary action in an application,
855
- it is used for a promoted action.
856
-
857
- mdi:bootstrap[24px, mdi-md-deep-purple]
858
- https://material.io/components/buttons-floating-action-button#types-of-transitions[Google Material Design {char-char-middot} Floating action buttons, {browser-window--new}]
859
-
860
- ++++
861
- <div class="doc-example">
862
- <button type="button" class="btn bmd-btn-fab btn-primary" aria-label="fab-button">
863
- <i class="mdi mdi-plus mdi-2x"></i>
864
- </button>
865
- </div>
866
- ++++
867
-
868
- [source, html, role="noclip"]
869
- ----
870
- <button type="button" class="btn bmd-btn-fab" aria-label="fab-button">
871
- <i class="mdi mdi-plus mdi-2x"></i>
872
- </button>
873
- ----
874
-
875
- ==== Colors
876
-
877
- ++++
878
- <div class="doc-example">
879
- <button type="button" class="btn bmd-btn-fab btn-primary" aria-label="fab-button-primary">
880
- <i class="mdi mdi-plus mdi-2x"></i>
881
- </button>
882
- <button type="button" class="btn bmd-btn-fab btn-secondary" aria-label="fab-button-secondary">
883
- <i class="mdi mdi-plus mdi-2x"></i>
884
- </button>
885
- <button type="button" class="btn bmd-btn-fab btn-danger" aria-label="fab-button-danger">
886
- <i class="mdi mdi-plus mdi-2x"></i>
887
- </button>
888
- <button type="button" class="btn bmd-btn-fab btn-info" aria-label="fab-button-info">
889
- <i class="mdi mdi-plus mdi-2x"></i>
890
- </button>
891
- <button type="button" class="btn bmd-btn-fab btn-success" aria-label="fab-button-success">
892
- <i class="mdi mdi-plus mdi-2x"></i>
893
- </button>
894
- <button type="button" class="btn bmd-btn-fab btn-warning" aria-label="fab-button-warning">
895
- <i class="mdi mdi-plus mdi-2x"></i>
896
- </button>
897
- <button type="button" class="btn bmd-btn-fab btn-dark" aria-label="fab-button-dark">
898
- <i class="mdi mdi-plus mdi-2x"></i>
899
- </button>
900
- <button type="button" class="btn bmd-btn-fab btn-light" aria-label="fab-button-light">
901
- <i class="mdi mdi-plus mdi-2x"></i>
902
- </button>
903
- </div>
904
- ++++
905
-
906
- [source, html, role="noclip"]
907
- ----
908
- <button type="button" class="btn bmd-btn-fab btn-primary" aria-label="fab-button-primary">
909
- <i class="mdi mdi-plus mdi-2x"></i>
910
- </button>
911
- <button type="button" class="btn bmd-btn-fab btn-secondary" aria-label="fab-button-secondary">
912
- <i class="mdi mdi-plus mdi-2x"></i>
913
- </button>
914
- ...
915
- <button type="button" class="btn bmd-btn-fab btn-dark" aria-label="fab-button-dark">
916
- <i class="mdi mdi-plus mdi-2x"></i>
917
- </button>
918
- <button type="button" class="btn bmd-btn-fab btn-light" aria-label="fab-button-light">
919
- <i class="mdi mdi-plus mdi-2x"></i>
920
- </button>
921
- ----
922
-
923
- ==== Sizes
924
-
925
- A smaller sized, i.e. mini floating action button, is also available.
926
-
927
- ++++
928
- <div class="doc-example">
929
- <button type="button" class="btn btn-danger bmd-btn-fab bmd-btn-fab-sm" aria-label="fab-button-small">
930
- <i class="mdi mdi-plus mdi-sm"></i>
931
- </button>
932
- </div>
933
- ++++
934
-
935
- [source, html, role="noclip"]
936
- ----
937
- <button type="button" class="btn btn-danger bmd-btn-fab bmd-btn-fab-sm" aria-label="fab-button-small">
938
- <i class="mdi mdi-plus mdi-sm"></i>
939
- </button>
940
- ----
941
-
942
- == Typography
943
-
944
- Bootstrap sets basic global display, typography, and link styles. When more
945
- control is needed, check out the textual utility classes.
946
-
947
- For a more inclusive and accessible type scale, it is assuemed that
948
- the browser default root font-size (typically 16px) so visitors can
949
- customize their browser defaults as needed.
950
-
951
- mdi:bootstrap[24px, mdi-md-deep-purple]
952
- link:{url-bs-docs--content-typography}[Bootstrap Docs {char-middot} Typography, {browser-window--new}]
953
-
954
- === Headings
955
-
956
- ++++
957
- <div class="doc-example mb-3">
958
- <div class="row mb-5">
959
- <div class="col-md-4">
960
- <h1 class="notoc">Heading 1</h1>
961
- <h2 class="notoc">Heading 2</h2>
962
- <h3 class="notoc">Heading 3</h3>
963
- <h4 class="notoc">Heading 4</h4>
964
- <h5 class="notoc">Heading 5</h5>
965
- <h6 class="notoc">Heading 6</h6>
966
- <h3 class="notoc">
967
- Heading 3
968
- <small class="text-muted">with muted text</small>
969
- </h3>
970
- <p class="lead">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
971
- </div>
972
- <div class="col-md-4">
973
- <h3 class="notoc">Example body text</h2>
974
- <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>
975
- <p><small>This line of text is meant to be treated as fine print.</small></p>
976
- <p>The following is <strong>rendered as bold text</strong>.</p>
977
- <p>The following is <em>rendered as italicized text</em>.</p>
978
- <p>An abbreviation of the word attribute is <abbr title="attribute">attr</abbr>.</p>
979
- </div>
980
- <div class="col-md-4">
981
- <h3 class="notoc">Emphasis classes</h2>
982
- <p class="text-muted">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p>
983
- <p class="text-primary">Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
984
- <p class="text-warning">Etiam porta sem malesuada magna mollis euismod.</p>
985
- <p class="text-danger">Donec ullamcorper nulla non metus auctor fringilla.</p>
986
- <p class="text-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
987
- <p class="text-info">Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
988
- </div>
989
- </div>
990
- </div>
991
- ++++
992
-
993
- === Blockquotes
994
-
995
- ++++
996
- <div class="doc-example mb-3">
997
- <div class="row">
998
- <div class="col-md-6">
999
- <blockquote class="blockquote">
1000
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
1001
- <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
1002
- </blockquote>
1003
- </div>
1004
- <div class="col-md-6">
1005
- <blockquote class="blockquote blockquote-reverse">
1006
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
1007
- <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
1008
- </blockquote>
1009
- </div>
1010
- </div>
1011
- </div>
1012
- ++++
1013
-
1014
- == Tables
1015
-
1016
- Due to the widespread use of tables across third-party widgets like calendars
1017
- and date pickers, we’ve designed our tables to be opt-in. Just add the base
1018
- class `.table` to any `<table>`, then extend with custom styles or our various
1019
- included modifier classes.
1020
-
1021
- Using the most basic table markup, here’s how .table-based tables look in
1022
- Bootstrap. All table styles are inherited in Bootstrap 4, meaning any nested
1023
- tables will be styled in the same manner as the parent.
1024
-
1025
- mdi:bootstrap[24px, mdi-md-deep-purple]
1026
- link:{url-bs-docs--content-tables}[Bootstrap Docs {char-middot} Tables, {browser-window--new}]
1027
-
1028
-
1029
- ++++
1030
- <div class="doc-example mb-3">
1031
- <table class="table table-striped table-hover table-bordered">
1032
- <thead>
1033
- <tr>
1034
- <th>#</th>
1035
- <th>Column heading</th>
1036
- <th>Column heading</th>
1037
- <th>Column heading</th>
1038
- </tr>
1039
- </thead>
1040
- <tbody>
1041
- <tr>
1042
- <td>1</td>
1043
- <td>Column content</td>
1044
- <td>Column content</td>
1045
- <td>Column content</td>
1046
- </tr>
1047
- <tr>
1048
- <td>2</td>
1049
- <td>Column content</td>
1050
- <td>Column content</td>
1051
- <td>Column content</td>
1052
- </tr>
1053
- <tr class="table-info">
1054
- <td>3</td>
1055
- <td>Column content</td>
1056
- <td>Column content</td>
1057
- <td>Column content</td>
1058
- </tr>
1059
- <tr class="table-success">
1060
- <td>4</td>
1061
- <td>Column content</td>
1062
- <td>Column content</td>
1063
- <td>Column content</td>
1064
- </tr>
1065
- <tr class="table-danger">
1066
- <td>5</td>
1067
- <td>Column content</td>
1068
- <td>Column content</td>
1069
- <td>Column content</td>
1070
- </tr>
1071
- <tr class="table-warning">
1072
- <td>6</td>
1073
- <td>Column content</td>
1074
- <td>Column content</td>
1075
- <td>Column content</td>
1076
- </tr>
1077
- <tr class="table-active">
1078
- <td>7</td>
1079
- <td>Column content</td>
1080
- <td>Column content</td>
1081
- <td>Column content</td>
1082
- </tr>
1083
- </tbody>
1084
- </table>
1085
- </div>
1086
- ++++
1087
-
1088
- == Forms
1089
-
1090
- Bootstrap’s form controls expand on our Rebooted form styles with classes.
1091
- Use these classes to opt into their customized displays for a more consistent
1092
- rendering across browsers and devices.
1093
-
1094
- Be sure to use an appropriate type attribute on all inputs (e.g., email
1095
- for email address or number for numerical information) to take advantage
1096
- of newer input controls like email verification, number selection, and more.
1097
-
1098
- Here’s a quick example to demonstrate Bootstrap’s form styles. Keep reading
1099
- for documentation on required classes, form layout, and more.
1100
-
1101
- mdi:bootstrap[24px, mdi-md-deep-purple]
1102
- link:{url-bs-docs--components-forms}[Bootstrap Docs {char-middot} Forms, {browser-window--new}]
1103
-
1104
- ++++
1105
- <div class="doc-example mb-3">
1106
- <form>
1107
- <div class="form-group">
1108
- <label for="exampleInputEmail1" class="bmd-label-floating">Email address</label>
1109
- <input type="email" class="form-control" id="exampleInputEmail1" autocomplete="none">
1110
- <span class="form-clear d-none"><i class="mdi mdi-2x mdi-format-clear"></i></span>
1111
- <span class="bmd-help">We'll never share your email with anyone else.</span>
1112
- </div>
1113
- <div class="form-group">
1114
- <label for="exampleInputPassword1" class="bmd-label-floating">Password</label>
1115
- <input type="password" class="form-control" id="exampleInputPassword1">
1116
- <span class="form-clear d-none"><i class="mdi mdi-2x mdi-format-clear"></i></span>
1117
- </div>
1118
- <div class="form-group form-check">
1119
- <input type="checkbox" class="form-check-input" id="exampleCheck1">
1120
- <label class="form-check-label" for="exampleCheck1">Check me out</label>
1121
- </div>
1122
- <button type="submit" class="btn btn-primary btn-raised">Submit</button>
1123
- </form>
1124
- </div>
1125
- ++++
1126
-
1127
- Textual form controls—like <input>s, <select>s, and <textarea>s—are styled with
1128
- the .form-control class. Included are styles for general appearance, focus
1129
- state, sizing, and more.
1130
-
1131
- ++++
1132
- <div class="doc-example mb-3">
1133
- <form>
1134
- <div class="form-group">
1135
- <label for="exampleInputEmail1" class="bmd-label-floating">Email address</label>
1136
- <input type="email" class="form-control" id="exampleFormControlInput1">
1137
- </div>
1138
- <div class="form-group">
1139
- <label for="exampleFormControlSelect1" class="bmd-label-floating">Example select</label>
1140
- <select class="form-control" id="exampleFormControlSelect1">
1141
- <option>1</option>
1142
- <option>2</option>
1143
- <option>3</option>
1144
- <option>4</option>
1145
- <option>5</option>
1146
- </select>
1147
- </div>
1148
- <div class="form-group">
1149
- <label for="exampleFormControlSelect2" class="bmd-label-floating">Example multiple select</label>
1150
- <select multiple class="form-control" id="exampleFormControlSelect2">
1151
- <option>option 1</option>
1152
- <option>option 2</option>
1153
- <option>option 3</option>
1154
- </select>
1155
- </div>
1156
- <div class="form-group">
1157
- <label for="exampleFormControlTextarea1" class="bmd-label-floating">Example textarea</label>
1158
- <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
1159
- </div>
1160
- </form>
1161
- </div>
1162
- ++++
1163
-
1164
- For file inputs, swap the .form-control for .form-control-file.
1165
-
1166
- ++++
1167
- <div class="doc-example mb-3">
1168
- <form>
1169
- <div class="form-group">
1170
- <label for="exampleFormControlFile1" class="bmd-label-floating">Example file input</label>
1171
- <input type="file" class="form-control-file" id="exampleFormControlFile1">
1172
- </div>
1173
- </form>
1174
- </div>
1175
- ++++
1176
-
1177
- == Navs
1178
-
1179
- Navigation available in Bootstrap share general markup and styles, from the
1180
- base .nav class to the active and disabled states. Swap modifier classes to
1181
- switch between each style.
1182
-
1183
- The base .nav component is built with flexbox and provide a strong foundation
1184
- for building all types of navigation components. It includes some style
1185
- overrides (for working with lists), some link padding for larger hit areas,
1186
- and basic disabled styling.
1187
-
1188
- mdi:bootstrap[24px, mdi-md-deep-purple]
1189
- link:{url-bs-docs--components-navs}[Bootstrap Docs {char-middot} Navs, {browser-window--new}]
1190
-
1191
- === Tabs
1192
-
1193
- Tabs takes the basic nav from above and adds the .nav-tabs class to generate
1194
- a tabbed interface. Use them to create tabbable regions with our tab
1195
- JavaScript plugin.
1196
-
1197
- ++++
1198
- <div class="doc-example mb-3">
1199
- <ul class="nav nav-tabs">
1200
- <li class="nav-item">
1201
- <a class="nav-link active" data-toggle="tab" href="#home">Home</a>
1202
- </li>
1203
- <li class="nav-item">
1204
- <a class="nav-link" data-toggle="tab" href="#profile">Profile</a>
1205
- </li>
1206
- <li class="nav-item dropdown">
1207
- <a class="nav-link dropdown-toggle" data-toggle="dropdown"
1208
- href="javascript:(void)"
1209
- role="button"
1210
- aria-haspopup="true" aria-expanded="false">
1211
- Dropdown
1212
- </a>
1213
- <div class="dropdown-menu">
1214
- <a class="dropdown-item" href="javascript:(void)">Action</a>
1215
- <a class="dropdown-item" href="javascript:(void)">Another action</a>
1216
- <a class="dropdown-item" href="javascript:(void)">Something else here</a>
1217
- <div class="dropdown-divider"></div>
1218
- <a class="dropdown-item" href="javascript:(void)">Separated link</a>
1219
- </div>
1220
- </li>
1221
- <li class="nav-item">
1222
- <a class="nav-link disabled" href="javascript:(void)">Disabled</a>
1223
- </li>
1224
- </ul>
1225
- <div id="myTabContent" class="tab-content">
1226
- <div class="tab-pane fade active show" id="home">
1227
- <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>
1228
- </div>
1229
- <div class="tab-pane fade" id="profile">
1230
- <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>
1231
- </div>
1232
- <div class="tab-pane fade" id="dropdown1">
1233
- <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>
1234
- </div>
1235
- <div class="tab-pane fade" id="dropdown2">
1236
- <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>
1237
- </div>
1238
- </div>
1239
- </div>
1240
- ++++
1241
-
1242
-
1243
- === Pills
1244
-
1245
- Take that same HTML as Tabs, but use .nav-pills class instead.
1246
-
1247
- ++++
1248
- <div class="doc-example mb-3">
1249
- <div class="row mb-5">
1250
-
1251
- <div class="col-md-6">
1252
- <h5 class="notoc">Standard Pills</h5>
1253
- <ul class="nav nav-pills">
1254
- <li class="nav-item mr-1 mb-2">
1255
- <a class="nav-link active" href="javascript:(void)">Active</a>
1256
- </li>
1257
- <li class="nav-item dropdown mr-1">
1258
- <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="javascript:(void)" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
1259
- <div class="dropdown-menu">
1260
- <a class="dropdown-item" href="javascript:(void)">Action</a>
1261
- <a class="dropdown-item" href="javascript:(void)">Another action</a>
1262
- <a class="dropdown-item" href="javascript:(void)">Something else here</a>
1263
- <div class="dropdown-divider"></div>
1264
- <a class="dropdown-item" href="javascript:(void)">Separated link</a>
1265
- </div>
1266
- </li>
1267
- <li class="nav-item mr-1 mb-2">
1268
- <a class="nav-link" href="javascript:(void)">Link</a>
1269
- </li>
1270
- <li class="nav-item mr-1 mb-2">
1271
- <a class="nav-link disabled" href="javascript:(void)">Disabled</a>
1272
- </li>
1273
- </ul>
1274
- </div>
1275
- <div class="col-md-6">
1276
- <h5 class="notoc">Stacked Pills (vertical)</h5>
1277
- <ul class="nav nav-pills flex-column mb-4">
1278
- <li class="nav-item mb-2">
1279
- <a class="nav-link active" href="javascript:(void)">Active</a>
1280
- </li>
1281
- <li class="nav-item dropdown mb-1">
1282
- <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="javascript:(void)" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
1283
- <div class="dropdown-menu">
1284
- <a class="dropdown-item" href="javascript:(void)">Action</a>
1285
- <a class="dropdown-item" href="javascript:(void)">Another action</a>
1286
- <a class="dropdown-item" href="javascript:(void)">Something else here</a>
1287
- <div class="dropdown-divider"></div>
1288
- <a class="dropdown-item" href="javascript:(void)">Separated link</a>
1289
- </div>
1290
- </li>
1291
- <li class="nav-item mb-2">
1292
- <a class="nav-link" href="javascript:(void)">Link</a>
1293
- </li>
1294
- <li class="nav-item mb-2">
1295
- <a class="nav-link disabled" href="javascript:(void)">Disabled</a>
1296
- </li>
1297
- </ul>
1298
- </div>
1299
- </div>
1300
- </div>
1301
- ++++
1302
-
1303
- === Breadcrumbs
1304
-
1305
- Breadcrumbs indicate the current page’s location within a navigational
1306
- hierarchy that automatically adds separators via CSS.
1307
-
1308
- Separators are automatically added in CSS through ::before and content.
1309
-
1310
- ++++
1311
- <div class="doc-example mb-3">
1312
- <ol class="breadcrumb">
1313
- <li class="breadcrumb-item active">Home</li>
1314
- </ol>
1315
- <ol class="breadcrumb">
1316
- <li class="breadcrumb-item"><a href="javascript:(void)">Home</a></li>
1317
- <li class="breadcrumb-item active">Library</li>
1318
- </ol>
1319
- <ol class="breadcrumb">
1320
- <li class="breadcrumb-item"><a href="javascript:(void)">Home</a></li>
1321
- <li class="breadcrumb-item"><a href="javascript:(void)">Library</a></li>
1322
- <li class="breadcrumb-item active">Data</li>
1323
- </ol>
1324
- </div>
1325
- ++++
1326
-
1327
- === Pagination
1328
-
1329
- We use a large block of connected links for our pagination, making links
1330
- hard to miss and easily scalable—all while providing large hit areas.
1331
- Pagination is built with list HTML elements so screen readers can announce
1332
- the number of available links. Use a wrapping <nav> element to identify
1333
- it as a navigation section to screen readers and other assistive technologies.
1334
-
1335
- ++++
1336
- <div class="doc-example mb-3">
1337
- <div>
1338
- <ul class="pagination">
1339
- <li class="page-item disabled">
1340
- <a class="page-link" href="javascript:(void)">&laquo;</a>
1341
- </li>
1342
- <li class="page-item active">
1343
- <a class="page-link" href="javascript:(void)">1</a>
1344
- </li>
1345
- <li class="page-item">
1346
- <a class="page-link" href="javascript:(void)">2</a>
1347
- </li>
1348
- <li class="page-item">
1349
- <a class="page-link" href="javascript:(void)">3</a>
1350
- </li>
1351
- <li class="page-item">
1352
- <a class="page-link" href="javascript:(void)">4</a>
1353
- </li>
1354
- <li class="page-item">
1355
- <a class="page-link" href="javascript:(void)">5</a>
1356
- </li>
1357
- <li class="page-item">
1358
- <a class="page-link" href="javascript:(void)">&raquo;</a>
1359
- </li>
1360
- </ul>
1361
- </div>
1362
- <div>
1363
- <ul class="pagination pagination-lg">
1364
- <li class="page-item disabled">
1365
- <a class="page-link" href="javascript:(void)">&laquo;</a>
1366
- </li>
1367
- <li class="page-item active">
1368
- <a class="page-link" href="javascript:(void)">1</a>
1369
- </li>
1370
- <li class="page-item">
1371
- <a class="page-link" href="javascript:(void)">2</a>
1372
- </li>
1373
- <li class="page-item">
1374
- <a class="page-link" href="javascript:(void)">3</a>
1375
- </li>
1376
- <li class="page-item">
1377
- <a class="page-link" href="javascript:(void)">4</a>
1378
- </li>
1379
- <li class="page-item">
1380
- <a class="page-link" href="javascript:(void)">5</a>
1381
- </li>
1382
- <li class="page-item">
1383
- <a class="page-link" href="javascript:(void)">&raquo;</a>
1384
- </li>
1385
- </ul>
1386
- </div>
1387
- <div>
1388
- <ul class="pagination pagination-sm">
1389
- <li class="page-item disabled">
1390
- <a class="page-link" href="javascript:(void)">&laquo;</a>
1391
- </li>
1392
- <li class="page-item active">
1393
- <a class="page-link" href="javascript:(void)">1</a>
1394
- </li>
1395
- <li class="page-item">
1396
- <a class="page-link" href="javascript:(void)">2</a>
1397
- </li>
1398
- <li class="page-item">
1399
- <a class="page-link" href="javascript:(void)">3</a>
1400
- </li>
1401
- <li class="page-item">
1402
- <a class="page-link" href="javascript:(void)">4</a>
1403
- </li>
1404
- <li class="page-item">
1405
- <a class="page-link" href="javascript:(void)">5</a>
1406
- </li>
1407
- <li class="page-item">
1408
- <a class="page-link" href="javascript:(void)">&raquo;</a>
1409
- </li>
1410
- </ul>
1411
- </div>
1412
- </div>
1413
- ++++
1414
-
1415
- == Indicators
1416
-
1417
- With Bootstrap, indicators are elememts to raise the users awareness. Alerts
1418
- are dynamic elememts that can be used to *indicate* success or something went
1419
- wrong. Contrasting *Badges, static BS elememts, to raise attention e.g for
1420
- something *new*.
1421
-
1422
- === Alerts
1423
-
1424
- Alerts provide contextual feedback messages for typical user actions with the
1425
- handful of available and flexible alert messages.
1426
-
1427
- Alerts are available for any length of text, as well as an optional dismiss
1428
- button. For proper styling, use one of the eight required contextual classes
1429
- (e.g., .alert-success). For inline dismissal, use the alerts
1430
- https://getbootstrap.com/docs/4.0/components/alerts/#dismissing[jQuery plugin].
1431
-
1432
- mdi:bootstrap[24px, mdi-md-deep-purple]
1433
- link:{url-bs-docs--components-alerts}[Bootstrap Docs {char-middot} Alerts, {browser-window--new}]
1434
-
1435
- ++++
1436
- <div class="doc-example mb-3">
1437
- <div class="row mb-3">
1438
- <div class="col-md-12">
1439
- <div class="alert alert-dismissible alert-warning">
1440
- <button type="button" class="close" data-dismiss="alert">&times;</button>
1441
- <h4 class="alert-heading notoc">Warning!</h4>
1442
- <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>
1443
- </div>
1444
- </div>
1445
- </div>
1446
- <div class="row mb-5">
1447
- <div class="col-md-4">
1448
- <div class="alert alert-dismissible alert-danger">
1449
- <button type="button" class="close" data-dismiss="alert">&times;</button>
1450
- <strong>Oh snap!</strong> <a href="javascript:(void)" class="alert-link">Change a few things up</a> and try submitting again.
1451
- </div>
1452
- </div>
1453
- <div class="col-md-4">
1454
- <div class="alert alert-dismissible alert-success">
1455
- <button type="button" class="close" data-dismiss="alert">&times;</button>
1456
- <strong>Well done!</strong> You successfully read <a href="javascript:(void)" class="alert-link">this important alert message</a>.
1457
- </div>
1458
- </div>
1459
- <div class="col-md-4">
1460
- <div class="alert alert-dismissible alert-info">
1461
- <button type="button" class="close" data-dismiss="alert">&times;</button>
1462
- <strong>Heads up!</strong> This <a href="javascript:(void)" class="alert-link">alert needs your attention</a>, but it's not super important.
1463
- </div>
1464
- </div>
1465
- </div>
1466
- </div>
1467
- ++++
1468
-
1469
- === Badges
1470
-
1471
- Badges are small count and labeling components. They scale to match the size
1472
- of the immediate parent element by using relative font sizing and em units.
1473
-
1474
- Note that depending on how they are used, badges may be confusing for users
1475
- of screen readers and similar assistive technologies. While the styling of
1476
- badges provides a visual cue as to their purpose, these users will simply
1477
- be presented with the content of the badge. Depending on the specific
1478
- situation, these badges may seem like random additional words or numbers
1479
- at the end of a sentence, link, or button.
1480
-
1481
- mdi:bootstrap[24px, mdi-md-deep-purple]
1482
- link:{url-bs-docs--components-badges}[Bootstrap Docs {char-middot} Badge, {browser-window--new}]
1483
-
1484
- ++++
1485
- <div class="doc-example mb-3">
1486
- <div class="bs-component mb-3">
1487
- <span class="badge badge-primary">Primary</span>
1488
- <span class="badge badge-secondary">Secondary</span>
1489
- <span class="badge badge-success">Success</span>
1490
- <span class="badge badge-danger">Danger</span>
1491
- <span class="badge badge-warning">Warning</span>
1492
- <span class="badge badge-info">Info</span>
1493
- <span class="badge badge-light">Light</span>
1494
- <span class="badge badge-dark">Dark</span>
1495
- </div>
1496
- <div class="bs-component mb-4">
1497
- <span class="badge badge-pill badge-primary">Primary</span>
1498
- <span class="badge badge-pill badge-secondary">Secondary</span>
1499
- <span class="badge badge-pill badge-success">Success</span>
1500
- <span class="badge badge-pill badge-danger">Danger</span>
1501
- <span class="badge badge-pill badge-warning">Warning</span>
1502
- <span class="badge badge-pill badge-info">Info</span>
1503
- <span class="badge badge-pill badge-light">Light</span>
1504
- <span class="badge badge-pill badge-dark">Dark</span>
1505
- </div>
1506
- </div>
1507
- ++++
1508
-
1509
- ifdef::scrollbars[]
1510
- === Scrollbars
1511
-
1512
- Chromium-based browsers like Chrome, Edge, Safari or Opera support the *webkit*
1513
- `::-webkit-scrollbar` pseudo element, which allows to modify the look of the
1514
- browser's scrollbar.
1515
-
1516
- NOTE: Custom (webkit-based) scrollbars are not supported with the Firefox
1517
- browser.
1518
-
1519
- .Default scrollbar J1 Template
1520
- [source, css, role="noclip"]
1521
- ----
1522
- ::-webkit-scrollbar {
1523
- width: 12px;
1524
- background-color: $grey-100;
1525
- }
1526
- ::-webkit-scrollbar-track {
1527
- -webkit-box-shadow: inset 0 0 6px $darken-300;
1528
- border-radius: 0px;
1529
- background-color: $grey-100;
1530
- }
1531
- ::-webkit-scrollbar-thumb {
1532
- -webkit-box-shadow: inset 0 0 6px $lighten-300;
1533
- background-color: $grey-800;
1534
- }
1535
- ----
1536
-
1537
- For J1 Template, following flavours are implemented.
1538
-
1539
- [subs="attributes"]
1540
- ++++
1541
- <div>
1542
- <div class="row">
1543
- <div class="scrollbar" id="style-default">
1544
- <div class="force-overflow"></div>
1545
- </div>
1546
-
1547
- <div class="scrollbar scroller-1">
1548
- <div class="force-overflow"></div>
1549
- </div>
1550
-
1551
- <div class="scrollbar scroller-2">
1552
- <div class="force-overflow"></div>
1553
- </div>
1554
-
1555
- <div class="scrollbar scroller-3">
1556
- <div class="force-overflow"></div>
1557
- </div>
1558
-
1559
- <div class="scrollbar scroller-4">
1560
- <div class="force-overflow"></div>
1561
- </div>
1562
- </div>
1563
-
1564
- <div class="row">
1565
- <div class="scrollbar scroller-5">
1566
- <div class="force-overflow"></div>
1567
- </div>
1568
-
1569
- <div class="scrollbar scroller-6">
1570
- <div class="force-overflow"></div>
1571
- </div>
1572
-
1573
- <div class="scrollbar scroller-7">
1574
- <div class="force-overflow"></div>
1575
- </div>
1576
-
1577
- <div class="scrollbar scroller-8">
1578
- <div class="force-overflow"></div>
1579
- </div>
1580
-
1581
- <div class="scrollbar scroller-9">
1582
- <div class="force-overflow"></div>
1583
- </div>
1584
- </div>
1585
-
1586
- <div class="row">
1587
- <div class="scrollbar scroller-10">
1588
- <div class="force-overflow"></div>
1589
- </div>
1590
-
1591
- <div class="scrollbar scroller-11">
1592
- <div class="force-overflow"></div>
1593
- </div>
1594
-
1595
- <div class="scrollbar scroller-13">
1596
- <div class="force-overflow"></div>
1597
- </div>
1598
-
1599
- <div class="scrollbar scroller-14">
1600
- <div class="force-overflow"></div>
1601
- </div>
1602
-
1603
- <div class="scrollbar scroller-15">
1604
- <div class="force-overflow"></div>
1605
- </div>
1606
- </div>
1607
- </div>
1608
-
1609
- <!-- script>
1610
- NOTE: $.browser.webkit does NOT exists !!!
1611
- if (!$.browser.webkit) {
1612
- $('.wrapper').html('<p>Sorry! Non webkit browser detected. Scrollbars <b>not</b> displayed :</p>');
1613
- }
1614
- </script -->
1615
- ++++
1616
- endif::[]
1617
-
1618
- == Progress
1619
-
1620
- Bootstrap custom progress bars featuring support for stacked bars, animated
1621
- backgrounds, and text labels. Progress components are built with two HTML
1622
- elements, some CSS to set the width, and a few attributes. We don’t use the
1623
- HTML5 <progress> element, ensuring you can stack progress bars, animate them,
1624
- and place text labels over them.
1625
-
1626
- mdi:bootstrap[24px, mdi-md-deep-purple]
1627
- link:{url-bs-docs--components-progress}[Bootstrap Docs {char-middot} Progress, {browser-window--new}]
1628
-
1629
- === Basic
1630
-
1631
- ++++
1632
- <div class="doc-example mb-3">
1633
- <div class="progress">
1634
- <div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
1635
- </div>
1636
- </div>
1637
- ++++
1638
-
1639
- .Basic progressbar
1640
- [source, html, role="noclip"]
1641
- ----
1642
- <div class="progress">
1643
- <div class="progress-bar" role="progressbar"
1644
- style="width: 25%;"
1645
- aria-valuenow="25"
1646
- aria-valuemin="0"
1647
- aria-valuemax="100">
1648
- </div>
1649
- </div>
1650
- ----
1651
-
1652
- === Contextual alternatives
1653
-
1654
- ++++
1655
- <div class="doc-example mb-3">
1656
- <div class="progress mb-1">
1657
- <div class="progress-bar bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
1658
- </div>
1659
- <div class="progress mb-1">
1660
- <div class="progress-bar bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
1661
- </div>
1662
- <div class="progress mb-1">
1663
- <div class="progress-bar bg-warning" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
1664
- </div>
1665
- <div class="progress">
1666
- <div class="progress-bar bg-danger" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
1667
- </div>
1668
- </div>
1669
- ++++
1670
-
1671
- .Progressbar SUCCESS
1672
- [source, html, role="noclip"]
1673
- ----
1674
- <div class="progress">
1675
- <div class="progress-bar bg-success" role="progressbar"
1676
- style="width: 25%;"
1677
- aria-valuenow="25"
1678
- aria-valuemin="0"
1679
- aria-valuemax="100">
1680
- </div>
1681
- </div>
1682
- ----
1683
-
1684
- === Multiple bars
1685
-
1686
- ++++
1687
- <div class="doc-example mb-3">
1688
- <div class="progress">
1689
- <div class="progress-bar bg-success" role="progressbar" style="width: 50%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
1690
- <div class="progress-bar bg-warning" role="progressbar" style="width: 25%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
1691
- <div class="progress-bar bg-danger" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
1692
- </div>
1693
- </div>
1694
- ++++
1695
-
1696
- === Striped
1697
-
1698
- ++++
1699
- <div class="doc-example mb-3">
1700
- <div class="progress mb-1">
1701
- <div class="progress-bar progress-bar-striped" role="progressbar" style="width: 10%" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
1702
- </div>
1703
- <div class="progress mb-1">
1704
- <div class="progress-bar progress-bar-striped bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
1705
- </div>
1706
- <div class="progress mb-1">
1707
- <div class="progress-bar progress-bar-striped bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
1708
- </div>
1709
- <div class="progress mb-1">
1710
- <div class="progress-bar progress-bar-striped bg-warning" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
1711
- </div>
1712
- <div class="progress">
1713
- <div class="progress-bar progress-bar-striped bg-danger" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
1714
- </div>
1715
- </div>
1716
- ++++
1717
-
1718
- === Animated
1719
-
1720
- ++++
1721
- <div class="doc-example mb-3">
1722
- <div class="progress">
1723
- <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>
1724
- </div>
1725
- </div>
1726
- ++++
1727
-
1728
- == Containers
1729
-
1730
- In sense of Bootstrap, *containers* are more complex, eye-catching elements to
1731
- showcase facts or topics of a site. Typical elements are:
1732
-
1733
- * Jumbotron
1734
- * Lists
1735
- * Cards
1736
-
1737
- Find below examples how BS can support the users awarenes.
1738
-
1739
-
1740
- === Jumbotron
1741
-
1742
- Lightweight, flexible component for showcasing hero unit style content.
1743
-
1744
- mdi:bootstrap[24px, mdi-md-deep-purple]
1745
- link:{url-bs-docs--components-jumbotron}[Bootstrap Docs {char-middot} Jumbotron, {browser-window--new}]
1746
-
1747
- ++++
1748
- <div class="doc-example mb-3">
1749
- <div class="jumbotron">
1750
- <h1 class="display-3">Hello, world!</h1>
1751
- <p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
1752
- <hr class="my-4">
1753
- <p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
1754
- <p class="lead">
1755
- <a class="btn btn-primary btn-raised btn-lg" href="javascript:(void)" role="button">Learn more</a>
1756
- </p>
1757
- </div>
1758
- </div>
1759
- ++++
1760
-
1761
- === List groups
1762
-
1763
- List groups are a flexible and powerful component for displaying a series of
1764
- content. Modify and extend them to support just about any content within.
1765
-
1766
- mdi:bootstrap[24px, mdi-md-deep-purple]
1767
- link:{url-bs-docs--components-list_group}[Bootstrap Docs {char-middot} List group, {browser-window--new}]
1768
-
1769
- ++++
1770
- <div class="doc-example mb-3">
1771
- <div class="row mb-5">
1772
- <div class="col-md-4">
1773
- <ul class="list-group">
1774
- <li class="list-group-item d-flex justify-content-between align-items-center">
1775
- Describe item #1
1776
- <span class="badge badge-primary badge-pill">14</span>
1777
- </li>
1778
- <li class="list-group-item d-flex justify-content-between align-items-center">
1779
- Describe item #2
1780
- <span class="badge badge-primary badge-pill">2</span>
1781
- </li>
1782
- <li class="list-group-item d-flex justify-content-between align-items-center">
1783
- Describe item #3
1784
- <span class="badge badge-primary badge-pill">1</span>
1785
- </li>
1786
- </ul>
1787
- </div>
1788
-
1789
- <div class="col-md-4">
1790
- <div class="list-group">
1791
- <a href="javascript:(void)" class="list-group-item list-group-item-action active">
1792
- Describe item #1
1793
- </a>
1794
- <a href="javascript:(void)" class="list-group-item list-group-item-action">Describe item #2
1795
- </a>
1796
- <a href="javascript:(void)" class="list-group-item list-group-item-action disabled">Describe item #3
1797
- </a>
1798
- </div>
1799
- </div>
1800
-
1801
- <div class="col-md-4">
1802
- <div class="list-group">
1803
- <a href="javascript:(void)" class="list-group-item list-group-item-action flex-column align-items-start active">
1804
- <div class="d-flex w-100 justify-content-between">
1805
- <h5 class="mb-1 notoc">List group item heading</h5>
1806
- <small>3 days ago</small>
1807
- </div>
1808
- <p class="mb-1">Some quick example text to build on a list and make up the bulk of the list group's content.</p>
1809
- <small>Summarize whats all about.</small>
1810
- </a>
1811
- <a href="javascript:(void)" class="list-group-item list-group-item-action flex-column align-items-start">
1812
- <div class="d-flex w-100 justify-content-between">
1813
- <h5 class="mb-1 notoc">List group item heading</h5>
1814
- <small class="text-muted">3 days ago</small>
1815
- </div>
1816
- <p class="mb-1">Some quick example text to build on a list and make up the bulk of the list group's content.</p>
1817
- <small class="text-muted">Summarize whats all about.</small>
1818
- </a>
1819
- </div>
1820
- </div>
1821
-
1822
- </div>
1823
- </div>
1824
- ++++
1825
-
1826
-
1827
- === Cards
1828
-
1829
- Bootstrap’s cards provide a flexible and extensible content container with
1830
- multiple variants and options. A card is a flexible and extensible content
1831
- container. It includes options for headers and footers, a wide variety of
1832
- content, contextual background colors, and powerful display options.
1833
-
1834
- If you’re familiar with Bootstrap 3, cards replace our old panels, wells,
1835
- and thumbnails. Similar functionality to those components is available as
1836
- modifier classes for cards.
1837
-
1838
- Cards are built with as little markup and styles as possible, but still
1839
- manage to deliver a ton of control and customization. Built with flexbox,
1840
- they offer easy alignment and mix well with other Bootstrap components.
1841
- They have no margin by default, so use spacing utilities as needed.
1842
-
1843
- mdi:bootstrap[24px, mdi-md-deep-purple]
1844
- link:{url-bs-docs--components-cards}[Bootstrap Docs {char-middot} Card, {browser-window--new}]
1845
-
1846
- ++++
1847
- <div class="doc-example mb-3">
1848
-
1849
- <div class="row">
1850
- <div class="col-md-4 col-sm-4 col-xs-12">
1851
- <div class="card mb-3" style="max-width: 20rem;">
1852
- <div class="card-body">
1853
- <h4 class="card-title notoc">Card title</h4>
1854
- <h6 class="card-subtitle mb-2 text-muted notoc">Card subtitle</h6>
1855
- <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>
1856
- <a href="javascript:(void)" class="card-link">Card link</a>
1857
- <a href="javascript:(void)" class="card-link">Another link</a>
1858
- </div>
1859
- </div>
1860
- </div>
1861
- <div class="col-md-4 col-sm-4 col-xs-12">
1862
- <div class="card mb-3" style="max-width: 20rem;">
1863
- <div class="card-body">
1864
- <h4 class="card-title notoc">Card title</h4>
1865
- <h6 class="card-subtitle mb-2 text-muted notoc">Card subtitle</h6>
1866
- <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>
1867
- <a href="javascript:(void)" class="card-link">Card link</a>
1868
- <a href="javascript:(void)" class="card-link">Another link</a>
1869
- </div>
1870
- </div>
1871
- </div>
1872
- <div class="col-md-4 col-sm-4 col-xs-12">
1873
- <div class="card mb-3" style="max-width: 20rem;">
1874
- <div class="card-body">
1875
- <h4 class="card-title notoc">Card title</h4>
1876
- <h6 class="card-subtitle mb-2 text-muted notoc">Card subtitle</h6>
1877
- <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>
1878
- <a href="javascript:(void)" class="card-link">Card link</a>
1879
- <a href="javascript:(void)" class="card-link">Another link</a>
1880
- </div>
1881
- </div>
1882
- </div>
1883
- </div>
1884
-
1885
- <div class="row">
1886
- <div class="col-md-4 col-sm-4 col-xs-12 pl-3">
1887
- <div class="card mb-3" style="max-width: 20rem;">
1888
- <div class="card-header text-white bg-primary">
1889
- <h3 class="notoc">Header</h3>
1890
- </div>
1891
- <div class="card-body">
1892
- <h4 class="card-title notoc">Primary card title</h4>
1893
- <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>
1894
- </div>
1895
- </div>
1896
- </div>
1897
- <div class="col-md-4 col-sm-4 col-xs-12">
1898
- <div class="card mb-3" style="max-width: 20rem;">
1899
- <div class="card-header text-white bg-secondary">
1900
- <h3 class="notoc">Header</h3>
1901
- </div>
1902
- <div class="card-body">
1903
- <h4 class="card-title notoc">Secondary card title</h4>
1904
- <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>
1905
- </div>
1906
- </div>
1907
- </div>
1908
- <div class="col-md-4 col-sm-4 col-xs-12">
1909
- <div class="card mb-3" style="max-width: 20rem;">
1910
- <div class="card-header text-white bg-success">
1911
- <h3 class="notoc">Header</h3>
1912
- </div>
1913
- <div class="card-body">
1914
- <h4 class="card-title notoc">Success card title</h4>
1915
- <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>
1916
- </div>
1917
- </div>
1918
- </div>
1919
- </div>
1920
-
1921
- <div class="row">
1922
- <div class="col-md-4 col-sm-4 col-xs-12 pl-3">
1923
- <div class="card mb-3" style="max-width: 20rem;">
1924
- <div class="card-header text-white bg-info">
1925
- <h3 class="notoc">Header</h3>
1926
- </div>
1927
- <div class="card-body">
1928
- <h4 class="card-title notoc">Info card title</h4>
1929
- <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>
1930
- </div>
1931
- <div class="card-footer r-text-200">
1932
- <a class="card-link bs-info font-weight-bold g-font-size-12 text-uppercase"
1933
- href="javascript:(void)">Action · Footer Link
1934
- </a>
1935
- </div>
1936
- </div>
1937
- </div>
1938
- <div class="col-md-4 col-sm-4 col-xs-12">
1939
- <div class="card mb-3" style="max-width: 20rem;">
1940
- <div class="card-header text-white bg-warning">
1941
- <h3 class="notoc">Header</h3>
1942
- </div>
1943
- <div class="card-body">
1944
- <h4 class="card-title notoc">Warning card title</h4>
1945
- <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>
1946
- </div>
1947
- <div class="card-footer r-text-200">
1948
- <a class="card-link bs-warning font-weight-bold g-font-size-12 text-uppercase"
1949
- href="javascript:(void)">Action · Footer Link
1950
- </a>
1951
- </div>
1952
- </div>
1953
- </div>
1954
- <div class="col-md-4 col-sm-4 col-xs-12">
1955
- <div class="card mb-3" style="max-width: 20rem;">
1956
- <div class="card-header text-white bg-danger">
1957
- <h3 class="notoc">Header</h3>
1958
- </div>
1959
- <div class="card-body">
1960
- <h4 class="card-title notoc">Danger card title</h4>
1961
- <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>
1962
- </div>
1963
- <div class="card-footer r-text-200">
1964
- <a class="card-link bs-danger font-weight-bold g-font-size-12 text-uppercase"
1965
- href="javascript:(void)">Action · Footer Link
1966
- </a>
1967
- </div>
1968
- </div>
1969
- </div>
1970
- </div>
1971
-
1972
- <div class="row">
1973
- <div class="col-md-4 col-sm-4 col-xs-12">
1974
- <div class="card mb-3" style="max-width: 20rem;">
1975
- <h3 class="card-header notoc">Header</h3>
1976
- <img style="height: 200px; width: 100%; display: block;" src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22318%22%20height%3D%22180%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20318%20180%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_158bd1d28ef%20text%20%7B%20fill%3Argba(255%2C255%2C255%2C.75)%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A16pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_158bd1d28ef%22%3E%3Crect%20width%3D%22318%22%20height%3D%22180%22%20fill%3D%22%23777%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22129.359375%22%20y%3D%2297.35%22%3EImage%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E" alt="Card image">
1977
- <div class="card-body">
1978
- <h5 class="card-title notoc">Special title treatment</h5>
1979
- <h6 class="card-subtitle text-muted notoc">Support card subtitle</h6>
1980
- </div>
1981
-
1982
- <div class="card-body">
1983
- <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>
1984
- </div>
1985
-
1986
- <div class="card-body">
1987
- <a href="javascript:(void)" class="card-link">Card link</a>
1988
- <a href="javascript:(void)" class="card-link">Another link</a>
1989
- </div>
1990
- <div class="card-footer text-muted">
1991
- 2 days ago
1992
- </div>
1993
- </div>
1994
- </div>
1995
- </div>
1996
-
1997
- </div>
1998
- ++++
1999
-
2000
- == Dialogs
2001
-
2002
- Dialogs are important, interactive UI (user interface) components in Bootstrap
2003
- to *inform* visitor of an website.
2004
-
2005
- === Modals
2006
-
2007
- Use Bootstrap’s JavaScript modal plugin to add dialogs to your site for
2008
- lightboxes, user notifications, or completely custom content. Modals are
2009
- built with HTML, CSS, and JavaScript. They’re positioned over everything
2010
- else in the document and remove scroll from the <body> so that modal
2011
- content scrolls instead.
2012
-
2013
- mdi:bootstrap[24px, mdi-md-deep-purple]
2014
- link:{url-bs-docs--components-modal}[Bootstrap Docs {char-middot} Modal, {browser-window--new}]
2015
-
2016
- .Modal types
2017
- [cols="2a,8a,2a", options="header", width="100%", role="rtable"]
2018
- |===============================================================================
2019
- |Type |Description |Launch Example
2020
-
2021
- |*Base*
2022
- |Lauch the modal by clicking the button below. It will slide down and fade in
2023
- from the top of the page.
2024
- |
2025
- ++++
2026
- <div class="ml-0">
2027
- <!-- Button trigger modal -->
2028
- <button type="button"
2029
- class="btn btn-primary btn-raised"
2030
- data-toggle="modal"
2031
- data-target="#exampleSimpleModal">
2032
- Launch Example
2033
- </button>
2034
- </div>
2035
-
2036
- <!-- Modal -->
2037
- <div id="exampleSimpleModal"
2038
- class="modal fade top"
2039
- tabindex="-1"
2040
- role="dialog"
2041
- aria-labelledby="exampleSimpleModalLabel" aria-hidden="true">
2042
- <div class="modal-dialog">
2043
- <div class="modal-content">
2044
- <div class="modal-header">
2045
- <h5 id="exampleSimpleModalLabel" class="modal-title notoc">Modal title</h5>
2046
- <button type="button" class="close" data-dismiss="modal" aria-label="Close">
2047
- <span aria-hidden="true">&times;</span>
2048
- </button>
2049
- </div>
2050
- <div class="modal-body">
2051
- <p>Modal body text goes here.</p>
2052
- </div>
2053
- <div class="modal-footer">
2054
- <button type="button" class="btn btn-primary btn-flex btn-raised mr-2">Do nothing</button>
2055
- <button type="button" class="btn btn-secondary btn-flex btn-raised" data-dismiss="modal">Close</button>
2056
- </div>
2057
- </div>
2058
- </div>
2059
- </div>
2060
- ++++
2061
-
2062
- |*Static backdrop*
2063
- |This model is set to *static* and is will *not* close when clicking outside
2064
- it (the backdrop).
2065
- |
2066
- ++++
2067
- <div class="ml-0">
2068
- <!-- Button trigger modal -->
2069
- <button type="button"
2070
- class="btn btn-primary btn-raised"
2071
- data-toggle="modal"
2072
- data-target="#exampleStaticModal">
2073
- Launch Example
2074
- </button>
2075
- </div>
2076
-
2077
- <!-- Modal -->
2078
- <div id="exampleStaticModal"
2079
- class="modal fade"
2080
- tabindex="-1"
2081
- role="dialog"
2082
- aria-labelledby="exampleStaticModalLabel" aria-hidden="true"
2083
- data-keyboard="false"
2084
- data-backdrop="static">
2085
- <div class="modal-dialog">
2086
- <div class="modal-content">
2087
- <div class="modal-header">
2088
- <h5 id="exampleStatcModalLabel" class="modal-title notoc">Modal title</h5>
2089
- <button type="button" class="close" data-dismiss="modal" aria-label="Close">
2090
- <span aria-hidden="true">&times;</span>
2091
- </button>
2092
- </div>
2093
- <div class="modal-body">
2094
- <p>Modal body text goes here.</p>
2095
- </div>
2096
- <div class="modal-footer">
2097
- <button type="button" class="btn btn-primary btn-flex btn-raised mr-2">Do nothing</button>
2098
- <button type="button" class="btn btn-secondary btn-flex btn-raised" data-dismiss="modal">Close</button>
2099
- </div>
2100
- </div>
2101
- </div>
2102
- </div>
2103
- ++++
2104
-
2105
- |*Scrolling long content*
2106
- |When modals become too long for the user’s viewport or device, they scroll
2107
- independent of the page itself. Try the demo and resize your browser for
2108
- the height.
2109
- |
2110
- ++++
2111
- <div class="ml-0">
2112
- <!-- Button trigger modal -->
2113
- <button type="button"
2114
- class="btn btn-primary btn-raised"
2115
- data-toggle="modal"
2116
- data-target="#exampleModalLong">
2117
- Launch Example
2118
- </button>
2119
- </div>
2120
-
2121
- <!-- Modal -->
2122
- <div
2123
- id="exampleModalLong"
2124
- class="modal fade"
2125
- tabindex="-1"
2126
- role="dialog"
2127
- aria-labelledby="exampleModalLongTitle" aria-hidden="true">
2128
- <div class="modal-dialog">
2129
- <div class="modal-content">
2130
- <div class="modal-header">
2131
- <h5 id="exampleModalLongTitle" class="modal-title notoc">The Extremes of Good and Evil</h5>
2132
- <button type="button" class="close" data-dismiss="modal" aria-label="Close">
2133
- <span aria-hidden="true">&times;</span>
2134
- </button>
2135
- </div>
2136
- <div class="modal-body">
2137
- <p>
2138
- On the other hand, we denounce with righteous indignation and dislike men who
2139
- are so beguiled and demoralized by the charms of pleasure of the moment, so
2140
- blinded by desire, that they cannot foresee the pain and trouble that are
2141
- bound to ensue; and equal blame belongs to those who fail in their duty through
2142
- weakness of will, which is the same as saying through shrinking from toil and pain.
2143
- </p>
2144
- <p>
2145
- These cases are perfectly simple and easy to distinguish. In a free hour, when
2146
- our power of choice is untrammelled and when nothing prevents our being able to
2147
- do what we like best, every pleasure is to be welcomed and every pain avoided.
2148
- But in certain circumstances and owing to the claims of duty or the obligations
2149
- of business is will frequently occur that pleasures have to be repudiated and
2150
- annoyances accepted. The wise man therefore always holds in these matters to
2151
- this principle of selection: he rejects pleasures to secure other greater
2152
- pleasures, or else he endures pains to avoid worse pains.
2153
- </p>
2154
- <p>
2155
- On the other hand, we denounce with righteous indignation and dislike men who
2156
- are so beguiled and demoralized by the charms of pleasure of the moment, so
2157
- blinded by desire, that they cannot foresee the pain and trouble that are
2158
- bound to ensue; and equal blame belongs to those who fail in their duty through
2159
- weakness of will, which is the same as saying through shrinking from toil and pain.
2160
- </p>
2161
- <p>
2162
- These cases are perfectly simple and easy to distinguish. In a free hour, when
2163
- our power of choice is untrammelled and when nothing prevents our being able to
2164
- do what we like best, every pleasure is to be welcomed and every pain avoided.
2165
- But in certain circumstances and owing to the claims of duty or the obligations
2166
- of business is will frequently occur that pleasures have to be repudiated and
2167
- annoyances accepted. The wise man therefore always holds in these matters to
2168
- this principle of selection: he rejects pleasures to secure other greater
2169
- pleasures, or else he endures pains to avoid worse pains.
2170
- </p>
2171
- </div>
2172
- <div class="modal-footer">
2173
- <button type="button" class="btn btn-primary btn-flex btn-raised mr-2">Do nothing</button>
2174
- <button type="button" class="btn btn-secondary btn-flex btn-raised" data-dismiss="modal">Close</button>
2175
- </div>
2176
- </div>
2177
- </div>
2178
- </div>
2179
- ++++
2180
-
2181
- |*Scrollable long content*
2182
- |It#s also possible to create a scrollable modal that allows scroll the
2183
- modal body. Try the demo and scroll the content.
2184
- |
2185
- ++++
2186
- <div class="ml-0">
2187
- <!-- Button trigger modal -->
2188
- <button type="button"
2189
- class="btn btn-primary btn-raised"
2190
- data-toggle="modal"
2191
- data-target="#exampleModalLongScrollable">
2192
- Launch Example
2193
- </button>
2194
- </div>
2195
-
2196
- <!-- Modal -->
2197
- <div
2198
- id="exampleModalLongScrollable"
2199
- class="modal fade"
2200
- tabindex="-1"
2201
- role="dialog"
2202
- aria-labelledby="exampleModalLongScrollableTitle" aria-hidden="true">
2203
- <div class="modal-dialog modal-dialog-scrollable">
2204
- <div class="modal-content">
2205
- <div class="modal-header">
2206
- <h5 id="exampleModalLongScrollableTitle" class="modal-title notoc">The Extremes of Good and Evil</h5>
2207
- <button type="button" class="close" data-dismiss="modal" aria-label="Close">
2208
- <span aria-hidden="true">&times;</span>
2209
- </button>
2210
- </div>
2211
- <div class="modal-body">
2212
- <p>
2213
- On the other hand, we denounce with righteous indignation and dislike men who
2214
- are so beguiled and demoralized by the charms of pleasure of the moment, so
2215
- blinded by desire, that they cannot foresee the pain and trouble that are
2216
- bound to ensue; and equal blame belongs to those who fail in their duty through
2217
- weakness of will, which is the same as saying through shrinking from toil and pain.
2218
- </p>
2219
- <p>
2220
- These cases are perfectly simple and easy to distinguish. In a free hour, when
2221
- our power of choice is untrammelled and when nothing prevents our being able to
2222
- do what we like best, every pleasure is to be welcomed and every pain avoided.
2223
- But in certain circumstances and owing to the claims of duty or the obligations
2224
- of business is will frequently occur that pleasures have to be repudiated and
2225
- annoyances accepted. The wise man therefore always holds in these matters to
2226
- this principle of selection: he rejects pleasures to secure other greater
2227
- pleasures, or else he endures pains to avoid worse pains.
2228
- </p>
2229
- <p>
2230
- On the other hand, we denounce with righteous indignation and dislike men who
2231
- are so beguiled and demoralized by the charms of pleasure of the moment, so
2232
- blinded by desire, that they cannot foresee the pain and trouble that are
2233
- bound to ensue; and equal blame belongs to those who fail in their duty through
2234
- weakness of will, which is the same as saying through shrinking from toil and pain.
2235
- </p>
2236
- <p>
2237
- These cases are perfectly simple and easy to distinguish. In a free hour, when
2238
- our power of choice is untrammelled and when nothing prevents our being able to
2239
- do what we like best, every pleasure is to be welcomed and every pain avoided.
2240
- But in certain circumstances and owing to the claims of duty or the obligations
2241
- of business is will frequently occur that pleasures have to be repudiated and
2242
- annoyances accepted. The wise man therefore always holds in these matters to
2243
- this principle of selection: he rejects pleasures to secure other greater
2244
- pleasures, or else he endures pains to avoid worse pains.
2245
- </p>
2246
- </div>
2247
- <div class="modal-footer">
2248
- <button type="button" class="btn btn-primary btn-flex btn-raised mr-2">Do nothing</button>
2249
- <button type="button" class="btn btn-secondary btn-flex btn-raised" data-dismiss="modal">Close</button>
2250
- </div>
2251
- </div>
2252
- </div>
2253
- </div>
2254
- ++++
2255
-
2256
- |*Vertically centered*
2257
- |For important messages, center the modal.
2258
- |
2259
- ++++
2260
- <div class="ml-0">
2261
- <!-- Button trigger modal -->
2262
- <button type="button"
2263
- class="btn btn-primary btn-raised"
2264
- data-toggle="modal" data-target="#exampleModalVerticalCenter">
2265
- Launch Example
2266
- </button>
2267
- </div>
2268
-
2269
- <!-- Modal -->
2270
- <div id="exampleModalVerticalCenter"
2271
- class="modal fade"
2272
- tabindex="-1"
2273
- role="dialog"
2274
- aria-labelledby="exampleModalVerticalCenterTitle" aria-hidden="true">
2275
- <div class="modal-dialog modal-dialog-centered">
2276
- <div class="modal-content">
2277
- <div class="modal-header">
2278
- <h5 id="exampleModalVerticalCenterTitle" class="modal-title notoc">Modal title</h5>
2279
- <button type="button" class="close" data-dismiss="modal" aria-label="Close">
2280
- <span aria-hidden="true">&times;</span>
2281
- </button>
2282
- </div>
2283
- <div class="modal-body">
2284
- Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
2285
- eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
2286
- voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
2287
- </div>
2288
- <div class="modal-footer">
2289
- <button type="button" class="btn btn-primary btn-flex btn-raised mr-2">Do nothing</button>
2290
- <button type="button" class="btn btn-secondary btn-flex btn-raised" data-dismiss="modal">Close</button>
2291
- </div>
2292
- </div>
2293
- </div>
2294
- </div>
2295
- ++++
2296
-
2297
- |*Tooltips and Popovers*
2298
- |Tooltips and popovers can be placed within modals as needed. When modals are
2299
- closed, any tooltips and popovers within are also automatically dismissed.
2300
- |
2301
- ++++
2302
- <div class="ml-0">
2303
- <!-- Button trigger modal -->
2304
- <button type="button"
2305
- class="btn btn-primary btn-raised"
2306
- data-toggle="modal"
2307
- data-target="#exampleModalTooltip">
2308
- Launch Example
2309
- </button>
2310
- </div>
2311
-
2312
- <!-- Modal -->
2313
- <div id="exampleModalTooltip"
2314
- class="modal fade"
2315
- tabindex="-1"
2316
- role="dialog"
2317
- aria-labelledby="exampleModalTooltipTitle" aria-hidden="true">
2318
- <div class="modal-dialog modal-dialog-centered">
2319
- <div class="modal-content">
2320
- <div class="modal-header">
2321
- <h5 id="exampleModalTooltipTitle" class="modal-title notoc">Modal title</h5>
2322
- <button type="button" class="close" data-dismiss="modal" aria-label="Close">
2323
- <span aria-hidden="true">&times;</span>
2324
- </button>
2325
- </div>
2326
- <div class="modal-body">
2327
- <h5 class="notoc">Popover in a modal</h5>
2328
- <p>This <a href="#" role="button" class="btn btn-primary 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 hover or click.</p>
2329
- <hr>
2330
- <h5 class="notoc">Tooltips in a modal</h5>
2331
- <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>
2332
- </div>
2333
- <div class="modal-footer">
2334
- <button type="button" class="btn btn-primary btn-flex btn-raised mr-2">Do nothing</button>
2335
- <button type="button" class="btn btn-secondary btn-flex btn-raised" data-dismiss="modal">Close</button>
2336
- </div>
2337
- </div>
2338
- </div>
2339
- </div>
2340
- ++++
2341
- |===============================================================================
2342
-
2343
- .Base Modal example
2344
- [source, html, role="noclip"]
2345
- ----
2346
- <!-- Trigger Button (modal) -->
2347
- <div class="ml-0">
2348
- <button type="button"
2349
- class="btn btn-primary btn-raised"
2350
- data-toggle="modal"
2351
- data-target="#exampleSimpleModal">
2352
- Launch Example
2353
- </button>
2354
- </div>
2355
-
2356
- <!-- Modal -->
2357
- <div id="exampleSimpleModal"
2358
- class="modal fade top"
2359
- tabindex="-1"
2360
- role="dialog"
2361
- aria-labelledby="exampleSimpleModalLabel"
2362
- aria-hidden="true">
2363
- <div class="modal-dialog">
2364
- <div class="modal-content">
2365
- <div class="modal-header">
2366
- <h5 id="exampleSimpleModalLabel" class="modal-title notoc">Modal title</h5>
2367
- <button
2368
- type="button"
2369
- class="close"
2370
- data-dismiss="modal"
2371
- aria-label="Close">
2372
- <span aria-hidden="true">&times;</span>
2373
- </button>
2374
- </div>
2375
- <div class="modal-body">
2376
- <p>Modal body text goes here.</p>
2377
- </div>
2378
- <div class="modal-footer">
2379
- <button type="button"
2380
- class="btn btn-primary btn-flex btn-raised mr-2"> Do nothing
2381
- </button>
2382
- <button
2383
- type="button"
2384
- class="btn btn-secondary btn-flex btn-raised"
2385
- data-dismiss="modal"> Close
2386
- </button>
2387
- </div>
2388
- </div>
2389
- </div>
2390
- </div>
2391
- ----
2392
-
2393
- === Popovers and Tooltips
2394
-
2395
- Popovers and Tooltips rely on the 3rd party library __Popper.js__ for positioning.
2396
- To make them properly positioned, the Javascript library `popper.min.js` has to
2397
- be included before `bootstrap.js` in order to make popovers and tooltips to work.
2398
-
2399
- mdi:bootstrap[24px, mdi-md-deep-purple]
2400
- link:{url-bs-docs--components-popovers}[Bootstrap Docs {char-middot} Popovers, {browser-window--new}]
2401
-
2402
- mdi:bootstrap[24px, mdi-md-deep-purple]
2403
- link:{url-bs-docs--components-tooltips}[Bootstrap Docs {char-middot} Tooltips, {browser-window--new}]
2404
-
2405
- NOTE: Popovers and Tooltips require the BS tooltip plugin as a dependency.
2406
-
2407
- ++++
2408
- <div class="doc-example mb-3">
2409
- <div class="row mb-5">
2410
- <div class="col-md-6">
2411
- <h5 class="mb-5 notoc">Popovers</h5>
2412
- <button type="button" class="btn btn-primary 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>
2413
- <button type="button" class="btn btn-primary btn-raised" title="Popover Title" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">Bottom</button>
2414
- <button type="button" class="btn btn-primary 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>
2415
- <button type="button" class="btn btn-primary 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>
2416
- </div>
2417
- <div class="col-md-6">
2418
- <h5 class="mb-5 notoc">Tooltips</h5>
2419
- <button type="button" class="btn btn-primary btn-raised" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Top</button>
2420
- <button type="button" class="btn btn-primary btn-raised" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Bottom</button>
2421
- <button type="button" class="btn btn-primary btn-raised" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Right</button>
2422
- <button type="button" class="btn btn-primary btn-raised" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Left</button>
2423
- </div>
2424
- </div>
2425
- </div>
2426
- ++++
2427
-
2428
- .Example for Popovers and Tooltips
2429
- [source, html, role="noclip"]
2430
- ----
2431
- <div class="row mb-5">
2432
- <div class="col-md-6">
2433
- <h5 class="mb-5 notoc">Popovers</h5>
2434
- <button type="button" class="btn btn-primary btn-raised"
2435
- title="Popover Title" data-container="body"
2436
- data-toggle="popover" data-placement="top"
2437
- data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">Top
2438
- </button>
2439
- ...
2440
- </div>
2441
- <div class="col-md-6">
2442
- <h5 class="mb-5 notoc">Tooltips</h5>
2443
- <button type="button" class="btn btn-primary btn-raised"
2444
- data-toggle="tooltip" data-placement="top"
2445
- title="Tooltip on top">Top
2446
- </button>
2447
- ...
2448
- </div>
2449
- </div>
2450
- ----