j1-template 2020.0.19 → 2020.0.25
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/_includes/themes/j1/blocks/ads/ad.html +2 -2
- data/_includes/themes/j1/blocks/footer/boxes/about_box.proc +1 -1
- data/_includes/themes/j1/blocks/footer/boxes/links_box.proc +3 -3
- data/_includes/themes/j1/blocks/footer/boxes/news_box.proc +1 -1
- data/_includes/themes/j1/blocks/footer/generator.html +2 -2
- data/_includes/themes/j1/layouts/content_generator_blog_archive.html +11 -11
- data/_includes/themes/j1/layouts/content_generator_collection.html +2 -2
- data/_includes/themes/j1/layouts/content_generator_page.html +4 -4
- data/_includes/themes/j1/layouts/content_generator_post.html +64 -162
- data/_includes/themes/j1/layouts/layout_metadata_generator.html +2 -2
- data/_includes/themes/j1/modules/connectors/ad/google-adsense.html +15 -1
- data/_includes/themes/j1/modules/connectors/ads +2 -2
- data/_includes/themes/j1/modules/connectors/analytic/google-analytics.html +2 -4
- data/_includes/themes/j1/modules/connectors/analytics +2 -2
- data/_includes/themes/j1/modules/connectors/comment/disqus.html +38 -25
- data/_includes/themes/j1/modules/connectors/comments +2 -2
- data/_includes/themes/j1/modules/connectors/translator +2 -2
- data/_includes/themes/j1/modules/navigator/generator.html +17 -8
- data/_includes/themes/j1/modules/navigator/procedures/topsearch.proc +36 -26
- data/_includes/themes/j1/procedures/global/attributes_loader.proc +117 -0
- data/_includes/themes/j1/procedures/global/create_bs_button.proc +4 -3
- data/_includes/themes/j1/procedures/global/create_word_cloud.proc +17 -13
- data/_includes/themes/j1/procedures/global/get_documents_dir.proc +1 -1
- data/_includes/themes/j1/procedures/global/set_env_entry_document.proc +3 -3
- data/_includes/themes/j1/procedures/global/setup.proc +9 -9
- data/_includes/themes/j1/procedures/layouts/content_writer.proc +1 -2
- data/_includes/themes/j1/procedures/layouts/module_writer.proc +1 -1
- data/_includes/themes/j1/procedures/posts/collate_calendar.proc +1 -1
- data/_includes/themes/j1/procedures/posts/collate_list.proc +1 -1
- data/_includes/themes/j1/procedures/posts/collate_timeline.proc +18 -17
- data/_includes/themes/j1/procedures/posts/create_series_header.proc +9 -5
- data/_layouts/default.html +3 -3
- data/_layouts/home.html +2 -2
- data/apps/public/cc/cc.yml +37 -38
- data/assets/data/authclient.html +2 -2
- data/assets/data/banner.html +25 -21
- data/assets/data/carousel.json +1 -1
- data/assets/data/cookiebar.html +17 -13
- data/assets/data/fam.html +124 -0
- data/assets/data/footer.html +1 -1
- data/assets/data/galleries.json +1 -1
- data/assets/data/gallery_customizer.html +19 -7
- data/assets/data/mdi_icons.json +1 -1
- data/assets/data/menu.html +2 -2
- data/assets/data/mmenu.html +2 -2
- data/assets/data/mmenu_sidebar.html +4 -4
- data/assets/data/mmenu_toc.html +1 -1
- data/assets/data/panel.html +113 -67
- data/assets/data/quicklinks.html +16 -16
- data/assets/data/themes.json +9 -9
- data/assets/data/twa_v1.json +1 -1
- data/assets/error_pages/HTTP204.html +1 -0
- data/assets/error_pages/HTTP400.html +3 -2
- data/assets/error_pages/HTTP401.html +3 -2
- data/assets/error_pages/HTTP403.html +3 -2
- data/assets/error_pages/HTTP404.html +3 -2
- data/assets/error_pages/HTTP500.html +3 -2
- data/assets/error_pages/HTTP501.html +3 -2
- data/assets/error_pages/HTTP502.html +3 -2
- data/assets/error_pages/HTTP503.html +3 -2
- data/assets/error_pages/HTTP520.html +3 -2
- data/assets/error_pages/HTTP521.html +3 -2
- data/assets/error_pages/HTTP533.html +3 -2
- data/assets/themes/j1/adapter/js/algolia.js +2 -2
- data/assets/themes/j1/adapter/js/attic.js +2 -2
- data/assets/themes/j1/adapter/js/{mdb.js → bmd.js} +11 -11
- data/assets/themes/j1/adapter/js/carousel.js +6 -6
- data/assets/themes/j1/adapter/js/clipboard.js +3 -3
- data/assets/themes/j1/adapter/js/cookiebar.js +1 -1
- data/assets/themes/j1/adapter/js/{ssm.js → fam.js} +275 -148
- data/assets/themes/j1/adapter/js/framer.js +74 -62
- data/assets/themes/j1/adapter/js/gallery_customizer.js +4 -3
- data/assets/themes/j1/adapter/js/j1.js +25 -19
- data/assets/themes/j1/adapter/js/jf_gallery.js +4 -4
- data/assets/themes/j1/adapter/js/lightbox.js +2 -2
- data/assets/themes/j1/adapter/js/logger.js +2 -2
- data/assets/themes/j1/adapter/js/{searcher.js → lunr_search.js} +68 -65
- data/assets/themes/j1/adapter/js/mmenu.js +16 -10
- data/assets/themes/j1/adapter/js/navigator.js +81 -60
- data/assets/themes/j1/adapter/js/rouge.js +246 -0
- data/assets/themes/j1/adapter/js/rtable.js +181 -0
- data/assets/themes/j1/adapter/js/themer.js +63 -110
- data/assets/themes/j1/adapter/js/toccer.js +72 -32
- data/assets/themes/j1/core/css/animate.css +15 -15
- data/assets/themes/j1/core/css/bootstrap.css +0 -14
- data/assets/themes/j1/core/css/custom.scss +28 -0
- data/assets/themes/j1/core/css/globals.css +14523 -0
- data/assets/themes/j1/core/css/globals.min.css +1 -0
- data/assets/themes/j1/core/css/globals.scss +28 -0
- data/assets/themes/j1/core/css/{icons-fontawesome.css → icon-fonts/fontawesome.css} +17 -17
- data/assets/themes/j1/core/css/{icons-fontawesome.min.css → icon-fonts/fontawesome.min.css} +0 -0
- data/assets/themes/j1/core/css/{icons-iconify.css → icon-fonts/iconify.css} +15 -15
- data/assets/themes/j1/core/css/{icons-iconify.min.css → icon-fonts/iconify.min.css} +0 -0
- data/assets/themes/j1/core/css/{icons-materialdesign.css → icon-fonts/materialdesign.css} +17 -17
- data/assets/themes/j1/core/css/{icons-materialdesign.min.css → icon-fonts/materialdesign.min.css} +0 -0
- data/assets/themes/j1/core/css/{icons-twemoji.css → icon-fonts/twemoji.css} +18 -18
- data/assets/themes/j1/core/css/{icons-twemoji.min.css → icon-fonts/twemoji.min.css} +0 -0
- data/assets/themes/j1/core/css/{theme-extensions.css → theme_extensions.css} +3625 -1816
- data/assets/themes/j1/core/css/theme_extensions.min.css +1 -0
- data/assets/themes/j1/core/css/themes/bootstrap/bootstrap.css +7171 -0
- data/assets/themes/j1/core/css/themes/bootstrap/bootstrap.min.css +6 -0
- data/assets/themes/j1/core/css/{uno-dark.css → themes/uno-dark/bootstrap.css} +548 -316
- data/assets/themes/j1/core/css/themes/uno-dark/bootstrap.min.css +6 -0
- data/assets/themes/j1/core/css/themes/uno-light/bootstrap.css +22519 -0
- data/assets/themes/j1/core/css/themes/uno-light/bootstrap.min.css +8 -0
- data/assets/themes/j1/core/css/uno.css +5284 -15518
- data/assets/themes/j1/core/css/uno.min.css +1 -8
- data/assets/themes/j1/core/css/uno.scss +28 -0
- data/assets/themes/j1/core/css/vendor.css +102 -73
- data/assets/themes/j1/core/css/vendor.min.css +1 -1
- data/assets/themes/j1/core/css/vendor.scss +28 -0
- data/assets/themes/j1/core/js/template.js +6 -11
- data/assets/themes/j1/core/js/template.js.map +1 -1
- data/assets/themes/j1/core/js/template.min.js +1 -1
- data/assets/themes/j1/modules/backstretch/js/backstretch.js +12 -13
- data/assets/themes/j1/modules/backstretch/js/backstretch.min.js +12 -13
- data/assets/themes/j1/modules/bmd/js/bootstrap-material-design.full.js +6930 -0
- data/assets/themes/j1/modules/bmd/js/bootstrap-material-design.js +6 -0
- data/assets/themes/j1/modules/carousel/css/carousel.css +8 -9
- data/assets/themes/j1/modules/carousel/css/carousel.min.css +7 -9
- data/assets/themes/j1/modules/carousel/css/carousel_transitions.css +7 -8
- data/assets/themes/j1/modules/carousel/css/carousel_transitions.min.css +7 -9
- data/assets/themes/j1/modules/carousel/css/theme/uno.css +39 -48
- data/assets/themes/j1/modules/carousel/css/theme/uno.min.css +8 -9
- data/assets/themes/j1/modules/cash/js/cash.js +1374 -0
- data/assets/themes/j1/modules/cash/js/cash.min.js +42 -0
- data/assets/themes/j1/modules/clipboard/css/theme/uno.css +9 -9
- data/assets/themes/j1/modules/clipboard/css/theme/uno.min.css +8 -45
- data/assets/themes/j1/modules/fam/css/uno/fam.css +369 -0
- data/assets/themes/j1/modules/fam/js/fam.js +477 -0
- data/assets/themes/j1/modules/iframeResizer/examples/frame.nested.html +1 -1
- data/assets/themes/j1/modules/iframeResizer/js/{iframeResizer.js → resizer.js} +0 -0
- data/assets/themes/j1/modules/iframeResizer/js/{iframeResizer.map → resizer.map} +0 -0
- data/assets/themes/j1/modules/iframeResizer/js/{iframeResizer.min.js → resizer.min.js} +0 -0
- data/assets/themes/j1/modules/jquery/js/jquery.js +7 -4
- data/assets/themes/j1/modules/jquery/js/jquery.min.js +2 -2
- data/assets/themes/j1/modules/jquery/js/require.js +2145 -0
- data/assets/themes/j1/modules/jquery/js/require.min.js +5 -0
- data/assets/themes/j1/modules/justifiedGallery/css/theme/uno.css +13 -13
- data/assets/themes/j1/modules/justifiedGallery/css/theme/uno.min.css +8 -31
- data/assets/themes/j1/modules/lightGallery/css/themes/uno.css +7 -8
- data/assets/themes/j1/modules/lightGallery/css/themes/uno.min.css +8 -10
- data/assets/themes/j1/modules/lightbox/css/lightbox.css +11 -12
- data/assets/themes/j1/modules/lightbox/css/lightbox.min.css +11 -12
- data/assets/themes/j1/modules/lightbox/css/theme/uno.css +7 -7
- data/assets/themes/j1/modules/lightbox/css/theme/uno.min.css +7 -8
- data/assets/themes/j1/modules/lightbox/js/lightbox.js +12 -13
- data/assets/themes/j1/modules/lightbox/js/lightbox.min.js +11 -27
- data/assets/themes/j1/modules/lunrSearch/css/lunr_search.css +32 -0
- data/assets/themes/j1/modules/lunrSearch/css/lunr_search.min.css +25 -0
- data/assets/themes/j1/modules/lunrSearch/js/dateformat.js +125 -0
- data/assets/themes/j1/modules/lunrSearch/js/dateformat.min.js +14 -0
- data/assets/themes/j1/modules/lunrSearch/js/lunr.js +3475 -0
- data/assets/themes/j1/modules/lunrSearch/js/lunr.min.js +51 -0
- data/assets/themes/j1/modules/lunrSearch/js/lunr_search.js +184 -0
- data/assets/themes/j1/modules/lunrSearch/js/lunr_search.min.js +17 -0
- data/assets/themes/j1/modules/lunrSearch/js/mustache.js +772 -0
- data/assets/themes/j1/modules/lunrSearch/js/mustache.min.js +772 -0
- data/assets/themes/j1/modules/lunrSearch/js/uri.js +2340 -0
- data/assets/themes/j1/modules/lunrSearch/js/uri.min.js +93 -0
- data/assets/themes/j1/modules/materialize/js/anime.js +1283 -0
- data/assets/themes/j1/modules/materialize/js/anime.min.js +34 -0
- data/assets/themes/j1/modules/materialize/js/autocomplete.js +450 -0
- data/assets/themes/j1/modules/materialize/js/buttons.js +409 -0
- data/assets/themes/j1/modules/materialize/js/cards.js +40 -0
- data/assets/themes/j1/modules/materialize/js/carousel.js +717 -0
- data/assets/themes/j1/modules/materialize/js/cash-dom.js +1044 -0
- data/assets/themes/j1/modules/materialize/js/cash.js +960 -0
- data/assets/themes/j1/modules/materialize/js/characterCounter.js +136 -0
- data/assets/themes/j1/modules/materialize/js/chips.js +481 -0
- data/assets/themes/j1/modules/materialize/js/collapsible.js +275 -0
- data/assets/themes/j1/modules/materialize/js/component.js +44 -0
- data/assets/themes/j1/modules/materialize/js/datepicker.js +975 -0
- data/assets/themes/j1/modules/materialize/js/dropdown.js +617 -0
- data/assets/themes/j1/modules/materialize/js/forms.js +275 -0
- data/assets/themes/j1/modules/materialize/js/global.js +427 -0
- data/assets/themes/j1/modules/materialize/js/materialbox.js +453 -0
- data/assets/themes/j1/modules/materialize/js/modal.js +382 -0
- data/assets/themes/j1/modules/materialize/js/parallax.js +138 -0
- data/assets/themes/j1/modules/materialize/js/pushpin.js +145 -0
- data/assets/themes/j1/modules/materialize/js/range.js +263 -0
- data/assets/themes/j1/modules/materialize/js/ripple.js +335 -0
- data/assets/themes/j1/modules/materialize/js/scrollspy.js +295 -0
- data/assets/themes/j1/modules/materialize/js/select.js +432 -0
- data/assets/themes/j1/modules/materialize/js/sidenav.js +580 -0
- data/assets/themes/j1/modules/materialize/js/slider.js +359 -0
- data/assets/themes/j1/modules/materialize/js/tabs.js +402 -0
- data/assets/themes/j1/modules/materialize/js/tapTarget.js +314 -0
- data/assets/themes/j1/modules/materialize/js/timepicker.js +647 -0
- data/assets/themes/j1/modules/materialize/js/toasts.js +310 -0
- data/assets/themes/j1/modules/materialize/js/tooltip.js +303 -0
- data/assets/themes/j1/modules/materialize/js/waves.js +335 -0
- data/assets/themes/j1/modules/materialize/scss/components/_badges.scss +55 -0
- data/assets/themes/j1/modules/materialize/scss/components/_buttons.scss +322 -0
- data/assets/themes/j1/modules/materialize/scss/components/_cards.scss +195 -0
- data/assets/themes/j1/modules/materialize/scss/components/_carousel.scss +90 -0
- data/assets/themes/j1/modules/materialize/scss/components/_chips.scss +90 -0
- data/assets/themes/j1/modules/materialize/scss/components/_collapsible.scss +91 -0
- data/assets/themes/j1/modules/materialize/scss/components/_color-classes.scss +32 -0
- data/assets/themes/j1/modules/materialize/scss/components/_color-variables.scss +370 -0
- data/assets/themes/j1/modules/materialize/scss/components/_datepicker.scss +191 -0
- data/assets/themes/j1/modules/materialize/scss/components/_dropdown.scss +85 -0
- data/assets/themes/j1/modules/materialize/scss/components/_global.scss +769 -0
- data/assets/themes/j1/modules/materialize/scss/components/_grid.scss +156 -0
- data/assets/themes/j1/modules/materialize/scss/components/_icons-material-design.scss +5 -0
- data/assets/themes/j1/modules/materialize/scss/components/_materialbox.scss +43 -0
- data/assets/themes/j1/modules/materialize/scss/components/_modal.scss +94 -0
- data/assets/themes/j1/modules/materialize/scss/components/_navbar.scss +208 -0
- data/assets/themes/j1/modules/materialize/scss/components/_normalize.scss +447 -0
- data/assets/themes/j1/modules/materialize/scss/components/_preloader.scss +334 -0
- data/assets/themes/j1/modules/materialize/scss/components/_pulse.scss +34 -0
- data/assets/themes/j1/modules/materialize/scss/components/_sidenav.scss +216 -0
- data/assets/themes/j1/modules/materialize/scss/components/_slider.scss +92 -0
- data/assets/themes/j1/modules/materialize/scss/components/_table_of_contents.scss +33 -0
- data/assets/themes/j1/modules/materialize/scss/components/_tabs.scss +99 -0
- data/assets/themes/j1/modules/materialize/scss/components/_tapTarget.scss +103 -0
- data/assets/themes/j1/modules/materialize/scss/components/_timepicker.scss +183 -0
- data/assets/themes/j1/modules/materialize/scss/components/_toast.scss +58 -0
- data/assets/themes/j1/modules/materialize/scss/components/_tooltip.scss +32 -0
- data/assets/themes/j1/modules/materialize/scss/components/_transitions.scss +13 -0
- data/assets/themes/j1/modules/materialize/scss/components/_typography.scss +60 -0
- data/assets/themes/j1/modules/materialize/scss/components/_variables.scss +349 -0
- data/assets/themes/j1/modules/materialize/scss/components/_waves.scss +114 -0
- data/assets/themes/j1/modules/materialize/scss/components/forms/_checkboxes.scss +200 -0
- data/assets/themes/j1/modules/materialize/scss/components/forms/_file-input.scss +44 -0
- data/assets/themes/j1/modules/materialize/scss/components/forms/_forms.scss +22 -0
- data/assets/themes/j1/modules/materialize/scss/components/forms/_input-fields.scss +354 -0
- data/assets/themes/j1/modules/materialize/scss/components/forms/_radio-buttons.scss +115 -0
- data/assets/themes/j1/modules/materialize/scss/components/forms/_range.scss +161 -0
- data/assets/themes/j1/modules/materialize/scss/components/forms/_select.scss +180 -0
- data/assets/themes/j1/modules/materialize/scss/components/forms/_switches.scss +89 -0
- data/assets/themes/j1/modules/materialize/scss/materialize.scss +41 -0
- data/assets/themes/j1/modules/mmenuLight/css/mmenu.css +11 -11
- data/assets/themes/j1/modules/mmenuLight/css/theme/uno.min.css +37 -11
- data/assets/themes/j1/modules/popper/js/popper.js +1 -1
- data/assets/themes/j1/modules/popper/js/popper.js.map +1 -1
- data/assets/themes/j1/modules/popper/js/popper.min.js.map +1 -1
- data/assets/themes/j1/modules/rouge/js/select.js +25 -0
- data/assets/themes/j1/modules/rtable/LICENSE +22 -0
- data/assets/themes/j1/modules/rtable/README.md +418 -0
- data/assets/themes/j1/modules/rtable/css/tablesaw.stackonly.css +148 -0
- data/assets/themes/j1/modules/rtable/css/theme/uno.css +191 -0
- data/assets/themes/j1/modules/rtable/css/theme/uno.min.css +191 -0
- data/assets/themes/j1/modules/rtable/js/rtable.js +692 -0
- data/assets/themes/j1/modules/rtable/js/rtable.min.js +690 -0
- data/assets/themes/j1/modules/rtable/js/tablesaw-init.js +18 -0
- data/assets/themes/j1/modules/rtable/js/tablesaw.stackonly.js +2371 -0
- data/assets/themes/j1/modules/{bsThemeSwitcher → themeSwitcher}/js/switcher.js +15 -17
- data/assets/themes/j1/modules/themeSwitcher/js/switcher.min.js +26 -0
- data/assets/themes/j1/modules/twemoji/css/picker/twemoji-picker.css +1 -1
- data/assets/themes/j1/modules/twemoji/css/picker/twemoji-picker.min.css +1 -1
- data/assets/themes/j1/modules/twemoji/js/picker/twemoji-picker.js +2 -2
- data/assets/themes/j1/modules/twemoji/js/picker/twemoji-picker.min.js +2 -257
- data/assets/themes/j1/modules/twemoji/js/twemoji.js +11 -11
- data/assets/themes/j1/modules/twemoji/js/twemoji.min.js +11 -12
- data/lib/j1/commands/generate.rb +6 -6
- data/lib/j1/version.rb +1 -1
- data/lib/j1_app/j1_auth_manager/config.rb +2 -2
- data/lib/starter_web/Gemfile +12 -16
- data/lib/starter_web/_config.yml +162 -22
- data/lib/starter_web/_data/apps/carousel.yml +10 -10
- data/lib/starter_web/_data/apps/justified_gallery.yml +44 -10
- data/lib/starter_web/_data/blocks/banner.yml +32 -27
- data/lib/starter_web/_data/blocks/defaults/banner.yml +14 -13
- data/lib/starter_web/_data/blocks/defaults/footer.yml +1 -1
- data/lib/starter_web/_data/blocks/defaults/panel.yml +3 -2
- data/lib/starter_web/_data/blocks/footer.yml +1 -1
- data/lib/starter_web/_data/blocks/panel.yml +24 -25
- data/lib/starter_web/_data/{template_settings.yml → j1_config.yml} +64 -11
- data/lib/starter_web/_data/layouts/home.yml +20 -10
- data/lib/starter_web/_data/layouts/page.yml +10 -0
- data/lib/starter_web/_data/layouts/post.yml +10 -0
- data/lib/starter_web/_data/modules/defaults/cookiebar.yml +3 -1
- data/lib/starter_web/_data/modules/defaults/{ssm.yml → fam.yml} +12 -15
- data/lib/starter_web/_data/modules/defaults/lunr_search.yml +171 -0
- data/lib/starter_web/_data/modules/defaults/navigator.yml +5 -5
- data/lib/starter_web/_data/modules/defaults/themer.yml +8 -13
- data/lib/starter_web/_data/modules/defaults/toccer.yml +4 -2
- data/lib/starter_web/_data/modules/fam.yml +158 -0
- data/lib/starter_web/_data/modules/{back2top.yml → lunr_search.yml} +15 -9
- data/lib/starter_web/_data/modules/navigator.yml +2 -2
- data/lib/starter_web/_data/modules/navigator_menu.yml +16 -10
- data/lib/starter_web/_data/modules/themer.yml +0 -18
- data/lib/starter_web/_data/modules/toccer.yml +0 -73
- data/lib/starter_web/_data/resources.yml +195 -67
- data/lib/starter_web/_includes/attributes.asciidoc +194 -0
- data/lib/starter_web/_includes/breadcrumbs.html +11 -0
- data/lib/starter_web/_includes/documents/licenses/mit.asciidoc +19 -0
- data/lib/starter_web/{collections/posts/private → _includes/documents}/readme +0 -0
- data/lib/starter_web/_includes/tables/jekyll_variables.asciidoc +45 -0
- data/lib/starter_web/_includes/tables/template_variables.asciidoc +46 -0
- data/lib/starter_web/_plugins/debug.rb +0 -1
- data/lib/starter_web/_plugins/filters.rb +0 -1
- data/lib/starter_web/_plugins/{lorem-inline.rb → lorem_inline.rb} +1 -2
- data/lib/starter_web/_plugins/lunr_index.rb +313 -0
- data/lib/starter_web/_plugins/prettify.rb +0 -3
- data/lib/starter_web/_plugins/simple_search_filter.rb +0 -1
- data/lib/starter_web/_plugins/symlink_watcher.rb +2 -3
- data/lib/starter_web/assets/images/modules/attics/banner/lunr-banner-1280x800.jpg +0 -0
- data/lib/starter_web/assets/images/modules/attics/katie-moum-1920x1280.jpg +0 -0
- data/lib/starter_web/assets/images/modules/attics/tldr-1920x800.jpg +0 -0
- data/lib/starter_web/assets/images/pages/winlogbeat/coordinate-map.png +0 -0
- data/lib/starter_web/assets/images/pages/winlogbeat/kibana-powershell.jpg +0 -0
- data/lib/starter_web/assets/images/pages/winlogbeat/option_ignore_outgoing.png +0 -0
- data/lib/starter_web/assets/images/pages/winlogbeat/winlogbeat-dashboard.png +0 -0
- data/lib/starter_web/collections/posts/{protected → private/_posts}/readme +0 -0
- data/{assets/README.md → lib/starter_web/collections/posts/protected/_posts/readme} +0 -0
- data/lib/starter_web/collections/posts/public/featured/_posts/0000-00-00-welcome-to-j1-template.adoc.erb +77 -80
- data/lib/starter_web/collections/posts/public/featured/_posts/2018-05-01-confusion-about-base-url.adoc +21 -10
- data/lib/starter_web/collections/posts/public/featured/_posts/2019-05-01-top-open-source-static-site-generators.adoc +41 -31
- data/lib/starter_web/collections/posts/public/featured/_posts/2019-06-01-about-cookies.adoc +32 -27
- data/lib/starter_web/collections/posts/public/featured/_posts/_includes/attributes.asciidoc +38 -0
- data/lib/starter_web/collections/posts/public/featured/_posts/_includes/documents/readme +0 -0
- data/lib/starter_web/collections/posts/public/featured/_posts/{000_includes → _includes/documents}/unsplash-badge.asciidoc +0 -0
- data/lib/starter_web/collections/posts/public/featured/_posts/_includes/tables/readme +0 -0
- data/lib/starter_web/collections/posts/public/series/_posts/2018-11-01-docker-using-shared-folders.adoc +494 -502
- data/lib/starter_web/collections/posts/public/series/_posts/2020-01-01-post-test-series.adoc +144 -0
- data/lib/starter_web/collections/posts/public/series/_posts/2020-01-02-post-test-series.adoc +146 -0
- data/lib/starter_web/collections/posts/public/series/_posts/2020-01-03-post-test-series.adoc +146 -0
- data/lib/starter_web/collections/posts/public/series/_posts/2020-01-04-post-test-series.adoc +146 -0
- data/lib/starter_web/collections/posts/public/{featured/_posts/000_includes → series/_posts/_includes}/attributes.asciidoc +8 -18
- data/lib/starter_web/collections/posts/public/series/_posts/{000_includes → _includes}/documents/100-docker-using-shared-folders.asciidoc +0 -0
- data/lib/starter_web/collections/posts/public/series/_posts/{000_includes → _includes}/documents/loop.sh +0 -0
- data/lib/starter_web/collections/posts/public/series/_posts/{000_includes → _includes}/tables/debug_variables.asciidoc +0 -0
- data/lib/starter_web/collections/posts/public/test_posts/_posts/2020-09-11-test_post.adoc +218 -0
- data/lib/starter_web/collections/posts/public/{wikipedia/_posts/000_includes → test_posts/_posts/_includes}/attributes.asciidoc +9 -21
- data/lib/starter_web/collections/posts/public/test_posts/_posts/_includes/documents/readme +0 -0
- data/lib/starter_web/collections/posts/public/{wikipedia/_posts/000_includes → test_posts/_posts/_includes}/tables/debug_variables.asciidoc +0 -0
- data/lib/starter_web/collections/posts/public/test_posts/_posts/_includes/tables/readme +0 -0
- data/lib/starter_web/collections/posts/public/wikipedia/_posts/2016-11-20-minneapolis.adoc +16 -8
- data/lib/starter_web/collections/posts/public/wikipedia/_posts/2016-11-24-narcisse-snake-dens.adoc +2 -7
- data/lib/starter_web/collections/posts/public/wikipedia/_posts/2016-11-26-columbia-river.adoc +2 -6
- data/lib/starter_web/collections/posts/public/wikipedia/_posts/_includes/attributes.asciidoc +37 -0
- data/lib/starter_web/collections/posts/public/wikipedia/_posts/_includes/documents/readme +0 -0
- data/lib/starter_web/collections/posts/public/wikipedia/_posts/_includes/tables/readme +0 -0
- data/lib/starter_web/index.html +16 -10
- data/lib/starter_web/package.json +5 -2
- data/lib/starter_web/pages/protected/site_search.adoc +8 -19
- data/lib/starter_web/pages/public/about/about_site.adoc +0 -2
- data/lib/starter_web/pages/public/about/become_a_patron.adoc +1 -3
- data/lib/starter_web/pages/public/blog/navigator/archive.html +34 -9
- data/lib/starter_web/pages/public/blog/navigator/archive/categoryview.html +40 -16
- data/lib/starter_web/pages/public/blog/navigator/archive/dateview.html +32 -8
- data/lib/starter_web/pages/public/blog/navigator/archive/tagview.html +8 -4
- data/lib/starter_web/pages/public/blog/navigator/index.html +6 -3
- data/lib/starter_web/pages/public/learn/kickstarter/web_in_a_day/100_meet_and_greet_jekyll.adoc +15 -21
- data/lib/starter_web/pages/public/learn/kickstarter/web_in_a_day/200_preparations.adoc +32 -27
- data/lib/starter_web/pages/public/learn/kickstarter/web_in_a_day/300_first_awesome_web.adoc +32 -27
- data/lib/starter_web/pages/public/learn/kickstarter/web_in_a_day/{000_includes → _includes}/attributes.asciidoc +15 -13
- data/lib/starter_web/pages/public/learn/kickstarter/web_in_a_day/_includes/documents/100_meet_and_greet_jekyll.asciidoc +31 -0
- data/lib/starter_web/pages/public/learn/kickstarter/web_in_a_day/{000_includes → _includes}/documents/200_preparations.asciidoc +0 -0
- data/lib/starter_web/pages/public/learn/kickstarter/web_in_a_day/{000_includes → _includes}/documents/300_first_awesome_web.asciidoc +0 -0
- data/lib/starter_web/pages/public/learn/kickstarter/web_in_a_day/{000_includes → _includes}/parts.asciidoc +1 -1
- data/lib/starter_web/pages/public/learn/kickstarter/web_in_a_day/_includes/tables/debug_variables.asciidoc +48 -0
- data/lib/starter_web/pages/public/learn/kickstarter/web_in_a_day/_includes/tables/readme +0 -0
- data/lib/starter_web/pages/public/learn/roundtrip/100_present_images.adoc +76 -111
- data/lib/starter_web/pages/public/learn/roundtrip/100_present_videos.adoc +37 -45
- data/lib/starter_web/pages/public/learn/roundtrip/200_typography.adoc +51 -63
- data/lib/starter_web/pages/public/learn/roundtrip/300_icon_fonts.adoc +74 -80
- data/lib/starter_web/pages/public/learn/roundtrip/400_asciidoc_extensions.adoc +64 -84
- data/lib/starter_web/pages/public/learn/roundtrip/410_bs_modals_extentions.adoc +34 -42
- data/lib/starter_web/pages/public/learn/roundtrip/420_responsive_tables_extensions.adoc +281 -91
- data/lib/starter_web/pages/public/learn/roundtrip/500_themes.adoc +138 -52
- data/lib/starter_web/pages/public/learn/roundtrip/600_lunr.adoc +236 -0
- data/lib/starter_web/pages/public/learn/roundtrip/610_fam.adoc +294 -0
- data/lib/starter_web/pages/public/learn/roundtrip/{000_includes → _includes}/attributes.asciidoc +10 -29
- data/lib/starter_web/pages/public/learn/roundtrip/_includes/documents/100_gistblock.asciidoc +28 -0
- data/lib/starter_web/pages/public/learn/roundtrip/{000_includes → _includes}/documents/410_bottom_info.asciidoc +2 -2
- data/lib/starter_web/pages/public/learn/roundtrip/{000_includes → _includes}/documents/410_bottom_left_warning.asciidoc +2 -2
- data/lib/starter_web/pages/public/learn/roundtrip/{000_includes → _includes}/documents/410_bottom_right_danger.asciidoc +2 -2
- data/lib/starter_web/pages/public/learn/roundtrip/{000_includes → _includes}/documents/410_central_success.asciidoc +2 -2
- data/lib/starter_web/pages/public/learn/roundtrip/{000_includes → _includes}/documents/410_full_height_left_info.asciidoc +2 -2
- data/lib/starter_web/pages/public/learn/roundtrip/{000_includes → _includes}/documents/410_full_height_right_success.asciidoc +2 -2
- data/lib/starter_web/pages/public/learn/roundtrip/{000_includes → _includes}/documents/410_table_3_column.asciidoc +1 -1
- data/lib/starter_web/pages/public/learn/roundtrip/{000_includes → _includes}/documents/410_top_info.asciidoc +2 -2
- data/lib/starter_web/pages/public/learn/roundtrip/{000_includes → _includes}/documents/410_top_left_info.asciidoc +2 -2
- data/lib/starter_web/pages/public/learn/roundtrip/{000_includes → _includes}/documents/410_top_right_success.asciidoc +2 -2
- data/lib/starter_web/pages/public/learn/roundtrip/{000_includes → _includes}/documents/419_advanced_modals_demo.asciidoc +16 -16
- data/lib/starter_web/pages/public/learn/roundtrip/_includes/tables/readme +0 -0
- data/lib/starter_web/pages/public/learn/{whats_up.adoc → where_to_go.adoc} +31 -46
- data/lib/starter_web/pages/public/legal/de/100_impress.adoc +3 -2
- data/lib/starter_web/pages/public/legal/de/200_terms_of_use.adoc +2 -1
- data/lib/starter_web/pages/public/legal/de/300_privacy.adoc +7 -12
- data/lib/starter_web/pages/public/legal/de/400_license_agreement.adoc +2 -1
- data/lib/starter_web/pages/public/legal/de/500_support.adoc +2 -1
- data/lib/starter_web/pages/public/legal/en/000_copyright.adoc +32 -28
- data/lib/starter_web/pages/public/legal/en/100_impress.adoc +12 -8
- data/lib/starter_web/pages/public/legal/en/200_terms_of_use.adoc +17 -12
- data/lib/starter_web/pages/public/legal/en/300_privacy.adoc +38 -36
- data/lib/starter_web/pages/public/legal/en/400_license_agreement.adoc +15 -6
- data/lib/starter_web/pages/public/legal/en/500_support.adoc +12 -4
- data/lib/starter_web/pages/public/legal/en/eu/cookie.policy.asciidoc +1 -1
- data/lib/starter_web/pages/public/panels/intro_panel/panel.adoc +68 -68
- data/lib/starter_web/pages/public/previewer/{000_includes → _includes}/attributes.asciidoc +22 -8
- data/lib/starter_web/pages/public/previewer/_includes/documents/licenses/mit.asciidoc +19 -0
- data/lib/starter_web/pages/public/previewer/_includes/documents/readme +0 -0
- data/lib/starter_web/pages/public/previewer/{000_includes → _includes}/tables/mdi_icons/100_absolute_sizes.asciidoc +1 -1
- data/lib/starter_web/pages/public/previewer/{000_includes → _includes}/tables/mdi_icons/110_bs_grid_sizes.asciidoc +1 -1
- data/lib/starter_web/pages/public/previewer/{000_includes → _includes}/tables/mdi_icons/120_relative_sizes.asciidoc +1 -1
- data/lib/starter_web/pages/public/previewer/{000_includes → _includes}/tables/mdi_icons/200_rotate.asciidoc +1 -1
- data/lib/starter_web/pages/public/previewer/{000_includes → _includes}/tables/mdi_icons/300_flip.asciidoc +1 -1
- data/lib/starter_web/pages/public/previewer/{000_includes → _includes}/tables/mdi_icons/400_spin_pulsed.asciidoc +1 -1
- data/lib/starter_web/pages/public/previewer/{000_includes → _includes}/tables/mdi_icons/500_bw_color_palette.asciidoc +1 -1
- data/lib/starter_web/pages/public/previewer/{000_includes → _includes}/tables/mdi_icons/510_bs_color_palette.asciidoc +1 -1
- data/lib/starter_web/pages/public/previewer/{000_includes → _includes}/tables/mdi_icons/600_md_color_palette.asciidoc +1 -1
- data/lib/starter_web/pages/public/previewer/{000_includes → _includes}/tables/mdi_icons/601_md_color_palette_indigo.asciidoc +1 -1
- data/lib/starter_web/pages/public/previewer/{000_includes → _includes}/tables/mdi_icons/602_md_color_palette_pink.asciidoc +1 -1
- data/lib/starter_web/pages/public/previewer/{000_includes → _includes}/tables/twitter_emoji/100_bs_sizes.asciidoc +1 -1
- data/lib/starter_web/pages/public/previewer/{000_includes → _includes}/tables/twitter_emoji/100_relative_sizes.asciidoc +1 -1
- data/lib/starter_web/pages/public/previewer/{000_includes → _includes}/tables/twitter_emoji/200_rotate.asciidoc +1 -1
- data/lib/starter_web/pages/public/previewer/{000_includes → _includes}/tables/twitter_emoji/300_flip.asciidoc +1 -1
- data/lib/starter_web/pages/public/previewer/{000_includes → _includes}/tables/twitter_emoji/400_spin_pulsed.asciidoc +1 -1
- data/lib/starter_web/pages/public/previewer/bootstrap_theme.adoc +860 -595
- data/lib/starter_web/pages/public/previewer/iframer.adoc +48 -41
- data/lib/starter_web/pages/public/previewer/justified_gallery.html +15 -7
- data/lib/starter_web/pages/public/previewer/mdi_icons_preview.adoc +21 -26
- data/lib/starter_web/pages/public/previewer/rouge.adoc +205 -0
- data/lib/starter_web/pages/public/previewer/twitter_emoji_preview.adoc +21 -27
- data/lib/starter_web/pages/public/test_pages/_includes/attributes.asciidoc +49 -0
- data/lib/starter_web/pages/public/{learn/roundtrip/000_includes → test_pages/_includes}/documents/100_gistblock.asciidoc +0 -0
- data/lib/starter_web/pages/public/test_pages/_includes/tables/000_bem_specifiers.asciidoc +22 -0
- data/lib/starter_web/pages/public/test_pages/_includes/tables/000_specifier_examples.asciidoc +56 -0
- data/lib/starter_web/pages/public/test_pages/breadcrumbs_tester.adoc +62 -0
- data/lib/starter_web/pages/public/test_pages/carousel_captions.adoc +1045 -0
- data/lib/starter_web/pages/public/test_pages/deck_of_posts.adoc +165 -0
- data/lib/starter_web/pages/public/test_pages/floating_actions_button.adoc +523 -0
- data/lib/starter_web/pages/public/{learn/examples → test_pages}/floating_ad.adoc +8 -21
- data/lib/starter_web/pages/public/{learn/examples → test_pages}/floating_div.adoc +25 -38
- data/lib/starter_web/pages/public/test_pages/lunr_tester.adoc +89 -0
- data/lib/starter_web/pages/public/{000_nav_pagination_tester.adoc → test_pages/nav_pagination_tester.adoc} +9 -22
- data/lib/starter_web/pages/public/test_pages/page_attribute_tester.adoc +196 -0
- data/lib/starter_web/pages/public/test_pages/responsive_images.adoc +213 -0
- data/lib/starter_web/pages/public/test_pages/responsive_tables.adoc +210 -0
- data/lib/starter_web/pages/public/test_pages/toccer_tester.adoc +2245 -0
- data/lib/starter_web/pages/public/{learn → test_pages}/vtutorials/000_includes/attributes.asciidoc +0 -0
- data/lib/starter_web/pages/public/{learn → test_pages}/vtutorials/000_includes/documents/100_gistblock.asciidoc +0 -0
- data/lib/starter_web/pages/public/{learn → test_pages}/vtutorials/000_includes/documents/410_bottom_info.asciidoc +0 -0
- data/lib/starter_web/pages/public/{learn → test_pages}/vtutorials/000_includes/documents/410_bottom_left_warning.asciidoc +0 -0
- data/lib/starter_web/pages/public/{learn → test_pages}/vtutorials/000_includes/documents/410_bottom_right_danger.asciidoc +0 -0
- data/lib/starter_web/pages/public/{learn → test_pages}/vtutorials/000_includes/documents/410_central_success.asciidoc +0 -0
- data/lib/starter_web/pages/public/{learn → test_pages}/vtutorials/000_includes/documents/410_full_height_left_info.asciidoc +0 -0
- data/lib/starter_web/pages/public/{learn → test_pages}/vtutorials/000_includes/documents/410_full_height_right_success.asciidoc +0 -0
- data/lib/starter_web/pages/public/{learn → test_pages}/vtutorials/000_includes/documents/410_table_3_column.asciidoc +1 -1
- data/lib/starter_web/pages/public/{learn → test_pages}/vtutorials/000_includes/documents/410_top_info.asciidoc +0 -0
- data/lib/starter_web/pages/public/{learn → test_pages}/vtutorials/000_includes/documents/410_top_left_info.asciidoc +0 -0
- data/lib/starter_web/pages/public/{learn → test_pages}/vtutorials/000_includes/documents/410_top_right_success.asciidoc +0 -0
- data/lib/starter_web/pages/public/{learn → test_pages}/vtutorials/000_includes/documents/419_advanced_modals_html.asciidoc +0 -0
- data/lib/starter_web/pages/public/{learn → test_pages}/vtutorials/000_test_youtube_video.adoc +0 -0
- data/lib/starter_web/pages/public/{learn → test_pages}/vtutorials/100_basic_video.adoc +0 -0
- data/lib/starter_web/utilsrv/_defaults/package.json +1 -1
- data/lib/starter_web/utilsrv/package.json +1 -1
- metadata +261 -146
- data/assets/data/jupyter/notebooks/_html/template.full.head.html +0 -75
- data/assets/data/jupyter/notebooks/_html/visualisation.html +0 -968
- data/assets/data/jupyter/notebooks/html/template.html +0 -50
- data/assets/data/jupyter/notebooks/html/visualisation.ok.html +0 -949
- data/assets/data/jupyter/notebooks/tutorial.ipynb +0 -169
- data/assets/data/jupyter/notebooks/visualisation.ipynb +0 -9413
- data/assets/data/search.json +0 -165
- data/assets/data/ssm.html +0 -242
- data/assets/themes/j1/adapter/js/back2top.js +0 -233
- data/assets/themes/j1/core/css/theme-extensions.min.css +0 -1
- data/assets/themes/j1/core/css/uno-dark.min.css +0 -6
- data/assets/themes/j1/modules/backstretch/js/backstretch.min.js.org +0 -1
- data/assets/themes/j1/modules/bootstrap/css/bootstrap.css +0 -10278
- data/assets/themes/j1/modules/bootstrap/css/bootstrap.css.map +0 -1
- data/assets/themes/j1/modules/bootstrap/css/bootstrap.min.css +0 -7
- data/assets/themes/j1/modules/bootstrap/css/bootstrap.min.css.map +0 -1
- data/assets/themes/j1/modules/bootstrap/js/bootstrap.js +0 -4420
- data/assets/themes/j1/modules/bootstrap/js/bootstrap.js.map +0 -1
- data/assets/themes/j1/modules/bootstrap/js/bootstrap.min.js +0 -7
- data/assets/themes/j1/modules/bootstrap/js/bootstrap.min.js.map +0 -1
- data/assets/themes/j1/modules/bsDatepicker/css/datepicker.css +0 -203
- data/assets/themes/j1/modules/bsDatepicker/css/theme/uno.css +0 -235
- data/assets/themes/j1/modules/bsDatepicker/js/datepicker.js +0 -509
- data/assets/themes/j1/modules/bsDatepicker/less/datepicker.less +0 -122
- data/assets/themes/j1/modules/bsThemeSwitcher/js/switcher.min.js +0 -20
- data/assets/themes/j1/modules/jekyllSearch/js/simple-jekyll-search.js +0 -468
- data/assets/themes/j1/modules/jekyllSearch/js/simple-jekyll-search.min.js +0 -6
- data/assets/themes/j1/modules/jqMouseWheel/README.md +0 -76
- data/assets/themes/j1/modules/jqMouseWheel/js/jquery.mousewheel.js +0 -221
- data/assets/themes/j1/modules/jqMouseWheel/js/jquery.mousewheel.min.js +0 -9
- data/assets/themes/j1/modules/noUISlider/LICENSE +0 -13
- data/assets/themes/j1/modules/noUISlider/css/nouislider.css +0 -260
- data/assets/themes/j1/modules/noUISlider/css/nouislider.min.css +0 -1
- data/assets/themes/j1/modules/noUISlider/js/nouislider.js +0 -2312
- data/assets/themes/j1/modules/noUISlider/js/nouislider.min.js +0 -3
- data/assets/themes/j1/modules/polyfills/js/msie.js +0 -140
- data/assets/themes/j1/modules/tocbot/css/theme/uno.css +0 -89
- data/assets/themes/j1/modules/tocbot/css/theme/uno.min.css +0 -89
- data/assets/themes/j1/modules/tocbot/css/tocbot.css +0 -75
- data/assets/themes/j1/modules/tocbot/css/tocbot.min.css +0 -19
- data/assets/themes/j1/modules/tocbot/js/tocbot.js +0 -19
- data/assets/themes/j1/modules/tocbot/js/tocbot.min.js +0 -19
- data/lib/starter_web/_data/modules/defaults/back2top.yml +0 -146
- data/lib/starter_web/_data/modules/defaults/cookie_consent.yml +0 -132
- data/lib/starter_web/_data/modules/defaults/stickybits.yml +0 -36
- data/lib/starter_web/_data/modules/ssm.yml +0 -142
- data/lib/starter_web/assets/images/modules/attics/welcome-1920x1280-bw.jpg +0 -0
- data/lib/starter_web/collections/posts/public/series/_posts/000_includes/attributes.asciidoc +0 -66
- data/lib/starter_web/pages/public/learn/kickstarter/web_in_a_day/000_includes/documents/100_meet_and_greet_jekyll.asciidoc +0 -31
- data/lib/starter_web/pages/public/learn/roundtrip/510_mdb_preview/000_includes/attributes.asciidoc +0 -69
- data/lib/starter_web/pages/public/learn/roundtrip/510_mdb_preview/000_includes/documents/100_buttons.asciidoc +0 -170
- data/lib/starter_web/pages/public/learn/roundtrip/510_mdb_preview/mdb_previewer.adoc +0 -52
- data/lib/starter_web/pages/public/learn/roundtrip/bs_tour.js +0 -98
@@ -100,17 +100,31 @@ tag::data[]
|
|
100
100
|
|
101
101
|
end::data[]
|
102
102
|
|
103
|
-
|
103
|
+
|
104
|
+
// Images - Images from local include/images folder
|
105
|
+
// -----------------------------------------------------------------------------
|
106
|
+
tag::images[]
|
107
|
+
end::images[]
|
108
|
+
|
109
|
+
// DOCUMENTS, local document resources
|
110
|
+
// -----------------------------------------------------------------------------
|
111
|
+
tag::documents[]
|
112
|
+
end::documents[]
|
113
|
+
|
114
|
+
|
115
|
+
// TABLES, local table resources
|
116
|
+
// -----------------------------------------------------------------------------
|
117
|
+
tag::tables[]
|
118
|
+
end::tables[]
|
119
|
+
|
120
|
+
|
121
|
+
// PRODUCTS, local product information (e.g. release)
|
104
122
|
// -----------------------------------------------------------------------------
|
105
|
-
tag::
|
106
|
-
|
107
|
-
:revdate: 2018
|
108
|
-
:revnumber: 1.0.0
|
109
|
-
end::product_info[]
|
123
|
+
tag::products[]
|
124
|
+
end::products[]
|
110
125
|
|
111
126
|
|
112
|
-
//
|
127
|
+
// AUTHORS, local author information (e.g. article)
|
113
128
|
// -----------------------------------------------------------------------------
|
114
129
|
tag::authors[]
|
115
|
-
:uri-author-juergen-adams https://jekyll.one
|
116
130
|
end::authors[]
|
@@ -0,0 +1,19 @@
|
|
1
|
+
Copyright (C) [year] [full name]
|
2
|
+
|
3
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
4
|
+
of this software and associated documentation files (the "Software"), to deal
|
5
|
+
in the Software without restriction, including without limitation the rights
|
6
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
7
|
+
copies of the Software, and to permit persons to whom the Software is
|
8
|
+
furnished to do so, subject to the following conditions:
|
9
|
+
|
10
|
+
The above copyright notice and this permission notice shall be included in
|
11
|
+
all copies or substantial portions of the Software.
|
12
|
+
|
13
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
14
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
15
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
16
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
17
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
18
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
|
19
|
+
THE SOFTWARE.
|
File without changes
|
@@ -1,6 +1,6 @@
|
|
1
1
|
|
2
2
|
.Bootstrap (BS) grid sizes
|
3
|
-
[cols="2,1,9a", options="header", role="
|
3
|
+
[cols="2,1,9a", options="header", role="rtable mb-5"]
|
4
4
|
|===============================================================================
|
5
5
|
|Class |Result |Code
|
6
6
|
|
@@ -1,6 +1,6 @@
|
|
1
1
|
|
2
2
|
.Black and White color palette
|
3
|
-
[cols="2,1,9a", options="header", role="
|
3
|
+
[cols="2,1,9a", options="header", role="rtable mb-5"]
|
4
4
|
|===============================================================================
|
5
5
|
|Class |Result |Code
|
6
6
|
|
@@ -1,6 +1,6 @@
|
|
1
1
|
|
2
2
|
.Bootstrap (BS) color palette
|
3
|
-
[cols="2,1,9a", options="header", role="
|
3
|
+
[cols="2,1,9a", options="header", role="rtable mb-5"]
|
4
4
|
|===============================================================================
|
5
5
|
|Class |Result |Code
|
6
6
|
|
@@ -1,6 +1,6 @@
|
|
1
1
|
|
2
2
|
.Material Design (MD) color palette
|
3
|
-
[cols="2,1,9a", options="header", role="
|
3
|
+
[cols="2,1,9a", options="header", role="rtable mb-5"]
|
4
4
|
|===============================================================================
|
5
5
|
|Class |Result |Code
|
6
6
|
|
@@ -1,6 +1,6 @@
|
|
1
1
|
|
2
2
|
.Bootstrap (BS) grid sizes
|
3
|
-
[cols="2,1,9a", options="header", role="
|
3
|
+
[cols="2,1,9a", options="header", role="rtable mb-5"]
|
4
4
|
|===============================================================================
|
5
5
|
|Class |Result |Code
|
6
6
|
|
@@ -1,18 +1,13 @@
|
|
1
1
|
---
|
2
2
|
title: Theme previewer
|
3
3
|
tagline: common components
|
4
|
-
|
4
|
+
date: 2020-11-08 12:00:00
|
5
|
+
description: >
|
6
|
+
Themes Previewer for common components of a selected theme.
|
7
|
+
Find base Bootstrap features and styles for the current
|
8
|
+
theme selected.
|
5
9
|
|
6
10
|
tags: [ App, Previewer ]
|
7
|
-
index: [
|
8
|
-
Bootstrap, Theme, Preview, Common,
|
9
|
-
Component, Navbars, Buttons, Typography,
|
10
|
-
Tables, Forms, Navs, Pills, Breadcrumbs,
|
11
|
-
Pagination, Indicators, Alerts, Badges,
|
12
|
-
Progress, Container, Jumbotron, List,
|
13
|
-
Groups, Cards, Dialogs, Modals,
|
14
|
-
Popovers, Tooltips
|
15
|
-
]
|
16
11
|
categories: [ pages ]
|
17
12
|
|
18
13
|
flowtext: false
|
@@ -20,7 +15,7 @@ flowtext: false
|
|
20
15
|
permalink: /pages/public/previewer/theme/
|
21
16
|
regenerate: false
|
22
17
|
|
23
|
-
resources: [ rouge ]
|
18
|
+
resources: [ rouge, fam ]
|
24
19
|
resource_options:
|
25
20
|
- attic:
|
26
21
|
padding_top: 400
|
@@ -35,34 +30,30 @@ resource_options:
|
|
35
30
|
href: https://unsplash.com/@clemono
|
36
31
|
---
|
37
32
|
|
33
|
+
// Page Initializer
|
34
|
+
// =============================================================================
|
38
35
|
// Enable the Liquid Preprocessor
|
39
|
-
//
|
40
36
|
:page-liquid:
|
41
37
|
|
42
|
-
// Set
|
43
|
-
//
|
38
|
+
// Set page (local) attributes here
|
39
|
+
// -----------------------------------------------------------------------------
|
40
|
+
//:my-asciidoc-attribute:
|
41
|
+
// :scrollbars:
|
44
42
|
|
43
|
+
// Load Liquid procedures
|
44
|
+
// -----------------------------------------------------------------------------
|
45
|
+
{% capture load_attributes %}themes/{{site.template.name}}/procedures/global/attributes_loader.proc{%endcapture%}
|
45
46
|
|
46
|
-
|
47
|
-
|
48
|
-
{%
|
47
|
+
// Load page attributes
|
48
|
+
// -----------------------------------------------------------------------------
|
49
|
+
{% include {{load_attributes}} scope="all" %}
|
49
50
|
|
50
51
|
|
51
|
-
//
|
52
|
-
//
|
53
|
-
{% include {{set_env_entry_document}} init_folders=all %}
|
54
|
-
|
55
|
-
// Load tags and urls
|
56
|
-
//
|
57
|
-
include::{includedir}/attributes.asciidoc[tag=tags]
|
58
|
-
include::{includedir}/attributes.asciidoc[tag=urls]
|
59
|
-
|
60
|
-
// Additional ASCIIDOC attributes goes here
|
61
|
-
//
|
62
|
-
|
52
|
+
// Page content
|
53
|
+
// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
|
63
54
|
++++
|
64
55
|
<!-- Prepend H1 tag here -->
|
65
|
-
<div id="h1_theme_name" class="row mb-3">
|
56
|
+
<div id="h1_theme_name" class="row ml-0 mb-3">
|
66
57
|
|
67
58
|
<!-- Load the previously selected theme from the (user state) cookie -->
|
68
59
|
<script>
|
@@ -98,9 +89,11 @@ include::{includedir}/attributes.asciidoc[tag=urls]
|
|
98
89
|
</div>
|
99
90
|
++++
|
100
91
|
|
92
|
+
== Bootstrap Material Design
|
93
|
+
|
101
94
|
lorem:sentences[5]
|
102
95
|
|
103
|
-
|
96
|
+
=== MD Color Palette
|
104
97
|
|
105
98
|
The MD color palette comprises primary and accent colors that can be used for
|
106
99
|
illustration or to develop your brand colors. They’ve been designed to work
|
@@ -547,15 +540,14 @@ other colors as accents colors.
|
|
547
540
|
</div>
|
548
541
|
++++
|
549
542
|
|
550
|
-
|
551
543
|
== Navbars
|
552
544
|
|
553
545
|
See examples for Bootstrap’s powerful, responsive navigation header, the
|
554
546
|
navbar. Includes support for branding, navigation, and more, including
|
555
547
|
support for the collapse plugin.
|
556
548
|
|
557
|
-
pass:[<i class="mdi mdi-book-open mdi-24px mdi-md-
|
558
|
-
|
549
|
+
pass:[<i class="mdi mdi-book-open-variant mdi-24px mdi-md-grey"></i>]
|
550
|
+
link:{bs_doc_components_navbar}[Bootstrap Docs {middot} Navbar, {browser-window--new}]
|
559
551
|
|
560
552
|
Theming the navbar has never been easier thanks to the combination of
|
561
553
|
theming classes and background-color utilities. Choose from `.navbar-light`
|
@@ -563,8 +555,8 @@ for use with light background colors, or '.navbar-dark' for dark background
|
|
563
555
|
colors. Then, customize with `.bg-*` utilities.
|
564
556
|
|
565
557
|
++++
|
566
|
-
<div class="doc-example">
|
567
|
-
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
|
558
|
+
<div class="doc-example mb-3">
|
559
|
+
<nav class="navbar navbar-expand-lg navbar-dark bg-dark mb-1">
|
568
560
|
<a class="navbar-brand" href="#">Navbar<div class="ripple-container"></div></a>
|
569
561
|
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor01" aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation">
|
570
562
|
<span class="navbar-toggler-icon"></span>
|
@@ -592,7 +584,7 @@ colors. Then, customize with `.bg-*` utilities.
|
|
592
584
|
</div>
|
593
585
|
</nav>
|
594
586
|
|
595
|
-
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
|
587
|
+
<nav class="navbar navbar-expand-lg navbar-dark bg-primary mb-1">
|
596
588
|
<a class="navbar-brand" href="#">Navbar</a>
|
597
589
|
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor02" aria-controls="navbarColor02" aria-expanded="false" aria-label="Toggle navigation">
|
598
590
|
<span class="navbar-toggler-icon"></span>
|
@@ -673,8 +665,8 @@ more with support for multiple sizes, states, and more. Bootstrap includes
|
|
673
665
|
several predefined button styles, each serving its own semantic purpose,
|
674
666
|
with a few extras thrown in for more control.
|
675
667
|
|
676
|
-
pass:[<i class="mdi mdi-book-open mdi-24px mdi-md-
|
677
|
-
|
668
|
+
pass:[<i class="mdi mdi-book-open-variant mdi-24px mdi-md-grey"></i>]
|
669
|
+
link:{bs_doc_components_buttons}[Bootstrap Docs {middot} Buttons, {browser-window--new}]
|
678
670
|
|
679
671
|
=== Active buttons
|
680
672
|
|
@@ -683,7 +675,7 @@ inset shadow) when active.
|
|
683
675
|
++++
|
684
676
|
<div class="doc-example mb-3">
|
685
677
|
<button type="button" class="btn btn-primary btn-raised">Primary</button>
|
686
|
-
<button type="button" class="btn btn-
|
678
|
+
<button type="button" class="btn btn-primary btn-raised">Secondary</button>
|
687
679
|
<button type="button" class="btn btn-success btn-raised">Success</button>
|
688
680
|
<button type="button" class="btn btn-info btn-raised">Info</button>
|
689
681
|
<button type="button" class="btn btn-warning btn-raised">Warning</button>
|
@@ -695,7 +687,7 @@ inset shadow) when active.
|
|
695
687
|
[source, html, role="noclip"]
|
696
688
|
----
|
697
689
|
<button type="button" class="btn btn-primary btn-raised">Primary</button>
|
698
|
-
<button type="button" class="btn btn-
|
690
|
+
<button type="button" class="btn btn-primary btn-raised">Secondary</button>
|
699
691
|
<button type="button" class="btn btn-success btn-raised">Success</button>
|
700
692
|
<button type="button" class="btn btn-info btn-raised">Info</button>
|
701
693
|
<button type="button" class="btn btn-warning btn-raised">Warning</button>
|
@@ -711,7 +703,7 @@ Buttons look inactive by adding the disabled boolean attribute to any
|
|
711
703
|
++++
|
712
704
|
<div class="doc-example mb-3">
|
713
705
|
<button type="button" class="btn btn-primary btn-raised disabled">Primary</button>
|
714
|
-
<button type="button" class="btn btn-
|
706
|
+
<button type="button" class="btn btn-primary btn-raised disabled">Secondary</button>
|
715
707
|
<button type="button" class="btn btn-success btn-raised disabled">Success</button>
|
716
708
|
<button type="button" class="btn btn-info btn-raised disabled">Info</button>
|
717
709
|
<button type="button" class="btn btn-warning btn-raised disabled">Warning</button>
|
@@ -723,7 +715,7 @@ Buttons look inactive by adding the disabled boolean attribute to any
|
|
723
715
|
[source, html, role="noclip"]
|
724
716
|
----
|
725
717
|
<button type="button" class="btn btn-primary btn-raised disabled">Primary</button>
|
726
|
-
<button type="button" class="btn btn-
|
718
|
+
<button type="button" class="btn btn-primary btn-raised disabled">Secondary</button>
|
727
719
|
<button type="button" class="btn btn-success btn-raised disabled">Success</button>
|
728
720
|
<button type="button" class="btn btn-info btn-raised disabled">Info</button>
|
729
721
|
<button type="button" class="btn btn-warning btn-raised disabled">Warning</button>
|
@@ -758,24 +750,54 @@ background images and colors on any button.
|
|
758
750
|
<button type="button" class="btn btn-outline-danger btn-raised">Danger</button>
|
759
751
|
----
|
760
752
|
|
753
|
+
=== Flat buttons
|
754
|
+
|
755
|
+
Flat buttons are text-only buttons. They may be used in dialogs, toolbars,
|
756
|
+
or inline. They do not lift, but fill with color on press.
|
757
|
+
|
758
|
+
++++
|
759
|
+
<div class="doc-example">
|
760
|
+
<button type="button" class="btn btn-primary">Primary</button>
|
761
|
+
<button type="button" class="btn btn-secondary">Secondary</button>
|
762
|
+
<button type="button" class="btn btn-success">Success</button>
|
763
|
+
<button type="button" class="btn btn-info">Info</button>
|
764
|
+
<button type="button" class="btn btn-warning">Warning</button>
|
765
|
+
<button type="button" class="btn btn-danger">Danger</button>
|
766
|
+
<button type="button" class="btn btn-link">Link</button>
|
767
|
+
</div>
|
768
|
+
++++
|
769
|
+
|
770
|
+
[source, html, role="noclip"]
|
771
|
+
----
|
772
|
+
<button type="button" class="btn btn-primary">Primary</button>
|
773
|
+
<button type="button" class="btn btn-secondary">Secondary</button>
|
774
|
+
<button type="button" class="btn btn-success">Success</button>
|
775
|
+
<button type="button" class="btn btn-info">Info</button>
|
776
|
+
<button type="button" class="btn btn-warning">Warning</button>
|
777
|
+
<button type="button" class="btn btn-danger">Danger</button>
|
778
|
+
<button type="button" class="btn btn-link">Link</button>
|
779
|
+
----
|
780
|
+
|
781
|
+
|
761
782
|
=== Button sizes
|
762
783
|
|
763
784
|
Beside the default size, small and large buttons are available.
|
764
785
|
|
765
786
|
++++
|
766
787
|
<div class="doc-example mb-3">
|
767
|
-
<button type="button" class="btn btn-
|
768
|
-
<button type="button" class="btn btn-
|
769
|
-
<button type="button" class="btn btn-
|
788
|
+
<button type="button" class="btn btn-primary btn-raised btn-lg">Large button</button>
|
789
|
+
<button type="button" class="btn btn-primary btn-raised">Default button</button>
|
790
|
+
<button type="button" class="btn btn-primary btn-raised btn-sm">Small button</button>
|
770
791
|
</div>
|
771
792
|
++++
|
772
793
|
|
773
794
|
[source, html, role="noclip"]
|
774
795
|
----
|
775
|
-
<button type="button" class="btn btn-
|
776
|
-
<button type="button" class="btn btn-
|
777
|
-
<button type="button" class="btn btn-
|
796
|
+
<button type="button" class="btn btn-primary btn-raised btn-lg">Large button</button>
|
797
|
+
<button type="button" class="btn btn-primary btn-raised">Default button</button>
|
798
|
+
<button type="button" class="btn btn-primary btn-raised btn-sm">Small button</button>
|
778
799
|
----
|
800
|
+
|
779
801
|
=== Block level button
|
780
802
|
|
781
803
|
Create block level buttons—those that span the full width of a parent—by
|
@@ -818,22 +840,22 @@ adding .btn-block.
|
|
818
840
|
</button>
|
819
841
|
----
|
820
842
|
|
821
|
-
===
|
843
|
+
=== Checkboxes and Radio buttons
|
822
844
|
|
823
845
|
Bootstrap’s .button styles can be applied to other elements, such as
|
824
846
|
`<label>`, to provide checkbox or radio style button toggling. The checked
|
825
847
|
state for these buttons is only updated via click event on the button.
|
826
848
|
|
827
849
|
++++
|
828
|
-
<div class="doc-example mb-
|
850
|
+
<div class="doc-example mb-3">
|
829
851
|
<div class="btn-group btn-group-toggle" data-toggle="buttons">
|
830
|
-
<label class="btn btn-
|
852
|
+
<label class="btn btn-primary btn-raised btn-flex active">
|
831
853
|
<input type="radio" name="options" id="option1" autocomplete="off" checked> Active
|
832
854
|
</label>
|
833
|
-
<label class="btn btn-
|
855
|
+
<label class="btn btn-primary btn-raised btn-flex">
|
834
856
|
<input type="radio" name="options" id="option2" autocomplete="off"> Radio
|
835
857
|
</label>
|
836
|
-
<label class="btn btn-
|
858
|
+
<label class="btn btn-primary btn-raised btn-flex">
|
837
859
|
<input type="radio" name="options" id="option3" autocomplete="off"> Radio
|
838
860
|
</label>
|
839
861
|
</div>
|
@@ -843,18 +865,108 @@ state for these buttons is only updated via click event on the button.
|
|
843
865
|
[source, html, role="noclip"]
|
844
866
|
----
|
845
867
|
<div class="btn-group btn-group-toggle" data-toggle="buttons">
|
846
|
-
<label class="btn btn-
|
868
|
+
<label class="btn btn-primary btn-raised btn-flex active">
|
847
869
|
<input type="radio" name="options" id="option1" autocomplete="off" checked> Active
|
848
870
|
</label>
|
849
|
-
<label class="btn btn-
|
871
|
+
<label class="btn btn-primary btn-raised btn-flex">
|
850
872
|
<input type="radio" name="options" id="option2" autocomplete="off"> Radio
|
851
873
|
</label>
|
852
|
-
<label class="btn btn-
|
874
|
+
<label class="btn btn-primary btn-raised btn-flex">
|
853
875
|
<input type="radio" name="options" id="option3" autocomplete="off"> Radio
|
854
876
|
</label>
|
855
877
|
</div>
|
856
878
|
----
|
857
879
|
|
880
|
+
=== Floating action buttons
|
881
|
+
|
882
|
+
A floating action button represents the primary action in an application,
|
883
|
+
it is used for a promoted action.
|
884
|
+
|
885
|
+
pass:[<i class="mdi mdi-book-open-variant mdi-24px mdi-md-grey"></i>]
|
886
|
+
https://material.io/components/buttons-floating-action-button#types-of-transitions[Google Material Design {char-middot} Floating action buttons, {browser-window--new}]
|
887
|
+
|
888
|
+
++++
|
889
|
+
<div class="doc-example">
|
890
|
+
<button type="button" class="btn bmd-btn-fab btn-primary" aria-label="fab-button">
|
891
|
+
<i class="mdi mdi-plus mdi-2x"></i>
|
892
|
+
</button>
|
893
|
+
</div>
|
894
|
+
++++
|
895
|
+
|
896
|
+
[source, html, role="noclip"]
|
897
|
+
----
|
898
|
+
<button type="button" class="btn bmd-btn-fab" aria-label="fab-button">
|
899
|
+
<i class="mdi mdi-plus mdi-2x"></i>
|
900
|
+
</button>
|
901
|
+
----
|
902
|
+
|
903
|
+
==== Colors
|
904
|
+
|
905
|
+
++++
|
906
|
+
<div class="doc-example">
|
907
|
+
<button type="button" class="btn bmd-btn-fab btn-primary" aria-label="fab-button-primary">
|
908
|
+
<i class="mdi mdi-plus mdi-2x"></i>
|
909
|
+
</button>
|
910
|
+
<button type="button" class="btn bmd-btn-fab btn-secondary" aria-label="fab-button-secondary">
|
911
|
+
<i class="mdi mdi-plus mdi-2x"></i>
|
912
|
+
</button>
|
913
|
+
<button type="button" class="btn bmd-btn-fab btn-danger" aria-label="fab-button-danger">
|
914
|
+
<i class="mdi mdi-plus mdi-2x"></i>
|
915
|
+
</button>
|
916
|
+
<button type="button" class="btn bmd-btn-fab btn-info" aria-label="fab-button-info">
|
917
|
+
<i class="mdi mdi-plus mdi-2x"></i>
|
918
|
+
</button>
|
919
|
+
<button type="button" class="btn bmd-btn-fab btn-success" aria-label="fab-button-success">
|
920
|
+
<i class="mdi mdi-plus mdi-2x"></i>
|
921
|
+
</button>
|
922
|
+
<button type="button" class="btn bmd-btn-fab btn-warning" aria-label="fab-button-warning">
|
923
|
+
<i class="mdi mdi-plus mdi-2x"></i>
|
924
|
+
</button>
|
925
|
+
<button type="button" class="btn bmd-btn-fab btn-dark" aria-label="fab-button-dark">
|
926
|
+
<i class="mdi mdi-plus mdi-2x"></i>
|
927
|
+
</button>
|
928
|
+
<button type="button" class="btn bmd-btn-fab btn-light" aria-label="fab-button-light">
|
929
|
+
<i class="mdi mdi-plus mdi-2x"></i>
|
930
|
+
</button>
|
931
|
+
</div>
|
932
|
+
++++
|
933
|
+
|
934
|
+
[source, html, role="noclip"]
|
935
|
+
----
|
936
|
+
<button type="button" class="btn bmd-btn-fab btn-primary" aria-label="fab-button-primary">
|
937
|
+
<i class="mdi mdi-plus mdi-2x"></i>
|
938
|
+
</button>
|
939
|
+
<button type="button" class="btn bmd-btn-fab btn-secondary" aria-label="fab-button-secondary">
|
940
|
+
<i class="mdi mdi-plus mdi-2x"></i>
|
941
|
+
</button>
|
942
|
+
...
|
943
|
+
<button type="button" class="btn bmd-btn-fab btn-dark" aria-label="fab-button-dark">
|
944
|
+
<i class="mdi mdi-plus mdi-2x"></i>
|
945
|
+
</button>
|
946
|
+
<button type="button" class="btn bmd-btn-fab btn-light" aria-label="fab-button-light">
|
947
|
+
<i class="mdi mdi-plus mdi-2x"></i>
|
948
|
+
</button>
|
949
|
+
----
|
950
|
+
|
951
|
+
==== Sizes
|
952
|
+
|
953
|
+
A smaller sized, i.e. mini floating action button, is also available.
|
954
|
+
|
955
|
+
++++
|
956
|
+
<div class="doc-example">
|
957
|
+
<button type="button" class="btn btn-danger bmd-btn-fab bmd-btn-fab-sm" aria-label="fab-button-small">
|
958
|
+
<i class="mdi mdi-plus mdi-sm"></i>
|
959
|
+
</button>
|
960
|
+
</div>
|
961
|
+
++++
|
962
|
+
|
963
|
+
[source, html, role="noclip"]
|
964
|
+
----
|
965
|
+
<button type="button" class="btn btn-danger bmd-btn-fab bmd-btn-fab-sm" aria-label="fab-button-small">
|
966
|
+
<i class="mdi mdi-plus mdi-sm"></i>
|
967
|
+
</button>
|
968
|
+
----
|
969
|
+
|
858
970
|
== Typography
|
859
971
|
|
860
972
|
Bootstrap sets basic global display, typography, and link styles. When more
|
@@ -864,49 +976,43 @@ For a more inclusive and accessible type scale, it is assuemed that
|
|
864
976
|
the browser default root font-size (typically 16px) so visitors can
|
865
977
|
customize their browser defaults as needed.
|
866
978
|
|
867
|
-
pass:[<i class="mdi mdi-book-open mdi-24px mdi-md-
|
868
|
-
|
979
|
+
pass:[<i class="mdi mdi-book-open-variant mdi-24px mdi-md-grey"></i>]
|
980
|
+
link:{bs_doc_content_typography}[Bootstrap Docs {middot} Typography, {browser-window--new}]
|
869
981
|
|
870
982
|
=== Headings
|
871
983
|
|
872
984
|
++++
|
873
985
|
<div class="doc-example mb-3">
|
874
986
|
<div class="row mb-5">
|
875
|
-
|
876
|
-
<
|
877
|
-
|
878
|
-
|
879
|
-
|
880
|
-
|
881
|
-
|
882
|
-
|
883
|
-
|
884
|
-
|
885
|
-
|
886
|
-
|
887
|
-
<p class="lead">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
|
888
|
-
</div>
|
987
|
+
<div class="col-md-4">
|
988
|
+
<h1 class="notoc">Heading 1</h1>
|
989
|
+
<h2 class="notoc">Heading 2</h2>
|
990
|
+
<h3 class="notoc">Heading 3</h3>
|
991
|
+
<h4 class="notoc">Heading 4</h4>
|
992
|
+
<h5 class="notoc">Heading 5</h5>
|
993
|
+
<h6 class="notoc">Heading 6</h6>
|
994
|
+
<h3 class="notoc">
|
995
|
+
Heading 3
|
996
|
+
<small class="text-muted">with muted text</small>
|
997
|
+
</h3>
|
998
|
+
<p class="lead">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
|
889
999
|
</div>
|
890
1000
|
<div class="col-md-4">
|
891
|
-
<
|
892
|
-
|
893
|
-
|
894
|
-
|
895
|
-
|
896
|
-
|
897
|
-
<p>An abbreviation of the word attribute is <abbr title="attribute">attr</abbr>.</p>
|
898
|
-
</div>
|
1001
|
+
<h3 class="notoc">Example body text</h2>
|
1002
|
+
<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>
|
1003
|
+
<p><small>This line of text is meant to be treated as fine print.</small></p>
|
1004
|
+
<p>The following is <strong>rendered as bold text</strong>.</p>
|
1005
|
+
<p>The following is <em>rendered as italicized text</em>.</p>
|
1006
|
+
<p>An abbreviation of the word attribute is <abbr title="attribute">attr</abbr>.</p>
|
899
1007
|
</div>
|
900
1008
|
<div class="col-md-4">
|
901
|
-
<
|
902
|
-
|
903
|
-
|
904
|
-
|
905
|
-
|
906
|
-
|
907
|
-
|
908
|
-
<p class="text-info">Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
|
909
|
-
</div>
|
1009
|
+
<h3 class="notoc">Emphasis classes</h2>
|
1010
|
+
<p class="text-muted">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p>
|
1011
|
+
<p class="text-primary">Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
|
1012
|
+
<p class="text-warning">Etiam porta sem malesuada magna mollis euismod.</p>
|
1013
|
+
<p class="text-danger">Donec ullamcorper nulla non metus auctor fringilla.</p>
|
1014
|
+
<p class="text-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
|
1015
|
+
<p class="text-info">Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
|
910
1016
|
</div>
|
911
1017
|
</div>
|
912
1018
|
</div>
|
@@ -918,20 +1024,16 @@ Refer to: link:{bs_doc_content_typography}[Bootstrap Docs, window="_blank"].
|
|
918
1024
|
<div class="doc-example mb-3">
|
919
1025
|
<div class="row">
|
920
1026
|
<div class="col-md-6">
|
921
|
-
<
|
922
|
-
<
|
923
|
-
|
924
|
-
|
925
|
-
</blockquote>
|
926
|
-
</div>
|
1027
|
+
<blockquote class="blockquote">
|
1028
|
+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
1029
|
+
<footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
|
1030
|
+
</blockquote>
|
927
1031
|
</div>
|
928
1032
|
<div class="col-md-6">
|
929
|
-
<
|
930
|
-
<
|
931
|
-
|
932
|
-
|
933
|
-
</blockquote>
|
934
|
-
</div>
|
1033
|
+
<blockquote class="blockquote blockquote-reverse">
|
1034
|
+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
1035
|
+
<footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
|
1036
|
+
</blockquote>
|
935
1037
|
</div>
|
936
1038
|
</div>
|
937
1039
|
</div>
|
@@ -948,68 +1050,66 @@ Using the most basic table markup, here’s how .table-based tables look in
|
|
948
1050
|
Bootstrap. All table styles are inherited in Bootstrap 4, meaning any nested
|
949
1051
|
tables will be styled in the same manner as the parent.
|
950
1052
|
|
951
|
-
pass:[<i class="mdi mdi-book-open mdi-24px mdi-md-
|
952
|
-
|
1053
|
+
pass:[<i class="mdi mdi-book-open-variant mdi-24px mdi-md-grey"></i>]
|
1054
|
+
link:{bs_doc_content_tables}[Bootstrap Docs {middot} Tables, {browser-window--new}]
|
953
1055
|
|
954
1056
|
|
955
1057
|
++++
|
956
1058
|
<div class="doc-example mb-3">
|
957
|
-
<
|
958
|
-
<
|
959
|
-
<
|
960
|
-
<
|
961
|
-
|
962
|
-
|
963
|
-
|
964
|
-
|
965
|
-
|
966
|
-
|
967
|
-
<
|
968
|
-
<
|
969
|
-
|
970
|
-
|
971
|
-
|
972
|
-
|
973
|
-
|
974
|
-
<
|
975
|
-
|
976
|
-
|
977
|
-
|
978
|
-
|
979
|
-
|
980
|
-
<
|
981
|
-
|
982
|
-
|
983
|
-
|
984
|
-
|
985
|
-
|
986
|
-
<
|
987
|
-
|
988
|
-
|
989
|
-
|
990
|
-
|
991
|
-
|
992
|
-
<
|
993
|
-
|
994
|
-
|
995
|
-
|
996
|
-
|
997
|
-
|
998
|
-
<
|
999
|
-
|
1000
|
-
|
1001
|
-
|
1002
|
-
|
1003
|
-
|
1004
|
-
<
|
1005
|
-
|
1006
|
-
|
1007
|
-
|
1008
|
-
|
1009
|
-
|
1010
|
-
|
1011
|
-
</table>
|
1012
|
-
</div>
|
1059
|
+
<table class="table table-striped table-hover table-bordered">
|
1060
|
+
<thead>
|
1061
|
+
<tr>
|
1062
|
+
<th>#</th>
|
1063
|
+
<th>Column heading</th>
|
1064
|
+
<th>Column heading</th>
|
1065
|
+
<th>Column heading</th>
|
1066
|
+
</tr>
|
1067
|
+
</thead>
|
1068
|
+
<tbody>
|
1069
|
+
<tr>
|
1070
|
+
<td>1</td>
|
1071
|
+
<td>Column content</td>
|
1072
|
+
<td>Column content</td>
|
1073
|
+
<td>Column content</td>
|
1074
|
+
</tr>
|
1075
|
+
<tr>
|
1076
|
+
<td>2</td>
|
1077
|
+
<td>Column content</td>
|
1078
|
+
<td>Column content</td>
|
1079
|
+
<td>Column content</td>
|
1080
|
+
</tr>
|
1081
|
+
<tr class="table-info">
|
1082
|
+
<td>3</td>
|
1083
|
+
<td>Column content</td>
|
1084
|
+
<td>Column content</td>
|
1085
|
+
<td>Column content</td>
|
1086
|
+
</tr>
|
1087
|
+
<tr class="table-success">
|
1088
|
+
<td>4</td>
|
1089
|
+
<td>Column content</td>
|
1090
|
+
<td>Column content</td>
|
1091
|
+
<td>Column content</td>
|
1092
|
+
</tr>
|
1093
|
+
<tr class="table-danger">
|
1094
|
+
<td>5</td>
|
1095
|
+
<td>Column content</td>
|
1096
|
+
<td>Column content</td>
|
1097
|
+
<td>Column content</td>
|
1098
|
+
</tr>
|
1099
|
+
<tr class="table-warning">
|
1100
|
+
<td>6</td>
|
1101
|
+
<td>Column content</td>
|
1102
|
+
<td>Column content</td>
|
1103
|
+
<td>Column content</td>
|
1104
|
+
</tr>
|
1105
|
+
<tr class="table-active">
|
1106
|
+
<td>7</td>
|
1107
|
+
<td>Column content</td>
|
1108
|
+
<td>Column content</td>
|
1109
|
+
<td>Column content</td>
|
1110
|
+
</tr>
|
1111
|
+
</tbody>
|
1112
|
+
</table>
|
1013
1113
|
</div>
|
1014
1114
|
++++
|
1015
1115
|
|
@@ -1026,8 +1126,8 @@ of newer input controls like email verification, number selection, and more.
|
|
1026
1126
|
Here’s a quick example to demonstrate Bootstrap’s form styles. Keep reading
|
1027
1127
|
for documentation on required classes, form layout, and more.
|
1028
1128
|
|
1029
|
-
pass:[<i class="mdi mdi-book-open mdi-24px mdi-md-
|
1030
|
-
|
1129
|
+
pass:[<i class="mdi mdi-book-open-variant mdi-24px mdi-md-grey"></i>]
|
1130
|
+
link:{bs_doc_components_forms}[Bootstrap Docs {middot} Forms, {browser-window--new}]
|
1031
1131
|
|
1032
1132
|
++++
|
1033
1133
|
<div class="doc-example mb-3">
|
@@ -1047,7 +1147,7 @@ Refer to: link:{bs_doc_components_forms}[Bootstrap Docs, window="_blank"].
|
|
1047
1147
|
<input type="checkbox" class="form-check-input" id="exampleCheck1">
|
1048
1148
|
<label class="form-check-label" for="exampleCheck1">Check me out</label>
|
1049
1149
|
</div>
|
1050
|
-
<button type="submit" class="btn btn-
|
1150
|
+
<button type="submit" class="btn btn-primary btn-raised">Submit</button>
|
1051
1151
|
</form>
|
1052
1152
|
</div>
|
1053
1153
|
++++
|
@@ -1113,8 +1213,8 @@ for building all types of navigation components. It includes some style
|
|
1113
1213
|
overrides (for working with lists), some link padding for larger hit areas,
|
1114
1214
|
and basic disabled styling.
|
1115
1215
|
|
1116
|
-
pass:[<i class="mdi mdi-book-open mdi-24px mdi-md-
|
1117
|
-
|
1216
|
+
pass:[<i class="mdi mdi-book-open-variant mdi-24px mdi-md-grey"></i>]
|
1217
|
+
link:{bs_doc_components_navs}[Bootstrap Docs {middot} Navs, {browser-window--new}]
|
1118
1218
|
|
1119
1219
|
=== Tabs
|
1120
1220
|
|
@@ -1124,46 +1224,44 @@ JavaScript plugin.
|
|
1124
1224
|
|
1125
1225
|
++++
|
1126
1226
|
<div class="doc-example mb-3">
|
1127
|
-
<
|
1128
|
-
<
|
1129
|
-
<
|
1130
|
-
|
1131
|
-
|
1132
|
-
<
|
1133
|
-
|
1134
|
-
|
1135
|
-
<
|
1136
|
-
|
1137
|
-
|
1138
|
-
|
1139
|
-
|
1140
|
-
|
1141
|
-
|
1142
|
-
<
|
1143
|
-
|
1144
|
-
|
1145
|
-
|
1146
|
-
|
1147
|
-
<a class="dropdown-item" href="javascript:(void)">Separated link</a>
|
1148
|
-
</div>
|
1149
|
-
</li>
|
1150
|
-
<li class="nav-item">
|
1151
|
-
<a class="nav-link disabled" href="javascript:(void)">Disabled</a>
|
1152
|
-
</li>
|
1153
|
-
</ul>
|
1154
|
-
<div id="myTabContent" class="tab-content">
|
1155
|
-
<div class="tab-pane fade active in" id="home">
|
1156
|
-
<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>
|
1157
|
-
</div>
|
1158
|
-
<div class="tab-pane fade" id="profile">
|
1159
|
-
<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>
|
1160
|
-
</div>
|
1161
|
-
<div class="tab-pane fade" id="dropdown1">
|
1162
|
-
<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>
|
1163
|
-
</div>
|
1164
|
-
<div class="tab-pane fade" id="dropdown2">
|
1165
|
-
<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>
|
1227
|
+
<ul class="nav nav-tabs">
|
1228
|
+
<li class="nav-item">
|
1229
|
+
<a class="nav-link active" data-toggle="tab" href="#home">Home</a>
|
1230
|
+
</li>
|
1231
|
+
<li class="nav-item">
|
1232
|
+
<a class="nav-link" data-toggle="tab" href="#profile">Profile</a>
|
1233
|
+
</li>
|
1234
|
+
<li class="nav-item dropdown">
|
1235
|
+
<a class="nav-link dropdown-toggle" data-toggle="dropdown"
|
1236
|
+
href="javascript:(void)"
|
1237
|
+
role="button"
|
1238
|
+
aria-haspopup="true" aria-expanded="false">
|
1239
|
+
Dropdown
|
1240
|
+
</a>
|
1241
|
+
<div class="dropdown-menu">
|
1242
|
+
<a class="dropdown-item" href="javascript:(void)">Action</a>
|
1243
|
+
<a class="dropdown-item" href="javascript:(void)">Another action</a>
|
1244
|
+
<a class="dropdown-item" href="javascript:(void)">Something else here</a>
|
1245
|
+
<div class="dropdown-divider"></div>
|
1246
|
+
<a class="dropdown-item" href="javascript:(void)">Separated link</a>
|
1166
1247
|
</div>
|
1248
|
+
</li>
|
1249
|
+
<li class="nav-item">
|
1250
|
+
<a class="nav-link disabled" href="javascript:(void)">Disabled</a>
|
1251
|
+
</li>
|
1252
|
+
</ul>
|
1253
|
+
<div id="myTabContent" class="tab-content">
|
1254
|
+
<div class="tab-pane fade active show" id="home">
|
1255
|
+
<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>
|
1256
|
+
</div>
|
1257
|
+
<div class="tab-pane fade" id="profile">
|
1258
|
+
<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>
|
1259
|
+
</div>
|
1260
|
+
<div class="tab-pane fade" id="dropdown1">
|
1261
|
+
<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>
|
1262
|
+
</div>
|
1263
|
+
<div class="tab-pane fade" id="dropdown2">
|
1264
|
+
<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>
|
1167
1265
|
</div>
|
1168
1266
|
</div>
|
1169
1267
|
</div>
|
@@ -1176,54 +1274,56 @@ Take that same HTML as Tabs, but use .nav-pills class instead.
|
|
1176
1274
|
|
1177
1275
|
++++
|
1178
1276
|
<div class="doc-example mb-3">
|
1179
|
-
<
|
1180
|
-
|
1181
|
-
<
|
1182
|
-
<
|
1183
|
-
|
1184
|
-
|
1185
|
-
|
1186
|
-
|
1187
|
-
<
|
1188
|
-
<a class="dropdown-
|
1189
|
-
<
|
1190
|
-
|
1191
|
-
|
1192
|
-
|
1193
|
-
|
1194
|
-
|
1195
|
-
|
1196
|
-
|
1197
|
-
|
1198
|
-
|
1199
|
-
|
1200
|
-
|
1201
|
-
|
1202
|
-
|
1203
|
-
|
1204
|
-
|
1205
|
-
|
1206
|
-
|
1207
|
-
<
|
1208
|
-
<
|
1209
|
-
|
1210
|
-
|
1211
|
-
<
|
1212
|
-
|
1213
|
-
<
|
1214
|
-
|
1215
|
-
|
1216
|
-
|
1217
|
-
|
1218
|
-
|
1219
|
-
|
1220
|
-
|
1221
|
-
<
|
1222
|
-
|
1223
|
-
|
1224
|
-
<
|
1225
|
-
|
1226
|
-
|
1277
|
+
<div class="row mb-5">
|
1278
|
+
|
1279
|
+
<div class="col-md-6">
|
1280
|
+
<h5 class="notoc">Standard Pills</h5>
|
1281
|
+
<ul class="nav nav-pills">
|
1282
|
+
<li class="nav-item mr-1 mb-2">
|
1283
|
+
<a class="nav-link active" href="javascript:(void)">Active</a>
|
1284
|
+
</li>
|
1285
|
+
<li class="nav-item dropdown mr-1">
|
1286
|
+
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="javascript:(void)" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
|
1287
|
+
<div class="dropdown-menu">
|
1288
|
+
<a class="dropdown-item" href="javascript:(void)">Action</a>
|
1289
|
+
<a class="dropdown-item" href="javascript:(void)">Another action</a>
|
1290
|
+
<a class="dropdown-item" href="javascript:(void)">Something else here</a>
|
1291
|
+
<div class="dropdown-divider"></div>
|
1292
|
+
<a class="dropdown-item" href="javascript:(void)">Separated link</a>
|
1293
|
+
</div>
|
1294
|
+
</li>
|
1295
|
+
<li class="nav-item mr-1 mb-2">
|
1296
|
+
<a class="nav-link" href="javascript:(void)">Link</a>
|
1297
|
+
</li>
|
1298
|
+
<li class="nav-item mr-1 mb-2">
|
1299
|
+
<a class="nav-link disabled" href="javascript:(void)">Disabled</a>
|
1300
|
+
</li>
|
1301
|
+
</ul>
|
1302
|
+
</div>
|
1303
|
+
<div class="col-md-6">
|
1304
|
+
<h5 class="notoc">Stacked Pills (vertical)</h5>
|
1305
|
+
<ul class="nav nav-pills flex-column mb-4">
|
1306
|
+
<li class="nav-item mb-2">
|
1307
|
+
<a class="nav-link active" href="javascript:(void)">Active</a>
|
1308
|
+
</li>
|
1309
|
+
<li class="nav-item dropdown mb-1">
|
1310
|
+
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="javascript:(void)" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
|
1311
|
+
<div class="dropdown-menu">
|
1312
|
+
<a class="dropdown-item" href="javascript:(void)">Action</a>
|
1313
|
+
<a class="dropdown-item" href="javascript:(void)">Another action</a>
|
1314
|
+
<a class="dropdown-item" href="javascript:(void)">Something else here</a>
|
1315
|
+
<div class="dropdown-divider"></div>
|
1316
|
+
<a class="dropdown-item" href="javascript:(void)">Separated link</a>
|
1317
|
+
</div>
|
1318
|
+
</li>
|
1319
|
+
<li class="nav-item mb-2">
|
1320
|
+
<a class="nav-link" href="javascript:(void)">Link</a>
|
1321
|
+
</li>
|
1322
|
+
<li class="nav-item mb-2">
|
1323
|
+
<a class="nav-link disabled" href="javascript:(void)">Disabled</a>
|
1324
|
+
</li>
|
1325
|
+
</ul>
|
1326
|
+
</div>
|
1227
1327
|
</div>
|
1228
1328
|
</div>
|
1229
1329
|
++++
|
@@ -1237,20 +1337,18 @@ Separators are automatically added in CSS through ::before and content.
|
|
1237
1337
|
|
1238
1338
|
++++
|
1239
1339
|
<div class="doc-example mb-3">
|
1240
|
-
<
|
1241
|
-
<
|
1242
|
-
|
1243
|
-
|
1244
|
-
<
|
1245
|
-
|
1246
|
-
|
1247
|
-
|
1248
|
-
<
|
1249
|
-
|
1250
|
-
|
1251
|
-
|
1252
|
-
</ol>
|
1253
|
-
</div>
|
1340
|
+
<ol class="breadcrumb">
|
1341
|
+
<li class="breadcrumb-item active">Home</li>
|
1342
|
+
</ol>
|
1343
|
+
<ol class="breadcrumb">
|
1344
|
+
<li class="breadcrumb-item"><a href="javascript:(void)">Home</a></li>
|
1345
|
+
<li class="breadcrumb-item active">Library</li>
|
1346
|
+
</ol>
|
1347
|
+
<ol class="breadcrumb">
|
1348
|
+
<li class="breadcrumb-item"><a href="javascript:(void)">Home</a></li>
|
1349
|
+
<li class="breadcrumb-item"><a href="javascript:(void)">Library</a></li>
|
1350
|
+
<li class="breadcrumb-item active">Data</li>
|
1351
|
+
</ol>
|
1254
1352
|
</div>
|
1255
1353
|
++++
|
1256
1354
|
|
@@ -1356,45 +1454,37 @@ button. For proper styling, use one of the eight required contextual classes
|
|
1356
1454
|
(e.g., .alert-success). For inline dismissal, use the alerts
|
1357
1455
|
https://getbootstrap.com/docs/4.0/components/alerts/#dismissing[jQuery plugin].
|
1358
1456
|
|
1359
|
-
pass:[<i class="mdi mdi-book-open mdi-24px mdi-md-
|
1360
|
-
|
1457
|
+
pass:[<i class="mdi mdi-book-open-variant mdi-24px mdi-md-grey"></i>]
|
1458
|
+
link:{bs_doc_components_alerts}[Bootstrap Docs {middot} Alerts, {browser-window--new}]
|
1361
1459
|
|
1362
1460
|
++++
|
1363
1461
|
<div class="doc-example mb-3">
|
1364
1462
|
<div class="row mb-3">
|
1365
1463
|
<div class="col-md-12">
|
1366
|
-
<div class="
|
1367
|
-
<
|
1368
|
-
|
1369
|
-
|
1370
|
-
<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>
|
1371
|
-
</div>
|
1464
|
+
<div class="alert alert-dismissible alert-warning">
|
1465
|
+
<button type="button" class="close" data-dismiss="alert">×</button>
|
1466
|
+
<h4 class="alert-heading notoc">Warning!</h4>
|
1467
|
+
<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>
|
1372
1468
|
</div>
|
1373
1469
|
</div>
|
1374
1470
|
</div>
|
1375
1471
|
<div class="row mb-5">
|
1376
1472
|
<div class="col-md-4">
|
1377
|
-
<div class="
|
1378
|
-
<
|
1379
|
-
|
1380
|
-
<strong>Oh snap!</strong> <a href="javascript:(void)" class="alert-link">Change a few things up</a> and try submitting again.
|
1381
|
-
</div>
|
1473
|
+
<div class="alert alert-dismissible alert-danger">
|
1474
|
+
<button type="button" class="close" data-dismiss="alert">×</button>
|
1475
|
+
<strong>Oh snap!</strong> <a href="javascript:(void)" class="alert-link">Change a few things up</a> and try submitting again.
|
1382
1476
|
</div>
|
1383
1477
|
</div>
|
1384
1478
|
<div class="col-md-4">
|
1385
|
-
<div class="
|
1386
|
-
<
|
1387
|
-
|
1388
|
-
<strong>Well done!</strong> You successfully read <a href="javascript:(void)" class="alert-link">this important alert message</a>.
|
1389
|
-
</div>
|
1479
|
+
<div class="alert alert-dismissible alert-success">
|
1480
|
+
<button type="button" class="close" data-dismiss="alert">×</button>
|
1481
|
+
<strong>Well done!</strong> You successfully read <a href="javascript:(void)" class="alert-link">this important alert message</a>.
|
1390
1482
|
</div>
|
1391
1483
|
</div>
|
1392
1484
|
<div class="col-md-4">
|
1393
|
-
<div class="
|
1394
|
-
<
|
1395
|
-
|
1396
|
-
<strong>Heads up!</strong> This <a href="javascript:(void)" class="alert-link">alert needs your attention</a>, but it's not super important.
|
1397
|
-
</div>
|
1485
|
+
<div class="alert alert-dismissible alert-info">
|
1486
|
+
<button type="button" class="close" data-dismiss="alert">×</button>
|
1487
|
+
<strong>Heads up!</strong> This <a href="javascript:(void)" class="alert-link">alert needs your attention</a>, but it's not super important.
|
1398
1488
|
</div>
|
1399
1489
|
</div>
|
1400
1490
|
</div>
|
@@ -1413,8 +1503,8 @@ be presented with the content of the badge. Depending on the specific
|
|
1413
1503
|
situation, these badges may seem like random additional words or numbers
|
1414
1504
|
at the end of a sentence, link, or button.
|
1415
1505
|
|
1416
|
-
pass:[<i class="mdi mdi-book-open mdi-24px mdi-md-
|
1417
|
-
|
1506
|
+
pass:[<i class="mdi mdi-book-open-variant mdi-24px mdi-md-grey"></i>]
|
1507
|
+
link:{bs_doc_components_badges}[Bootstrap Docs {middot} Badge, {browser-window--new}]
|
1418
1508
|
|
1419
1509
|
++++
|
1420
1510
|
<div class="doc-example mb-3">
|
@@ -1441,6 +1531,116 @@ Refer to: link:{bs_doc_components_badges}[Bootstrap Docs, window="_blank"].
|
|
1441
1531
|
</div>
|
1442
1532
|
++++
|
1443
1533
|
|
1534
|
+
ifdef::scrollbars[]
|
1535
|
+
=== Scrollbars
|
1536
|
+
|
1537
|
+
// https://codepen.io/devstreak/pen/dMYgeO
|
1538
|
+
|
1539
|
+
Chrome, Edge, Safari and Opera support the non-standard `::-webkit-scrollbar`
|
1540
|
+
pseudo element, which allows to modify the look of the browser's scrollbar.
|
1541
|
+
|
1542
|
+
NOTE: Custom scrollbars are not supported in Firefox or in Edge, prior
|
1543
|
+
version 79 (Chromium based).
|
1544
|
+
|
1545
|
+
.Default scrollbar J1 Template
|
1546
|
+
[source, css, role="noclip"]
|
1547
|
+
----
|
1548
|
+
::-webkit-scrollbar-track {
|
1549
|
+
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0,3);
|
1550
|
+
background-color: #E0E0E0;
|
1551
|
+
}
|
1552
|
+
|
1553
|
+
::-webkit-scrollbar {
|
1554
|
+
width: 3px;
|
1555
|
+
background-color: #2196F3;
|
1556
|
+
}
|
1557
|
+
|
1558
|
+
::-webkit-scrollbar-thumb {
|
1559
|
+
background-color: #2196F3;
|
1560
|
+
}
|
1561
|
+
----
|
1562
|
+
|
1563
|
+
For J1 Template, following flavours are implemented.
|
1564
|
+
|
1565
|
+
[subs="attributes"]
|
1566
|
+
++++
|
1567
|
+
<div>
|
1568
|
+
<div class="row">
|
1569
|
+
<div class="scrollbar" id="style-default">
|
1570
|
+
<div class="force-overflow"></div>
|
1571
|
+
</div>
|
1572
|
+
|
1573
|
+
<div class="scrollbar scroller-1">
|
1574
|
+
<div class="force-overflow"></div>
|
1575
|
+
</div>
|
1576
|
+
|
1577
|
+
<div class="scrollbar scroller-2">
|
1578
|
+
<div class="force-overflow"></div>
|
1579
|
+
</div>
|
1580
|
+
|
1581
|
+
<div class="scrollbar scroller-3">
|
1582
|
+
<div class="force-overflow"></div>
|
1583
|
+
</div>
|
1584
|
+
|
1585
|
+
<div class="scrollbar scroller-4">
|
1586
|
+
<div class="force-overflow"></div>
|
1587
|
+
</div>
|
1588
|
+
</div>
|
1589
|
+
|
1590
|
+
<div class="row">
|
1591
|
+
<div class="scrollbar scroller-5">
|
1592
|
+
<div class="force-overflow"></div>
|
1593
|
+
</div>
|
1594
|
+
|
1595
|
+
<div class="scrollbar scroller-6">
|
1596
|
+
<div class="force-overflow"></div>
|
1597
|
+
</div>
|
1598
|
+
|
1599
|
+
<div class="scrollbar scroller-7">
|
1600
|
+
<div class="force-overflow"></div>
|
1601
|
+
</div>
|
1602
|
+
|
1603
|
+
<div class="scrollbar scroller-8">
|
1604
|
+
<div class="force-overflow"></div>
|
1605
|
+
</div>
|
1606
|
+
|
1607
|
+
<div class="scrollbar scroller-9">
|
1608
|
+
<div class="force-overflow"></div>
|
1609
|
+
</div>
|
1610
|
+
</div>
|
1611
|
+
|
1612
|
+
<div class="row">
|
1613
|
+
<div class="scrollbar scroller-10">
|
1614
|
+
<div class="force-overflow"></div>
|
1615
|
+
</div>
|
1616
|
+
|
1617
|
+
<div class="scrollbar scroller-11">
|
1618
|
+
<div class="force-overflow"></div>
|
1619
|
+
</div>
|
1620
|
+
|
1621
|
+
<div class="scrollbar scroller-13">
|
1622
|
+
<div class="force-overflow"></div>
|
1623
|
+
</div>
|
1624
|
+
|
1625
|
+
<div class="scrollbar scroller-14">
|
1626
|
+
<div class="force-overflow"></div>
|
1627
|
+
</div>
|
1628
|
+
|
1629
|
+
<div class="scrollbar scroller-15">
|
1630
|
+
<div class="force-overflow"></div>
|
1631
|
+
</div>
|
1632
|
+
</div>
|
1633
|
+
</div>
|
1634
|
+
|
1635
|
+
<!-- script>
|
1636
|
+
NOTE: $.browser.webkit does NOT exists !!!
|
1637
|
+
if (!$.browser.webkit) {
|
1638
|
+
$('.wrapper').html('<p>Sorry! Non webkit browser detected. Scrollbars <b>not</b> displayed :</p>');
|
1639
|
+
}
|
1640
|
+
</script -->
|
1641
|
+
++++
|
1642
|
+
endif::[]
|
1643
|
+
|
1444
1644
|
== Progress
|
1445
1645
|
|
1446
1646
|
Bootstrap custom progress bars featuring support for stacked bars, animated
|
@@ -1449,52 +1649,72 @@ elements, some CSS to set the width, and a few attributes. We don’t use the
|
|
1449
1649
|
HTML5 <progress> element, ensuring you can stack progress bars, animate them,
|
1450
1650
|
and place text labels over them.
|
1451
1651
|
|
1452
|
-
pass:[<i class="mdi mdi-book-open mdi-24px mdi-md-
|
1453
|
-
|
1652
|
+
pass:[<i class="mdi mdi-book-open-variant mdi-24px mdi-md-grey"></i>]
|
1653
|
+
link:{bs_doc_components_progress}[Bootstrap Docs {middot} Progress, {browser-window--new}]
|
1454
1654
|
|
1455
1655
|
=== Basic
|
1456
1656
|
|
1457
1657
|
++++
|
1458
1658
|
<div class="doc-example mb-3">
|
1459
|
-
<div class="
|
1460
|
-
<div class="progress">
|
1461
|
-
<div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
|
1462
|
-
</div>
|
1659
|
+
<div class="progress">
|
1660
|
+
<div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
|
1463
1661
|
</div>
|
1464
1662
|
</div>
|
1465
1663
|
++++
|
1466
1664
|
|
1665
|
+
.Basic progressbar
|
1666
|
+
[source, html, role="noclip"]
|
1667
|
+
----
|
1668
|
+
<div class="progress">
|
1669
|
+
<div class="progress-bar" role="progressbar"
|
1670
|
+
style="width: 25%;"
|
1671
|
+
aria-valuenow="25"
|
1672
|
+
aria-valuemin="0"
|
1673
|
+
aria-valuemax="100">
|
1674
|
+
</div>
|
1675
|
+
</div>
|
1676
|
+
----
|
1677
|
+
|
1467
1678
|
=== Contextual alternatives
|
1468
1679
|
|
1469
1680
|
++++
|
1470
1681
|
<div class="doc-example mb-3">
|
1471
|
-
<div class="
|
1472
|
-
<div class="progress">
|
1473
|
-
|
1474
|
-
|
1475
|
-
<div class="progress">
|
1476
|
-
|
1477
|
-
|
1478
|
-
<div class="progress">
|
1479
|
-
|
1480
|
-
|
1481
|
-
<div class="progress">
|
1482
|
-
<div class="progress-bar bg-danger" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
|
1483
|
-
</div>
|
1682
|
+
<div class="progress mb-1">
|
1683
|
+
<div class="progress-bar bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
|
1684
|
+
</div>
|
1685
|
+
<div class="progress mb-1">
|
1686
|
+
<div class="progress-bar bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
|
1687
|
+
</div>
|
1688
|
+
<div class="progress mb-1">
|
1689
|
+
<div class="progress-bar bg-warning" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
|
1690
|
+
</div>
|
1691
|
+
<div class="progress">
|
1692
|
+
<div class="progress-bar bg-danger" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
|
1484
1693
|
</div>
|
1485
1694
|
</div>
|
1486
1695
|
++++
|
1487
1696
|
|
1697
|
+
.Progressbar SUCCESS
|
1698
|
+
[source, html, role="noclip"]
|
1699
|
+
----
|
1700
|
+
<div class="progress">
|
1701
|
+
<div class="progress-bar bg-success" role="progressbar"
|
1702
|
+
style="width: 25%;"
|
1703
|
+
aria-valuenow="25"
|
1704
|
+
aria-valuemin="0"
|
1705
|
+
aria-valuemax="100">
|
1706
|
+
</div>
|
1707
|
+
</div>
|
1708
|
+
----
|
1709
|
+
|
1488
1710
|
=== Multiple bars
|
1489
1711
|
|
1490
1712
|
++++
|
1491
1713
|
<div class="doc-example mb-3">
|
1492
|
-
<div class="
|
1493
|
-
<div class="progress">
|
1494
|
-
|
1495
|
-
|
1496
|
-
<div class="progress-bar bg-info" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
|
1497
|
-
</div>
|
1714
|
+
<div class="progress">
|
1715
|
+
<div class="progress-bar bg-success" role="progressbar" style="width: 50%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
|
1716
|
+
<div class="progress-bar bg-warning" role="progressbar" style="width: 25%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
|
1717
|
+
<div class="progress-bar bg-danger" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
|
1498
1718
|
</div>
|
1499
1719
|
</div>
|
1500
1720
|
++++
|
@@ -1503,22 +1723,20 @@ Refer to: link:{bs_doc_components_progress}[Bootstrap Docs, window="_blank"].
|
|
1503
1723
|
|
1504
1724
|
++++
|
1505
1725
|
<div class="doc-example mb-3">
|
1506
|
-
<div class="
|
1507
|
-
<div class="progress">
|
1508
|
-
|
1509
|
-
|
1510
|
-
<div class="progress">
|
1511
|
-
|
1512
|
-
|
1513
|
-
<div class="progress">
|
1514
|
-
|
1515
|
-
|
1516
|
-
<div class="progress">
|
1517
|
-
|
1518
|
-
|
1519
|
-
<div class="progress">
|
1520
|
-
<div class="progress-bar progress-bar-striped bg-danger" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
|
1521
|
-
</div>
|
1726
|
+
<div class="progress mb-1">
|
1727
|
+
<div class="progress-bar progress-bar-striped" role="progressbar" style="width: 10%" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
|
1728
|
+
</div>
|
1729
|
+
<div class="progress mb-1">
|
1730
|
+
<div class="progress-bar progress-bar-striped bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
|
1731
|
+
</div>
|
1732
|
+
<div class="progress mb-1">
|
1733
|
+
<div class="progress-bar progress-bar-striped bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
|
1734
|
+
</div>
|
1735
|
+
<div class="progress mb-1">
|
1736
|
+
<div class="progress-bar progress-bar-striped bg-warning" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
|
1737
|
+
</div>
|
1738
|
+
<div class="progress">
|
1739
|
+
<div class="progress-bar progress-bar-striped bg-danger" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
|
1522
1740
|
</div>
|
1523
1741
|
</div>
|
1524
1742
|
++++
|
@@ -1527,10 +1745,8 @@ Refer to: link:{bs_doc_components_progress}[Bootstrap Docs, window="_blank"].
|
|
1527
1745
|
|
1528
1746
|
++++
|
1529
1747
|
<div class="doc-example mb-3">
|
1530
|
-
<div class="
|
1531
|
-
<div class="progress">
|
1532
|
-
<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>
|
1533
|
-
</div>
|
1748
|
+
<div class="progress">
|
1749
|
+
<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>
|
1534
1750
|
</div>
|
1535
1751
|
</div>
|
1536
1752
|
++++
|
@@ -1545,21 +1761,19 @@ lorem:sentences[2]
|
|
1545
1761
|
|
1546
1762
|
Lightweight, flexible component for showcasing hero unit style content.
|
1547
1763
|
|
1548
|
-
pass:[<i class="mdi mdi-book-open mdi-24px mdi-md-
|
1549
|
-
|
1764
|
+
pass:[<i class="mdi mdi-book-open-variant mdi-24px mdi-md-grey"></i>]
|
1765
|
+
link:{bs_doc_components_jumbotron}[Bootstrap Docs {middot} Jumbotron, {browser-window--new}]
|
1550
1766
|
|
1551
1767
|
++++
|
1552
1768
|
<div class="doc-example mb-3">
|
1553
|
-
<div class="
|
1554
|
-
<
|
1555
|
-
|
1556
|
-
|
1557
|
-
|
1558
|
-
|
1559
|
-
<
|
1560
|
-
|
1561
|
-
</p>
|
1562
|
-
</div>
|
1769
|
+
<div class="jumbotron">
|
1770
|
+
<h1 class="display-3">Hello, world!</h1>
|
1771
|
+
<p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
|
1772
|
+
<hr class="my-4">
|
1773
|
+
<p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
|
1774
|
+
<p class="lead">
|
1775
|
+
<a class="btn btn-primary btn-raised btn-lg" href="javascript:(void)" role="button">Learn more</a>
|
1776
|
+
</p>
|
1563
1777
|
</div>
|
1564
1778
|
</div>
|
1565
1779
|
++++
|
@@ -1569,65 +1783,59 @@ Refer to: link:{bs_doc_components_jumbotron}[Bootstrap Docs, window="_blank"].
|
|
1569
1783
|
List groups are a flexible and powerful component for displaying a series of
|
1570
1784
|
content. Modify and extend them to support just about any content within.
|
1571
1785
|
|
1572
|
-
pass:[<i class="mdi mdi-book-open mdi-24px mdi-md-
|
1573
|
-
|
1786
|
+
pass:[<i class="mdi mdi-book-open-variant mdi-24px mdi-md-grey"></i>]
|
1787
|
+
link:{bs_doc_components_list_group}[Bootstrap Docs {middot} List group, {browser-window--new}]
|
1574
1788
|
|
1575
1789
|
++++
|
1576
1790
|
<div class="doc-example mb-3">
|
1577
1791
|
<div class="row mb-5">
|
1578
1792
|
<div class="col-md-4">
|
1579
|
-
<
|
1580
|
-
<
|
1581
|
-
|
1582
|
-
|
1583
|
-
|
1584
|
-
|
1585
|
-
|
1586
|
-
|
1587
|
-
|
1588
|
-
|
1589
|
-
|
1590
|
-
|
1591
|
-
|
1592
|
-
|
1593
|
-
</ul>
|
1594
|
-
</div>
|
1793
|
+
<ul class="list-group">
|
1794
|
+
<li class="list-group-item d-flex justify-content-between align-items-center">
|
1795
|
+
Cras justo odio
|
1796
|
+
<span class="badge badge-primary badge-pill">14</span>
|
1797
|
+
</li>
|
1798
|
+
<li class="list-group-item d-flex justify-content-between align-items-center">
|
1799
|
+
Dapibus ac facilisis
|
1800
|
+
<span class="badge badge-primary badge-pill">2</span>
|
1801
|
+
</li>
|
1802
|
+
<li class="list-group-item d-flex justify-content-between align-items-center">
|
1803
|
+
Morbi leo risus
|
1804
|
+
<span class="badge badge-primary badge-pill">1</span>
|
1805
|
+
</li>
|
1806
|
+
</ul>
|
1595
1807
|
</div>
|
1596
1808
|
|
1597
1809
|
<div class="col-md-4">
|
1598
|
-
<div class="
|
1599
|
-
<
|
1600
|
-
|
1601
|
-
|
1602
|
-
|
1603
|
-
|
1604
|
-
|
1605
|
-
|
1606
|
-
</a>
|
1607
|
-
</div>
|
1810
|
+
<div class="list-group">
|
1811
|
+
<a href="javascript:(void)" class="list-group-item list-group-item-action active">
|
1812
|
+
Cras justo odio
|
1813
|
+
</a>
|
1814
|
+
<a href="javascript:(void)" class="list-group-item list-group-item-action">Dapibus ac facilisis
|
1815
|
+
</a>
|
1816
|
+
<a href="javascript:(void)" class="list-group-item list-group-item-action disabled">Morbi leo risus
|
1817
|
+
</a>
|
1608
1818
|
</div>
|
1609
1819
|
</div>
|
1610
1820
|
|
1611
1821
|
<div class="col-md-4">
|
1612
|
-
<div class="
|
1613
|
-
<
|
1614
|
-
<
|
1615
|
-
<
|
1616
|
-
|
1617
|
-
|
1618
|
-
|
1619
|
-
|
1620
|
-
|
1621
|
-
|
1622
|
-
<
|
1623
|
-
<
|
1624
|
-
|
1625
|
-
|
1626
|
-
|
1627
|
-
|
1628
|
-
|
1629
|
-
</a>
|
1630
|
-
</div>
|
1822
|
+
<div class="list-group">
|
1823
|
+
<a href="javascript:(void)" class="list-group-item list-group-item-action flex-column align-items-start active">
|
1824
|
+
<div class="d-flex w-100 justify-content-between">
|
1825
|
+
<h5 class="mb-1 notoc">List group item heading</h5>
|
1826
|
+
<small>3 days ago</small>
|
1827
|
+
</div>
|
1828
|
+
<p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
|
1829
|
+
<small>Donec id elit non mi porta.</small>
|
1830
|
+
</a>
|
1831
|
+
<a href="javascript:(void)" class="list-group-item list-group-item-action flex-column align-items-start">
|
1832
|
+
<div class="d-flex w-100 justify-content-between">
|
1833
|
+
<h5 class="mb-1 notoc">List group item heading</h5>
|
1834
|
+
<small class="text-muted">3 days ago</small>
|
1835
|
+
</div>
|
1836
|
+
<p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
|
1837
|
+
<small class="text-muted">Donec id elit non mi porta.</small>
|
1838
|
+
</a>
|
1631
1839
|
</div>
|
1632
1840
|
</div>
|
1633
1841
|
|
@@ -1652,173 +1860,164 @@ manage to deliver a ton of control and customization. Built with flexbox,
|
|
1652
1860
|
they offer easy alignment and mix well with other Bootstrap components.
|
1653
1861
|
They have no margin by default, so use spacing utilities as needed.
|
1654
1862
|
|
1655
|
-
pass:[<i class="mdi mdi-book-open mdi-24px mdi-md-
|
1656
|
-
|
1863
|
+
pass:[<i class="mdi mdi-book-open-variant mdi-24px mdi-md-grey"></i>]
|
1864
|
+
link:{bs_doc_components_cards}[Bootstrap Docs {middot} Card, {browser-window--new}]
|
1657
1865
|
|
1658
1866
|
++++
|
1659
1867
|
<div class="doc-example mb-3">
|
1660
|
-
<div class="row">
|
1661
1868
|
|
1662
|
-
|
1663
|
-
|
1664
|
-
|
1665
|
-
|
1666
|
-
<
|
1667
|
-
|
1668
|
-
|
1669
|
-
</
|
1869
|
+
<div class="row">
|
1870
|
+
<div class="col-md-4 col-sm-4 col-xs-12">
|
1871
|
+
<div class="card mb-3" style="max-width: 20rem;">
|
1872
|
+
<div class="card-body">
|
1873
|
+
<h4 class="card-title notoc">Card title</h4>
|
1874
|
+
<h6 class="card-subtitle mb-2 text-muted notoc">Card subtitle</h6>
|
1875
|
+
<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>
|
1876
|
+
<a href="javascript:(void)" class="card-link">Card link</a>
|
1877
|
+
<a href="javascript:(void)" class="card-link">Another link</a>
|
1670
1878
|
</div>
|
1671
|
-
|
1672
|
-
|
1673
|
-
|
1674
|
-
|
1675
|
-
|
1676
|
-
</
|
1879
|
+
</div>
|
1880
|
+
</div>
|
1881
|
+
<div class="col-md-4 col-sm-4 col-xs-12">
|
1882
|
+
<div class="card mb-3" style="max-width: 20rem;">
|
1883
|
+
<div class="card-body">
|
1884
|
+
<h4 class="card-title notoc">Card title</h4>
|
1885
|
+
<h6 class="card-subtitle mb-2 text-muted notoc">Card subtitle</h6>
|
1886
|
+
<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>
|
1887
|
+
<a href="javascript:(void)" class="card-link">Card link</a>
|
1888
|
+
<a href="javascript:(void)" class="card-link">Another link</a>
|
1677
1889
|
</div>
|
1678
|
-
|
1679
|
-
|
1680
|
-
|
1681
|
-
|
1682
|
-
|
1683
|
-
</
|
1890
|
+
</div>
|
1891
|
+
</div>
|
1892
|
+
<div class="col-md-4 col-sm-4 col-xs-12">
|
1893
|
+
<div class="card mb-3" style="max-width: 20rem;">
|
1894
|
+
<div class="card-body">
|
1895
|
+
<h4 class="card-title notoc">Card title</h4>
|
1896
|
+
<h6 class="card-subtitle mb-2 text-muted notoc">Card subtitle</h6>
|
1897
|
+
<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>
|
1898
|
+
<a href="javascript:(void)" class="card-link">Card link</a>
|
1899
|
+
<a href="javascript:(void)" class="card-link">Another link</a>
|
1684
1900
|
</div>
|
1685
|
-
|
1686
|
-
|
1687
|
-
|
1688
|
-
|
1689
|
-
|
1690
|
-
|
1901
|
+
</div>
|
1902
|
+
</div>
|
1903
|
+
</div>
|
1904
|
+
|
1905
|
+
<div class="row">
|
1906
|
+
<div class="col-md-4 col-sm-4 col-xs-12 pl-3">
|
1907
|
+
<div class="card mb-3" style="max-width: 20rem;">
|
1908
|
+
<div class="card-header text-white bg-primary">
|
1909
|
+
<h3 class="notoc">Header</h3>
|
1691
1910
|
</div>
|
1692
|
-
<div class="card
|
1693
|
-
<
|
1694
|
-
<
|
1695
|
-
<h4 class="card-title notoc">Warning card title</h4>
|
1696
|
-
<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>
|
1697
|
-
</div>
|
1911
|
+
<div class="card-body">
|
1912
|
+
<h4 class="card-title notoc">Primary card title</h4>
|
1913
|
+
<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>
|
1698
1914
|
</div>
|
1699
|
-
|
1700
|
-
|
1701
|
-
|
1702
|
-
|
1703
|
-
|
1704
|
-
</
|
1915
|
+
</div>
|
1916
|
+
</div>
|
1917
|
+
<div class="col-md-4 col-sm-4 col-xs-12">
|
1918
|
+
<div class="card mb-3" style="max-width: 20rem;">
|
1919
|
+
<div class="card-header text-white bg-secondary">
|
1920
|
+
<h3 class="notoc">Header</h3>
|
1705
1921
|
</div>
|
1706
|
-
<div class="card
|
1707
|
-
<
|
1708
|
-
<
|
1709
|
-
<h4 class="card-title notoc">Light card title</h4>
|
1710
|
-
<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>
|
1711
|
-
</div>
|
1922
|
+
<div class="card-body">
|
1923
|
+
<h4 class="card-title notoc">Secondary card title</h4>
|
1924
|
+
<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>
|
1712
1925
|
</div>
|
1713
|
-
|
1714
|
-
|
1715
|
-
|
1716
|
-
|
1717
|
-
|
1718
|
-
</
|
1926
|
+
</div>
|
1927
|
+
</div>
|
1928
|
+
<div class="col-md-4 col-sm-4 col-xs-12">
|
1929
|
+
<div class="card mb-3" style="max-width: 20rem;">
|
1930
|
+
<div class="card-header text-white bg-success">
|
1931
|
+
<h3 class="notoc">Header</h3>
|
1932
|
+
</div>
|
1933
|
+
<div class="card-body">
|
1934
|
+
<h4 class="card-title notoc">Success card title</h4>
|
1935
|
+
<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>
|
1719
1936
|
</div>
|
1720
1937
|
</div>
|
1721
1938
|
</div>
|
1939
|
+
</div>
|
1722
1940
|
|
1723
|
-
|
1724
|
-
|
1725
|
-
|
1726
|
-
|
1727
|
-
<
|
1728
|
-
<h4 class="card-title notoc">Primary card title</h4>
|
1729
|
-
<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>
|
1730
|
-
</div>
|
1941
|
+
<div class="row">
|
1942
|
+
<div class="col-md-4 col-sm-4 col-xs-12 pl-3">
|
1943
|
+
<div class="card mb-3" style="max-width: 20rem;">
|
1944
|
+
<div class="card-header text-white bg-info">
|
1945
|
+
<h3 class="notoc">Header</h3>
|
1731
1946
|
</div>
|
1732
|
-
<div class="card
|
1733
|
-
<
|
1734
|
-
<
|
1735
|
-
<h4 class="card-title notoc">Secondary card title</h4>
|
1736
|
-
<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>
|
1737
|
-
</div>
|
1947
|
+
<div class="card-body">
|
1948
|
+
<h4 class="card-title notoc">Info card title</h4>
|
1949
|
+
<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>
|
1738
1950
|
</div>
|
1739
|
-
<div class="card
|
1740
|
-
<
|
1741
|
-
|
1742
|
-
|
1743
|
-
<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>
|
1744
|
-
</div>
|
1951
|
+
<div class="card-footer r-text-200">
|
1952
|
+
<a class="card-link bs-info font-weight-bold g-font-size-12 text-uppercase"
|
1953
|
+
href="javascript:(void)">Action · Footer Link
|
1954
|
+
</a>
|
1745
1955
|
</div>
|
1746
|
-
|
1747
|
-
|
1748
|
-
|
1749
|
-
|
1750
|
-
|
1751
|
-
</
|
1956
|
+
</div>
|
1957
|
+
</div>
|
1958
|
+
<div class="col-md-4 col-sm-4 col-xs-12">
|
1959
|
+
<div class="card mb-3" style="max-width: 20rem;">
|
1960
|
+
<div class="card-header text-white bg-warning">
|
1961
|
+
<h3 class="notoc">Header</h3>
|
1752
1962
|
</div>
|
1753
|
-
<div class="card
|
1754
|
-
<
|
1755
|
-
<
|
1756
|
-
<h4 class="card-title notoc">Warning card title</h4>
|
1757
|
-
<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>
|
1758
|
-
</div>
|
1963
|
+
<div class="card-body">
|
1964
|
+
<h4 class="card-title notoc">Warning card title</h4>
|
1965
|
+
<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>
|
1759
1966
|
</div>
|
1760
|
-
<div class="card
|
1761
|
-
<
|
1762
|
-
|
1763
|
-
|
1764
|
-
<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>
|
1765
|
-
</div>
|
1967
|
+
<div class="card-footer r-text-200">
|
1968
|
+
<a class="card-link bs-warning font-weight-bold g-font-size-12 text-uppercase"
|
1969
|
+
href="javascript:(void)">Action · Footer Link
|
1970
|
+
</a>
|
1766
1971
|
</div>
|
1767
|
-
|
1768
|
-
|
1769
|
-
|
1770
|
-
|
1771
|
-
|
1772
|
-
</
|
1972
|
+
</div>
|
1973
|
+
</div>
|
1974
|
+
<div class="col-md-4 col-sm-4 col-xs-12">
|
1975
|
+
<div class="card mb-3" style="max-width: 20rem;">
|
1976
|
+
<div class="card-header text-white bg-danger">
|
1977
|
+
<h3 class="notoc">Header</h3>
|
1773
1978
|
</div>
|
1774
|
-
<div class="card
|
1775
|
-
<
|
1776
|
-
<
|
1777
|
-
|
1778
|
-
|
1779
|
-
|
1979
|
+
<div class="card-body">
|
1980
|
+
<h4 class="card-title notoc">Danger card title</h4>
|
1981
|
+
<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>
|
1982
|
+
</div>
|
1983
|
+
<div class="card-footer r-text-200">
|
1984
|
+
<a class="card-link bs-danger font-weight-bold g-font-size-12 text-uppercase"
|
1985
|
+
href="javascript:(void)">Action · Footer Link
|
1986
|
+
</a>
|
1780
1987
|
</div>
|
1781
1988
|
</div>
|
1782
1989
|
</div>
|
1990
|
+
</div>
|
1783
1991
|
|
1784
|
-
|
1785
|
-
|
1786
|
-
|
1787
|
-
|
1788
|
-
|
1789
|
-
|
1790
|
-
|
1791
|
-
</
|
1792
|
-
<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">
|
1793
|
-
<div class="card-body">
|
1794
|
-
<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>
|
1795
|
-
</div>
|
1796
|
-
<ul class="list-group list-group-flush">
|
1797
|
-
<li class="list-group-item">Cras justo odio</li>
|
1798
|
-
<li class="list-group-item">Dapibus ac facilisis</li>
|
1799
|
-
<li class="list-group-item">Vestibulum at eros</li>
|
1800
|
-
</ul>
|
1801
|
-
<div class="card-body">
|
1802
|
-
<a href="javascript:(void)" class="card-link">Card link</a>
|
1803
|
-
<a href="javascript:(void)" class="card-link">Another link</a>
|
1804
|
-
</div>
|
1805
|
-
<div class="card-footer text-muted">
|
1806
|
-
2 days ago
|
1807
|
-
</div>
|
1992
|
+
<div class="row">
|
1993
|
+
<div class="col-md-4 col-sm-4 col-xs-12">
|
1994
|
+
<div class="card mb-3" style="max-width: 20rem;">
|
1995
|
+
<h3 class="card-header notoc">Header</h3>
|
1996
|
+
<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">
|
1997
|
+
<div class="card-body">
|
1998
|
+
<h5 class="card-title notoc">Special title treatment</h5>
|
1999
|
+
<h6 class="card-subtitle text-muted notoc">Support card subtitle</h6>
|
1808
2000
|
</div>
|
1809
|
-
|
1810
|
-
|
1811
|
-
|
1812
|
-
|
1813
|
-
|
1814
|
-
|
1815
|
-
|
1816
|
-
</
|
2001
|
+
|
2002
|
+
<div class="card-body">
|
2003
|
+
<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>
|
2004
|
+
</div>
|
2005
|
+
<ul class="list-group list-group-flush">
|
2006
|
+
<li class="list-group-item">Cras justo odio</li>
|
2007
|
+
<li class="list-group-item">Dapibus ac facilisis</li>
|
2008
|
+
<li class="list-group-item">Vestibulum at eros</li>
|
2009
|
+
</ul>
|
2010
|
+
<div class="card-body">
|
2011
|
+
<a href="javascript:(void)" class="card-link">Card link</a>
|
2012
|
+
<a href="javascript:(void)" class="card-link">Another link</a>
|
2013
|
+
</div>
|
2014
|
+
<div class="card-footer text-muted">
|
2015
|
+
2 days ago
|
1817
2016
|
</div>
|
1818
2017
|
</div>
|
1819
2018
|
</div>
|
1820
|
-
|
1821
2019
|
</div>
|
2020
|
+
|
1822
2021
|
</div>
|
1823
2022
|
++++
|
1824
2023
|
|
@@ -1834,11 +2033,11 @@ built with HTML, CSS, and JavaScript. They’re positioned over everything
|
|
1834
2033
|
else in the document and remove scroll from the <body> so that modal
|
1835
2034
|
content scrolls instead.
|
1836
2035
|
|
1837
|
-
pass:[<i class="mdi mdi-book-open mdi-24px mdi-md-
|
1838
|
-
|
2036
|
+
pass:[<i class="mdi mdi-book-open-variant mdi-24px mdi-md-grey"></i>]
|
2037
|
+
link:{bs_doc_components_modal}[Bootstrap Docs {middot} Modal, {browser-window--new}]
|
1839
2038
|
|
1840
2039
|
.Modal types
|
1841
|
-
[cols="
|
2040
|
+
[cols="2a,8a,2a", options="header", width="100%", role="rtable"]
|
1842
2041
|
|===============================================================================
|
1843
2042
|
|Type |Description |Launch Example
|
1844
2043
|
|
@@ -1847,10 +2046,10 @@ Refer to: link:{bs_doc_components_modal}[Bootstrap Docs, window="_blank"].
|
|
1847
2046
|
from the top of the page.
|
1848
2047
|
|
|
1849
2048
|
++++
|
1850
|
-
<div class="ml-
|
2049
|
+
<div class="ml-0">
|
1851
2050
|
<!-- Button trigger modal -->
|
1852
2051
|
<button type="button"
|
1853
|
-
class="btn btn-
|
2052
|
+
class="btn btn-primary btn-raised"
|
1854
2053
|
data-toggle="modal"
|
1855
2054
|
data-target="#exampleSimpleModal">
|
1856
2055
|
Launch Example
|
@@ -1875,8 +2074,8 @@ from the top of the page.
|
|
1875
2074
|
<p>Modal body text goes here.</p>
|
1876
2075
|
</div>
|
1877
2076
|
<div class="modal-footer">
|
1878
|
-
<button type="button" class="btn btn-primary btn-raised mr-2"
|
1879
|
-
<button type="button" class="btn btn-secondary btn-raised">
|
2077
|
+
<button type="button" class="btn btn-primary btn-flex btn-raised mr-2">Do nothing</button>
|
2078
|
+
<button type="button" class="btn btn-secondary btn-flex btn-raised" data-dismiss="modal">Close</button>
|
1880
2079
|
</div>
|
1881
2080
|
</div>
|
1882
2081
|
</div>
|
@@ -1888,10 +2087,10 @@ from the top of the page.
|
|
1888
2087
|
it (the backdrop).
|
1889
2088
|
|
|
1890
2089
|
++++
|
1891
|
-
<div class="ml-
|
2090
|
+
<div class="ml-0">
|
1892
2091
|
<!-- Button trigger modal -->
|
1893
2092
|
<button type="button"
|
1894
|
-
class="btn btn-
|
2093
|
+
class="btn btn-primary btn-raised"
|
1895
2094
|
data-toggle="modal"
|
1896
2095
|
data-target="#exampleStaticModal">
|
1897
2096
|
Launch Example
|
@@ -1918,8 +2117,8 @@ it (the backdrop).
|
|
1918
2117
|
<p>Modal body text goes here.</p>
|
1919
2118
|
</div>
|
1920
2119
|
<div class="modal-footer">
|
1921
|
-
<button type="button" class="btn btn-primary btn-raised mr-2"
|
1922
|
-
<button type="button" class="btn btn-secondary btn-raised">
|
2120
|
+
<button type="button" class="btn btn-primary btn-flex btn-raised mr-2">Do nothing</button>
|
2121
|
+
<button type="button" class="btn btn-secondary btn-flex btn-raised" data-dismiss="modal">Close</button>
|
1923
2122
|
</div>
|
1924
2123
|
</div>
|
1925
2124
|
</div>
|
@@ -1932,10 +2131,10 @@ independent of the page itself. Try the demo and resize your browser for
|
|
1932
2131
|
the height.
|
1933
2132
|
|
|
1934
2133
|
++++
|
1935
|
-
<div class="ml-
|
2134
|
+
<div class="ml-0">
|
1936
2135
|
<!-- Button trigger modal -->
|
1937
2136
|
<button type="button"
|
1938
|
-
class="btn btn-
|
2137
|
+
class="btn btn-primary btn-raised"
|
1939
2138
|
data-toggle="modal"
|
1940
2139
|
data-target="#exampleModalLong">
|
1941
2140
|
Launch Example
|
@@ -1952,7 +2151,7 @@ the height.
|
|
1952
2151
|
<div class="modal-dialog">
|
1953
2152
|
<div class="modal-content">
|
1954
2153
|
<div class="modal-header">
|
1955
|
-
<h5 class="modal-title notoc"
|
2154
|
+
<h5 id="exampleModalLongTitle" class="modal-title notoc">The Extremes of Good and Evil</h5>
|
1956
2155
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
1957
2156
|
<span aria-hidden="true">×</span>
|
1958
2157
|
</button>
|
@@ -1994,8 +2193,8 @@ the height.
|
|
1994
2193
|
</p>
|
1995
2194
|
</div>
|
1996
2195
|
<div class="modal-footer">
|
1997
|
-
<button type="button" class="btn btn-primary btn-raised mr-2"
|
1998
|
-
<button type="button" class="btn btn-secondary btn-raised">
|
2196
|
+
<button type="button" class="btn btn-primary btn-flex btn-raised mr-2">Do nothing</button>
|
2197
|
+
<button type="button" class="btn btn-secondary btn-flex btn-raised" data-dismiss="modal">Close</button>
|
1999
2198
|
</div>
|
2000
2199
|
</div>
|
2001
2200
|
</div>
|
@@ -2007,10 +2206,10 @@ the height.
|
|
2007
2206
|
modal body. Try the demo and scroll the content.
|
2008
2207
|
|
|
2009
2208
|
++++
|
2010
|
-
<div class="ml-
|
2209
|
+
<div class="ml-0">
|
2011
2210
|
<!-- Button trigger modal -->
|
2012
2211
|
<button type="button"
|
2013
|
-
class="btn btn-
|
2212
|
+
class="btn btn-primary btn-raised"
|
2014
2213
|
data-toggle="modal"
|
2015
2214
|
data-target="#exampleModalLongScrollable">
|
2016
2215
|
Launch Example
|
@@ -2027,7 +2226,7 @@ modal body. Try the demo and scroll the content.
|
|
2027
2226
|
<div class="modal-dialog modal-dialog-scrollable">
|
2028
2227
|
<div class="modal-content">
|
2029
2228
|
<div class="modal-header">
|
2030
|
-
<h5 class="modal-title notoc"
|
2229
|
+
<h5 id="exampleModalLongScrollableTitle" class="modal-title notoc">The Extremes of Good and Evil</h5>
|
2031
2230
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
2032
2231
|
<span aria-hidden="true">×</span>
|
2033
2232
|
</button>
|
@@ -2069,8 +2268,8 @@ modal body. Try the demo and scroll the content.
|
|
2069
2268
|
</p>
|
2070
2269
|
</div>
|
2071
2270
|
<div class="modal-footer">
|
2072
|
-
<button type="button" class="btn btn-primary btn-raised mr-2"
|
2073
|
-
<button type="button" class="btn btn-secondary btn-raised">
|
2271
|
+
<button type="button" class="btn btn-primary btn-flex btn-raised mr-2">Do nothing</button>
|
2272
|
+
<button type="button" class="btn btn-secondary btn-flex btn-raised" data-dismiss="modal">Close</button>
|
2074
2273
|
</div>
|
2075
2274
|
</div>
|
2076
2275
|
</div>
|
@@ -2081,10 +2280,10 @@ modal body. Try the demo and scroll the content.
|
|
2081
2280
|
|For important messages, center the modal.
|
2082
2281
|
|
|
2083
2282
|
++++
|
2084
|
-
<div class="ml-
|
2283
|
+
<div class="ml-0">
|
2085
2284
|
<!-- Button trigger modal -->
|
2086
2285
|
<button type="button"
|
2087
|
-
class="btn btn-
|
2286
|
+
class="btn btn-primary btn-raised"
|
2088
2287
|
data-toggle="modal" data-target="#exampleModalVerticalCenter">
|
2089
2288
|
Launch Example
|
2090
2289
|
</button>
|
@@ -2110,8 +2309,8 @@ modal body. Try the demo and scroll the content.
|
|
2110
2309
|
voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
|
2111
2310
|
</div>
|
2112
2311
|
<div class="modal-footer">
|
2113
|
-
<button type="button" class="btn btn-primary btn-raised mr-2"
|
2114
|
-
<button type="button" class="btn btn-secondary btn-raised">
|
2312
|
+
<button type="button" class="btn btn-primary btn-flex btn-raised mr-2">Do nothing</button>
|
2313
|
+
<button type="button" class="btn btn-secondary btn-flex btn-raised" data-dismiss="modal">Close</button>
|
2115
2314
|
</div>
|
2116
2315
|
</div>
|
2117
2316
|
</div>
|
@@ -2123,10 +2322,10 @@ modal body. Try the demo and scroll the content.
|
|
2123
2322
|
closed, any tooltips and popovers within are also automatically dismissed.
|
2124
2323
|
|
|
2125
2324
|
++++
|
2126
|
-
<div class="ml-
|
2325
|
+
<div class="ml-0">
|
2127
2326
|
<!-- Button trigger modal -->
|
2128
2327
|
<button type="button"
|
2129
|
-
class="btn btn-
|
2328
|
+
class="btn btn-primary btn-raised"
|
2130
2329
|
data-toggle="modal"
|
2131
2330
|
data-target="#exampleModalTooltip">
|
2132
2331
|
Launch Example
|
@@ -2142,67 +2341,133 @@ closed, any tooltips and popovers within are also automatically dismissed.
|
|
2142
2341
|
<div class="modal-dialog modal-dialog-centered">
|
2143
2342
|
<div class="modal-content">
|
2144
2343
|
<div class="modal-header">
|
2145
|
-
<h5 class="modal-title notoc"
|
2344
|
+
<h5 id="exampleModalTooltipTitle" class="modal-title notoc">Modal title</h5>
|
2146
2345
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
2147
2346
|
<span aria-hidden="true">×</span>
|
2148
2347
|
</button>
|
2149
2348
|
</div>
|
2150
2349
|
<div class="modal-body">
|
2151
|
-
<h5>Popover in a modal</h5>
|
2152
|
-
<p>This <a href="#" role="button" class="btn btn-
|
2350
|
+
<h5 class="notoc">Popover in a modal</h5>
|
2351
|
+
<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>
|
2153
2352
|
<hr>
|
2154
|
-
<h5>Tooltips in a modal</h5>
|
2353
|
+
<h5 class="notoc">Tooltips in a modal</h5>
|
2155
2354
|
<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>
|
2156
2355
|
</div>
|
2157
2356
|
<div class="modal-footer">
|
2158
|
-
<button type="button" class="btn btn-primary btn-raised mr-2"
|
2159
|
-
<button type="button" class="btn btn-secondary btn-raised">
|
2357
|
+
<button type="button" class="btn btn-primary btn-flex btn-raised mr-2">Do nothing</button>
|
2358
|
+
<button type="button" class="btn btn-secondary btn-flex btn-raised" data-dismiss="modal">Close</button>
|
2160
2359
|
</div>
|
2161
2360
|
</div>
|
2162
2361
|
</div>
|
2163
2362
|
</div>
|
2164
2363
|
++++
|
2165
|
-
|
2166
2364
|
|===============================================================================
|
2167
2365
|
|
2168
|
-
|
2169
|
-
|
2170
|
-
|
2171
|
-
|
2172
|
-
|
2173
|
-
|
2174
|
-
|
2175
|
-
|
2176
|
-
|
2177
|
-
|
2366
|
+
.Base Modal example
|
2367
|
+
[source, html, role="noclip"]
|
2368
|
+
----
|
2369
|
+
<!-- Trigger Button (modal) -->
|
2370
|
+
<div class="ml-0">
|
2371
|
+
<button type="button"
|
2372
|
+
class="btn btn-primary btn-raised"
|
2373
|
+
data-toggle="modal"
|
2374
|
+
data-target="#exampleSimpleModal">
|
2375
|
+
Launch Example
|
2376
|
+
</button>
|
2377
|
+
</div>
|
2178
2378
|
|
2179
|
-
|
2180
|
-
<div
|
2181
|
-
|
2182
|
-
|
2183
|
-
|
2184
|
-
|
2185
|
-
|
2379
|
+
<!-- Modal -->
|
2380
|
+
<div id="exampleSimpleModal"
|
2381
|
+
class="modal fade top"
|
2382
|
+
tabindex="-1"
|
2383
|
+
role="dialog"
|
2384
|
+
aria-labelledby="exampleSimpleModalLabel"
|
2385
|
+
aria-hidden="true">
|
2386
|
+
<div class="modal-dialog">
|
2387
|
+
<div class="modal-content">
|
2388
|
+
<div class="modal-header">
|
2389
|
+
<h5 id="exampleSimpleModalLabel" class="modal-title notoc">Modal title</h5>
|
2390
|
+
<button
|
2391
|
+
type="button"
|
2392
|
+
class="close"
|
2393
|
+
data-dismiss="modal"
|
2394
|
+
aria-label="Close">
|
2395
|
+
<span aria-hidden="true">×</span>
|
2396
|
+
</button>
|
2397
|
+
</div>
|
2398
|
+
<div class="modal-body">
|
2399
|
+
<p>Modal body text goes here.</p>
|
2400
|
+
</div>
|
2401
|
+
<div class="modal-footer">
|
2402
|
+
<button type="button"
|
2403
|
+
class="btn btn-primary btn-flex btn-raised mr-2"> Do nothing
|
2404
|
+
</button>
|
2405
|
+
<button
|
2406
|
+
type="button"
|
2407
|
+
class="btn btn-secondary btn-flex btn-raised"
|
2408
|
+
data-dismiss="modal"> Close
|
2409
|
+
</button>
|
2410
|
+
</div>
|
2411
|
+
</div>
|
2412
|
+
</div>
|
2186
2413
|
</div>
|
2187
|
-
|
2414
|
+
----
|
2415
|
+
|
2416
|
+
=== Popovers and Tooltips
|
2188
2417
|
|
2189
|
-
|
2418
|
+
Popovers and Tooltips rely on the 3rd party library __Popper.js__ for positioning.
|
2419
|
+
To make them properly positioned, the Javascript library `popper.min.js` has to
|
2420
|
+
be included before `bootstrap.js` in order to make popovers and tooltips to work.
|
2190
2421
|
|
2191
|
-
|
2192
|
-
|
2193
|
-
bootstrap.bundle.js which contains Popper.js in order for tooltips to work.
|
2422
|
+
pass:[<i class="mdi mdi-book-open-variant mdi-24px mdi-md-grey"></i>]
|
2423
|
+
link:{bs_doc_components_popovers}[Bootstrap Docs {middot} Popovers, {browser-window--new}]
|
2194
2424
|
|
2195
|
-
|
2196
|
-
|
2425
|
+
pass:[<i class="mdi mdi-book-open-variant mdi-24px mdi-md-grey"></i>]
|
2426
|
+
link:{bs_doc_components_tooltips}[Bootstrap Docs {middot} Tooltips, {browser-window--new}]
|
2197
2427
|
|
2198
|
-
|
2199
|
-
Refer to: link:{bs_doc_components_tooltips}[Bootstrap Docs, window="_blank"].
|
2428
|
+
NOTE: Popovers and Tooltips require the BS tooltip plugin as a dependency.
|
2200
2429
|
|
2201
2430
|
++++
|
2202
2431
|
<div class="doc-example mb-3">
|
2203
|
-
<
|
2204
|
-
|
2205
|
-
|
2206
|
-
|
2432
|
+
<div class="row mb-5">
|
2433
|
+
<div class="col-md-6">
|
2434
|
+
<h5 class="mb-5 notoc">Popovers</h5>
|
2435
|
+
<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>
|
2436
|
+
<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>
|
2437
|
+
<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>
|
2438
|
+
<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>
|
2439
|
+
</div>
|
2440
|
+
<div class="col-md-6">
|
2441
|
+
<h5 class="mb-5 notoc">Tooltips</h5>
|
2442
|
+
<button type="button" class="btn btn-primary btn-raised" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Top</button>
|
2443
|
+
<button type="button" class="btn btn-primary btn-raised" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Bottom</button>
|
2444
|
+
<button type="button" class="btn btn-primary btn-raised" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Right</button>
|
2445
|
+
<button type="button" class="btn btn-primary btn-raised" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Left</button>
|
2446
|
+
</div>
|
2447
|
+
</div>
|
2207
2448
|
</div>
|
2208
2449
|
++++
|
2450
|
+
|
2451
|
+
.Example for Popovers and Tooltips
|
2452
|
+
[source, html, role="noclip"]
|
2453
|
+
----
|
2454
|
+
<div class="row mb-5">
|
2455
|
+
<div class="col-md-6">
|
2456
|
+
<h5 class="mb-5 notoc">Popovers</h5>
|
2457
|
+
<button type="button" class="btn btn-primary btn-raised"
|
2458
|
+
title="Popover Title" data-container="body"
|
2459
|
+
data-toggle="popover" data-placement="top"
|
2460
|
+
data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">Top
|
2461
|
+
</button>
|
2462
|
+
...
|
2463
|
+
</div>
|
2464
|
+
<div class="col-md-6">
|
2465
|
+
<h5 class="mb-5 notoc">Tooltips</h5>
|
2466
|
+
<button type="button" class="btn btn-primary btn-raised"
|
2467
|
+
data-toggle="tooltip" data-placement="top"
|
2468
|
+
title="Tooltip on top">Top
|
2469
|
+
</button>
|
2470
|
+
...
|
2471
|
+
</div>
|
2472
|
+
</div>
|
2473
|
+
----
|