j1-template 2020.0.17 → 2020.0.22
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 +2 -2
- data/_includes/themes/j1/blocks/footer/boxes/links_box.proc +4 -4
- data/_includes/themes/j1/blocks/footer/boxes/news_box.proc +2 -2
- data/_includes/themes/j1/blocks/footer/generator.html +2 -2
- data/_includes/themes/j1/layouts/content_generator_blog_archive.html +21 -18
- data/_includes/themes/j1/layouts/content_generator_collection.html +4 -4
- data/_includes/themes/j1/layouts/content_generator_page.html +11 -59
- data/_includes/themes/j1/layouts/content_generator_post.html +7 -7
- data/_includes/themes/j1/layouts/layout_metadata_generator.html +2 -2
- data/_includes/themes/j1/modules/connectors/ad/google-adsense.html +1 -1
- data/_includes/themes/j1/modules/connectors/ads +2 -2
- data/_includes/themes/j1/modules/connectors/analytic/google-analytics.html +1 -1
- data/_includes/themes/j1/modules/connectors/analytics +2 -2
- data/_includes/themes/j1/modules/connectors/comment/disqus.html +1 -1
- 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 +9 -5
- data/_includes/themes/j1/procedures/global/attributes_loader.proc +117 -0
- data/_includes/themes/j1/procedures/global/create_bs_button.proc +11 -10
- data/_includes/themes/j1/procedures/global/create_word_cloud.proc +14 -12
- 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/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 +38 -39
- data/_layouts/blog_archive.html +4 -3
- data/_layouts/collection.html +1 -1
- data/_layouts/default.html +3 -3
- data/_layouts/home.html +3 -3
- data/_layouts/page.html +2 -2
- data/_layouts/post.html +3 -3
- data/apps/public/cc/cc.yml +3 -5
- data/assets/data/authclient.html +7 -7
- data/assets/data/banner.html +31 -26
- data/assets/data/carousel.json +1 -1
- data/assets/data/cookiebar.html +21 -17
- data/assets/data/footer.html +1 -1
- data/assets/data/galleries.json +1 -1
- data/assets/data/gallery_customizer.html +2 -2
- data/assets/data/mdi_icons.json +1 -1
- data/assets/data/menu.html +6 -6
- data/assets/data/mmenu.html +6 -6
- data/assets/data/mmenu_sidebar.html +1 -1
- data/assets/data/mmenu_toc.html +1 -1
- data/assets/data/panel.html +191 -125
- data/assets/data/quicklinks.html +3 -3
- data/assets/data/search.json +2 -2
- data/assets/data/ssm.html +2 -2
- data/assets/data/themes.json +9 -7
- data/assets/data/twa_v1.json +1 -1
- 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/back2top.js +8 -10
- data/assets/themes/j1/adapter/js/{mdb.js → bmd.js} +11 -11
- data/assets/themes/j1/adapter/js/carousel.js +136 -135
- 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/framer.js +2 -6
- data/assets/themes/j1/adapter/js/gallery_customizer.js +2 -2
- data/assets/themes/j1/adapter/js/j1.js +45 -21
- data/assets/themes/j1/adapter/js/jf_gallery.js +2 -2
- 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/mmenu.js +17 -11
- data/assets/themes/j1/adapter/js/navigator.js +139 -67
- 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/searcher.js +2 -2
- data/assets/themes/j1/adapter/js/ssm.js +28 -11
- data/assets/themes/j1/adapter/js/themer.js +68 -122
- data/assets/themes/j1/adapter/js/toccer.js +10 -2
- data/assets/themes/j1/core/css/animate.css +17 -0
- data/assets/themes/j1/core/css/{fontawesome.css → icon-fonts/fontawesome.css} +31 -12
- data/assets/themes/j1/core/css/{fontawesome.min.css → icon-fonts/fontawesome.min.css} +0 -0
- data/assets/themes/j1/core/css/{iconify-icons.css → icon-fonts/iconify.css} +51 -38
- data/assets/themes/j1/core/css/{iconify-icons.min.css → icon-fonts/iconify.min.css} +1 -1
- data/assets/themes/j1/core/css/{material-design-icons.css → icon-fonts/materialdesign.css} +326 -244
- data/assets/themes/j1/core/css/icon-fonts/materialdesign.min.css +1 -0
- data/assets/themes/j1/core/css/{twemoji.css → icon-fonts/twemoji.css} +61 -51
- data/assets/themes/j1/core/css/{twemoji.min.css → icon-fonts/twemoji.min.css} +0 -0
- data/assets/themes/j1/core/css/{bootstrap.css → themes/bootstrap/bootstrap.css} +54 -48
- data/assets/themes/j1/core/css/themes/bootstrap/bootstrap.min.css +6 -0
- data/assets/themes/j1/core/css/themes/uno-dark/bootstrap.css +8115 -0
- 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 +22415 -0
- data/assets/themes/j1/core/css/themes/uno-light/bootstrap.min.css +8 -0
- data/assets/themes/j1/core/css/vendor.css +116 -13448
- data/assets/themes/j1/core/css/vendor.min.css +1 -7
- data/assets/themes/j1/core/js/template.js +2 -2
- 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/bsThemeSwitcher/js/switcher.js +46 -38
- data/assets/themes/j1/modules/bsThemeSwitcher/js/switcher.min.js +19 -13
- 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 +15 -10
- data/assets/themes/j1/modules/carousel/css/theme/uno.min.css +8 -9
- data/assets/themes/j1/modules/clipboard/css/theme/uno.css +7 -7
- data/assets/themes/j1/modules/clipboard/css/theme/uno.min.css +8 -45
- 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/justifiedGallery/css/theme/uno.css +8 -9
- 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 +11 -12
- data/assets/themes/j1/modules/lightbox/js/lightbox.min.js +11 -27
- data/assets/themes/j1/modules/mdiPreviewer/css/previewer.css +82 -0
- data/assets/themes/j1/modules/mdiPreviewer/css/previewer.min.css +15 -0
- data/{lib/starter_web/collections/posts/private → assets/themes/j1/modules/mdiPreviewer/js}/readme +0 -0
- data/assets/themes/j1/modules/mmenuLight/css/theme/uno.css +3 -3
- 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/tocbot/css/theme/uno.css +27 -21
- data/assets/themes/j1/modules/tocbot/css/theme/uno.min.css +8 -82
- data/assets/themes/j1/modules/twemoji/css/picker/twemoji-picker.css +153 -0
- data/assets/themes/j1/modules/twemoji/css/picker/twemoji-picker.min.css +19 -0
- data/assets/themes/j1/modules/twemoji/js/picker/twemoji-picker.js +12 -13
- data/assets/themes/j1/modules/twemoji/js/picker/twemoji-picker.min.js +12 -268
- data/assets/themes/j1/modules/twemoji/js/twemoji.js +11 -20
- data/assets/themes/j1/modules/twemoji/js/twemoji.min.js +11 -17
- data/lib/j1/version.rb +1 -1
- data/lib/j1_app/j1_auth_manager/config.rb +10 -5
- data/lib/j1_app/j1_auth_manager/views/auth_manager_ui.erb +5 -5
- data/lib/starter_web/Gemfile +1 -1
- data/lib/starter_web/_config.yml +75 -9
- data/lib/starter_web/_data/apps/carousel.yml +8 -9
- data/lib/starter_web/_data/apps/defaults/carousel.yml +2 -3
- data/lib/starter_web/_data/apps/defaults/gallery_customizer.yml +1 -2
- data/lib/starter_web/_data/apps/defaults/justified_gallery.yml +1 -2
- data/lib/starter_web/_data/apps/defaults/light_gallery.yml +1 -2
- data/lib/starter_web/_data/apps/defaults/lightbox.yml +1 -2
- data/lib/starter_web/_data/apps/gallery_customizer.yml +1 -2
- data/lib/starter_web/_data/apps/justified_gallery.yml +4 -5
- data/lib/starter_web/_data/apps/light_gallery.yml +1 -2
- data/lib/starter_web/_data/apps/lightbox.yml +1 -2
- data/lib/starter_web/_data/blocks/banner.yml +46 -37
- data/lib/starter_web/_data/blocks/defaults/banner.yml +17 -17
- data/lib/starter_web/_data/blocks/defaults/footer.yml +2 -3
- data/lib/starter_web/_data/blocks/defaults/panel.yml +6 -6
- data/lib/starter_web/_data/blocks/footer.yml +2 -3
- data/lib/starter_web/_data/blocks/panel.yml +43 -38
- data/lib/starter_web/_data/builder/blog_navigator.yml +1 -2
- data/lib/starter_web/_data/{template_settings.yml → j1_config.yml} +55 -5
- data/lib/starter_web/_data/layouts/app.yml +1 -2
- data/lib/starter_web/_data/layouts/blog_archive.yml +1 -2
- data/lib/starter_web/_data/layouts/collection.yml +1 -2
- data/lib/starter_web/_data/layouts/home.yml +10 -31
- data/lib/starter_web/_data/layouts/post.yml +1 -2
- data/lib/starter_web/_data/layouts/raw.yml +1 -2
- data/lib/starter_web/_data/modules/advertising.yml +0 -1
- data/lib/starter_web/_data/modules/attics.yml +0 -1
- data/lib/starter_web/_data/modules/authentication.yml +0 -1
- data/lib/starter_web/_data/modules/back2top.yml +1 -1
- data/lib/starter_web/_data/modules/defaults/attics.yml +0 -1
- data/lib/starter_web/_data/modules/defaults/authentication.yml +0 -1
- data/lib/starter_web/_data/modules/defaults/cookiebar.yml +3 -1
- data/lib/starter_web/_data/modules/defaults/framer.yml +1 -3
- data/lib/starter_web/_data/modules/defaults/jekyll_search.yml +0 -1
- data/lib/starter_web/_data/modules/defaults/log4javascript.yml +4 -5
- data/lib/starter_web/_data/modules/defaults/log4r.yml +1 -2
- data/lib/starter_web/_data/modules/defaults/navigator.yml +6 -6
- data/lib/starter_web/_data/modules/defaults/stickybits.yml +1 -2
- data/lib/starter_web/_data/modules/defaults/themer.yml +10 -15
- data/lib/starter_web/_data/modules/defaults/toccer.yml +0 -1
- data/lib/starter_web/_data/modules/framer.yml +1 -2
- data/lib/starter_web/_data/modules/log4javascript.yml +4 -5
- data/lib/starter_web/_data/modules/log4r.yml +1 -2
- data/lib/starter_web/_data/modules/navigator_menu.yml +3 -3
- data/lib/starter_web/_data/modules/themer.yml +0 -17
- data/lib/starter_web/_data/private.yml +56 -108
- data/lib/starter_web/_data/resources.yml +139 -38
- data/lib/starter_web/_includes/attributes.asciidoc +194 -0
- data/lib/starter_web/_includes/documents/licenses/mit.asciidoc +19 -0
- data/lib/starter_web/{collections/posts/protected → _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/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/modules/icons/j1/favicon.ico +0 -0
- data/lib/starter_web/assets/images/modules/icons/j1/j1-256x256.png +0 -0
- data/lib/starter_web/assets/images/modules/icons/j1/j1-32x32.ico +0 -0
- data/lib/starter_web/assets/images/modules/icons/j1/j1-512x512.png +0 -0
- data/lib/starter_web/assets/images/modules/icons/j1/j1-64x64.png +0 -0
- data/lib/starter_web/assets/images/modules/icons/j1/j1.ico +0 -0
- data/lib/starter_web/assets/images/modules/icons/j1/scalable/j1.svg +31 -35
- data/{assets/README.md → lib/starter_web/collections/posts/private/_posts/readme} +0 -0
- data/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 +70 -72
- data/lib/starter_web/collections/posts/public/featured/_posts/2018-05-01-confusion-about-base-url.adoc +17 -5
- data/lib/starter_web/collections/posts/public/featured/_posts/2019-05-01-top-open-source-static-site-generators.adoc +33 -26
- data/lib/starter_web/collections/posts/public/featured/_posts/2019-06-01-about-cookies.adoc +25 -22
- 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 +493 -502
- 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 +220 -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 +14 -5
- 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/package.json +2 -2
- data/lib/starter_web/pages/protected/site_search.adoc +8 -19
- data/lib/starter_web/pages/public/blog/navigator/archive.html +13 -19
- data/lib/starter_web/pages/public/blog/navigator/archive/categoryview.html +14 -20
- data/lib/starter_web/pages/public/blog/navigator/archive/dateview.html +14 -20
- data/lib/starter_web/pages/public/blog/navigator/archive/tagview.html +12 -13
- data/lib/starter_web/pages/public/learn/kickstarter/web_in_a_day/100_meet_and_greet_jekyll.adoc +12 -17
- data/lib/starter_web/pages/public/learn/kickstarter/web_in_a_day/200_preparations.adoc +14 -20
- data/lib/starter_web/pages/public/learn/kickstarter/web_in_a_day/300_first_awesome_web.adoc +13 -19
- 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 +83 -102
- data/lib/starter_web/pages/public/learn/roundtrip/100_present_videos.adoc +42 -52
- data/lib/starter_web/pages/public/learn/roundtrip/200_typography.adoc +48 -60
- data/lib/starter_web/pages/public/learn/roundtrip/300_icon_fonts.adoc +75 -86
- data/lib/starter_web/pages/public/learn/roundtrip/400_asciidoc_extensions.adoc +108 -133
- data/lib/starter_web/pages/public/learn/roundtrip/410_bs_modals_extentions.adoc +28 -39
- data/lib/starter_web/pages/public/learn/roundtrip/420_responsive_tables_extensions.adoc +228 -92
- data/lib/starter_web/pages/public/learn/roundtrip/500_themes.adoc +140 -56
- 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} +27 -41
- data/lib/starter_web/pages/public/legal/de/300_privacy.adoc +5 -11
- data/lib/starter_web/pages/public/legal/en/300_privacy.adoc +25 -31
- data/lib/starter_web/pages/public/legal/en/400_license_agreement.adoc +3 -2
- 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 +66 -65
- 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 +1371 -595
- data/lib/starter_web/pages/public/previewer/iframer.adoc +2 -8
- data/lib/starter_web/pages/public/previewer/mdi_icons_preview.adoc +11 -20
- data/lib/starter_web/pages/public/previewer/rouge.adoc +200 -0
- data/lib/starter_web/pages/public/previewer/twitter_emoji_preview.adoc +23 -30
- 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/deck_of_posts.adoc +162 -0
- data/lib/starter_web/pages/public/{learn/examples → test_pages}/floating_ad.adoc +7 -21
- data/lib/starter_web/pages/public/{learn/examples → test_pages}/floating_div.adoc +24 -38
- data/lib/starter_web/pages/public/test_pages/nav_pagination_tester.adoc +283 -0
- data/lib/starter_web/pages/public/test_pages/page_attribute_tester.adoc +195 -0
- data/lib/starter_web/pages/public/test_pages/responsive_images.adoc +212 -0
- data/lib/starter_web/pages/public/test_pages/responsive_tables.adoc +209 -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 +134 -124
- data/_includes/themes/j1/blocks/footer/boxes/about_box.proc.org +0 -40
- 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/themes/j1/core/css/bootstrap.min.css +0 -6
- data/assets/themes/j1/core/css/material-design-icons.min.css +0 -1
- data/assets/themes/j1/core/css/theme_extensions.css +0 -9812
- data/assets/themes/j1/core/css/theme_extensions.min.css +0 -1
- data/assets/themes/j1/core/css/uno.css +0 -10247
- data/assets/themes/j1/core/css/uno.min.css +0 -1
- 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/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/lib/starter_web/_data/modules/defaults/cookie_consent.yml +0 -132
- 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/000_bs_tour.1.asciidoc +0 -120
- data/lib/starter_web/pages/public/learn/roundtrip/000_bs_tour.adoc +0 -144
- data/lib/starter_web/pages/public/learn/roundtrip/000_bs_tour_api.adoc +0 -642
- 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
@@ -12,7 +12,7 @@ How do we use cookies?
|
|
12
12
|
|
13
13
|
A number of our pages use cookies to remember:
|
14
14
|
|
15
|
-
* your display preferences, such as contrast
|
15
|
+
* your display preferences, such as contrast color settings or font size
|
16
16
|
* if you have already replied to a survey pop-up that asks you if the
|
17
17
|
content was helpful or not (so you won't be asked again)
|
18
18
|
* if you have agreed (or not) to our use of cookies on this site
|
@@ -30,132 +30,133 @@ resource_options:
|
|
30
30
|
alt: the-place-1920x1280-bw
|
31
31
|
---
|
32
32
|
|
33
|
+
// Page content
|
34
|
+
// =============================================================================
|
33
35
|
|
34
36
|
[[responsive-design]]
|
35
37
|
== Full Responsive
|
36
38
|
|
37
|
-
A good user experience browsing a Web is one of the most important
|
38
|
-
a site has to offer as a must. Beside excellent content. Presenting
|
39
|
-
at
|
40
|
-
brilliant. J1 Template
|
41
|
-
best user experience on all modern devices.
|
39
|
+
A good user experience browsing a Web site is one of the most important
|
40
|
+
feature a site has to offer as a must. Beside excellent content. Presenting
|
41
|
+
content at its best on all devices, for all window sizes makes an excellent
|
42
|
+
Web brilliant. J1 Template supports your Web for full responsiveness, for
|
43
|
+
the best user experience on all modern devices.
|
42
44
|
|
43
45
|
=== Bootstrap 4 Integration
|
44
46
|
|
45
47
|
To not sidetrack your audience by irritating user interface (UI) components,
|
46
48
|
J1 Template is based on Bootstrap. Bootstrap is one of the most popular
|
47
49
|
frameworks for web development used today. J1 is based on Bootstrap V4, the
|
48
|
-
last current version to support your visitors by common elements for
|
49
|
-
|
50
|
+
last current version to support your visitors by common elements for navigation,
|
51
|
+
data input, tables, and many other components more.
|
50
52
|
|
51
53
|
For your development projects, Bootstrap simplifies HTML programming a lot,
|
52
54
|
offers excellent JS support for interactive components like navigation
|
53
|
-
elements, cards, forms etc.
|
55
|
+
elements, cards, forms, etc.
|
54
56
|
|
55
57
|
[[current-technology]]
|
56
58
|
== HTML5 · CSS3 · JS
|
57
59
|
|
58
|
-
The Internet is a
|
59
|
-
are set every year. J1 Template combines modern technologies for the
|
60
|
-
of static Webs to make a
|
61
|
-
development, languages and tools.
|
60
|
+
The Internet is a rapidly changing world. Like the fashion industries, new
|
61
|
+
trends are set every year. J1 Template combines modern technologies for the
|
62
|
+
world of static Webs to make a site unique using current standards in terms
|
63
|
+
of web development, languages, and tools.
|
62
64
|
|
63
65
|
|
64
66
|
=== HTML5 + CSS3
|
65
67
|
|
66
68
|
J1 is using HTML5 for structuring content on the World Wide Web. The current
|
67
|
-
version of the HTML standard
|
69
|
+
version of the HTML standard offers a lot of new features including detailed
|
68
70
|
processing models to support more interoperable implementations. It extends
|
69
|
-
and improves HTML markups available. HTML5 introduces application
|
70
|
-
|
71
|
-
|
72
|
-
|
73
|
-
in mind.
|
71
|
+
and improves HTML markups available. HTML5 introduces application programming
|
72
|
+
interfaces (APIs) for more complex web applications. For the same reasons,
|
73
|
+
the new HTML standard is also a good choice for modern cross-platform mobile
|
74
|
+
applications, because it includes features designed with mobile devices in mind.
|
74
75
|
|
75
76
|
Many new features are included with HTML5. To natively support multimedia and
|
76
|
-
graphical content, the new
|
77
|
-
|
78
|
-
|
77
|
+
graphical content, the new <video>, <audio> and <canvas> elements were added.
|
78
|
+
Besides this, support for scalable vector graphics (SVG) and an API called
|
79
|
+
MathML for mathematical formulas are now available.
|
79
80
|
|
80
|
-
The new standard allows to use so-called
|
81
|
-
documents. New structure elements such as
|
82
|
-
|
83
|
-
|
81
|
+
The new standard allows to use so-called semantic markup elements for your
|
82
|
+
documents. New structure elements such as <main>, <section>, <article>,
|
83
|
+
<header> or <footer> (and many more) were added. Better structured HTML code
|
84
|
+
can help people having disabilities to read the pages presented better.
|
84
85
|
|
85
|
-
CSS is designed to enable the separation of presentation and content.
|
86
|
-
|
87
|
-
|
88
|
-
presentation.
|
86
|
+
CSS is designed to enable the separation of presentation and content. Including
|
87
|
+
layout, colors, and fonts for example. This separation improves content
|
88
|
+
accessibility, provide more flexibility and control in the presentation.
|
89
89
|
|
90
90
|
Separation of formatting and content also makes it feasible to present the
|
91
91
|
same page in different styles. For example, the themes feature of J1 Template
|
92
|
-
|
92
|
+
makes use of this.
|
93
93
|
|
94
|
-
CSS3 is divided into several separate components called
|
94
|
+
CSS3 is divided into several separate components called modules. Each module
|
95
95
|
adds new capabilities or extends features defined in the former CSS2 standard.
|
96
|
-
HTML5 in combination with CSS3 allows
|
97
|
-
pages that can be viewed on all current devices like Mobiles, Tablets
|
98
|
-
classic Desktop PC. The new HTML5 elements plus CSS3 modules can be
|
99
|
-
replacement for
|
100
|
-
webpages based on
|
96
|
+
HTML5 in combination with CSS3 allows creating modern and modular code for
|
97
|
+
web pages that can be viewed on all current devices like Mobiles, Tablets,
|
98
|
+
or the classic Desktop PC. The new HTML5 elements plus CSS3 modules can be
|
99
|
+
used as a replacement for proprietary solutions like Adobe Flash to build
|
100
|
+
modern webpages based on open standards.
|
101
101
|
|
102
102
|
=== Javascript
|
103
103
|
|
104
104
|
HTML5 and CSS3 can do a lot. Content placement and basic methods for the
|
105
|
-
dynamic of elements can be done using pure HTML5 and CSS3. For more
|
106
|
-
|
105
|
+
dynamic of elements can be done using pure HTML5 and CSS3. For more complex
|
106
|
+
solutions like modules, the support of Javascript is needed.
|
107
107
|
|
108
|
-
J1 Template has build-in a wide range of JS
|
109
|
-
website
|
110
|
-
lightboxes and so on.
|
108
|
+
J1 Template has build-in a wide range of JS-powered modules to support a
|
109
|
+
website e.g. the navigation, for presenting image data in galleries,
|
110
|
+
lightboxes, and so on.
|
111
111
|
|
112
112
|
|
113
113
|
[[launch-ready]]
|
114
114
|
== Start in No Time
|
115
115
|
|
116
|
-
The base idea of J1 Template is to give all people a
|
117
|
-
to create a website with no need to start by web development or
|
118
|
-
from the beginning. A website based on J1 is using build-in
|
119
|
-
engines. As a result, the process to generate HTML code from
|
120
|
-
is done automatically and allows you to concentrate on what
|
121
|
-
your content.
|
116
|
+
The base idea of the J1 Template is to give all people a toolset at their
|
117
|
+
hands to create a website with no need to start by web development or
|
118
|
+
web design from the beginning. A website based on J1 is using build-in
|
119
|
+
templates and engines. As a result, the process to generate HTML code from
|
120
|
+
your content is done automatically and allows you to concentrate on what
|
121
|
+
truly matters: your content.
|
122
|
+
|
123
|
+
Using J1, you can instantly start a web project by creating your content and
|
124
|
+
not by start learning the deep web development technologies.
|
122
125
|
|
123
|
-
Using J1, you can instantly start a web project by creating your content
|
124
|
-
and not by start learning the the deep of web development technologies.
|
125
126
|
|
126
127
|
=== Create your Web
|
127
128
|
|
128
|
-
J1 is highly
|
129
|
-
created. The template system creates static web pages using Jekyll as
|
130
|
-
|
129
|
+
J1 is highly customizable. Based on a pure configuration, a website can be
|
130
|
+
created. The template system creates static web pages using Jekyll as the
|
131
|
+
base HTML code generator. Static websites are fast and secure but simple
|
131
132
|
to manage. No complex database systems and PHP interfaces are needed.
|
132
133
|
|
133
134
|
To present a static website, only a web server environment is needed. To
|
134
135
|
publish a website on the Internet, many possible platforms can be used like
|
135
|
-
Github, Netlify or Heroku for example - for free!
|
136
|
+
Github, Netlify, or Heroku for example - for free!
|
136
137
|
|
137
|
-
The Internet is not a peaceful place. Every site accessible from the public
|
138
|
-
attacked from the first second if published. Static websites are robust,
|
139
|
-
and that
|
140
|
-
offender attacking your website
|
141
|
-
|
138
|
+
The Internet is not a peaceful place. Every site accessible from the public
|
139
|
+
is attacked from the first second if published. Static websites are robust,
|
140
|
+
fast and that’s import: intrinsically secure. That means: not changeable.
|
141
|
+
No offender attacking your website can break your site. Because it’s static
|
142
|
+
or in other words: unchangeable, unbreakable from its nature.
|
142
143
|
|
143
144
|
This makes a static website for the better.
|
144
145
|
|
145
146
|
=== Modules and Apps
|
146
147
|
|
147
|
-
It
|
148
|
-
Content Management Systems (CMS) like
|
148
|
+
It’s predictable what base components are needed for a modern website. For
|
149
|
+
Content Management Systems (CMS) like WordPress, Joomla, or Drupal a huge
|
149
150
|
number of modules are available to extend a site by e.g. Apps like image
|
150
|
-
galleries, video players, calendars etc.
|
151
|
+
galleries, video players, calendars, etc.
|
151
152
|
|
152
|
-
This is a bit different for static webs as they don
|
153
|
-
|
154
|
-
|
153
|
+
This is a bit different for static webs as they don’t have a central Management
|
154
|
+
System as CMS does to integrate external code. There no ecosystem, no
|
155
|
+
marketplace to get apps and modules from.
|
155
156
|
|
156
157
|
Luckily, it is not that hard to integrate external components into the world
|
157
158
|
of Jekyll. But one of the objectives of J1 is to give people a ready-to-use
|
158
|
-
toolset without the need to install, to integrate components that expected
|
159
|
+
toolset without the need to install, to integrate components that are expected
|
159
160
|
as a need.
|
160
161
|
|
161
162
|
A rich set of modules are already included. The modules support common use
|
@@ -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
|
|
@@ -22,6 +22,8 @@ regenerate: false
|
|
22
22
|
|
23
23
|
resources: [ rouge ]
|
24
24
|
resource_options:
|
25
|
+
- toccer:
|
26
|
+
collapseDepth: 3
|
25
27
|
- attic:
|
26
28
|
padding_top: 400
|
27
29
|
padding_bottom: 50
|
@@ -35,31 +37,27 @@ resource_options:
|
|
35
37
|
href: https://unsplash.com/@clemono
|
36
38
|
---
|
37
39
|
|
40
|
+
// Page Initializer
|
41
|
+
// =============================================================================
|
38
42
|
// Enable the Liquid Preprocessor
|
39
|
-
//
|
40
43
|
:page-liquid:
|
41
44
|
|
42
|
-
// Set
|
43
|
-
//
|
45
|
+
// Set page (local) attributes here
|
46
|
+
// -----------------------------------------------------------------------------
|
47
|
+
//:my-asciidoc-attribute:
|
48
|
+
// :scrollbars:
|
44
49
|
|
50
|
+
// Load Liquid procedures
|
51
|
+
// -----------------------------------------------------------------------------
|
52
|
+
{% capture load_attributes %}themes/{{site.template.name}}/procedures/global/attributes_loader.proc{%endcapture%}
|
45
53
|
|
46
|
-
|
47
|
-
|
48
|
-
{%
|
54
|
+
// Load page attributes
|
55
|
+
// -----------------------------------------------------------------------------
|
56
|
+
{% include {{load_attributes}} scope="all" %}
|
49
57
|
|
50
58
|
|
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
|
-
|
59
|
+
// Page content
|
60
|
+
// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
|
63
61
|
++++
|
64
62
|
<!-- Prepend H1 tag here -->
|
65
63
|
<div id="h1_theme_name" class="row mb-3">
|
@@ -98,16 +96,465 @@ include::{includedir}/attributes.asciidoc[tag=urls]
|
|
98
96
|
</div>
|
99
97
|
++++
|
100
98
|
|
99
|
+
== Bootstrap Material Design
|
100
|
+
|
101
101
|
lorem:sentences[5]
|
102
102
|
|
103
|
+
=== MD Color Palette
|
104
|
+
|
105
|
+
The MD color palette comprises primary and accent colors that can be used for
|
106
|
+
illustration or to develop your brand colors. They’ve been designed to work
|
107
|
+
harmoniously with each other.
|
108
|
+
|
109
|
+
The color palette starts with primary colors and fills in the spectrum to
|
110
|
+
create a complete and usable palette for Android, Web, and iOS. Google
|
111
|
+
suggests using the 500 colors as the primary colors in your app and the
|
112
|
+
other colors as accents colors.
|
113
|
+
|
114
|
+
=== Red and Pink
|
115
|
+
++++
|
116
|
+
<div class="row col-list">
|
117
|
+
<div class="color-palette col-lg-12">
|
118
|
+
<div class="color-group col-lg-6">
|
119
|
+
<ul>
|
120
|
+
<li class="color main-color" style="background-color: #f44336;"> <span class="name light-strong">Red</span> <span class="shade light-strong">500</span> <span class="hex light-strong">#f44336</span> </li>
|
121
|
+
<li class="color dark" style="background-color: #ffebee;"><span class="shade expanded">50</span><span class="hex">#ffebee</span> </li>
|
122
|
+
<li class="color dark" style="background-color: #ffcdd2;"><span class="shade">100</span><span class="hex">#ffcdd2</span> </li>
|
123
|
+
<li class="color dark" style="background-color: #ef9a9a"><span class="shade expanded">200</span><span class="hex">#ef9a9a</span> </li>
|
124
|
+
<li class="color dark" style="background-color: #e57373;"><span class="shade">300</span><span class="hex">#e57373</span> </li>
|
125
|
+
<li class="color" style="background-color: #ef5350;"><span class="shade expanded">400</span><span class="hex">#ef5350</span> </li>
|
126
|
+
<li class="color" style="background-color: #f44336;"><span class="shade">500</span><span class="hex">#f44336</span> </li>
|
127
|
+
<li class="color" style="background-color: #e53935;"><span class="shade expanded">600</span><span class="hex">#e53935</span> </li>
|
128
|
+
<li class="color" style="background-color: #d32f2f;"><span class="shade">700</span><span class="hex">#d32f2f</span> </li>
|
129
|
+
<li class="color" style="background-color: #c62828;"><span class="shade expanded">800</span><span class="hex">#c62828</span> </li>
|
130
|
+
<li class="color" style="background-color: #b71c1c;"><span class="shade expanded">900</span><span class="hex">#b71c1c</span> </li>
|
131
|
+
<li class="color dark divide" style="background-color: #ff8a80;"><span class="shade accent">A100</span><span class="hex">#ff8a80</span> </li>
|
132
|
+
<li class="color light-strong" style="background-color: #ff5252;"><span class="shade accent expanded">A200</span><span class="hex">#ff5252</span> </li>
|
133
|
+
<li class="color" style="background-color: #ff1744;"><span class="shade accent expanded">A400</span><span class="hex">#ff1744</span> </li>
|
134
|
+
<li class="color" style="background-color: #d50000;"><span class="shade accent">A700</span><span class="hex">#d50000</span> </li>
|
135
|
+
</ul>
|
136
|
+
</div>
|
137
|
+
<div class="color-group col-lg-6">
|
138
|
+
<ul>
|
139
|
+
<li class="color main-color" style="background-color: #E91E63;"> <span class="name light-strong">Pink</span> <span class="shade light-strong">500</span> <span class="hex light-strong">#e91e63</span> </li>
|
140
|
+
<li class="color dark" style="background-color: #fce4ec;"><span class="shade expanded">50</span><span class="hex">#fce4ec</span> </li>
|
141
|
+
<li class="color dark" style="background-color: #f8bbd0;"><span class="shade">100</span><span class="hex">#f8bbd0</span> </li>
|
142
|
+
<li class="color dark" style="background-color: #f48fb1;"><span class="shade expanded">200</span><span class="hex">#f48fb1</span> </li>
|
143
|
+
<li class="color light-strong" style="background-color: #f06292;"><span class="shade">300</span><span class="hex">#f06292</span> </li>
|
144
|
+
<li class="color " style="background-color: #ec407a;"><span class="shade expanded">400</span><span class="hex">#ec407a</span> </li>
|
145
|
+
<li class="color" style="background-color: #e91e63;"><span class="shade">500</span><span class="hex">#e91e63</span> </li>
|
146
|
+
<li class="color" style="background-color: #d81b60;"><span class="shade expanded">600</span><span class="hex">#d81b60</span> </li>
|
147
|
+
<li class="color" style="background-color: #c2185b;"><span class="shade">700</span><span class="hex">#c2185b</span> </li>
|
148
|
+
<li class="color" style="background-color: #ad1457;"><span class="shade">800</span><span class="hex">#ad1457</span> </li>
|
149
|
+
<li class="color" style="background-color: #880e4f;"><span class="shade">900</span><span class="hex">#880e4f</span> </li>
|
150
|
+
<li class="color dark divide" style="background-color: #ff80ab;"><span class="shade accent">A100</span><span class="hex">#ff80ab</span> </li>
|
151
|
+
<li class="color light-strong" style="background-color: #ff4081;"><span class="shade accent expanded">A200</span><span class="hex">#ff4081</span> </li>
|
152
|
+
<li class="color" style="background-color: #f50057;"><span class="shade accent expanded">A400</span><span class="hex">#f50057</span> </li>
|
153
|
+
<li class="color" style="background-color: #c51162;"><span class="shade accent">A700</span><span class="hex">#c51162</span> </li>
|
154
|
+
</ul>
|
155
|
+
</div>
|
156
|
+
</div>
|
157
|
+
</div>
|
158
|
+
++++
|
159
|
+
|
160
|
+
|
161
|
+
=== Purple and Deep Purple
|
162
|
+
++++
|
163
|
+
<div class="row col-list">
|
164
|
+
<div class="color-palette col-lg-12">
|
165
|
+
<div class="color-group col-lg-6">
|
166
|
+
<ul>
|
167
|
+
<li class="color main-color" style="background-color: #9c27b0;"> <span class="name">Purple</span> <span class="shade">500</span> <span class="hex">#9c27b0</span> </li>
|
168
|
+
<li class="color dark" style="background-color: #f3e5f5;"><span class="shade expanded">50</span><span class="hex">#f3e5f5</span> </li>
|
169
|
+
<li class="color dark" style="background-color: #e1bee7;"><span class="shade">100</span><span class="hex">#e1bee7</span> </li>
|
170
|
+
<li class="color dark" style="background-color: #ce93d8;"><span class="shade expanded">200</span><span class="hex">#ce93d8</span> </li>
|
171
|
+
<li class="color light-strong" style="background-color: #ba68c8;"><span class="shade">300</span><span class="hex">#ba68c8</span> </li>
|
172
|
+
<li class="color light-strong" style="background-color: #ab47bc;"><span class="shade expanded">400</span><span class="hex">#ab47bc</span> </li>
|
173
|
+
<li class="color" style="background-color: #9c27b0;"><span class="shade">500</span><span class="hex">#9c27b0</span> </li>
|
174
|
+
<li class="color" style="background-color: #8e24aa;"><span class="shade expanded">600</span><span class="hex">#8e24aa</span> </li>
|
175
|
+
<li class="color" style="background-color: #7b1fa2;"><span class="shade">700</span><span class="hex">#7b1fa2</span> </li>
|
176
|
+
<li class="color" style="background-color: #6a1b9a;"><span class="shade expanded">800</span><span class="hex">#6a1b9a</span> </li>
|
177
|
+
<li class="color" style="background-color: #4a148c;"><span class="shade expanded">900</span><span class="hex">#4a148c</span> </li>
|
178
|
+
<li class="color dark divide" style="background-color: #ea80fc;"><span class="shade accent">A100</span><span class="hex">#ea80fc</span> </li>
|
179
|
+
<li class="color light-strong" style="background-color: #e040fb;"><span class="shade accent expanded">A200</span><span class="hex">#e040fb</span> </li>
|
180
|
+
<li class="color" style="background-color: #d500f9;"><span class="shade accent expanded">A400</span><span class="hex">#d500f9</span> </li>
|
181
|
+
<li class="color" style="background-color: #aa00ff;"><span class="shade accent">A700</span><span class="hex">#aa00ff</span> </li>
|
182
|
+
</ul>
|
183
|
+
</div>
|
184
|
+
<div class="color-group col-lg-6">
|
185
|
+
<ul>
|
186
|
+
<li class="color main-color" style="background-color: #673ab7;"> <span class="name">Deep Purple</span> <span class="shade">500</span> <span class="hex">#673ab7</span> </li>
|
187
|
+
<li class="color dark" style="background-color: #ede7f6;"><span class="shade expanded">50</span><span class="hex">#ede7f6</span> </li>
|
188
|
+
<li class="color dark" style="background-color: #d1c4e9;"><span class="shade">100</span><span class="hex">#d1c4e9</span> </li>
|
189
|
+
<li class="color dark" style="background-color: #b39ddb;"><span class="shade expanded">200</span><span class="hex">#b39ddb</span> </li>
|
190
|
+
<li class="color" style="background-color: #9575cd;"><span class="shade">300</span><span class="hex">#9575cd</span> </li>
|
191
|
+
<li class="color" style="background-color: #7e57c2;"><span class="shade expanded">400</span><span class="hex">#7e57c2</span> </li>
|
192
|
+
<li class="color" style="background-color: #673ab7;"><span class="shade">500</span><span class="hex">#673ab7</span> </li>
|
193
|
+
<li class="color" style="background-color: #5e35b1;"><span class="shade expanded">600</span><span class="hex">#5e35b1</span> </li>
|
194
|
+
<li class="color" style="background-color: #512da8;"><span class="shade">700</span><span class="hex">#512da8</span> </li>
|
195
|
+
<li class="color" style="background-color: #4527a0;"><span class="shade expanded">800</span><span class="hex">#4527a0</span> </li>
|
196
|
+
<li class="color" style="background-color: #311b92;"><span class="shade expanded">900</span><span class="hex">#311b92</span> </li>
|
197
|
+
<li class="color dark divide" style="background-color: #b388ff;"><span class="shade accent">A100</span><span class="hex">#b388ff</span> </li>
|
198
|
+
<li class="color light-strong" style="background-color: #7c4dff;"><span class="shade accent expanded">A200</span><span class="hex">#7c4dff</span> </li>
|
199
|
+
<li class="color" style="background-color: #651fff;"><span class="shade accent expanded">A400</span><span class="hex">#651fff</span> </li>
|
200
|
+
<li class="color" style="background-color: #6200ea;"><span class="shade accent">A700</span><span class="hex">#6200ea</span> </li>
|
201
|
+
</ul>
|
202
|
+
</div>
|
203
|
+
</div>
|
204
|
+
</div>
|
205
|
+
++++
|
206
|
+
|
207
|
+
=== Indigo and Blue
|
208
|
+
++++
|
209
|
+
<div class="row col-list">
|
210
|
+
<div class="color-palette col-lg-12">
|
211
|
+
<div class="color-group col-lg-6">
|
212
|
+
<ul>
|
213
|
+
<li class="color main-color" style="background-color: #3f51b5;"> <span class="name">Indigo</span> <span class="shade">500</span> <span class="hex">#3f51b5</span> </li>
|
214
|
+
<li class="color dark" style="background-color: #e8eaf6;"><span class="shade expanded">50</span><span class="hex">#e8eaf6</span> </li>
|
215
|
+
<li class="color dark" style="background-color: #c5cae9;"><span class="shade">100</span><span class="hex">#c5cae9</span> </li>
|
216
|
+
<li class="color dark" style="background-color: #9fa8da;"><span class="shade expanded">200</span><span class="hex">#9fa8da</span> </li>
|
217
|
+
<li class="color" style="background-color: #7986cb;"><span class="shade">300</span><span class="hex">#7986cb</span> </li>
|
218
|
+
<li class="color" style="background-color: #5c6bc0;"><span class="shade expanded">400</span><span class="hex">#5c6bc0</span> </li>
|
219
|
+
<li class="color" style="background-color: #3f51b5;"><span class="shade">500</span><span class="hex">#3f51b5</span> </li>
|
220
|
+
<li class="color" style="background-color: #3949ab;"><span class="shade expanded">600</span><span class="hex">#3949ab</span> </li>
|
221
|
+
<li class="color" style="background-color: #303f9f;"><span class="shade">700</span><span class="hex">#303f9f</span> </li>
|
222
|
+
<li class="color" style="background-color: #283593;"><span class="shade expanded">800</span><span class="hex">#283593</span> </li>
|
223
|
+
<li class="color" style="background-color: #1a237e;"><span class="shade expanded">900</span><span class="hex">#1a237e</span> </li>
|
224
|
+
<li class="color dark divide" style="background-color: #8c9eff;"><span class="shade accent">A100</span><span class="hex">#8c9eff</span> </li>
|
225
|
+
<li class="color" style="background-color: #536dfe;"><span class="shade accent expanded">A200</span><span class="hex">#536dfe</span> </li>
|
226
|
+
<li class="color" style="background-color: #3d5afe;"><span class="shade accent expanded">A400</span><span class="hex">#3d5afe</span> </li>
|
227
|
+
<li class="color" style="background-color: #304ffe;"><span class="shade accent">A700</span><span class="hex">#304ffe</span> </li>
|
228
|
+
</ul>
|
229
|
+
</div>
|
230
|
+
<div class="color-group col-lg-6">
|
231
|
+
<ul>
|
232
|
+
<li class="color main-color" style="background-color: #2196F3;"> <span class="name light-strong">Blue</span> <span class="shade light-strong">500</span> <span class="hex light-strong">#2196f3</span> </li>
|
233
|
+
<li class="color dark" style="background-color: #e3f2fd;"><span class="shade expanded">50</span><span class="hex">#e3f2fd</span> </li>
|
234
|
+
<li class="color dark" style="background-color: #bbdefb;"><span class="shade">100</span><span class="hex">#bbdefb</span> </li>
|
235
|
+
<li class="color dark" style="background-color: #90caf9;"><span class="shade expanded">200</span><span class="hex">#90caf9</span> </li>
|
236
|
+
<li class="color dark" style="background-color: #64b5f6;"><span class="shade">300</span><span class="hex">#64b5f6</span> </li>
|
237
|
+
<li class="color dark" style="background-color: #42a5f5;"><span class="shade expanded">400</span><span class="hex">#42a5f5</span> </li>
|
238
|
+
<li class="color light-strong" style="background-color: #2196f3;"><span class="shade">500</span><span class="hex">#2196f3</span> </li>
|
239
|
+
<li class="color" style="background-color: #1e88e5;"><span class="shade expanded">600</span><span class="hex">#1e88e5</span> </li>
|
240
|
+
<li class="color" style="background-color: #1976d2;"><span class="shade">700</span><span class="hex">#1976d2</span> </li>
|
241
|
+
<li class="color" style="background-color: #1565c0;"><span class="shade expanded">800</span><span class="hex">#1565c0</span> </li>
|
242
|
+
<li class="color" style="background-color: #0d47a1;"><span class="shade expanded">900</span><span class="hex">#0d47a1</span> </li>
|
243
|
+
<li class="color dark divide" style="background-color: #82b1ff;"><span class="shade accent">A100</span><span class="hex">#82b1ff</span> </li>
|
244
|
+
<li class="color light-strong" style="background-color: #448aff;"><span class="shade accent expanded">A200</span><span class="hex">#448aff</span> </li>
|
245
|
+
<li class="color" style="background-color: #2979ff;"><span class="shade accent expanded">A400</span><span class="hex">#2979ff</span> </li>
|
246
|
+
<li class="color" style="background-color: #2962ff;"><span class="shade accent">A700</span><span class="hex">#2962ff</span> </li>
|
247
|
+
</ul>
|
248
|
+
</div>
|
249
|
+
</div>
|
250
|
+
</div>
|
251
|
+
++++
|
252
|
+
|
253
|
+
=== Light Blue and Cyan
|
254
|
+
++++
|
255
|
+
<div class="row col-list">
|
256
|
+
<div class="color-palette col-lg-12">
|
257
|
+
<div class="color-group col-lg-6">
|
258
|
+
<ul>
|
259
|
+
<li class="color main-color" style="background-color: #03a9f4;"> <span class="name dark">Light Blue</span> <span class="shade dark">500</span> <span class="hex dark">#03a9f4</span> </li>
|
260
|
+
<li class="color dark" style="background-color: #e1f5fe;"><span class="shade expanded">50</span><span class="hex">#e1f5fe</span> </li>
|
261
|
+
<li class="color dark" style="background-color: #b3e5fc;"><span class="shade">100</span><span class="hex">#b3e5fc</span> </li>
|
262
|
+
<li class="color dark" style="background-color: #81d4fa;"><span class="shade expanded">200</span><span class="hex">#81d4fa</span> </li>
|
263
|
+
<li class="color dark" style="background-color: #4fc3f7;"><span class="shade">300</span><span class="hex">#4fc3f7</span> </li>
|
264
|
+
<li class="color dark" style="background-color: #29b6f6;"><span class="shade expanded">400</span><span class="hex">#29b6f6</span> </li>
|
265
|
+
<li class="color dark" style="background-color: #03a9f4;"><span class="shade">500</span><span class="hex">#03a9f4</span> </li>
|
266
|
+
<li class="color light-strong" style="background-color: #039be5;"><span class="shade expanded">600</span><span class="hex">#039be5</span> </li>
|
267
|
+
<li class="color" style="background-color: #0288d1;"><span class="shade">700</span><span class="hex">#0288d1</span> </li>
|
268
|
+
<li class="color" style="background-color: #0277bd;"><span class="shade expanded">800</span><span class="hex">#0277bd</span> </li>
|
269
|
+
<li class="color" style="background-color: #01579b;"><span class="shade expanded">900</span><span class="hex">#01579b</span> </li>
|
270
|
+
<li class="color dark divide" style="background-color: #80d8ff;"><span class="shade accent">A100</span><span class="hex">#80d8ff</span> </li>
|
271
|
+
<li class="color dark" style="background-color: #40c4ff;"><span class="shade accent expanded">A200</span><span class="hex">#40c4ff</span> </li>
|
272
|
+
<li class="color dark" style="background-color: #00b0ff;"><span class="shade accent expanded">A400</span><span class="hex">#00b0ff</span> </li>
|
273
|
+
<li class="color light-strong" style="background-color: #0091ea;"><span class="shade accent">A700</span><span class="hex">#0091ea</span> </li>
|
274
|
+
</ul>
|
275
|
+
</div>
|
276
|
+
<div class="color-group col-lg-6">
|
277
|
+
<ul>
|
278
|
+
<li class="color main-color" style="background-color: #00bcd4;"> <span class="name dark">Cyan</span> <span class="shade dark">500</span> <span class="hex dark">#00bcd4</span> </li>
|
279
|
+
<li class="color dark" style="background-color: #e0f7fa;"><span class="shade expanded">50</span><span class="hex">#e0f7fa</span> </li>
|
280
|
+
<li class="color dark" style="background-color: #b2ebf2;"><span class="shade">100</span><span class="hex">#b2ebf2</span> </li>
|
281
|
+
<li class="color dark" style="background-color: #80deea;"><span class="shade expanded">200</span><span class="hex">#80deea</span> </li>
|
282
|
+
<li class="color dark" style="background-color: #4dd0e1;"><span class="shade">300</span><span class="hex">#4dd0e1</span> </li>
|
283
|
+
<li class="color dark" style="background-color: #26c6da;"><span class="shade expanded">400</span><span class="hex">#26c6da</span> </li>
|
284
|
+
<li class="color dark" style="background-color: #00bcd4;"><span class="shade">500</span><span class="hex">#00bcd4</span> </li>
|
285
|
+
<li class="color dark" style="background-color: #00acc1;"><span class="shade expanded">600</span><span class="hex">#00acc1</span> </li>
|
286
|
+
<li class="color" style="background-color: #0097a7;"><span class="shade">700</span><span class="hex">#0097a7</span> </li>
|
287
|
+
<li class="color" style="background-color: #00838f;"><span class="shade expanded">800</span><span class="hex">#00838f</span> </li>
|
288
|
+
<li class="color" style="background-color: #006064;"><span class="shade expanded">900</span><span class="hex">#006064</span> </li>
|
289
|
+
<li class="color dark divide" style="background-color: #84ffff;"><span class="shade accent">A100</span><span class="hex">#84ffff</span> </li>
|
290
|
+
<li class="color dark" style="background-color: #18ffff;"><span class="shade accent expanded">A200</span><span class="hex">#18ffff</span> </li>
|
291
|
+
<li class="color dark" style="background-color: #00e5ff;"><span class="shade accent expanded">A400</span><span class="hex">#00e5ff</span> </li>
|
292
|
+
<li class="color dark" style="background-color: #00b8d4;"><span class="shade accent">A700</span><span class="hex">#00b8d4</span> </li>
|
293
|
+
</ul>
|
294
|
+
</div>
|
295
|
+
</div>
|
296
|
+
</div>
|
297
|
+
++++
|
298
|
+
|
299
|
+
=== Teal and Green
|
300
|
+
++++
|
301
|
+
<div class="row col-list">
|
302
|
+
<div class="color-palette col-lg-12">
|
303
|
+
<div class="color-group col-lg-6">
|
304
|
+
<ul>
|
305
|
+
<li class="color main-color" style="background-color: #009688;"> <span class="name light-strong">Teal</span> <span class="shade light-strong">500</span> <span class="hex light-strong">#009688</span> </li>
|
306
|
+
<li class="color dark" style="background-color: #e0f2f1;"><span class="shade expanded">50</span><span class="hex">#e0f2f1</span> </li>
|
307
|
+
<li class="color dark" style="background-color: #b2dfdb;"><span class="shade">100</span><span class="hex">#b2dfdb</span> </li>
|
308
|
+
<li class="color dark" style="background-color: #80cbc4;"><span class="shade expanded">200</span><span class="hex">#80cbc4</span> </li>
|
309
|
+
<li class="color dark" style="background-color: #4db6ac;"><span class="shade">300</span><span class="hex">#4db6ac</span> </li>
|
310
|
+
<li class="color dark" style="background-color: #26a69a;"><span class="shade expanded">400</span><span class="hex">#26a69a</span> </li>
|
311
|
+
<li class="color light-strong" style="background-color: #009688;"><span class="shade">500</span><span class="hex">#009688</span> </li>
|
312
|
+
<li class="color light-strong" style="background-color: #00897b;"><span class="shade expanded">600</span><span class="hex">#00897b</span> </li>
|
313
|
+
<li class="color light-strong" style="background-color: #00796b;"><span class="shade">700</span><span class="hex">#00796b</span> </li>
|
314
|
+
<li class="color" style="background-color: #00695c;"><span class="shade expanded">800</span><span class="hex">#00695c</span> </li>
|
315
|
+
<li class="color" style="background-color: #004d40;"><span class="shade expanded">900</span><span class="hex">#004d40</span> </li>
|
316
|
+
<li class="color dark divide" style="background-color: #a7ffeb;"><span class="shade accent">A100</span><span class="hex">#a7ffeb</span> </li>
|
317
|
+
<li class="color dark" style="background-color: #64ffda;"><span class="shade accent expanded">A200</span><span class="hex">#64ffda</span> </li>
|
318
|
+
<li class="color dark" style="background-color: #1de9b6;"><span class="shade accent expanded">A400</span><span class="hex">#1de9b6</span> </li>
|
319
|
+
<li class="color dark" style="background-color: #00bfa5;"><span class="shade accent">A700</span><span class="hex">#00bfa5</span> </li>
|
320
|
+
</ul>
|
321
|
+
</div>
|
322
|
+
<div class="color-group col-lg-6">
|
323
|
+
<ul>
|
324
|
+
<li class="color main-color" style="background-color: #4caf50;"> <span class="name dark">Green</span> <span class="shade dark">500</span> <span class="hex dark">#4caf50</span> </li>
|
325
|
+
<li class="color dark" style="background-color: #e8f5e9;"><span class="shade expanded">50</span><span class="hex">#e8f5e9</span> </li>
|
326
|
+
<li class="color dark" style="background-color: #c8e6c9;"><span class="shade">100</span><span class="hex">#c8e6c9</span> </li>
|
327
|
+
<li class="color dark" style="background-color: #a5d6a7;"><span class="shade expanded">200</span><span class="hex">#a5d6a7</span> </li>
|
328
|
+
<li class="color dark" style="background-color: #81c784;"><span class="shade">300</span><span class="hex">#81c784</span> </li>
|
329
|
+
<li class="color dark" style="background-color: #66bb6a;"><span class="shade expanded">400</span><span class="hex">#66bb6a</span> </li>
|
330
|
+
<li class="color dark" style="background-color: #4caf50;"><span class="shade">500</span><span class="hex">#4caf50</span> </li>
|
331
|
+
<li class="color light-strong" style="background-color: #43a047;"><span class="shade expanded">600</span><span class="hex">#43a047</span> </li>
|
332
|
+
<li class="color" style="background-color: #388e3c;"><span class="shade">700</span><span class="hex">#388e3c</span> </li>
|
333
|
+
<li class="color" style="background-color: #2e7d32;"><span class="shade expanded">800</span><span class="hex">#2e7d32</span> </li>
|
334
|
+
<li class="color" style="background-color: #1b5e20;"><span class="shade expanded">900</span><span class="hex">#1b5e20</span> </li>
|
335
|
+
<li class="color dark divide" style="background-color: #b9f6ca;"><span class="shade accent">A100</span><span class="hex">#b9f6ca</span> </li>
|
336
|
+
<li class="color dark" style="background-color: #69f0ae;"><span class="shade accent expanded">A200</span><span class="hex">#69f0ae</span> </li>
|
337
|
+
<li class="color dark" style="background-color: #00e676;"><span class="shade accent expanded">A400</span><span class="hex">#00e676</span> </li>
|
338
|
+
<li class="color dark" style="background-color: #00c853;"><span class="shade accent">A700</span><span class="hex">#00c853</span> </li>
|
339
|
+
</ul>
|
340
|
+
</div>
|
341
|
+
</div>
|
342
|
+
</div>
|
343
|
+
++++
|
344
|
+
|
345
|
+
=== Light Green and Lime
|
346
|
+
++++
|
347
|
+
<div class="row col-list">
|
348
|
+
<div class="color-palette col-lg-12">
|
349
|
+
<div class="color-group col-lg-6">
|
350
|
+
<ul>
|
351
|
+
<li class="color main-color" style="background-color: #8bc34a;"> <span class="name dark">Light Green</span> <span class="shade dark">500</span> <span class="hex dark">#8bc34a</span> </li>
|
352
|
+
<li class="color dark" style="background-color: #f1f8e9;"><span class="shade expanded">50</span><span class="hex">#f1f8e9</span> </li>
|
353
|
+
<li class="color dark" style="background-color: #dcedc8;"><span class="shade">100</span><span class="hex">#dcedc8</span> </li>
|
354
|
+
<li class="color dark" style="background-color: #c5e1a5;"><span class="shade expanded">200</span><span class="hex">#c5e1a5</span> </li>
|
355
|
+
<li class="color dark" style="background-color: #aed581;"><span class="shade">300</span><span class="hex">#aed581</span> </li>
|
356
|
+
<li class="color dark" style="background-color: #9ccc65;"><span class="shade expanded">400</span><span class="hex">#9ccc65</span> </li>
|
357
|
+
<li class="color dark" style="background-color: #8bc34a;"><span class="shade">500</span><span class="hex">#8bc34a</span> </li>
|
358
|
+
<li class="color dark" style="background-color: #7cb342;"><span class="shade expanded">600</span><span class="hex">#7cb342</span> </li>
|
359
|
+
<li class="color light-strong" style="background-color: #689f38;"><span class="shade">700</span><span class="hex">#689f38</span> </li>
|
360
|
+
<li class="color" style="background-color: #558b2f;"><span class="shade expanded">800</span><span class="hex">#558b2f</span> </li>
|
361
|
+
<li class="color" style="background-color: #33691e;"><span class="shade expanded">900</span><span class="hex">#33691e</span> </li>
|
362
|
+
<li class="color dark divide" style="background-color: #ccff90;"><span class="shade accent">A100</span><span class="hex">#ccff90</span> </li>
|
363
|
+
<li class="color dark" style="background-color: #b2ff59;"><span class="shade accent expanded">A200</span><span class="hex">#b2ff59</span> </li>
|
364
|
+
<li class="color dark" style="background-color: #76ff03;"><span class="shade accent expanded">A400</span><span class="hex">#76ff03</span> </li>
|
365
|
+
<li class="color dark" style="background-color: #64dd17;"><span class="shade accent">A700</span><span class="hex">#64dd17</span> </li>
|
366
|
+
</ul>
|
367
|
+
</div>
|
368
|
+
<div class="color-group col-lg-6">
|
369
|
+
<ul>
|
370
|
+
<li class="color main-color" style="background-color: #cddc39;"> <span class="name dark">Lime</span> <span class="shade dark">500</span> <span class="hex dark">#cddc39</span> </li>
|
371
|
+
<li class="color dark" style="background-color: #f9fbe7;"><span class="shade expanded">50</span><span class="hex">#f9fbe7</span> </li>
|
372
|
+
<li class="color dark" style="background-color: #f0f4c3;"><span class="shade">100</span><span class="hex">#f0f4c3</span> </li>
|
373
|
+
<li class="color dark" style="background-color: #e6ee9c;"><span class="shade expanded">200</span><span class="hex">#e6ee9c</span> </li>
|
374
|
+
<li class="color dark" style="background-color: #dce775;"><span class="shade">300</span><span class="hex">#dce775</span> </li>
|
375
|
+
<li class="color dark" style="background-color: #d4e157;"><span class="shade expanded">400</span><span class="hex">#d4e157</span> </li>
|
376
|
+
<li class="color dark" style="background-color: #cddc39;"><span class="shade">500</span><span class="hex">#cddc39</span> </li>
|
377
|
+
<li class="color dark" style="background-color: #c0ca33;"><span class="shade expanded">600</span><span class="hex">#c0ca33</span> </li>
|
378
|
+
<li class="color dark" style="background-color: #afb42b;"><span class="shade">700</span><span class="hex">#afb42b</span> </li>
|
379
|
+
<li class="color dark" style="background-color: #9e9d24;"><span class="shade expanded">800</span><span class="hex">#9e9d24</span> </li>
|
380
|
+
<li class="color" style="background-color: #827717;"><span class="shade expanded">900</span><span class="hex">#827717</span> </li>
|
381
|
+
<li class="color dark divide" style="background-color: #f4ff81;"><span class="shade accent">A100</span><span class="hex">#f4ff81</span> </li>
|
382
|
+
<li class="color dark" style="background-color: #eeff41;"><span class="shade accent expanded">A200</span><span class="hex">#eeff41</span> </li>
|
383
|
+
<li class="color dark" style="background-color: #c6ff00;"><span class="shade accent expanded">A400</span><span class="hex">#c6ff00</span> </li>
|
384
|
+
<li class="color dark" style="background-color: #aeea00;"><span class="shade accent">A700</span><span class="hex">#aeea00</span> </li>
|
385
|
+
</ul>
|
386
|
+
</div>
|
387
|
+
</div>
|
388
|
+
</div>
|
389
|
+
++++
|
390
|
+
|
391
|
+
=== Yellow and Amber
|
392
|
+
++++
|
393
|
+
<div class="row col-list">
|
394
|
+
<div class="color-palette col-lg-12">
|
395
|
+
<div class="color-group col-lg-6">
|
396
|
+
<ul>
|
397
|
+
<li class="color main-color" style="background-color: #ffeb3b;"> <span class="name dark">Yellow</span> <span class="shade dark">500</span> <span class="hex dark">#ffeb3b</span> </li>
|
398
|
+
<li class="color dark" style="background-color: #fffde7;"><span class="shade expanded">50</span><span class="hex">#fffde7</span> </li>
|
399
|
+
<li class="color dark" style="background-color: #fff9c4;"><span class="shade">100</span><span class="hex">#fff9c4</span> </li>
|
400
|
+
<li class="color dark" style="background-color: #fff59d;"><span class="shade expanded">200</span><span class="hex">#fff59d</span> </li>
|
401
|
+
<li class="color dark" style="background-color: #fff176;"><span class="shade">300</span><span class="hex">#fff176</span> </li>
|
402
|
+
<li class="color dark" style="background-color: #ffee58;"><span class="shade expanded">400</span><span class="hex">#ffee58</span> </li>
|
403
|
+
<li class="color dark" style="background-color: #ffeb3b;"><span class="shade">500</span><span class="hex">#ffeb3b</span> </li>
|
404
|
+
<li class="color dark" style="background-color: #fdd835;"><span class="shade expanded">600</span><span class="hex">#fdd835</span> </li>
|
405
|
+
<li class="color dark" style="background-color: #fbc02d;"><span class="shade">700</span><span class="hex">#fbc02d</span> </li>
|
406
|
+
<li class="color dark" style="background-color: #f9a825;"><span class="shade expanded">800</span><span class="hex">#f9a825</span> </li>
|
407
|
+
<li class="color dark" style="background-color: #f57f17;"><span class="shade expanded">900</span><span class="hex">#f57f17</span> </li>
|
408
|
+
<li class="color dark divide" style="background-color: #ffff8d;"><span class="shade accent">A100</span><span class="hex">#ffff8d</span> </li>
|
409
|
+
<li class="color dark" style="background-color: #ffff00;"><span class="shade accent expanded">A200</span><span class="hex">#ffff00</span> </li>
|
410
|
+
<li class="color dark" style="background-color: #ffea00;"><span class="shade accent expanded">A400</span><span class="hex">#ffea00</span> </li>
|
411
|
+
<li class="color dark" style="background-color: #ffd600;"><span class="shade accent">A700</span><span class="hex">#ffd600</span> </li>
|
412
|
+
</ul>
|
413
|
+
</div>
|
414
|
+
<div class="color-group col-lg-6">
|
415
|
+
<ul>
|
416
|
+
<li class="color main-color" style="background-color: #ffc107;"> <span class="name dark">Amber</span> <span class="shade dark">500</span> <span class="hex dark">#ffc107</span> </li>
|
417
|
+
<li class="color dark" style="background-color: #fff8e1;"><span class="shade expanded">50</span><span class="hex">#fff8e1</span> </li>
|
418
|
+
<li class="color dark" style="background-color: #ffecb3;"><span class="shade">100</span><span class="hex">#ffecb3</span> </li>
|
419
|
+
<li class="color dark" style="background-color: #ffe082;"><span class="shade expanded">200</span><span class="hex">#ffe082</span> </li>
|
420
|
+
<li class="color dark" style="background-color: #ffd54f;"><span class="shade">300</span><span class="hex">#ffd54f</span> </li>
|
421
|
+
<li class="color dark" style="background-color: #ffca28;"><span class="shade expanded">400</span><span class="hex">#ffca28</span> </li>
|
422
|
+
<li class="color dark" style="background-color: #ffc107;"><span class="shade">500</span><span class="hex">#ffc107</span> </li>
|
423
|
+
<li class="color dark" style="background-color: #ffb300;"><span class="shade expanded">600</span><span class="hex">#ffb300</span> </li>
|
424
|
+
<li class="color dark" style="background-color: #ffa000;"><span class="shade">700</span><span class="hex">#ffa000</span> </li>
|
425
|
+
<li class="color dark" style="background-color: #ff8f00;"><span class="shade expanded">800</span><span class="hex">#ff8f00</span> </li>
|
426
|
+
<li class="color dark" style="background-color: #ff6f00;"><span class="shade expanded">900</span><span class="hex">#ff6f00</span> </li>
|
427
|
+
<li class="color dark divide" style="background-color: #ffe57f;"><span class="shade accent">A100</span><span class="hex">#ffe57f</span> </li>
|
428
|
+
<li class="color dark" style="background-color: #ffd740;"><span class="shade accent expanded">A200</span><span class="hex">#ffd740</span> </li>
|
429
|
+
<li class="color dark" style="background-color: #ffc400;"><span class="shade accent expanded">A400</span><span class="hex">#ffc400</span> </li>
|
430
|
+
<li class="color dark" style="background-color: #ffab00;"><span class="shade accent">A700</span><span class="hex">#ffab00</span> </li>
|
431
|
+
</ul>
|
432
|
+
</div>
|
433
|
+
</div>
|
434
|
+
</div>
|
435
|
+
++++
|
436
|
+
|
437
|
+
=== Orange and Deep Orange
|
438
|
+
++++
|
439
|
+
<div class="row col-list">
|
440
|
+
<div class="color-palette col-lg-12">
|
441
|
+
<div class="color-group col-lg-6">
|
442
|
+
<ul>
|
443
|
+
<li class="color main-color" style="background-color: #ff9800;"> <span class="name dark-when-small">Orange</span> <span class="shade dark-when-small">500</span> <span class="hex dark-when-small">#ff9800</span> </li>
|
444
|
+
<li class="color dark" style="background-color: #fff3e0;"><span class="shade expanded">50</span><span class="hex">#fff3e0</span> </li>
|
445
|
+
<li class="color dark" style="background-color: #ffe0b2;"><span class="shade">100</span><span class="hex">#ffe0b2</span> </li>
|
446
|
+
<li class="color dark" style="background-color: #ffcc80;"><span class="shade expanded">200</span><span class="hex">#ffcc80</span> </li>
|
447
|
+
<li class="color dark" style="background-color: #ffb74d;"><span class="shade">300</span><span class="hex">#ffb74d</span> </li>
|
448
|
+
<li class="color dark" style="background-color: #ffa726;"><span class="shade expanded">400</span><span class="hex">#ffa726</span> </li>
|
449
|
+
<li class="color dark" style="background-color: #ff9800;"><span class="shade">500</span><span class="hex">#ff9800</span> </li>
|
450
|
+
<li class="color dark" style="background-color: #fb8c00;"><span class="shade expanded">600</span><span class="hex">#fb8c00</span> </li>
|
451
|
+
<li class="color dark" style="background-color: #f57c00;"><span class="shade">700</span><span class="hex">#f57c00</span> </li>
|
452
|
+
<li class="color light-strong" style="background-color: #ef6c00;"><span class="shade expanded">800</span><span class="hex">#ef6c00</span> </li>
|
453
|
+
<li class="color" style="background-color: #e65100;"><span class="shade expanded">900</span><span class="hex">#e65100</span> </li>
|
454
|
+
<li class="color dark divide" style="background-color: #ffd180;"><span class="shade accent">A100</span><span class="hex">#ffd180</span> </li>
|
455
|
+
<li class="color dark" style="background-color: #ffab40;"><span class="shade accent expanded">A200</span><span class="hex">#ffab40</span> </li>
|
456
|
+
<li class="color dark" style="background-color: #ff9100;"><span class="shade accent expanded">A400</span><span class="hex">#ff9100</span> </li>
|
457
|
+
<li class="color dark" style="background-color: #ff6d00;"><span class="shade accent">A700</span><span class="hex">#ff6d00</span> </li>
|
458
|
+
</ul>
|
459
|
+
</div>
|
460
|
+
<div class="color-group col-lg-6">
|
461
|
+
<ul>
|
462
|
+
<li class="color main-color" style="background-color: #ff5722;"> <span class="name light-strong">Deep Orange</span> <span class="shade light-strong">500</span> <span class="hex light-strong">#ff5722</span> </li>
|
463
|
+
<li class="color dark" style="background-color: #fbe9e7;"><span class="shade expanded">50</span><span class="hex">#fbe9e7</span> </li>
|
464
|
+
<li class="color dark" style="background-color: #ffccbc;"><span class="shade">100</span><span class="hex">#ffccbc</span> </li>
|
465
|
+
<li class="color dark" style="background-color: #ffab91;"><span class="shade expanded">200</span><span class="hex">#ffab91</span> </li>
|
466
|
+
<li class="color dark" style="background-color: #ff8a65;"><span class="shade">300</span><span class="hex">#ff8a65</span> </li>
|
467
|
+
<li class="color dark" style="background-color: #ff7043;"><span class="shade expanded">400</span><span class="hex">#ff7043</span> </li>
|
468
|
+
<li class="color light-strong" style="background-color: #ff5722;"><span class="shade">500</span><span class="hex">#ff5722</span> </li>
|
469
|
+
<li class="color" style="background-color: #f4511e;"><span class="shade expanded">600</span><span class="hex">#f4511e</span> </li>
|
470
|
+
<li class="color" style="background-color: #e64a19;"><span class="shade">700</span><span class="hex">#e64a19</span> </li>
|
471
|
+
<li class="color" style="background-color: #d84315;"><span class="shade expanded">800</span><span class="hex">#d84315</span> </li>
|
472
|
+
<li class="color" style="background-color: #bf360c;"><span class="shade expanded">900</span><span class="hex">#bf360c</span> </li>
|
473
|
+
<li class="color dark divide" style="background-color: #ff9e80;"><span class="shade accent">A100</span><span class="hex">#ff9e80</span> </li>
|
474
|
+
<li class="color dark" style="background-color: #ff6e40;"><span class="shade accent expanded">A200</span><span class="hex">#ff6e40</span> </li>
|
475
|
+
<li class="color" style="background-color: #ff3d00;"><span class="shade accent expanded">A400</span><span class="hex">#ff3d00</span> </li>
|
476
|
+
<li class="color" style="background-color: #dd2c00;"><span class="shade accent">A700</span><span class="hex">#dd2c00</span> </li>
|
477
|
+
</ul>
|
478
|
+
</div>
|
479
|
+
</div>
|
480
|
+
</div>
|
481
|
+
++++
|
482
|
+
|
483
|
+
=== Brown and Grey
|
484
|
+
++++
|
485
|
+
<div class="row col-list">
|
486
|
+
<div class="color-palette col-lg-12">
|
487
|
+
<div class="color-group col-lg-6">
|
488
|
+
<ul>
|
489
|
+
<li class="color main-color" style="background-color: #795548;"> <span class="name">Brown</span> <span class="shade">500</span> <span class="hex">#795548</span> </li>
|
490
|
+
<li class="color dark" style="background-color: #efebe9;"><span class="shade expanded">50</span><span class="hex">#efebe9</span> </li>
|
491
|
+
<li class="color dark" style="background-color: #d7ccc8;"><span class="shade">100</span><span class="hex">#d7ccc8</span> </li>
|
492
|
+
<li class="color dark" style="background-color: #bcaaa4;"><span class="shade expanded">200</span><span class="hex">#bcaaa4</span> </li>
|
493
|
+
<li class="color light-strong" style="background-color: #a1887f;"><span class="shade">300</span><span class="hex">#a1887f</span> </li>
|
494
|
+
<li class="color" style="background-color: #8d6e63;"><span class="shade expanded">400</span><span class="hex">#8d6e63</span> </li>
|
495
|
+
<li class="color" style="background-color: #795548;"><span class="shade">500</span><span class="hex">#795548</span> </li>
|
496
|
+
<li class="color" style="background-color: #6d4c41;"><span class="shade expanded">600</span><span class="hex">#6d4c41</span> </li>
|
497
|
+
<li class="color" style="background-color: #5d4037;"><span class="shade">700</span><span class="hex">#5d4037</span> </li>
|
498
|
+
<li class="color" style="background-color: #4e342e;"><span class="shade expanded">800</span><span class="hex">#4e342e</span> </li>
|
499
|
+
<li class="color" style="background-color: #3e2723;"><span class="shade expanded">900</span><span class="hex">#3e2723</span> </li>
|
500
|
+
</ul>
|
501
|
+
</div>
|
502
|
+
<div class="color-group col-lg-6">
|
503
|
+
<ul>
|
504
|
+
<li class="color main-color" style="background-color: #9e9e9e;"> <span class="name dark-when-small">Grey</span> <span class="shade dark-when-small">500</span> <span class="hex dark-when-small">#9e9e9e</span> </li>
|
505
|
+
<li class="color dark" style="background-color: #fafafa;"><span class="shade expanded">50</span><span class="hex">#fafafa</span> </li>
|
506
|
+
<li class="color dark" style="background-color: #f5f5f5;"><span class="shade">100</span><span class="hex">#f5f5f5</span> </li>
|
507
|
+
<li class="color dark" style="background-color: #eeeeee;"><span class="shade expanded">200</span><span class="hex">#eeeeee</span> </li>
|
508
|
+
<li class="color dark" style="background-color: #e0e0e0;"><span class="shade">300</span><span class="hex">#e0e0e0</span> </li>
|
509
|
+
<li class="color dark" style="background-color: #bdbdbd;"><span class="shade expanded">400</span><span class="hex">#bdbdbd</span> </li>
|
510
|
+
<li class="color dark" style="background-color: #9e9e9e;"><span class="shade">500</span><span class="hex">#9e9e9e</span> </li>
|
511
|
+
<li class="color" style="background-color: #757575;"><span class="shade expanded">600</span><span class="hex">#757575</span> </li>
|
512
|
+
<li class="color" style="background-color: #616161;"><span class="shade">700</span><span class="hex">#616161</span> </li>
|
513
|
+
<li class="color" style="background-color: #424242;"><span class="shade expanded">800</span><span class="hex">#424242</span> </li>
|
514
|
+
<li class="color" style="background-color: #212121;"><span class="shade expanded">900</span><span class="hex">#212121</span> </li>
|
515
|
+
</ul>
|
516
|
+
</div>
|
517
|
+
</div>
|
518
|
+
</div>
|
519
|
+
++++
|
520
|
+
|
521
|
+
=== Blue Grey and BW
|
522
|
+
++++
|
523
|
+
<div class="row col-list">
|
524
|
+
<div class="color-palette col-lg-12">
|
525
|
+
<div class="color-group col-lg-6">
|
526
|
+
<ul>
|
527
|
+
<li class="color main-color" style="background-color: #607d8b;"> <span class="name light-strong">Blue Grey</span> <span class="shade light-strong">500</span> <span class="hex light-strong">#607d8b</span> </li>
|
528
|
+
<li class="color dark" style="background-color: #eceff1;"><span class="shade expanded">50</span><span class="hex">#eceff1</span> </li>
|
529
|
+
<li class="color dark" style="background-color: #cfd8dc;"><span class="shade">100</span><span class="hex">#cfd8dc</span> </li>
|
530
|
+
<li class="color dark" style="background-color: #b0bec5;"><span class="shade expanded">200</span><span class="hex">#b0bec5</span> </li>
|
531
|
+
<li class="color dark" style="background-color: #90a4ae;"><span class="shade">300</span><span class="hex">#90a4ae</span> </li>
|
532
|
+
<li class="color light-strong" style="background-color: #78909c;"><span class="shade expanded">400</span><span class="hex">#78909c</span> </li>
|
533
|
+
<li class="color" style="background-color: #607d8b;"><span class="shade">500</span><span class="hex">#607d8b</span> </li>
|
534
|
+
<li class="color" style="background-color: #546e7a;"><span class="shade expanded">600</span><span class="hex">#546e7a</span> </li>
|
535
|
+
<li class="color" style="background-color: #455a64;"><span class="shade">700</span><span class="hex">#455a64</span> </li>
|
536
|
+
<li class="color" style="background-color: #37474f;"><span class="shade expanded">800</span><span class="hex">#37474f</span> </li>
|
537
|
+
<li class="color" style="background-color: #263238;"><span class="shade expanded">900</span><span class="hex">#263238</span> </li>
|
538
|
+
</ul>
|
539
|
+
</div>
|
540
|
+
<div class="color-group col-lg-6">
|
541
|
+
<ul>
|
542
|
+
<li class="color" style="background-color: #000000;"><span class="shade accent">Black</span><span class="hex">#000000</span> </li>
|
543
|
+
<li class="color dark" style="background-color: #ffffff;"><span class="shade accent expanded">White</span><span class="hex">#ffffff</span> </li>
|
544
|
+
</ul>
|
545
|
+
</div>
|
546
|
+
</div>
|
547
|
+
</div>
|
548
|
+
++++
|
549
|
+
|
103
550
|
== Navbars
|
104
551
|
|
105
552
|
See examples for Bootstrap’s powerful, responsive navigation header, the
|
106
553
|
navbar. Includes support for branding, navigation, and more, including
|
107
554
|
support for the collapse plugin.
|
108
555
|
|
109
|
-
pass:[<i class="mdi mdi-book-open mdi-24px mdi-md-
|
110
|
-
|
556
|
+
pass:[<i class="mdi mdi-book-open-variant mdi-24px mdi-md-grey"></i>]
|
557
|
+
link:{bs_doc_components_navbar}[Bootstrap Docs {middot} Navbar, {browser-window--new}]
|
111
558
|
|
112
559
|
Theming the navbar has never been easier thanks to the combination of
|
113
560
|
theming classes and background-color utilities. Choose from `.navbar-light`
|
@@ -115,8 +562,8 @@ for use with light background colors, or '.navbar-dark' for dark background
|
|
115
562
|
colors. Then, customize with `.bg-*` utilities.
|
116
563
|
|
117
564
|
++++
|
118
|
-
<div class="doc-example">
|
119
|
-
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
|
565
|
+
<div class="doc-example mb-3">
|
566
|
+
<nav class="navbar navbar-expand-lg navbar-dark bg-dark mb-1">
|
120
567
|
<a class="navbar-brand" href="#">Navbar<div class="ripple-container"></div></a>
|
121
568
|
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor01" aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation">
|
122
569
|
<span class="navbar-toggler-icon"></span>
|
@@ -144,7 +591,7 @@ colors. Then, customize with `.bg-*` utilities.
|
|
144
591
|
</div>
|
145
592
|
</nav>
|
146
593
|
|
147
|
-
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
|
594
|
+
<nav class="navbar navbar-expand-lg navbar-dark bg-primary mb-1">
|
148
595
|
<a class="navbar-brand" href="#">Navbar</a>
|
149
596
|
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor02" aria-controls="navbarColor02" aria-expanded="false" aria-label="Toggle navigation">
|
150
597
|
<span class="navbar-toggler-icon"></span>
|
@@ -225,8 +672,8 @@ more with support for multiple sizes, states, and more. Bootstrap includes
|
|
225
672
|
several predefined button styles, each serving its own semantic purpose,
|
226
673
|
with a few extras thrown in for more control.
|
227
674
|
|
228
|
-
pass:[<i class="mdi mdi-book-open mdi-24px mdi-md-
|
229
|
-
|
675
|
+
pass:[<i class="mdi mdi-book-open-variant mdi-24px mdi-md-grey"></i>]
|
676
|
+
link:{bs_doc_components_buttons}[Bootstrap Docs {middot} Buttons, {browser-window--new}]
|
230
677
|
|
231
678
|
=== Active buttons
|
232
679
|
|
@@ -235,7 +682,7 @@ inset shadow) when active.
|
|
235
682
|
++++
|
236
683
|
<div class="doc-example mb-3">
|
237
684
|
<button type="button" class="btn btn-primary btn-raised">Primary</button>
|
238
|
-
<button type="button" class="btn btn-
|
685
|
+
<button type="button" class="btn btn-primary btn-raised">Secondary</button>
|
239
686
|
<button type="button" class="btn btn-success btn-raised">Success</button>
|
240
687
|
<button type="button" class="btn btn-info btn-raised">Info</button>
|
241
688
|
<button type="button" class="btn btn-warning btn-raised">Warning</button>
|
@@ -244,6 +691,18 @@ inset shadow) when active.
|
|
244
691
|
</div>
|
245
692
|
++++
|
246
693
|
|
694
|
+
[source, html, role="noclip"]
|
695
|
+
----
|
696
|
+
<button type="button" class="btn btn-primary btn-raised">Primary</button>
|
697
|
+
<button type="button" class="btn btn-primary btn-raised">Secondary</button>
|
698
|
+
<button type="button" class="btn btn-success btn-raised">Success</button>
|
699
|
+
<button type="button" class="btn btn-info btn-raised">Info</button>
|
700
|
+
<button type="button" class="btn btn-warning btn-raised">Warning</button>
|
701
|
+
<button type="button" class="btn btn-danger btn-raised">Danger</button>
|
702
|
+
<button type="button" class="btn btn-link btn-raised">Link</button>
|
703
|
+
----
|
704
|
+
|
705
|
+
|
247
706
|
=== Disabled buttons
|
248
707
|
|
249
708
|
Buttons look inactive by adding the disabled boolean attribute to any
|
@@ -251,7 +710,7 @@ Buttons look inactive by adding the disabled boolean attribute to any
|
|
251
710
|
++++
|
252
711
|
<div class="doc-example mb-3">
|
253
712
|
<button type="button" class="btn btn-primary btn-raised disabled">Primary</button>
|
254
|
-
<button type="button" class="btn btn-
|
713
|
+
<button type="button" class="btn btn-primary btn-raised disabled">Secondary</button>
|
255
714
|
<button type="button" class="btn btn-success btn-raised disabled">Success</button>
|
256
715
|
<button type="button" class="btn btn-info btn-raised disabled">Info</button>
|
257
716
|
<button type="button" class="btn btn-warning btn-raised disabled">Warning</button>
|
@@ -260,6 +719,17 @@ Buttons look inactive by adding the disabled boolean attribute to any
|
|
260
719
|
</div>
|
261
720
|
++++
|
262
721
|
|
722
|
+
[source, html, role="noclip"]
|
723
|
+
----
|
724
|
+
<button type="button" class="btn btn-primary btn-raised disabled">Primary</button>
|
725
|
+
<button type="button" class="btn btn-primary btn-raised disabled">Secondary</button>
|
726
|
+
<button type="button" class="btn btn-success btn-raised disabled">Success</button>
|
727
|
+
<button type="button" class="btn btn-info btn-raised disabled">Info</button>
|
728
|
+
<button type="button" class="btn btn-warning btn-raised disabled">Warning</button>
|
729
|
+
<button type="button" class="btn btn-danger btn-raised disabled">Danger</button>
|
730
|
+
<button type="button" class="btn btn-link btn-raised disabled">Link</button>
|
731
|
+
----
|
732
|
+
|
263
733
|
=== Outline buttons
|
264
734
|
|
265
735
|
In need of a button, but not the hefty background colors they bring? Replace
|
@@ -277,18 +747,63 @@ background images and colors on any button.
|
|
277
747
|
</div>
|
278
748
|
++++
|
279
749
|
|
750
|
+
[source, html, role="noclip"]
|
751
|
+
----
|
752
|
+
<button type="button" class="btn btn-outline-primary btn-raised">Primary</button>
|
753
|
+
<button type="button" class="btn btn-outline-secondary btn-raised">Secondary</button>
|
754
|
+
<button type="button" class="btn btn-outline-success btn-raised">Success</button>
|
755
|
+
<button type="button" class="btn btn-outline-info btn-raised">Info</button>
|
756
|
+
<button type="button" class="btn btn-outline-warning btn-raised">Warning</button>
|
757
|
+
<button type="button" class="btn btn-outline-danger btn-raised">Danger</button>
|
758
|
+
----
|
759
|
+
|
760
|
+
=== Flat buttons
|
761
|
+
|
762
|
+
Flat buttons are text-only buttons. They may be used in dialogs, toolbars,
|
763
|
+
or inline. They do not lift, but fill with color on press.
|
764
|
+
|
765
|
+
++++
|
766
|
+
<div class="doc-example">
|
767
|
+
<button type="button" class="btn btn-primary">Primary</button>
|
768
|
+
<button type="button" class="btn btn-secondary">Secondary</button>
|
769
|
+
<button type="button" class="btn btn-success">Success</button>
|
770
|
+
<button type="button" class="btn btn-info">Info</button>
|
771
|
+
<button type="button" class="btn btn-warning">Warning</button>
|
772
|
+
<button type="button" class="btn btn-danger">Danger</button>
|
773
|
+
<button type="button" class="btn btn-link">Link</button>
|
774
|
+
</div>
|
775
|
+
++++
|
776
|
+
|
777
|
+
[source, html, role="noclip"]
|
778
|
+
----
|
779
|
+
<button type="button" class="btn btn-primary">Primary</button>
|
780
|
+
<button type="button" class="btn btn-secondary">Secondary</button>
|
781
|
+
<button type="button" class="btn btn-success">Success</button>
|
782
|
+
<button type="button" class="btn btn-info">Info</button>
|
783
|
+
<button type="button" class="btn btn-warning">Warning</button>
|
784
|
+
<button type="button" class="btn btn-danger">Danger</button>
|
785
|
+
<button type="button" class="btn btn-link">Link</button>
|
786
|
+
----
|
787
|
+
|
788
|
+
|
280
789
|
=== Button sizes
|
281
790
|
|
282
791
|
Beside the default size, small and large buttons are available.
|
283
792
|
|
284
793
|
++++
|
285
794
|
<div class="doc-example mb-3">
|
286
|
-
<button type="button" class="btn btn-
|
287
|
-
<button type="button" class="btn btn-
|
288
|
-
<button type="button" class="btn btn-
|
795
|
+
<button type="button" class="btn btn-primary btn-raised btn-lg">Large button</button>
|
796
|
+
<button type="button" class="btn btn-primary btn-raised">Default button</button>
|
797
|
+
<button type="button" class="btn btn-primary btn-raised btn-sm">Small button</button>
|
289
798
|
</div>
|
290
799
|
++++
|
291
800
|
|
801
|
+
[source, html, role="noclip"]
|
802
|
+
----
|
803
|
+
<button type="button" class="btn btn-primary btn-raised btn-lg">Large button</button>
|
804
|
+
<button type="button" class="btn btn-primary btn-raised">Default button</button>
|
805
|
+
<button type="button" class="btn btn-primary btn-raised btn-sm">Small button</button>
|
806
|
+
----
|
292
807
|
=== Block level button
|
293
808
|
|
294
809
|
Create block level buttons—those that span the full width of a parent—by
|
@@ -301,17 +816,37 @@ adding .btn-block.
|
|
301
816
|
</div>
|
302
817
|
++++
|
303
818
|
|
819
|
+
[source, html, role="noclip"]
|
820
|
+
----
|
821
|
+
<button type="button"
|
822
|
+
class="btn btn-primary btn-lg btn-block btn-raised">
|
823
|
+
Block level button
|
824
|
+
</button>
|
825
|
+
<button type="button"
|
826
|
+
class="btn btn-secondary btn-lg btn-block btn-raised">
|
827
|
+
Block level button
|
828
|
+
</button>
|
829
|
+
----
|
830
|
+
|
304
831
|
=== Toggle button
|
305
832
|
|
306
833
|
++++
|
307
834
|
<div class="doc-example mb-3">
|
308
|
-
<button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false" autocomplete="off">
|
835
|
+
<button type="button" class="btn btn-primary btn-raised" data-toggle="button" aria-pressed="false" autocomplete="off">
|
309
836
|
Single toggle
|
310
837
|
</button>
|
311
838
|
</div>
|
312
839
|
++++
|
313
840
|
|
314
|
-
|
841
|
+
[source, html, role="noclip"]
|
842
|
+
----
|
843
|
+
<button type="button" class="btn btn-primary btn-raised"
|
844
|
+
data-toggle="button" aria-pressed="false" autocomplete="off">
|
845
|
+
Single toggle
|
846
|
+
</button>
|
847
|
+
----
|
848
|
+
|
849
|
+
=== Checkboxes and Radio buttons
|
315
850
|
|
316
851
|
Bootstrap’s .button styles can be applied to other elements, such as
|
317
852
|
`<label>`, to provide checkbox or radio style button toggling. The checked
|
@@ -319,36 +854,124 @@ state for these buttons is only updated via click event on the button.
|
|
319
854
|
|
320
855
|
++++
|
321
856
|
<div class="doc-example mb-3">
|
322
|
-
<div class="btn-group" data-toggle="buttons">
|
323
|
-
<label class="btn btn-secondary btn-raised btn-flex active">
|
324
|
-
<input type="checkbox" checked> Checkbox 1
|
325
|
-
</label>
|
326
|
-
<label class="btn btn-secondary btn-raised btn-flex">
|
327
|
-
<input type="checkbox"> Checkbox 2
|
328
|
-
</label>
|
329
|
-
<label class="btn btn-primary btn-flex btn-raised">
|
330
|
-
<input type="checkbox"> Checkbox 3
|
331
|
-
</label>
|
332
|
-
</div>
|
333
|
-
</div>
|
334
|
-
++++
|
335
|
-
|
336
|
-
++++
|
337
|
-
<div class="doc-example mb-5">
|
338
857
|
<div class="btn-group btn-group-toggle" data-toggle="buttons">
|
339
|
-
<label class="btn btn-
|
858
|
+
<label class="btn btn-primary btn-raised btn-flex active">
|
340
859
|
<input type="radio" name="options" id="option1" autocomplete="off" checked> Active
|
341
860
|
</label>
|
342
|
-
<label class="btn btn-
|
861
|
+
<label class="btn btn-primary btn-raised btn-flex">
|
343
862
|
<input type="radio" name="options" id="option2" autocomplete="off"> Radio
|
344
863
|
</label>
|
345
|
-
<label class="btn btn-
|
864
|
+
<label class="btn btn-primary btn-raised btn-flex">
|
346
865
|
<input type="radio" name="options" id="option3" autocomplete="off"> Radio
|
347
866
|
</label>
|
348
867
|
</div>
|
349
868
|
</div>
|
350
869
|
++++
|
351
870
|
|
871
|
+
[source, html, role="noclip"]
|
872
|
+
----
|
873
|
+
<div class="btn-group btn-group-toggle" data-toggle="buttons">
|
874
|
+
<label class="btn btn-primary btn-raised btn-flex active">
|
875
|
+
<input type="radio" name="options" id="option1" autocomplete="off" checked> Active
|
876
|
+
</label>
|
877
|
+
<label class="btn btn-primary btn-raised btn-flex">
|
878
|
+
<input type="radio" name="options" id="option2" autocomplete="off"> Radio
|
879
|
+
</label>
|
880
|
+
<label class="btn btn-primary btn-raised btn-flex">
|
881
|
+
<input type="radio" name="options" id="option3" autocomplete="off"> Radio
|
882
|
+
</label>
|
883
|
+
</div>
|
884
|
+
----
|
885
|
+
|
886
|
+
=== Floating action buttons
|
887
|
+
|
888
|
+
A floating action button represents the primary action in an application,
|
889
|
+
it is used for a promoted action.
|
890
|
+
|
891
|
+
pass:[<i class="mdi mdi-book-open-variant mdi-24px mdi-md-grey"></i>]
|
892
|
+
https://material.io/components/buttons-floating-action-button#types-of-transitions[Google Material Design {char-middot} Floating action buttons, {browser-window--new}]
|
893
|
+
|
894
|
+
++++
|
895
|
+
<div class="doc-example">
|
896
|
+
<button type="button" class="btn bmd-btn-fab btn-primary">
|
897
|
+
<i class="mdi mdi-plus mdi-2x"></i>
|
898
|
+
</button>
|
899
|
+
</div>
|
900
|
+
++++
|
901
|
+
|
902
|
+
[source, html, role="noclip"]
|
903
|
+
----
|
904
|
+
<button type="button" class="btn bmd-btn-fab">
|
905
|
+
<i class="mdi mdi-plus mdi-2x"></i>
|
906
|
+
</button>
|
907
|
+
----
|
908
|
+
|
909
|
+
==== Colors
|
910
|
+
|
911
|
+
++++
|
912
|
+
<div class="doc-example">
|
913
|
+
<button type="button" class="btn bmd-btn-fab btn-primary">
|
914
|
+
<i class="mdi mdi-plus mdi-2x"></i>
|
915
|
+
</button>
|
916
|
+
<button type="button" class="btn bmd-btn-fab btn-secondary">
|
917
|
+
<i class="mdi mdi-plus mdi-2x"></i>
|
918
|
+
</button>
|
919
|
+
<button type="button" class="btn bmd-btn-fab btn-danger">
|
920
|
+
<i class="mdi mdi-plus mdi-2x"></i>
|
921
|
+
</button>
|
922
|
+
<button type="button" class="btn bmd-btn-fab btn-info">
|
923
|
+
<i class="mdi mdi-plus mdi-2x"></i>
|
924
|
+
</button>
|
925
|
+
<button type="button" class="btn bmd-btn-fab btn-success">
|
926
|
+
<i class="mdi mdi-plus mdi-2x"></i>
|
927
|
+
</button>
|
928
|
+
<button type="button" class="btn bmd-btn-fab btn-warning">
|
929
|
+
<i class="mdi mdi-plus mdi-2x"></i>
|
930
|
+
</button>
|
931
|
+
<button type="button" class="btn bmd-btn-fab btn-dark">
|
932
|
+
<i class="mdi mdi-plus mdi-2x"></i>
|
933
|
+
</button>
|
934
|
+
<button type="button" class="btn bmd-btn-fab btn-light">
|
935
|
+
<i class="mdi mdi-plus mdi-2x"></i>
|
936
|
+
</button>
|
937
|
+
</div>
|
938
|
+
++++
|
939
|
+
|
940
|
+
[source, html, role="noclip"]
|
941
|
+
----
|
942
|
+
<button type="button" class="btn bmd-btn-fab btn-primary">
|
943
|
+
<i class="mdi mdi-plus mdi-2x"></i>
|
944
|
+
</button>
|
945
|
+
<button type="button" class="btn bmd-btn-fab btn-secondary">
|
946
|
+
<i class="mdi mdi-plus mdi-2x"></i>
|
947
|
+
</button>
|
948
|
+
...
|
949
|
+
<button type="button" class="btn bmd-btn-fab btn-dark">
|
950
|
+
<i class="mdi mdi-plus mdi-2x"></i>
|
951
|
+
</button>
|
952
|
+
<button type="button" class="btn bmd-btn-fab btn-light">
|
953
|
+
<i class="mdi mdi-plus mdi-2x"></i>
|
954
|
+
</button>
|
955
|
+
----
|
956
|
+
|
957
|
+
==== Sizes
|
958
|
+
|
959
|
+
A smaller sized, i.e. mini floating action button, is also available.
|
960
|
+
|
961
|
+
++++
|
962
|
+
<div class="doc-example">
|
963
|
+
<button type="button" class="btn btn-danger bmd-btn-fab bmd-btn-fab-sm">
|
964
|
+
<i class="mdi mdi-plus mdi-sm"></i>
|
965
|
+
</button>
|
966
|
+
</div>
|
967
|
+
++++
|
968
|
+
|
969
|
+
[source, html, role="noclip"]
|
970
|
+
----
|
971
|
+
<button type="button" class="btn btn-danger bmd-btn-fab bmd-btn-fab-sm">
|
972
|
+
<i class="mdi mdi-plus mdi-sm"></i>
|
973
|
+
</button>
|
974
|
+
----
|
352
975
|
|
353
976
|
== Typography
|
354
977
|
|
@@ -359,49 +982,43 @@ For a more inclusive and accessible type scale, it is assuemed that
|
|
359
982
|
the browser default root font-size (typically 16px) so visitors can
|
360
983
|
customize their browser defaults as needed.
|
361
984
|
|
362
|
-
pass:[<i class="mdi mdi-book-open mdi-24px mdi-md-
|
363
|
-
|
985
|
+
pass:[<i class="mdi mdi-book-open-variant mdi-24px mdi-md-grey"></i>]
|
986
|
+
link:{bs_doc_content_typography}[Bootstrap Docs {middot} Typography, {browser-window--new}]
|
364
987
|
|
365
988
|
=== Headings
|
366
989
|
|
367
990
|
++++
|
368
991
|
<div class="doc-example mb-3">
|
369
992
|
<div class="row mb-5">
|
370
|
-
|
371
|
-
<
|
372
|
-
|
373
|
-
|
374
|
-
|
375
|
-
|
376
|
-
|
377
|
-
|
378
|
-
|
379
|
-
|
380
|
-
|
381
|
-
|
382
|
-
<p class="lead">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
|
383
|
-
</div>
|
993
|
+
<div class="col-md-4">
|
994
|
+
<h1 class="notoc">Heading 1</h1>
|
995
|
+
<h2 class="notoc">Heading 2</h2>
|
996
|
+
<h3 class="notoc">Heading 3</h3>
|
997
|
+
<h4 class="notoc">Heading 4</h4>
|
998
|
+
<h5 class="notoc">Heading 5</h5>
|
999
|
+
<h6 class="notoc">Heading 6</h6>
|
1000
|
+
<h3 class="notoc">
|
1001
|
+
Heading 3
|
1002
|
+
<small class="text-muted">with muted text</small>
|
1003
|
+
</h3>
|
1004
|
+
<p class="lead">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
|
384
1005
|
</div>
|
385
1006
|
<div class="col-md-4">
|
386
|
-
<
|
387
|
-
|
388
|
-
|
389
|
-
|
390
|
-
|
391
|
-
|
392
|
-
<p>An abbreviation of the word attribute is <abbr title="attribute">attr</abbr>.</p>
|
393
|
-
</div>
|
1007
|
+
<h3 class="notoc">Example body text</h2>
|
1008
|
+
<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>
|
1009
|
+
<p><small>This line of text is meant to be treated as fine print.</small></p>
|
1010
|
+
<p>The following is <strong>rendered as bold text</strong>.</p>
|
1011
|
+
<p>The following is <em>rendered as italicized text</em>.</p>
|
1012
|
+
<p>An abbreviation of the word attribute is <abbr title="attribute">attr</abbr>.</p>
|
394
1013
|
</div>
|
395
1014
|
<div class="col-md-4">
|
396
|
-
<
|
397
|
-
|
398
|
-
|
399
|
-
|
400
|
-
|
401
|
-
|
402
|
-
|
403
|
-
<p class="text-info">Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
|
404
|
-
</div>
|
1015
|
+
<h3 class="notoc">Emphasis classes</h2>
|
1016
|
+
<p class="text-muted">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p>
|
1017
|
+
<p class="text-primary">Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
|
1018
|
+
<p class="text-warning">Etiam porta sem malesuada magna mollis euismod.</p>
|
1019
|
+
<p class="text-danger">Donec ullamcorper nulla non metus auctor fringilla.</p>
|
1020
|
+
<p class="text-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
|
1021
|
+
<p class="text-info">Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
|
405
1022
|
</div>
|
406
1023
|
</div>
|
407
1024
|
</div>
|
@@ -413,20 +1030,16 @@ Refer to: link:{bs_doc_content_typography}[Bootstrap Docs, window="_blank"].
|
|
413
1030
|
<div class="doc-example mb-3">
|
414
1031
|
<div class="row">
|
415
1032
|
<div class="col-md-6">
|
416
|
-
<
|
417
|
-
<
|
418
|
-
|
419
|
-
|
420
|
-
</blockquote>
|
421
|
-
</div>
|
1033
|
+
<blockquote class="blockquote">
|
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>
|
422
1037
|
</div>
|
423
1038
|
<div class="col-md-6">
|
424
|
-
<
|
425
|
-
<
|
426
|
-
|
427
|
-
|
428
|
-
</blockquote>
|
429
|
-
</div>
|
1039
|
+
<blockquote class="blockquote blockquote-reverse">
|
1040
|
+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
1041
|
+
<footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
|
1042
|
+
</blockquote>
|
430
1043
|
</div>
|
431
1044
|
</div>
|
432
1045
|
</div>
|
@@ -443,68 +1056,66 @@ Using the most basic table markup, here’s how .table-based tables look in
|
|
443
1056
|
Bootstrap. All table styles are inherited in Bootstrap 4, meaning any nested
|
444
1057
|
tables will be styled in the same manner as the parent.
|
445
1058
|
|
446
|
-
pass:[<i class="mdi mdi-book-open mdi-24px mdi-md-
|
447
|
-
|
1059
|
+
pass:[<i class="mdi mdi-book-open-variant mdi-24px mdi-md-grey"></i>]
|
1060
|
+
link:{bs_doc_content_tables}[Bootstrap Docs {middot} Tables, {browser-window--new}]
|
448
1061
|
|
449
1062
|
|
450
1063
|
++++
|
451
1064
|
<div class="doc-example mb-3">
|
452
|
-
<
|
453
|
-
<
|
454
|
-
<
|
455
|
-
<
|
456
|
-
|
457
|
-
|
458
|
-
|
459
|
-
|
460
|
-
|
461
|
-
|
462
|
-
<
|
463
|
-
<
|
464
|
-
|
465
|
-
|
466
|
-
|
467
|
-
|
468
|
-
|
469
|
-
<
|
470
|
-
|
471
|
-
|
472
|
-
|
473
|
-
|
474
|
-
|
475
|
-
<
|
476
|
-
|
477
|
-
|
478
|
-
|
479
|
-
|
480
|
-
|
481
|
-
<
|
482
|
-
|
483
|
-
|
484
|
-
|
485
|
-
|
486
|
-
|
487
|
-
<
|
488
|
-
|
489
|
-
|
490
|
-
|
491
|
-
|
492
|
-
|
493
|
-
<
|
494
|
-
|
495
|
-
|
496
|
-
|
497
|
-
|
498
|
-
|
499
|
-
<
|
500
|
-
|
501
|
-
|
502
|
-
|
503
|
-
|
504
|
-
|
505
|
-
|
506
|
-
</table>
|
507
|
-
</div>
|
1065
|
+
<table class="table table-striped table-hover table-bordered">
|
1066
|
+
<thead>
|
1067
|
+
<tr>
|
1068
|
+
<th>#</th>
|
1069
|
+
<th>Column heading</th>
|
1070
|
+
<th>Column heading</th>
|
1071
|
+
<th>Column heading</th>
|
1072
|
+
</tr>
|
1073
|
+
</thead>
|
1074
|
+
<tbody>
|
1075
|
+
<tr>
|
1076
|
+
<td>1</td>
|
1077
|
+
<td>Column content</td>
|
1078
|
+
<td>Column content</td>
|
1079
|
+
<td>Column content</td>
|
1080
|
+
</tr>
|
1081
|
+
<tr>
|
1082
|
+
<td>2</td>
|
1083
|
+
<td>Column content</td>
|
1084
|
+
<td>Column content</td>
|
1085
|
+
<td>Column content</td>
|
1086
|
+
</tr>
|
1087
|
+
<tr class="table-info">
|
1088
|
+
<td>3</td>
|
1089
|
+
<td>Column content</td>
|
1090
|
+
<td>Column content</td>
|
1091
|
+
<td>Column content</td>
|
1092
|
+
</tr>
|
1093
|
+
<tr class="table-success">
|
1094
|
+
<td>4</td>
|
1095
|
+
<td>Column content</td>
|
1096
|
+
<td>Column content</td>
|
1097
|
+
<td>Column content</td>
|
1098
|
+
</tr>
|
1099
|
+
<tr class="table-danger">
|
1100
|
+
<td>5</td>
|
1101
|
+
<td>Column content</td>
|
1102
|
+
<td>Column content</td>
|
1103
|
+
<td>Column content</td>
|
1104
|
+
</tr>
|
1105
|
+
<tr class="table-warning">
|
1106
|
+
<td>6</td>
|
1107
|
+
<td>Column content</td>
|
1108
|
+
<td>Column content</td>
|
1109
|
+
<td>Column content</td>
|
1110
|
+
</tr>
|
1111
|
+
<tr class="table-active">
|
1112
|
+
<td>7</td>
|
1113
|
+
<td>Column content</td>
|
1114
|
+
<td>Column content</td>
|
1115
|
+
<td>Column content</td>
|
1116
|
+
</tr>
|
1117
|
+
</tbody>
|
1118
|
+
</table>
|
508
1119
|
</div>
|
509
1120
|
++++
|
510
1121
|
|
@@ -521,8 +1132,8 @@ of newer input controls like email verification, number selection, and more.
|
|
521
1132
|
Here’s a quick example to demonstrate Bootstrap’s form styles. Keep reading
|
522
1133
|
for documentation on required classes, form layout, and more.
|
523
1134
|
|
524
|
-
pass:[<i class="mdi mdi-book-open mdi-24px mdi-md-
|
525
|
-
|
1135
|
+
pass:[<i class="mdi mdi-book-open-variant mdi-24px mdi-md-grey"></i>]
|
1136
|
+
link:{bs_doc_components_forms}[Bootstrap Docs {middot} Forms, {browser-window--new}]
|
526
1137
|
|
527
1138
|
++++
|
528
1139
|
<div class="doc-example mb-3">
|
@@ -542,7 +1153,7 @@ Refer to: link:{bs_doc_components_forms}[Bootstrap Docs, window="_blank"].
|
|
542
1153
|
<input type="checkbox" class="form-check-input" id="exampleCheck1">
|
543
1154
|
<label class="form-check-label" for="exampleCheck1">Check me out</label>
|
544
1155
|
</div>
|
545
|
-
<button type="submit" class="btn btn-
|
1156
|
+
<button type="submit" class="btn btn-primary btn-raised">Submit</button>
|
546
1157
|
</form>
|
547
1158
|
</div>
|
548
1159
|
++++
|
@@ -555,11 +1166,11 @@ state, sizing, and more.
|
|
555
1166
|
<div class="doc-example mb-3">
|
556
1167
|
<form>
|
557
1168
|
<div class="form-group">
|
558
|
-
<label for="exampleInputEmail1">Email address</label>
|
559
|
-
<input type="email" class="form-control" id="exampleFormControlInput1"
|
1169
|
+
<label for="exampleInputEmail1" class="bmd-label-floating">Email address</label>
|
1170
|
+
<input type="email" class="form-control" id="exampleFormControlInput1">
|
560
1171
|
</div>
|
561
1172
|
<div class="form-group">
|
562
|
-
<label for="exampleFormControlSelect1">Example select</label>
|
1173
|
+
<label for="exampleFormControlSelect1" class="bmd-label-floating">Example select</label>
|
563
1174
|
<select class="form-control" id="exampleFormControlSelect1">
|
564
1175
|
<option>1</option>
|
565
1176
|
<option>2</option>
|
@@ -569,7 +1180,7 @@ state, sizing, and more.
|
|
569
1180
|
</select>
|
570
1181
|
</div>
|
571
1182
|
<div class="form-group">
|
572
|
-
<label for="exampleFormControlSelect2">Example multiple select</label>
|
1183
|
+
<label for="exampleFormControlSelect2" class="bmd-label-floating">Example multiple select</label>
|
573
1184
|
<select multiple class="form-control" id="exampleFormControlSelect2">
|
574
1185
|
<option>option 1</option>
|
575
1186
|
<option>option 2</option>
|
@@ -577,7 +1188,7 @@ state, sizing, and more.
|
|
577
1188
|
</select>
|
578
1189
|
</div>
|
579
1190
|
<div class="form-group">
|
580
|
-
<label for="exampleFormControlTextarea1">Example textarea</label>
|
1191
|
+
<label for="exampleFormControlTextarea1" class="bmd-label-floating">Example textarea</label>
|
581
1192
|
<textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
|
582
1193
|
</div>
|
583
1194
|
</form>
|
@@ -590,7 +1201,7 @@ For file inputs, swap the .form-control for .form-control-file.
|
|
590
1201
|
<div class="doc-example mb-3">
|
591
1202
|
<form>
|
592
1203
|
<div class="form-group">
|
593
|
-
<label for="exampleFormControlFile1">Example file input</label>
|
1204
|
+
<label for="exampleFormControlFile1" class="bmd-label-floating">Example file input</label>
|
594
1205
|
<input type="file" class="form-control-file" id="exampleFormControlFile1">
|
595
1206
|
</div>
|
596
1207
|
</form>
|
@@ -608,8 +1219,8 @@ for building all types of navigation components. It includes some style
|
|
608
1219
|
overrides (for working with lists), some link padding for larger hit areas,
|
609
1220
|
and basic disabled styling.
|
610
1221
|
|
611
|
-
pass:[<i class="mdi mdi-book-open mdi-24px mdi-md-
|
612
|
-
|
1222
|
+
pass:[<i class="mdi mdi-book-open-variant mdi-24px mdi-md-grey"></i>]
|
1223
|
+
link:{bs_doc_components_navs}[Bootstrap Docs {middot} Navs, {browser-window--new}]
|
613
1224
|
|
614
1225
|
=== Tabs
|
615
1226
|
|
@@ -619,46 +1230,44 @@ JavaScript plugin.
|
|
619
1230
|
|
620
1231
|
++++
|
621
1232
|
<div class="doc-example mb-3">
|
622
|
-
<
|
623
|
-
<
|
624
|
-
<
|
625
|
-
|
626
|
-
|
627
|
-
<
|
628
|
-
|
629
|
-
|
630
|
-
<
|
631
|
-
|
632
|
-
|
633
|
-
|
634
|
-
|
635
|
-
|
636
|
-
|
637
|
-
<
|
638
|
-
|
639
|
-
|
640
|
-
|
641
|
-
|
642
|
-
<a class="dropdown-item" href="javascript:(void)">Separated link</a>
|
643
|
-
</div>
|
644
|
-
</li>
|
645
|
-
<li class="nav-item">
|
646
|
-
<a class="nav-link disabled" href="javascript:(void)">Disabled</a>
|
647
|
-
</li>
|
648
|
-
</ul>
|
649
|
-
<div id="myTabContent" class="tab-content">
|
650
|
-
<div class="tab-pane fade active in" id="home">
|
651
|
-
<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>
|
652
|
-
</div>
|
653
|
-
<div class="tab-pane fade" id="profile">
|
654
|
-
<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>
|
655
|
-
</div>
|
656
|
-
<div class="tab-pane fade" id="dropdown1">
|
657
|
-
<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>
|
658
|
-
</div>
|
659
|
-
<div class="tab-pane fade" id="dropdown2">
|
660
|
-
<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>
|
1233
|
+
<ul class="nav nav-tabs">
|
1234
|
+
<li class="nav-item">
|
1235
|
+
<a class="nav-link active" data-toggle="tab" href="#home">Home</a>
|
1236
|
+
</li>
|
1237
|
+
<li class="nav-item">
|
1238
|
+
<a class="nav-link" data-toggle="tab" href="#profile">Profile</a>
|
1239
|
+
</li>
|
1240
|
+
<li class="nav-item dropdown">
|
1241
|
+
<a class="nav-link dropdown-toggle" data-toggle="dropdown"
|
1242
|
+
href="javascript:(void)"
|
1243
|
+
role="button"
|
1244
|
+
aria-haspopup="true" aria-expanded="false">
|
1245
|
+
Dropdown
|
1246
|
+
</a>
|
1247
|
+
<div class="dropdown-menu">
|
1248
|
+
<a class="dropdown-item" href="javascript:(void)">Action</a>
|
1249
|
+
<a class="dropdown-item" href="javascript:(void)">Another action</a>
|
1250
|
+
<a class="dropdown-item" href="javascript:(void)">Something else here</a>
|
1251
|
+
<div class="dropdown-divider"></div>
|
1252
|
+
<a class="dropdown-item" href="javascript:(void)">Separated link</a>
|
661
1253
|
</div>
|
1254
|
+
</li>
|
1255
|
+
<li class="nav-item">
|
1256
|
+
<a class="nav-link disabled" href="javascript:(void)">Disabled</a>
|
1257
|
+
</li>
|
1258
|
+
</ul>
|
1259
|
+
<div id="myTabContent" class="tab-content">
|
1260
|
+
<div class="tab-pane fade active show" id="home">
|
1261
|
+
<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>
|
1262
|
+
</div>
|
1263
|
+
<div class="tab-pane fade" id="profile">
|
1264
|
+
<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>
|
1265
|
+
</div>
|
1266
|
+
<div class="tab-pane fade" id="dropdown1">
|
1267
|
+
<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>
|
1268
|
+
</div>
|
1269
|
+
<div class="tab-pane fade" id="dropdown2">
|
1270
|
+
<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>
|
662
1271
|
</div>
|
663
1272
|
</div>
|
664
1273
|
</div>
|
@@ -671,54 +1280,56 @@ Take that same HTML as Tabs, but use .nav-pills class instead.
|
|
671
1280
|
|
672
1281
|
++++
|
673
1282
|
<div class="doc-example mb-3">
|
674
|
-
<
|
675
|
-
|
676
|
-
<
|
677
|
-
<
|
678
|
-
|
679
|
-
|
680
|
-
|
681
|
-
|
682
|
-
<
|
683
|
-
<a class="dropdown-
|
684
|
-
<
|
685
|
-
|
686
|
-
|
687
|
-
|
688
|
-
|
689
|
-
|
690
|
-
|
691
|
-
|
692
|
-
|
693
|
-
|
694
|
-
|
695
|
-
|
696
|
-
|
697
|
-
|
698
|
-
|
699
|
-
|
700
|
-
|
701
|
-
|
702
|
-
<
|
703
|
-
<
|
704
|
-
|
705
|
-
|
706
|
-
<
|
707
|
-
|
708
|
-
<
|
709
|
-
|
710
|
-
|
711
|
-
|
712
|
-
|
713
|
-
|
714
|
-
|
715
|
-
|
716
|
-
<
|
717
|
-
|
718
|
-
|
719
|
-
<
|
720
|
-
|
721
|
-
|
1283
|
+
<div class="row mb-5">
|
1284
|
+
|
1285
|
+
<div class="col-md-6">
|
1286
|
+
<h5 class="notoc">Standard Pills</h5>
|
1287
|
+
<ul class="nav nav-pills">
|
1288
|
+
<li class="nav-item mr-1 mb-2">
|
1289
|
+
<a class="nav-link active" href="javascript:(void)">Active</a>
|
1290
|
+
</li>
|
1291
|
+
<li class="nav-item dropdown mr-1">
|
1292
|
+
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="javascript:(void)" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
|
1293
|
+
<div class="dropdown-menu">
|
1294
|
+
<a class="dropdown-item" href="javascript:(void)">Action</a>
|
1295
|
+
<a class="dropdown-item" href="javascript:(void)">Another action</a>
|
1296
|
+
<a class="dropdown-item" href="javascript:(void)">Something else here</a>
|
1297
|
+
<div class="dropdown-divider"></div>
|
1298
|
+
<a class="dropdown-item" href="javascript:(void)">Separated link</a>
|
1299
|
+
</div>
|
1300
|
+
</li>
|
1301
|
+
<li class="nav-item mr-1 mb-2">
|
1302
|
+
<a class="nav-link" href="javascript:(void)">Link</a>
|
1303
|
+
</li>
|
1304
|
+
<li class="nav-item mr-1 mb-2">
|
1305
|
+
<a class="nav-link disabled" href="javascript:(void)">Disabled</a>
|
1306
|
+
</li>
|
1307
|
+
</ul>
|
1308
|
+
</div>
|
1309
|
+
<div class="col-md-6">
|
1310
|
+
<h5 class="notoc">Stacked Pills (vertical)</h5>
|
1311
|
+
<ul class="nav nav-pills flex-column mb-4">
|
1312
|
+
<li class="nav-item mb-2">
|
1313
|
+
<a class="nav-link active" href="javascript:(void)">Active</a>
|
1314
|
+
</li>
|
1315
|
+
<li class="nav-item dropdown mb-1">
|
1316
|
+
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="javascript:(void)" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
|
1317
|
+
<div class="dropdown-menu">
|
1318
|
+
<a class="dropdown-item" href="javascript:(void)">Action</a>
|
1319
|
+
<a class="dropdown-item" href="javascript:(void)">Another action</a>
|
1320
|
+
<a class="dropdown-item" href="javascript:(void)">Something else here</a>
|
1321
|
+
<div class="dropdown-divider"></div>
|
1322
|
+
<a class="dropdown-item" href="javascript:(void)">Separated link</a>
|
1323
|
+
</div>
|
1324
|
+
</li>
|
1325
|
+
<li class="nav-item mb-2">
|
1326
|
+
<a class="nav-link" href="javascript:(void)">Link</a>
|
1327
|
+
</li>
|
1328
|
+
<li class="nav-item mb-2">
|
1329
|
+
<a class="nav-link disabled" href="javascript:(void)">Disabled</a>
|
1330
|
+
</li>
|
1331
|
+
</ul>
|
1332
|
+
</div>
|
722
1333
|
</div>
|
723
1334
|
</div>
|
724
1335
|
++++
|
@@ -732,20 +1343,18 @@ Separators are automatically added in CSS through ::before and content.
|
|
732
1343
|
|
733
1344
|
++++
|
734
1345
|
<div class="doc-example mb-3">
|
735
|
-
<
|
736
|
-
<
|
737
|
-
|
738
|
-
|
739
|
-
<
|
740
|
-
|
741
|
-
|
742
|
-
|
743
|
-
<
|
744
|
-
|
745
|
-
|
746
|
-
|
747
|
-
</ol>
|
748
|
-
</div>
|
1346
|
+
<ol class="breadcrumb">
|
1347
|
+
<li class="breadcrumb-item active">Home</li>
|
1348
|
+
</ol>
|
1349
|
+
<ol class="breadcrumb">
|
1350
|
+
<li class="breadcrumb-item"><a href="javascript:(void)">Home</a></li>
|
1351
|
+
<li class="breadcrumb-item active">Library</li>
|
1352
|
+
</ol>
|
1353
|
+
<ol class="breadcrumb">
|
1354
|
+
<li class="breadcrumb-item"><a href="javascript:(void)">Home</a></li>
|
1355
|
+
<li class="breadcrumb-item"><a href="javascript:(void)">Library</a></li>
|
1356
|
+
<li class="breadcrumb-item active">Data</li>
|
1357
|
+
</ol>
|
749
1358
|
</div>
|
750
1359
|
++++
|
751
1360
|
|
@@ -851,45 +1460,37 @@ button. For proper styling, use one of the eight required contextual classes
|
|
851
1460
|
(e.g., .alert-success). For inline dismissal, use the alerts
|
852
1461
|
https://getbootstrap.com/docs/4.0/components/alerts/#dismissing[jQuery plugin].
|
853
1462
|
|
854
|
-
pass:[<i class="mdi mdi-book-open mdi-24px mdi-md-
|
855
|
-
|
1463
|
+
pass:[<i class="mdi mdi-book-open-variant mdi-24px mdi-md-grey"></i>]
|
1464
|
+
link:{bs_doc_components_alerts}[Bootstrap Docs {middot} Alerts, {browser-window--new}]
|
856
1465
|
|
857
1466
|
++++
|
858
1467
|
<div class="doc-example mb-3">
|
859
1468
|
<div class="row mb-3">
|
860
1469
|
<div class="col-md-12">
|
861
|
-
<div class="
|
862
|
-
<
|
863
|
-
|
864
|
-
|
865
|
-
<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>
|
866
|
-
</div>
|
1470
|
+
<div class="alert alert-dismissible alert-warning">
|
1471
|
+
<button type="button" class="close" data-dismiss="alert">×</button>
|
1472
|
+
<h4 class="alert-heading notoc">Warning!</h4>
|
1473
|
+
<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>
|
867
1474
|
</div>
|
868
1475
|
</div>
|
869
1476
|
</div>
|
870
1477
|
<div class="row mb-5">
|
871
1478
|
<div class="col-md-4">
|
872
|
-
<div class="
|
873
|
-
<
|
874
|
-
|
875
|
-
<strong>Oh snap!</strong> <a href="javascript:(void)" class="alert-link">Change a few things up</a> and try submitting again.
|
876
|
-
</div>
|
1479
|
+
<div class="alert alert-dismissible alert-danger">
|
1480
|
+
<button type="button" class="close" data-dismiss="alert">×</button>
|
1481
|
+
<strong>Oh snap!</strong> <a href="javascript:(void)" class="alert-link">Change a few things up</a> and try submitting again.
|
877
1482
|
</div>
|
878
1483
|
</div>
|
879
1484
|
<div class="col-md-4">
|
880
|
-
<div class="
|
881
|
-
<
|
882
|
-
|
883
|
-
<strong>Well done!</strong> You successfully read <a href="javascript:(void)" class="alert-link">this important alert message</a>.
|
884
|
-
</div>
|
1485
|
+
<div class="alert alert-dismissible alert-success">
|
1486
|
+
<button type="button" class="close" data-dismiss="alert">×</button>
|
1487
|
+
<strong>Well done!</strong> You successfully read <a href="javascript:(void)" class="alert-link">this important alert message</a>.
|
885
1488
|
</div>
|
886
1489
|
</div>
|
887
1490
|
<div class="col-md-4">
|
888
|
-
<div class="
|
889
|
-
<
|
890
|
-
|
891
|
-
<strong>Heads up!</strong> This <a href="javascript:(void)" class="alert-link">alert needs your attention</a>, but it's not super important.
|
892
|
-
</div>
|
1491
|
+
<div class="alert alert-dismissible alert-info">
|
1492
|
+
<button type="button" class="close" data-dismiss="alert">×</button>
|
1493
|
+
<strong>Heads up!</strong> This <a href="javascript:(void)" class="alert-link">alert needs your attention</a>, but it's not super important.
|
893
1494
|
</div>
|
894
1495
|
</div>
|
895
1496
|
</div>
|
@@ -908,8 +1509,8 @@ be presented with the content of the badge. Depending on the specific
|
|
908
1509
|
situation, these badges may seem like random additional words or numbers
|
909
1510
|
at the end of a sentence, link, or button.
|
910
1511
|
|
911
|
-
pass:[<i class="mdi mdi-book-open mdi-24px mdi-md-
|
912
|
-
|
1512
|
+
pass:[<i class="mdi mdi-book-open-variant mdi-24px mdi-md-grey"></i>]
|
1513
|
+
link:{bs_doc_components_badges}[Bootstrap Docs {middot} Badge, {browser-window--new}]
|
913
1514
|
|
914
1515
|
++++
|
915
1516
|
<div class="doc-example mb-3">
|
@@ -936,6 +1537,116 @@ Refer to: link:{bs_doc_components_badges}[Bootstrap Docs, window="_blank"].
|
|
936
1537
|
</div>
|
937
1538
|
++++
|
938
1539
|
|
1540
|
+
ifdef::scrollbars[]
|
1541
|
+
=== Scrollbars
|
1542
|
+
|
1543
|
+
// https://codepen.io/devstreak/pen/dMYgeO
|
1544
|
+
|
1545
|
+
Chrome, Edge, Safari and Opera support the non-standard `::-webkit-scrollbar`
|
1546
|
+
pseudo element, which allows to modify the look of the browser's scrollbar.
|
1547
|
+
|
1548
|
+
NOTE: Custom scrollbars are not supported in Firefox or in Edge, prior
|
1549
|
+
version 79 (Chromium based).
|
1550
|
+
|
1551
|
+
.Default scrollbar J1 Template
|
1552
|
+
[source, css, role="noclip"]
|
1553
|
+
----
|
1554
|
+
::-webkit-scrollbar-track {
|
1555
|
+
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0,3);
|
1556
|
+
background-color: #E0E0E0;
|
1557
|
+
}
|
1558
|
+
|
1559
|
+
::-webkit-scrollbar {
|
1560
|
+
width: 3px;
|
1561
|
+
background-color: #2196F3;
|
1562
|
+
}
|
1563
|
+
|
1564
|
+
::-webkit-scrollbar-thumb {
|
1565
|
+
background-color: #2196F3;
|
1566
|
+
}
|
1567
|
+
----
|
1568
|
+
|
1569
|
+
For J1 Template, following flavours are implemented.
|
1570
|
+
|
1571
|
+
[subs="attributes"]
|
1572
|
+
++++
|
1573
|
+
<div>
|
1574
|
+
<div class="row">
|
1575
|
+
<div class="scrollbar" id="style-default">
|
1576
|
+
<div class="force-overflow"></div>
|
1577
|
+
</div>
|
1578
|
+
|
1579
|
+
<div class="scrollbar scroller-1">
|
1580
|
+
<div class="force-overflow"></div>
|
1581
|
+
</div>
|
1582
|
+
|
1583
|
+
<div class="scrollbar scroller-2">
|
1584
|
+
<div class="force-overflow"></div>
|
1585
|
+
</div>
|
1586
|
+
|
1587
|
+
<div class="scrollbar scroller-3">
|
1588
|
+
<div class="force-overflow"></div>
|
1589
|
+
</div>
|
1590
|
+
|
1591
|
+
<div class="scrollbar scroller-4">
|
1592
|
+
<div class="force-overflow"></div>
|
1593
|
+
</div>
|
1594
|
+
</div>
|
1595
|
+
|
1596
|
+
<div class="row">
|
1597
|
+
<div class="scrollbar scroller-5">
|
1598
|
+
<div class="force-overflow"></div>
|
1599
|
+
</div>
|
1600
|
+
|
1601
|
+
<div class="scrollbar scroller-6">
|
1602
|
+
<div class="force-overflow"></div>
|
1603
|
+
</div>
|
1604
|
+
|
1605
|
+
<div class="scrollbar scroller-7">
|
1606
|
+
<div class="force-overflow"></div>
|
1607
|
+
</div>
|
1608
|
+
|
1609
|
+
<div class="scrollbar scroller-8">
|
1610
|
+
<div class="force-overflow"></div>
|
1611
|
+
</div>
|
1612
|
+
|
1613
|
+
<div class="scrollbar scroller-9">
|
1614
|
+
<div class="force-overflow"></div>
|
1615
|
+
</div>
|
1616
|
+
</div>
|
1617
|
+
|
1618
|
+
<div class="row">
|
1619
|
+
<div class="scrollbar scroller-10">
|
1620
|
+
<div class="force-overflow"></div>
|
1621
|
+
</div>
|
1622
|
+
|
1623
|
+
<div class="scrollbar scroller-11">
|
1624
|
+
<div class="force-overflow"></div>
|
1625
|
+
</div>
|
1626
|
+
|
1627
|
+
<div class="scrollbar scroller-13">
|
1628
|
+
<div class="force-overflow"></div>
|
1629
|
+
</div>
|
1630
|
+
|
1631
|
+
<div class="scrollbar scroller-14">
|
1632
|
+
<div class="force-overflow"></div>
|
1633
|
+
</div>
|
1634
|
+
|
1635
|
+
<div class="scrollbar scroller-15">
|
1636
|
+
<div class="force-overflow"></div>
|
1637
|
+
</div>
|
1638
|
+
</div>
|
1639
|
+
</div>
|
1640
|
+
|
1641
|
+
<!-- script>
|
1642
|
+
NOTE: $.browser.webkit does NOT exists !!!
|
1643
|
+
if (!$.browser.webkit) {
|
1644
|
+
$('.wrapper').html('<p>Sorry! Non webkit browser detected. Scrollbars <b>not</b> displayed :</p>');
|
1645
|
+
}
|
1646
|
+
</script -->
|
1647
|
+
++++
|
1648
|
+
endif::[]
|
1649
|
+
|
939
1650
|
== Progress
|
940
1651
|
|
941
1652
|
Bootstrap custom progress bars featuring support for stacked bars, animated
|
@@ -944,52 +1655,72 @@ elements, some CSS to set the width, and a few attributes. We don’t use the
|
|
944
1655
|
HTML5 <progress> element, ensuring you can stack progress bars, animate them,
|
945
1656
|
and place text labels over them.
|
946
1657
|
|
947
|
-
pass:[<i class="mdi mdi-book-open mdi-24px mdi-md-
|
948
|
-
|
1658
|
+
pass:[<i class="mdi mdi-book-open-variant mdi-24px mdi-md-grey"></i>]
|
1659
|
+
link:{bs_doc_components_progress}[Bootstrap Docs {middot} Progress, {browser-window--new}]
|
949
1660
|
|
950
1661
|
=== Basic
|
951
1662
|
|
952
1663
|
++++
|
953
1664
|
<div class="doc-example mb-3">
|
954
|
-
<div class="
|
955
|
-
<div class="progress">
|
956
|
-
<div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
|
957
|
-
</div>
|
1665
|
+
<div class="progress">
|
1666
|
+
<div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
|
958
1667
|
</div>
|
959
1668
|
</div>
|
960
1669
|
++++
|
961
1670
|
|
1671
|
+
.Basic progressbar
|
1672
|
+
[source, html, role="noclip"]
|
1673
|
+
----
|
1674
|
+
<div class="progress">
|
1675
|
+
<div class="progress-bar" role="progressbar"
|
1676
|
+
style="width: 25%;"
|
1677
|
+
aria-valuenow="25"
|
1678
|
+
aria-valuemin="0"
|
1679
|
+
aria-valuemax="100">
|
1680
|
+
</div>
|
1681
|
+
</div>
|
1682
|
+
----
|
1683
|
+
|
962
1684
|
=== Contextual alternatives
|
963
1685
|
|
964
1686
|
++++
|
965
1687
|
<div class="doc-example mb-3">
|
966
|
-
<div class="
|
967
|
-
<div class="progress">
|
968
|
-
|
969
|
-
|
970
|
-
<div class="progress">
|
971
|
-
|
972
|
-
|
973
|
-
<div class="progress">
|
974
|
-
|
975
|
-
|
976
|
-
<div class="progress">
|
977
|
-
<div class="progress-bar bg-danger" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
|
978
|
-
</div>
|
1688
|
+
<div class="progress mb-1">
|
1689
|
+
<div class="progress-bar bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
|
1690
|
+
</div>
|
1691
|
+
<div class="progress mb-1">
|
1692
|
+
<div class="progress-bar bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
|
1693
|
+
</div>
|
1694
|
+
<div class="progress mb-1">
|
1695
|
+
<div class="progress-bar bg-warning" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
|
1696
|
+
</div>
|
1697
|
+
<div class="progress">
|
1698
|
+
<div class="progress-bar bg-danger" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
|
979
1699
|
</div>
|
980
1700
|
</div>
|
981
1701
|
++++
|
982
1702
|
|
1703
|
+
.Progressbar SUCCESS
|
1704
|
+
[source, html, role="noclip"]
|
1705
|
+
----
|
1706
|
+
<div class="progress">
|
1707
|
+
<div class="progress-bar bg-success" role="progressbar"
|
1708
|
+
style="width: 25%;"
|
1709
|
+
aria-valuenow="25"
|
1710
|
+
aria-valuemin="0"
|
1711
|
+
aria-valuemax="100">
|
1712
|
+
</div>
|
1713
|
+
</div>
|
1714
|
+
----
|
1715
|
+
|
983
1716
|
=== Multiple bars
|
984
1717
|
|
985
1718
|
++++
|
986
1719
|
<div class="doc-example mb-3">
|
987
|
-
<div class="
|
988
|
-
<div class="progress">
|
989
|
-
|
990
|
-
|
991
|
-
<div class="progress-bar bg-info" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
|
992
|
-
</div>
|
1720
|
+
<div class="progress">
|
1721
|
+
<div class="progress-bar bg-success" role="progressbar" style="width: 50%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
|
1722
|
+
<div class="progress-bar bg-warning" role="progressbar" style="width: 25%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
|
1723
|
+
<div class="progress-bar bg-danger" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
|
993
1724
|
</div>
|
994
1725
|
</div>
|
995
1726
|
++++
|
@@ -998,22 +1729,20 @@ Refer to: link:{bs_doc_components_progress}[Bootstrap Docs, window="_blank"].
|
|
998
1729
|
|
999
1730
|
++++
|
1000
1731
|
<div class="doc-example mb-3">
|
1001
|
-
<div class="
|
1002
|
-
<div class="progress">
|
1003
|
-
|
1004
|
-
|
1005
|
-
<div class="progress">
|
1006
|
-
|
1007
|
-
|
1008
|
-
<div class="progress">
|
1009
|
-
|
1010
|
-
|
1011
|
-
<div class="progress">
|
1012
|
-
|
1013
|
-
|
1014
|
-
<div class="progress">
|
1015
|
-
<div class="progress-bar progress-bar-striped bg-danger" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
|
1016
|
-
</div>
|
1732
|
+
<div class="progress mb-1">
|
1733
|
+
<div class="progress-bar progress-bar-striped" role="progressbar" style="width: 10%" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
|
1734
|
+
</div>
|
1735
|
+
<div class="progress mb-1">
|
1736
|
+
<div class="progress-bar progress-bar-striped bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
|
1737
|
+
</div>
|
1738
|
+
<div class="progress mb-1">
|
1739
|
+
<div class="progress-bar progress-bar-striped bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
|
1740
|
+
</div>
|
1741
|
+
<div class="progress mb-1">
|
1742
|
+
<div class="progress-bar progress-bar-striped bg-warning" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
|
1743
|
+
</div>
|
1744
|
+
<div class="progress">
|
1745
|
+
<div class="progress-bar progress-bar-striped bg-danger" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
|
1017
1746
|
</div>
|
1018
1747
|
</div>
|
1019
1748
|
++++
|
@@ -1022,10 +1751,8 @@ Refer to: link:{bs_doc_components_progress}[Bootstrap Docs, window="_blank"].
|
|
1022
1751
|
|
1023
1752
|
++++
|
1024
1753
|
<div class="doc-example mb-3">
|
1025
|
-
<div class="
|
1026
|
-
<div class="progress">
|
1027
|
-
<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>
|
1028
|
-
</div>
|
1754
|
+
<div class="progress">
|
1755
|
+
<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>
|
1029
1756
|
</div>
|
1030
1757
|
</div>
|
1031
1758
|
++++
|
@@ -1040,21 +1767,19 @@ lorem:sentences[2]
|
|
1040
1767
|
|
1041
1768
|
Lightweight, flexible component for showcasing hero unit style content.
|
1042
1769
|
|
1043
|
-
pass:[<i class="mdi mdi-book-open mdi-24px mdi-md-
|
1044
|
-
|
1770
|
+
pass:[<i class="mdi mdi-book-open-variant mdi-24px mdi-md-grey"></i>]
|
1771
|
+
link:{bs_doc_components_jumbotron}[Bootstrap Docs {middot} Jumbotron, {browser-window--new}]
|
1045
1772
|
|
1046
1773
|
++++
|
1047
1774
|
<div class="doc-example mb-3">
|
1048
|
-
<div class="
|
1049
|
-
<
|
1050
|
-
|
1051
|
-
|
1052
|
-
|
1053
|
-
|
1054
|
-
<
|
1055
|
-
|
1056
|
-
</p>
|
1057
|
-
</div>
|
1775
|
+
<div class="jumbotron">
|
1776
|
+
<h1 class="display-3">Hello, world!</h1>
|
1777
|
+
<p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
|
1778
|
+
<hr class="my-4">
|
1779
|
+
<p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
|
1780
|
+
<p class="lead">
|
1781
|
+
<a class="btn btn-primary btn-raised btn-lg" href="javascript:(void)" role="button">Learn more</a>
|
1782
|
+
</p>
|
1058
1783
|
</div>
|
1059
1784
|
</div>
|
1060
1785
|
++++
|
@@ -1064,65 +1789,59 @@ Refer to: link:{bs_doc_components_jumbotron}[Bootstrap Docs, window="_blank"].
|
|
1064
1789
|
List groups are a flexible and powerful component for displaying a series of
|
1065
1790
|
content. Modify and extend them to support just about any content within.
|
1066
1791
|
|
1067
|
-
pass:[<i class="mdi mdi-book-open mdi-24px mdi-md-
|
1068
|
-
|
1792
|
+
pass:[<i class="mdi mdi-book-open-variant mdi-24px mdi-md-grey"></i>]
|
1793
|
+
link:{bs_doc_components_list_group}[Bootstrap Docs {middot} List group, {browser-window--new}]
|
1069
1794
|
|
1070
1795
|
++++
|
1071
1796
|
<div class="doc-example mb-3">
|
1072
1797
|
<div class="row mb-5">
|
1073
1798
|
<div class="col-md-4">
|
1074
|
-
<
|
1075
|
-
<
|
1076
|
-
|
1077
|
-
|
1078
|
-
|
1079
|
-
|
1080
|
-
|
1081
|
-
|
1082
|
-
|
1083
|
-
|
1084
|
-
|
1085
|
-
|
1086
|
-
|
1087
|
-
|
1088
|
-
</ul>
|
1089
|
-
</div>
|
1799
|
+
<ul class="list-group">
|
1800
|
+
<li class="list-group-item d-flex justify-content-between align-items-center">
|
1801
|
+
Cras justo odio
|
1802
|
+
<span class="badge badge-primary badge-pill">14</span>
|
1803
|
+
</li>
|
1804
|
+
<li class="list-group-item d-flex justify-content-between align-items-center">
|
1805
|
+
Dapibus ac facilisis
|
1806
|
+
<span class="badge badge-primary badge-pill">2</span>
|
1807
|
+
</li>
|
1808
|
+
<li class="list-group-item d-flex justify-content-between align-items-center">
|
1809
|
+
Morbi leo risus
|
1810
|
+
<span class="badge badge-primary badge-pill">1</span>
|
1811
|
+
</li>
|
1812
|
+
</ul>
|
1090
1813
|
</div>
|
1091
1814
|
|
1092
1815
|
<div class="col-md-4">
|
1093
|
-
<div class="
|
1094
|
-
<
|
1095
|
-
|
1096
|
-
|
1097
|
-
|
1098
|
-
|
1099
|
-
|
1100
|
-
|
1101
|
-
</a>
|
1102
|
-
</div>
|
1816
|
+
<div class="list-group">
|
1817
|
+
<a href="javascript:(void)" class="list-group-item list-group-item-action active">
|
1818
|
+
Cras justo odio
|
1819
|
+
</a>
|
1820
|
+
<a href="javascript:(void)" class="list-group-item list-group-item-action">Dapibus ac facilisis
|
1821
|
+
</a>
|
1822
|
+
<a href="javascript:(void)" class="list-group-item list-group-item-action disabled">Morbi leo risus
|
1823
|
+
</a>
|
1103
1824
|
</div>
|
1104
1825
|
</div>
|
1105
1826
|
|
1106
1827
|
<div class="col-md-4">
|
1107
|
-
<div class="
|
1108
|
-
<
|
1109
|
-
<
|
1110
|
-
<
|
1111
|
-
|
1112
|
-
|
1113
|
-
|
1114
|
-
|
1115
|
-
|
1116
|
-
|
1117
|
-
<
|
1118
|
-
<
|
1119
|
-
|
1120
|
-
|
1121
|
-
|
1122
|
-
|
1123
|
-
|
1124
|
-
</a>
|
1125
|
-
</div>
|
1828
|
+
<div class="list-group">
|
1829
|
+
<a href="javascript:(void)" class="list-group-item list-group-item-action flex-column align-items-start active">
|
1830
|
+
<div class="d-flex w-100 justify-content-between">
|
1831
|
+
<h5 class="mb-1 notoc">List group item heading</h5>
|
1832
|
+
<small>3 days ago</small>
|
1833
|
+
</div>
|
1834
|
+
<p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
|
1835
|
+
<small>Donec id elit non mi porta.</small>
|
1836
|
+
</a>
|
1837
|
+
<a href="javascript:(void)" class="list-group-item list-group-item-action flex-column align-items-start">
|
1838
|
+
<div class="d-flex w-100 justify-content-between">
|
1839
|
+
<h5 class="mb-1 notoc">List group item heading</h5>
|
1840
|
+
<small class="text-muted">3 days ago</small>
|
1841
|
+
</div>
|
1842
|
+
<p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
|
1843
|
+
<small class="text-muted">Donec id elit non mi porta.</small>
|
1844
|
+
</a>
|
1126
1845
|
</div>
|
1127
1846
|
</div>
|
1128
1847
|
|
@@ -1147,173 +1866,164 @@ manage to deliver a ton of control and customization. Built with flexbox,
|
|
1147
1866
|
they offer easy alignment and mix well with other Bootstrap components.
|
1148
1867
|
They have no margin by default, so use spacing utilities as needed.
|
1149
1868
|
|
1150
|
-
pass:[<i class="mdi mdi-book-open mdi-24px mdi-md-
|
1151
|
-
|
1869
|
+
pass:[<i class="mdi mdi-book-open-variant mdi-24px mdi-md-grey"></i>]
|
1870
|
+
link:{bs_doc_components_cards}[Bootstrap Docs {middot} Card, {browser-window--new}]
|
1152
1871
|
|
1153
1872
|
++++
|
1154
1873
|
<div class="doc-example mb-3">
|
1155
|
-
<div class="row">
|
1156
1874
|
|
1157
|
-
|
1158
|
-
|
1159
|
-
|
1160
|
-
|
1161
|
-
<
|
1162
|
-
|
1163
|
-
|
1164
|
-
</
|
1875
|
+
<div class="row">
|
1876
|
+
<div class="col-md-4 col-sm-4 col-xs-12">
|
1877
|
+
<div class="card mb-3" style="max-width: 20rem;">
|
1878
|
+
<div class="card-body">
|
1879
|
+
<h4 class="card-title notoc">Card title</h4>
|
1880
|
+
<h6 class="card-subtitle mb-2 text-muted notoc">Card subtitle</h6>
|
1881
|
+
<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>
|
1882
|
+
<a href="javascript:(void)" class="card-link">Card link</a>
|
1883
|
+
<a href="javascript:(void)" class="card-link">Another link</a>
|
1165
1884
|
</div>
|
1166
|
-
|
1167
|
-
|
1168
|
-
|
1169
|
-
|
1170
|
-
|
1171
|
-
</
|
1885
|
+
</div>
|
1886
|
+
</div>
|
1887
|
+
<div class="col-md-4 col-sm-4 col-xs-12">
|
1888
|
+
<div class="card mb-3" style="max-width: 20rem;">
|
1889
|
+
<div class="card-body">
|
1890
|
+
<h4 class="card-title notoc">Card title</h4>
|
1891
|
+
<h6 class="card-subtitle mb-2 text-muted notoc">Card subtitle</h6>
|
1892
|
+
<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>
|
1893
|
+
<a href="javascript:(void)" class="card-link">Card link</a>
|
1894
|
+
<a href="javascript:(void)" class="card-link">Another link</a>
|
1172
1895
|
</div>
|
1173
|
-
|
1174
|
-
|
1175
|
-
|
1176
|
-
|
1177
|
-
|
1178
|
-
</
|
1896
|
+
</div>
|
1897
|
+
</div>
|
1898
|
+
<div class="col-md-4 col-sm-4 col-xs-12">
|
1899
|
+
<div class="card mb-3" style="max-width: 20rem;">
|
1900
|
+
<div class="card-body">
|
1901
|
+
<h4 class="card-title notoc">Card title</h4>
|
1902
|
+
<h6 class="card-subtitle mb-2 text-muted notoc">Card subtitle</h6>
|
1903
|
+
<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>
|
1904
|
+
<a href="javascript:(void)" class="card-link">Card link</a>
|
1905
|
+
<a href="javascript:(void)" class="card-link">Another link</a>
|
1179
1906
|
</div>
|
1180
|
-
|
1181
|
-
|
1182
|
-
|
1183
|
-
|
1184
|
-
|
1185
|
-
|
1907
|
+
</div>
|
1908
|
+
</div>
|
1909
|
+
</div>
|
1910
|
+
|
1911
|
+
<div class="row">
|
1912
|
+
<div class="col-md-4 col-sm-4 col-xs-12 pl-3">
|
1913
|
+
<div class="card mb-3" style="max-width: 20rem;">
|
1914
|
+
<div class="card-header text-white bg-primary">
|
1915
|
+
<h3 class="notoc">Header</h3>
|
1186
1916
|
</div>
|
1187
|
-
<div class="card
|
1188
|
-
<
|
1189
|
-
<
|
1190
|
-
<h4 class="card-title notoc">Warning card title</h4>
|
1191
|
-
<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>
|
1192
|
-
</div>
|
1917
|
+
<div class="card-body">
|
1918
|
+
<h4 class="card-title notoc">Primary card title</h4>
|
1919
|
+
<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>
|
1193
1920
|
</div>
|
1194
|
-
|
1195
|
-
|
1196
|
-
|
1197
|
-
|
1198
|
-
|
1199
|
-
</
|
1921
|
+
</div>
|
1922
|
+
</div>
|
1923
|
+
<div class="col-md-4 col-sm-4 col-xs-12">
|
1924
|
+
<div class="card mb-3" style="max-width: 20rem;">
|
1925
|
+
<div class="card-header text-white bg-secondary">
|
1926
|
+
<h3 class="notoc">Header</h3>
|
1200
1927
|
</div>
|
1201
|
-
<div class="card
|
1202
|
-
<
|
1203
|
-
<
|
1204
|
-
<h4 class="card-title notoc">Light card title</h4>
|
1205
|
-
<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>
|
1206
|
-
</div>
|
1928
|
+
<div class="card-body">
|
1929
|
+
<h4 class="card-title notoc">Secondary card title</h4>
|
1930
|
+
<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>
|
1207
1931
|
</div>
|
1208
|
-
|
1209
|
-
|
1210
|
-
|
1211
|
-
|
1212
|
-
|
1213
|
-
</
|
1932
|
+
</div>
|
1933
|
+
</div>
|
1934
|
+
<div class="col-md-4 col-sm-4 col-xs-12">
|
1935
|
+
<div class="card mb-3" style="max-width: 20rem;">
|
1936
|
+
<div class="card-header text-white bg-success">
|
1937
|
+
<h3 class="notoc">Header</h3>
|
1938
|
+
</div>
|
1939
|
+
<div class="card-body">
|
1940
|
+
<h4 class="card-title notoc">Success card title</h4>
|
1941
|
+
<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>
|
1214
1942
|
</div>
|
1215
1943
|
</div>
|
1216
1944
|
</div>
|
1945
|
+
</div>
|
1217
1946
|
|
1218
|
-
|
1219
|
-
|
1220
|
-
|
1221
|
-
|
1222
|
-
<
|
1223
|
-
<h4 class="card-title notoc">Primary card title</h4>
|
1224
|
-
<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>
|
1225
|
-
</div>
|
1947
|
+
<div class="row">
|
1948
|
+
<div class="col-md-4 col-sm-4 col-xs-12 pl-3">
|
1949
|
+
<div class="card mb-3" style="max-width: 20rem;">
|
1950
|
+
<div class="card-header text-white bg-info">
|
1951
|
+
<h3 class="notoc">Header</h3>
|
1226
1952
|
</div>
|
1227
|
-
<div class="card
|
1228
|
-
<
|
1229
|
-
<
|
1230
|
-
<h4 class="card-title notoc">Secondary card title</h4>
|
1231
|
-
<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>
|
1232
|
-
</div>
|
1953
|
+
<div class="card-body">
|
1954
|
+
<h4 class="card-title notoc">Info card title</h4>
|
1955
|
+
<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>
|
1233
1956
|
</div>
|
1234
|
-
<div class="card
|
1235
|
-
<
|
1236
|
-
|
1237
|
-
|
1238
|
-
<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>
|
1239
|
-
</div>
|
1957
|
+
<div class="card-footer r-text-200">
|
1958
|
+
<a class="card-link bs-info font-weight-bold g-font-size-12 text-uppercase"
|
1959
|
+
href="javascript:(void)">Action · Footer Link
|
1960
|
+
</a>
|
1240
1961
|
</div>
|
1241
|
-
|
1242
|
-
|
1243
|
-
|
1244
|
-
|
1245
|
-
|
1246
|
-
</
|
1962
|
+
</div>
|
1963
|
+
</div>
|
1964
|
+
<div class="col-md-4 col-sm-4 col-xs-12">
|
1965
|
+
<div class="card mb-3" style="max-width: 20rem;">
|
1966
|
+
<div class="card-header text-white bg-warning">
|
1967
|
+
<h3 class="notoc">Header</h3>
|
1247
1968
|
</div>
|
1248
|
-
<div class="card
|
1249
|
-
<
|
1250
|
-
<
|
1251
|
-
<h4 class="card-title notoc">Warning card title</h4>
|
1252
|
-
<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>
|
1253
|
-
</div>
|
1969
|
+
<div class="card-body">
|
1970
|
+
<h4 class="card-title notoc">Warning card title</h4>
|
1971
|
+
<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>
|
1254
1972
|
</div>
|
1255
|
-
<div class="card
|
1256
|
-
<
|
1257
|
-
|
1258
|
-
|
1259
|
-
<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>
|
1260
|
-
</div>
|
1973
|
+
<div class="card-footer r-text-200">
|
1974
|
+
<a class="card-link bs-warning font-weight-bold g-font-size-12 text-uppercase"
|
1975
|
+
href="javascript:(void)">Action · Footer Link
|
1976
|
+
</a>
|
1261
1977
|
</div>
|
1262
|
-
|
1263
|
-
|
1264
|
-
|
1265
|
-
|
1266
|
-
|
1267
|
-
</
|
1978
|
+
</div>
|
1979
|
+
</div>
|
1980
|
+
<div class="col-md-4 col-sm-4 col-xs-12">
|
1981
|
+
<div class="card mb-3" style="max-width: 20rem;">
|
1982
|
+
<div class="card-header text-white bg-danger">
|
1983
|
+
<h3 class="notoc">Header</h3>
|
1268
1984
|
</div>
|
1269
|
-
<div class="card
|
1270
|
-
<
|
1271
|
-
<
|
1272
|
-
|
1273
|
-
|
1274
|
-
|
1985
|
+
<div class="card-body">
|
1986
|
+
<h4 class="card-title notoc">Danger card title</h4>
|
1987
|
+
<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>
|
1988
|
+
</div>
|
1989
|
+
<div class="card-footer r-text-200">
|
1990
|
+
<a class="card-link bs-danger font-weight-bold g-font-size-12 text-uppercase"
|
1991
|
+
href="javascript:(void)">Action · Footer Link
|
1992
|
+
</a>
|
1275
1993
|
</div>
|
1276
1994
|
</div>
|
1277
1995
|
</div>
|
1996
|
+
</div>
|
1278
1997
|
|
1279
|
-
|
1280
|
-
|
1281
|
-
|
1282
|
-
|
1283
|
-
|
1284
|
-
|
1285
|
-
|
1286
|
-
</
|
1287
|
-
<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">
|
1288
|
-
<div class="card-body">
|
1289
|
-
<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>
|
1290
|
-
</div>
|
1291
|
-
<ul class="list-group list-group-flush">
|
1292
|
-
<li class="list-group-item">Cras justo odio</li>
|
1293
|
-
<li class="list-group-item">Dapibus ac facilisis</li>
|
1294
|
-
<li class="list-group-item">Vestibulum at eros</li>
|
1295
|
-
</ul>
|
1296
|
-
<div class="card-body">
|
1297
|
-
<a href="javascript:(void)" class="card-link">Card link</a>
|
1298
|
-
<a href="javascript:(void)" class="card-link">Another link</a>
|
1299
|
-
</div>
|
1300
|
-
<div class="card-footer text-muted">
|
1301
|
-
2 days ago
|
1302
|
-
</div>
|
1998
|
+
<div class="row">
|
1999
|
+
<div class="col-md-4 col-sm-4 col-xs-12">
|
2000
|
+
<div class="card mb-3" style="max-width: 20rem;">
|
2001
|
+
<h3 class="card-header notoc">Header</h3>
|
2002
|
+
<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">
|
2003
|
+
<div class="card-body">
|
2004
|
+
<h5 class="card-title notoc">Special title treatment</h5>
|
2005
|
+
<h6 class="card-subtitle text-muted notoc">Support card subtitle</h6>
|
1303
2006
|
</div>
|
1304
|
-
|
1305
|
-
|
1306
|
-
|
1307
|
-
|
1308
|
-
|
1309
|
-
|
1310
|
-
|
1311
|
-
</
|
2007
|
+
|
2008
|
+
<div class="card-body">
|
2009
|
+
<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>
|
2010
|
+
</div>
|
2011
|
+
<ul class="list-group list-group-flush">
|
2012
|
+
<li class="list-group-item">Cras justo odio</li>
|
2013
|
+
<li class="list-group-item">Dapibus ac facilisis</li>
|
2014
|
+
<li class="list-group-item">Vestibulum at eros</li>
|
2015
|
+
</ul>
|
2016
|
+
<div class="card-body">
|
2017
|
+
<a href="javascript:(void)" class="card-link">Card link</a>
|
2018
|
+
<a href="javascript:(void)" class="card-link">Another link</a>
|
2019
|
+
</div>
|
2020
|
+
<div class="card-footer text-muted">
|
2021
|
+
2 days ago
|
1312
2022
|
</div>
|
1313
2023
|
</div>
|
1314
2024
|
</div>
|
1315
|
-
|
1316
2025
|
</div>
|
2026
|
+
|
1317
2027
|
</div>
|
1318
2028
|
++++
|
1319
2029
|
|
@@ -1329,11 +2039,11 @@ built with HTML, CSS, and JavaScript. They’re positioned over everything
|
|
1329
2039
|
else in the document and remove scroll from the <body> so that modal
|
1330
2040
|
content scrolls instead.
|
1331
2041
|
|
1332
|
-
pass:[<i class="mdi mdi-book-open mdi-24px mdi-md-
|
1333
|
-
|
2042
|
+
pass:[<i class="mdi mdi-book-open-variant mdi-24px mdi-md-grey"></i>]
|
2043
|
+
link:{bs_doc_components_modal}[Bootstrap Docs {middot} Modal, {browser-window--new}]
|
1334
2044
|
|
1335
2045
|
.Modal types
|
1336
|
-
[cols="
|
2046
|
+
[cols="2a,8a,2a", options="header", width="100%", role="rtable"]
|
1337
2047
|
|===============================================================================
|
1338
2048
|
|Type |Description |Launch Example
|
1339
2049
|
|
@@ -1342,10 +2052,10 @@ Refer to: link:{bs_doc_components_modal}[Bootstrap Docs, window="_blank"].
|
|
1342
2052
|
from the top of the page.
|
1343
2053
|
|
|
1344
2054
|
++++
|
1345
|
-
<div class="ml-
|
2055
|
+
<div class="ml-0">
|
1346
2056
|
<!-- Button trigger modal -->
|
1347
2057
|
<button type="button"
|
1348
|
-
class="btn btn-
|
2058
|
+
class="btn btn-primary btn-raised"
|
1349
2059
|
data-toggle="modal"
|
1350
2060
|
data-target="#exampleSimpleModal">
|
1351
2061
|
Launch Example
|
@@ -1370,8 +2080,8 @@ from the top of the page.
|
|
1370
2080
|
<p>Modal body text goes here.</p>
|
1371
2081
|
</div>
|
1372
2082
|
<div class="modal-footer">
|
1373
|
-
<button type="button" class="btn btn-primary btn-raised mr-2"
|
1374
|
-
<button type="button" class="btn btn-secondary btn-raised">
|
2083
|
+
<button type="button" class="btn btn-primary btn-flex btn-raised mr-2">Do nothing</button>
|
2084
|
+
<button type="button" class="btn btn-secondary btn-flex btn-raised" data-dismiss="modal">Close</button>
|
1375
2085
|
</div>
|
1376
2086
|
</div>
|
1377
2087
|
</div>
|
@@ -1383,10 +2093,10 @@ from the top of the page.
|
|
1383
2093
|
it (the backdrop).
|
1384
2094
|
|
|
1385
2095
|
++++
|
1386
|
-
<div class="ml-
|
2096
|
+
<div class="ml-0">
|
1387
2097
|
<!-- Button trigger modal -->
|
1388
2098
|
<button type="button"
|
1389
|
-
class="btn btn-
|
2099
|
+
class="btn btn-primary btn-raised"
|
1390
2100
|
data-toggle="modal"
|
1391
2101
|
data-target="#exampleStaticModal">
|
1392
2102
|
Launch Example
|
@@ -1413,8 +2123,8 @@ it (the backdrop).
|
|
1413
2123
|
<p>Modal body text goes here.</p>
|
1414
2124
|
</div>
|
1415
2125
|
<div class="modal-footer">
|
1416
|
-
<button type="button" class="btn btn-primary btn-raised mr-2"
|
1417
|
-
<button type="button" class="btn btn-secondary btn-raised">
|
2126
|
+
<button type="button" class="btn btn-primary btn-flex btn-raised mr-2">Do nothing</button>
|
2127
|
+
<button type="button" class="btn btn-secondary btn-flex btn-raised" data-dismiss="modal">Close</button>
|
1418
2128
|
</div>
|
1419
2129
|
</div>
|
1420
2130
|
</div>
|
@@ -1427,10 +2137,10 @@ independent of the page itself. Try the demo and resize your browser for
|
|
1427
2137
|
the height.
|
1428
2138
|
|
|
1429
2139
|
++++
|
1430
|
-
<div class="ml-
|
2140
|
+
<div class="ml-0">
|
1431
2141
|
<!-- Button trigger modal -->
|
1432
2142
|
<button type="button"
|
1433
|
-
class="btn btn-
|
2143
|
+
class="btn btn-primary btn-raised"
|
1434
2144
|
data-toggle="modal"
|
1435
2145
|
data-target="#exampleModalLong">
|
1436
2146
|
Launch Example
|
@@ -1447,7 +2157,7 @@ the height.
|
|
1447
2157
|
<div class="modal-dialog">
|
1448
2158
|
<div class="modal-content">
|
1449
2159
|
<div class="modal-header">
|
1450
|
-
<h5 class="modal-title notoc"
|
2160
|
+
<h5 id="exampleModalLongTitle" class="modal-title notoc">The Extremes of Good and Evil</h5>
|
1451
2161
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
1452
2162
|
<span aria-hidden="true">×</span>
|
1453
2163
|
</button>
|
@@ -1489,8 +2199,8 @@ the height.
|
|
1489
2199
|
</p>
|
1490
2200
|
</div>
|
1491
2201
|
<div class="modal-footer">
|
1492
|
-
<button type="button" class="btn btn-primary btn-raised mr-2"
|
1493
|
-
<button type="button" class="btn btn-secondary btn-raised">
|
2202
|
+
<button type="button" class="btn btn-primary btn-flex btn-raised mr-2">Do nothing</button>
|
2203
|
+
<button type="button" class="btn btn-secondary btn-flex btn-raised" data-dismiss="modal">Close</button>
|
1494
2204
|
</div>
|
1495
2205
|
</div>
|
1496
2206
|
</div>
|
@@ -1502,10 +2212,10 @@ the height.
|
|
1502
2212
|
modal body. Try the demo and scroll the content.
|
1503
2213
|
|
|
1504
2214
|
++++
|
1505
|
-
<div class="ml-
|
2215
|
+
<div class="ml-0">
|
1506
2216
|
<!-- Button trigger modal -->
|
1507
2217
|
<button type="button"
|
1508
|
-
class="btn btn-
|
2218
|
+
class="btn btn-primary btn-raised"
|
1509
2219
|
data-toggle="modal"
|
1510
2220
|
data-target="#exampleModalLongScrollable">
|
1511
2221
|
Launch Example
|
@@ -1522,7 +2232,7 @@ modal body. Try the demo and scroll the content.
|
|
1522
2232
|
<div class="modal-dialog modal-dialog-scrollable">
|
1523
2233
|
<div class="modal-content">
|
1524
2234
|
<div class="modal-header">
|
1525
|
-
<h5 class="modal-title notoc"
|
2235
|
+
<h5 id="exampleModalLongScrollableTitle" class="modal-title notoc">The Extremes of Good and Evil</h5>
|
1526
2236
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
1527
2237
|
<span aria-hidden="true">×</span>
|
1528
2238
|
</button>
|
@@ -1564,8 +2274,8 @@ modal body. Try the demo and scroll the content.
|
|
1564
2274
|
</p>
|
1565
2275
|
</div>
|
1566
2276
|
<div class="modal-footer">
|
1567
|
-
<button type="button" class="btn btn-primary btn-raised mr-2"
|
1568
|
-
<button type="button" class="btn btn-secondary btn-raised">
|
2277
|
+
<button type="button" class="btn btn-primary btn-flex btn-raised mr-2">Do nothing</button>
|
2278
|
+
<button type="button" class="btn btn-secondary btn-flex btn-raised" data-dismiss="modal">Close</button>
|
1569
2279
|
</div>
|
1570
2280
|
</div>
|
1571
2281
|
</div>
|
@@ -1576,10 +2286,10 @@ modal body. Try the demo and scroll the content.
|
|
1576
2286
|
|For important messages, center the modal.
|
1577
2287
|
|
|
1578
2288
|
++++
|
1579
|
-
<div class="ml-
|
2289
|
+
<div class="ml-0">
|
1580
2290
|
<!-- Button trigger modal -->
|
1581
2291
|
<button type="button"
|
1582
|
-
class="btn btn-
|
2292
|
+
class="btn btn-primary btn-raised"
|
1583
2293
|
data-toggle="modal" data-target="#exampleModalVerticalCenter">
|
1584
2294
|
Launch Example
|
1585
2295
|
</button>
|
@@ -1605,8 +2315,8 @@ modal body. Try the demo and scroll the content.
|
|
1605
2315
|
voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
|
1606
2316
|
</div>
|
1607
2317
|
<div class="modal-footer">
|
1608
|
-
<button type="button" class="btn btn-primary btn-raised mr-2"
|
1609
|
-
<button type="button" class="btn btn-secondary btn-raised">
|
2318
|
+
<button type="button" class="btn btn-primary btn-flex btn-raised mr-2">Do nothing</button>
|
2319
|
+
<button type="button" class="btn btn-secondary btn-flex btn-raised" data-dismiss="modal">Close</button>
|
1610
2320
|
</div>
|
1611
2321
|
</div>
|
1612
2322
|
</div>
|
@@ -1618,10 +2328,10 @@ modal body. Try the demo and scroll the content.
|
|
1618
2328
|
closed, any tooltips and popovers within are also automatically dismissed.
|
1619
2329
|
|
|
1620
2330
|
++++
|
1621
|
-
<div class="ml-
|
2331
|
+
<div class="ml-0">
|
1622
2332
|
<!-- Button trigger modal -->
|
1623
2333
|
<button type="button"
|
1624
|
-
class="btn btn-
|
2334
|
+
class="btn btn-primary btn-raised"
|
1625
2335
|
data-toggle="modal"
|
1626
2336
|
data-target="#exampleModalTooltip">
|
1627
2337
|
Launch Example
|
@@ -1637,67 +2347,133 @@ closed, any tooltips and popovers within are also automatically dismissed.
|
|
1637
2347
|
<div class="modal-dialog modal-dialog-centered">
|
1638
2348
|
<div class="modal-content">
|
1639
2349
|
<div class="modal-header">
|
1640
|
-
<h5 class="modal-title notoc"
|
2350
|
+
<h5 id="exampleModalTooltipTitle" class="modal-title notoc">Modal title</h5>
|
1641
2351
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
1642
2352
|
<span aria-hidden="true">×</span>
|
1643
2353
|
</button>
|
1644
2354
|
</div>
|
1645
2355
|
<div class="modal-body">
|
1646
|
-
<h5>Popover in a modal</h5>
|
1647
|
-
<p>This <a href="#" role="button" class="btn btn-
|
2356
|
+
<h5 class="notoc">Popover in a modal</h5>
|
2357
|
+
<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>
|
1648
2358
|
<hr>
|
1649
|
-
<h5>Tooltips in a modal</h5>
|
2359
|
+
<h5 class="notoc">Tooltips in a modal</h5>
|
1650
2360
|
<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>
|
1651
2361
|
</div>
|
1652
2362
|
<div class="modal-footer">
|
1653
|
-
<button type="button" class="btn btn-primary btn-raised mr-2"
|
1654
|
-
<button type="button" class="btn btn-secondary btn-raised">
|
2363
|
+
<button type="button" class="btn btn-primary btn-flex btn-raised mr-2">Do nothing</button>
|
2364
|
+
<button type="button" class="btn btn-secondary btn-flex btn-raised" data-dismiss="modal">Close</button>
|
1655
2365
|
</div>
|
1656
2366
|
</div>
|
1657
2367
|
</div>
|
1658
2368
|
</div>
|
1659
2369
|
++++
|
1660
|
-
|
1661
2370
|
|===============================================================================
|
1662
2371
|
|
1663
|
-
|
1664
|
-
|
1665
|
-
|
1666
|
-
|
1667
|
-
|
1668
|
-
|
1669
|
-
|
1670
|
-
|
1671
|
-
|
1672
|
-
|
2372
|
+
.Base Modal example
|
2373
|
+
[source, html, role="noclip"]
|
2374
|
+
----
|
2375
|
+
<!-- Trigger Button (modal) -->
|
2376
|
+
<div class="ml-0">
|
2377
|
+
<button type="button"
|
2378
|
+
class="btn btn-primary btn-raised"
|
2379
|
+
data-toggle="modal"
|
2380
|
+
data-target="#exampleSimpleModal">
|
2381
|
+
Launch Example
|
2382
|
+
</button>
|
2383
|
+
</div>
|
1673
2384
|
|
1674
|
-
|
1675
|
-
<div
|
1676
|
-
|
1677
|
-
|
1678
|
-
|
1679
|
-
|
1680
|
-
|
2385
|
+
<!-- Modal -->
|
2386
|
+
<div id="exampleSimpleModal"
|
2387
|
+
class="modal fade top"
|
2388
|
+
tabindex="-1"
|
2389
|
+
role="dialog"
|
2390
|
+
aria-labelledby="exampleSimpleModalLabel"
|
2391
|
+
aria-hidden="true">
|
2392
|
+
<div class="modal-dialog">
|
2393
|
+
<div class="modal-content">
|
2394
|
+
<div class="modal-header">
|
2395
|
+
<h5 id="exampleSimpleModalLabel" class="modal-title notoc">Modal title</h5>
|
2396
|
+
<button
|
2397
|
+
type="button"
|
2398
|
+
class="close"
|
2399
|
+
data-dismiss="modal"
|
2400
|
+
aria-label="Close">
|
2401
|
+
<span aria-hidden="true">×</span>
|
2402
|
+
</button>
|
2403
|
+
</div>
|
2404
|
+
<div class="modal-body">
|
2405
|
+
<p>Modal body text goes here.</p>
|
2406
|
+
</div>
|
2407
|
+
<div class="modal-footer">
|
2408
|
+
<button type="button"
|
2409
|
+
class="btn btn-primary btn-flex btn-raised mr-2"> Do nothing
|
2410
|
+
</button>
|
2411
|
+
<button
|
2412
|
+
type="button"
|
2413
|
+
class="btn btn-secondary btn-flex btn-raised"
|
2414
|
+
data-dismiss="modal"> Close
|
2415
|
+
</button>
|
2416
|
+
</div>
|
2417
|
+
</div>
|
2418
|
+
</div>
|
1681
2419
|
</div>
|
1682
|
-
|
2420
|
+
----
|
1683
2421
|
|
1684
|
-
=== Tooltips
|
2422
|
+
=== Popovers and Tooltips
|
1685
2423
|
|
1686
|
-
Tooltips rely on the 3rd party library
|
1687
|
-
|
1688
|
-
|
2424
|
+
Popovers and Tooltips rely on the 3rd party library __Popper.js__ for positioning.
|
2425
|
+
To make them properly positioned, the Javascript library `popper.min.js` has to
|
2426
|
+
be included before `bootstrap.js` in order to make popovers and tooltips to work.
|
1689
2427
|
|
1690
|
-
|
1691
|
-
|
2428
|
+
pass:[<i class="mdi mdi-book-open-variant mdi-24px mdi-md-grey"></i>]
|
2429
|
+
link:{bs_doc_components_popovers}[Bootstrap Docs {middot} Popovers, {browser-window--new}]
|
1692
2430
|
|
1693
|
-
pass:[<i class="mdi mdi-book-open mdi-24px mdi-md-
|
1694
|
-
|
2431
|
+
pass:[<i class="mdi mdi-book-open-variant mdi-24px mdi-md-grey"></i>]
|
2432
|
+
link:{bs_doc_components_tooltips}[Bootstrap Docs {middot} Tooltips, {browser-window--new}]
|
2433
|
+
|
2434
|
+
NOTE: Popovers and Tooltips require the BS tooltip plugin as a dependency.
|
1695
2435
|
|
1696
2436
|
++++
|
1697
2437
|
<div class="doc-example mb-3">
|
1698
|
-
<
|
1699
|
-
|
1700
|
-
|
1701
|
-
|
2438
|
+
<div class="row mb-5">
|
2439
|
+
<div class="col-md-6">
|
2440
|
+
<h5 class="mb-5 notoc">Popovers</h5>
|
2441
|
+
<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>
|
2442
|
+
<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>
|
2443
|
+
<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>
|
2444
|
+
<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>
|
2445
|
+
</div>
|
2446
|
+
<div class="col-md-6">
|
2447
|
+
<h5 class="mb-5 notoc">Tooltips</h5>
|
2448
|
+
<button type="button" class="btn btn-primary btn-raised" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Top</button>
|
2449
|
+
<button type="button" class="btn btn-primary btn-raised" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Bottom</button>
|
2450
|
+
<button type="button" class="btn btn-primary btn-raised" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Right</button>
|
2451
|
+
<button type="button" class="btn btn-primary btn-raised" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Left</button>
|
2452
|
+
</div>
|
2453
|
+
</div>
|
1702
2454
|
</div>
|
1703
2455
|
++++
|
2456
|
+
|
2457
|
+
.Example for Popovers and Tooltips
|
2458
|
+
[source, html, role="noclip"]
|
2459
|
+
----
|
2460
|
+
<div class="row mb-5">
|
2461
|
+
<div class="col-md-6">
|
2462
|
+
<h5 class="mb-5 notoc">Popovers</h5>
|
2463
|
+
<button type="button" class="btn btn-primary btn-raised"
|
2464
|
+
title="Popover Title" data-container="body"
|
2465
|
+
data-toggle="popover" data-placement="top"
|
2466
|
+
data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">Top
|
2467
|
+
</button>
|
2468
|
+
...
|
2469
|
+
</div>
|
2470
|
+
<div class="col-md-6">
|
2471
|
+
<h5 class="mb-5 notoc">Tooltips</h5>
|
2472
|
+
<button type="button" class="btn btn-primary btn-raised"
|
2473
|
+
data-toggle="tooltip" data-placement="top"
|
2474
|
+
title="Tooltip on top">Top
|
2475
|
+
</button>
|
2476
|
+
...
|
2477
|
+
</div>
|
2478
|
+
</div>
|
2479
|
+
----
|