j1-template 2020.0.10 → 2020.0.15
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 +64 -0
- data/_includes/themes/j1/blocks/footer/boxes/about_box.proc +1 -1
- data/_includes/themes/j1/blocks/footer/boxes/links_box.proc +2 -2
- data/_includes/themes/j1/blocks/footer/boxes/news_box.proc +2 -2
- data/_includes/themes/j1/layouts/content_generator_blog_archive.html +3 -2
- data/_includes/themes/j1/layouts/content_generator_collection.html +3 -2
- data/_includes/themes/j1/layouts/content_generator_page.html +26 -25
- data/_includes/themes/j1/layouts/content_generator_post.html +12 -12
- data/_includes/themes/j1/layouts/layout_metadata_generator.html +134 -4
- data/_includes/themes/j1/modules/connectors/ad/custom-provider.html +6 -9
- data/_includes/themes/j1/modules/connectors/ad/google-adsense.html +9 -6
- data/_includes/themes/j1/modules/connectors/ads +3 -6
- data/_includes/themes/j1/modules/navigator/generator.html +0 -1
- data/_includes/themes/j1/modules/navigator/procedures/topsearch.proc +5 -5
- data/_includes/themes/j1/procedures/global/create_word_cloud.proc +5 -2
- data/_includes/themes/j1/procedures/layouts/content_writer.proc +8 -9
- data/_includes/themes/j1/procedures/layouts/module_writer.proc +3 -13
- data/_includes/themes/j1/procedures/posts/collate_timeline.proc +14 -14
- data/_layouts/default.html +76 -65
- data/apps/public/cc/index.adoc +2 -6
- data/assets/data/authclient.html +22 -12
- data/assets/data/banner.html +23 -23
- data/assets/data/carousel.json +30 -21
- data/assets/data/cookiebar.html +277 -0
- data/assets/data/footer.html +14 -7
- data/assets/data/galleries.json +90 -81
- data/assets/data/gallery_customizer.html +20 -11
- data/assets/data/jupyter/notebooks/_html/template.full.head.html +10 -10
- data/assets/data/jupyter/notebooks/_html/visualisation.html +11 -11
- data/assets/data/jupyter/notebooks/html/template.html +7 -7
- data/assets/data/jupyter/notebooks/html/visualisation.ok.html +12 -12
- data/assets/data/mdi_icons.json +55 -1
- data/assets/data/menu.html +16 -9
- data/assets/data/mmenu.html +48 -95
- data/assets/data/mmenu_sidebar.html +40 -44
- data/assets/data/mmenu_toc.html +20 -4
- data/assets/data/panel.html +41 -33
- data/assets/data/quicklinks.html +29 -19
- data/assets/data/search.json +165 -0
- data/assets/data/ssm.html +20 -9
- data/assets/data/themes.json +17 -6
- data/assets/data/twa_v1.json +54 -0
- data/assets/themes/j1/adapter/js/algolia.js +28 -17
- data/assets/themes/j1/adapter/js/attic.js +51 -40
- data/assets/themes/j1/adapter/js/carousel.js +27 -13
- data/assets/themes/j1/adapter/js/clipboard.js +232 -0
- data/assets/themes/j1/adapter/js/cookiebar.js +204 -0
- data/assets/themes/j1/adapter/js/framer.js +37 -21
- data/assets/themes/j1/adapter/js/gallery_customizer.js +230 -250
- data/assets/themes/j1/adapter/js/j1.js +534 -798
- data/assets/themes/j1/adapter/js/{justified_gallery.js → jf_gallery.js} +32 -22
- data/assets/themes/j1/adapter/js/lightbox.js +20 -10
- data/assets/themes/j1/adapter/js/logger.js +13 -6
- data/assets/themes/j1/adapter/js/mdb.js +164 -0
- data/assets/themes/j1/adapter/js/mmenu.js +60 -69
- data/assets/themes/j1/adapter/js/navigator.js +194 -162
- data/assets/themes/j1/adapter/js/searcher.js +30 -14
- data/assets/themes/j1/adapter/js/ssm.js +111 -88
- data/assets/themes/j1/adapter/js/themer.js +70 -102
- data/assets/themes/j1/adapter/js/toccer.js +30 -22
- data/assets/themes/j1/core/css/animate.css +2382 -0
- data/assets/themes/j1/core/css/animate.min.css +7 -0
- data/assets/themes/j1/core/css/fontawesome.css +4415 -0
- data/assets/themes/j1/core/css/fontawesome.min.css +1 -0
- data/assets/themes/j1/core/css/iconify-icons.css +4106 -0
- data/assets/themes/j1/core/css/iconify-icons.min.css +1 -0
- data/assets/themes/j1/core/css/material-design-icons.css +14532 -0
- data/assets/themes/j1/core/css/material-design-icons.min.css +1 -0
- data/assets/themes/j1/core/css/theme_extensions.css +207 -3034
- data/assets/themes/j1/core/css/theme_extensions.min.css +1 -1
- data/assets/themes/j1/core/css/twemoji.css +9485 -0
- data/assets/themes/j1/core/css/twemoji.min.css +1 -0
- data/assets/themes/j1/core/css/uno.css +334 -3034
- data/assets/themes/j1/core/css/uno.min.css +1 -1
- data/assets/themes/j1/core/css/vendor.css +767 -33214
- data/assets/themes/j1/core/css/vendor.min.css +2 -9
- data/assets/themes/j1/core/js/template.js +25 -416
- 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 +1695 -0
- data/assets/themes/j1/modules/backstretch/js/backstretch.min.js +21 -0
- data/assets/themes/j1/modules/backstretch/js/backstretch.min.js.org +1 -0
- data/assets/themes/j1/modules/bmd/css/bootstrap-material-design.css +12177 -0
- data/assets/themes/j1/modules/bmd/css/bootstrap-material-design.min.css +8 -0
- data/assets/themes/j1/modules/bmd/js/bootstrap-material-design.js +6930 -0
- data/assets/themes/j1/modules/bmd/js/bootstrap-material-design.js.map +1 -0
- data/assets/themes/j1/modules/bmd/js/bootstrap-material-design.min.js +1 -0
- data/assets/themes/j1/modules/bootstrap/css/bootstrap.css +10278 -0
- data/assets/themes/j1/modules/bootstrap/css/bootstrap.css.map +1 -0
- data/assets/themes/j1/modules/bootstrap/css/bootstrap.min.css +7 -0
- data/assets/themes/j1/modules/bootstrap/css/bootstrap.min.css.map +1 -0
- data/assets/themes/j1/modules/bootstrap/js/bootstrap.js +4420 -0
- data/assets/themes/j1/modules/bootstrap/js/bootstrap.js.map +1 -0
- data/assets/themes/j1/modules/bootstrap/js/bootstrap.min.js +7 -0
- data/assets/themes/j1/modules/bootstrap/js/bootstrap.min.js.map +1 -0
- data/assets/themes/j1/modules/bsDatepicker/css/datepicker.css +203 -0
- data/assets/themes/j1/modules/bsDatepicker/css/theme/uno.css +235 -0
- data/assets/themes/j1/modules/bsDatepicker/js/datepicker.js +509 -0
- data/assets/themes/j1/modules/bsDatepicker/less/datepicker.less +122 -0
- data/assets/themes/j1/modules/bsThemeSwitcher/js/switcher.js +435 -0
- data/assets/themes/j1/modules/bsThemeSwitcher/js/switcher.min.js +20 -0
- data/assets/themes/j1/{extensions → modules}/carousel/css/carousel.css +1 -1
- data/assets/themes/j1/{extensions → modules}/carousel/css/carousel.min.css +1 -1
- data/assets/themes/j1/{extensions → modules}/carousel/css/carousel_transitions.css +1 -1
- data/assets/themes/j1/{extensions → modules}/carousel/css/carousel_transitions.min.css +1 -1
- data/assets/themes/j1/{extensions → modules}/carousel/css/theme/uno.css +1 -1
- data/assets/themes/j1/{extensions → modules}/carousel/css/theme/uno.min.css +1 -1
- data/assets/themes/j1/{extensions → modules}/carousel/images/ajax-loader.gif +0 -0
- data/assets/themes/j1/{extensions → modules}/carousel/images/grabbing.png +0 -0
- data/assets/themes/j1/{extensions → modules}/carousel/images/owl-logo.png +0 -0
- data/assets/themes/j1/{extensions → modules}/carousel/images/owl.video.play.png +0 -0
- data/assets/themes/j1/{extensions → modules}/carousel/js/carousel.js +0 -0
- data/assets/themes/j1/{extensions → modules}/carousel/js/carousel.min.js +0 -0
- data/assets/themes/j1/modules/clipboard/LICENSE +20 -0
- data/assets/themes/j1/modules/clipboard/css/theme/uno.css +52 -0
- data/assets/themes/j1/modules/clipboard/css/theme/uno.min.css +52 -0
- data/assets/themes/j1/modules/clipboard/js/clipboard.js +975 -0
- data/assets/themes/j1/modules/clipboard/js/clipboard.min.js +7 -0
- data/assets/themes/j1/{extensions/iconify → modules/iconifyAPI}/js/iconify.min.js +0 -0
- data/assets/themes/j1/modules/iframeResizer/LICENSE +21 -0
- data/assets/themes/j1/modules/iframeResizer/examples/frame.absolute.html +127 -0
- data/assets/themes/j1/modules/iframeResizer/examples/frame.content.html +157 -0
- data/assets/themes/j1/modules/iframeResizer/examples/frame.hover.html +68 -0
- data/assets/themes/j1/modules/iframeResizer/examples/frame.nested.html +100 -0
- data/assets/themes/j1/modules/iframeResizer/examples/frame.textarea.html +45 -0
- data/assets/themes/j1/modules/iframeResizer/examples/frame.tolerance.html +113 -0
- data/assets/themes/j1/modules/iframeResizer/examples/index.html +83 -0
- data/assets/themes/j1/modules/iframeResizer/examples/two.html +88 -0
- data/assets/themes/j1/modules/iframeResizer/js/client/iframeResizer.contentWindow.js +1288 -0
- data/assets/themes/j1/modules/iframeResizer/js/client/iframeResizer.contentWindow.map +1 -0
- data/assets/themes/j1/modules/iframeResizer/js/client/iframeResizer.contentWindow.min.js +10 -0
- data/assets/themes/j1/modules/iframeResizer/js/iframeResizer.js +1390 -0
- data/assets/themes/j1/modules/iframeResizer/js/iframeResizer.map +1 -0
- data/assets/themes/j1/modules/iframeResizer/js/iframeResizer.min.js +9 -0
- data/assets/themes/j1/modules/jekyllSearch/js/simple-jekyll-search.js +468 -0
- data/assets/themes/j1/modules/jekyllSearch/js/simple-jekyll-search.min.js +6 -0
- data/assets/themes/j1/modules/jqMouseWheel/README.md +76 -0
- data/assets/themes/j1/modules/jqMouseWheel/js/jquery.mousewheel.js +221 -0
- data/assets/themes/j1/modules/jqMouseWheel/js/jquery.mousewheel.min.js +9 -0
- data/assets/themes/j1/modules/jquery/js/jquery.js +10869 -0
- data/assets/themes/j1/modules/jquery/js/jquery.min.js +2 -0
- data/assets/themes/j1/{extensions/justified_gallery → modules/justifiedGallery}/LICENSE +0 -0
- data/assets/themes/j1/{extensions/justified_gallery → modules/justifiedGallery}/README.md +0 -0
- data/assets/themes/j1/{extensions/justified_gallery → modules/justifiedGallery}/_versions/v3.7.0/css/justifiedGallery.css +0 -0
- data/assets/themes/j1/{extensions/justified_gallery → modules/justifiedGallery}/_versions/v3.7.0/css/justifiedGallery.min.css +0 -0
- data/assets/themes/j1/{extensions/justified_gallery → modules/justifiedGallery}/_versions/v3.7.0/css/theme/uno.css +1 -1
- data/assets/themes/j1/{extensions/justified_gallery → modules/justifiedGallery}/_versions/v3.7.0/js/justifiedGallery.3.7.0.js +0 -0
- data/assets/themes/j1/{extensions/justified_gallery → modules/justifiedGallery}/_versions/v3.7.0/js/justifiedGallery.js +0 -0
- data/assets/themes/j1/{extensions/justified_gallery → modules/justifiedGallery}/_versions/v3.7.0/js/justifiedGallery.min.js +0 -0
- data/assets/themes/j1/{extensions/justified_gallery → modules/justifiedGallery}/_versions/v3.7.0/less/.csslintrc +0 -0
- data/assets/themes/j1/{extensions/justified_gallery → modules/justifiedGallery}/_versions/v3.7.0/less/justifiedGallery.less +0 -0
- data/assets/themes/j1/{extensions/justified_gallery → modules/justifiedGallery}/_versions/v4.0.0/css/justifiedGallery.css +0 -0
- data/assets/themes/j1/{extensions/justified_gallery → modules/justifiedGallery}/_versions/v4.0.0/css/justifiedGallery.min.css +0 -0
- data/assets/themes/j1/{extensions/justified_gallery → modules/justifiedGallery}/_versions/v4.0.0/css/theme/uno.css +1 -1
- data/assets/themes/j1/{extensions/justified_gallery → modules/justifiedGallery}/_versions/v4.0.0/js/jquery.justifiedGallery.js +0 -0
- data/assets/themes/j1/{extensions/justified_gallery → modules/justifiedGallery}/_versions/v4.0.0/js/jquery.justifiedGallery.min.js +0 -0
- data/assets/themes/j1/{extensions/justified_gallery → modules/justifiedGallery}/css/justifiedGallery.css +0 -0
- data/assets/themes/j1/{extensions/justified_gallery → modules/justifiedGallery}/css/justifiedGallery.min.css +0 -0
- data/assets/themes/j1/{extensions/justified_gallery → modules/justifiedGallery}/css/theme/uno.css +1 -1
- data/assets/themes/j1/{extensions/justified_gallery → modules/justifiedGallery}/css/theme/uno.min.css +1 -1
- data/assets/themes/j1/{extensions/justified_gallery → modules/justifiedGallery}/js/justifiedGallery.js +0 -0
- data/assets/themes/j1/{extensions/justified_gallery → modules/justifiedGallery}/js/justifiedGallery.min.js +0 -0
- data/assets/themes/j1/{extensions/light_gallery → modules/lightGallery}/css/core/lg-fb-comment-box.css +0 -0
- data/assets/themes/j1/{extensions/light_gallery → modules/lightGallery}/css/core/lg-fb-comment-box.min.css +0 -0
- data/assets/themes/j1/{extensions/light_gallery → modules/lightGallery}/css/core/lg-transitions.css +0 -0
- data/assets/themes/j1/{extensions/light_gallery → modules/lightGallery}/css/core/lg-transitions.min.css +0 -0
- data/assets/themes/j1/{extensions/light_gallery → modules/lightGallery}/css/core/lightgallery.css +0 -0
- data/assets/themes/j1/{extensions/light_gallery → modules/lightGallery}/css/core/lightgallery.min.css +0 -0
- data/assets/themes/j1/{extensions/light_gallery → modules/lightGallery}/css/fonts/lg.eot +0 -0
- data/assets/themes/j1/{extensions/light_gallery → modules/lightGallery}/css/fonts/lg.svg +0 -0
- data/assets/themes/j1/{extensions/light_gallery → modules/lightGallery}/css/fonts/lg.ttf +0 -0
- data/assets/themes/j1/{extensions/light_gallery → modules/lightGallery}/css/fonts/lg.woff +0 -0
- data/assets/themes/j1/{extensions/light_gallery → modules/lightGallery}/css/img/loading.gif +0 -0
- data/assets/themes/j1/{extensions/light_gallery → modules/lightGallery}/css/img/video-play.png +0 -0
- data/assets/themes/j1/{extensions/light_gallery → modules/lightGallery}/css/img/vimeo-play.png +0 -0
- data/assets/themes/j1/{extensions/light_gallery → modules/lightGallery}/css/img/youtube-play.png +0 -0
- data/assets/themes/j1/{extensions/light_gallery → modules/lightGallery}/css/themes/icons/animation-w.png +0 -0
- data/assets/themes/j1/{extensions/light_gallery → modules/lightGallery}/css/themes/icons/customize-w.png +0 -0
- data/assets/themes/j1/{extensions/light_gallery → modules/lightGallery}/css/themes/icons/dynamic-w.png +0 -0
- data/assets/themes/j1/{extensions/light_gallery → modules/lightGallery}/css/themes/icons/facebook-icon.svg +0 -0
- data/assets/themes/j1/{extensions/light_gallery → modules/lightGallery}/css/themes/icons/googleplus-icon.svg +0 -0
- data/assets/themes/j1/{extensions/light_gallery → modules/lightGallery}/css/themes/icons/html5-w.png +0 -0
- data/assets/themes/j1/{extensions/light_gallery → modules/lightGallery}/css/themes/icons/linked-in.png +0 -0
- data/assets/themes/j1/{extensions/light_gallery → modules/lightGallery}/css/themes/icons/module-w.png +0 -0
- data/assets/themes/j1/{extensions/light_gallery → modules/lightGallery}/css/themes/icons/play-button.png +0 -0
- data/assets/themes/j1/{extensions/light_gallery → modules/lightGallery}/css/themes/icons/responsive-w.png +0 -0
- data/assets/themes/j1/{extensions/light_gallery → modules/lightGallery}/css/themes/icons/thumb-w.png +0 -0
- data/assets/themes/j1/{extensions/light_gallery → modules/lightGallery}/css/themes/icons/touch-w.png +0 -0
- data/assets/themes/j1/{extensions/light_gallery → modules/lightGallery}/css/themes/icons/twitter-icon.svg +0 -0
- data/assets/themes/j1/{extensions/light_gallery → modules/lightGallery}/css/themes/icons/twitter.png +0 -0
- data/assets/themes/j1/{extensions/light_gallery → modules/lightGallery}/css/themes/icons/video1-w.png +0 -0
- data/assets/themes/j1/{extensions/light_gallery → modules/lightGallery}/css/themes/icons/zoom-w.png +0 -0
- data/assets/themes/j1/{extensions/light_gallery → modules/lightGallery}/css/themes/icons/zoom.png +0 -0
- data/assets/themes/j1/{extensions/light_gallery → modules/lightGallery}/css/themes/uno.css +1 -1
- data/assets/themes/j1/{extensions/light_gallery → modules/lightGallery}/css/themes/uno.min.css +1 -1
- data/assets/themes/j1/{extensions/light_gallery → modules/lightGallery}/js/core/lightgallery.js +0 -0
- data/assets/themes/j1/{extensions/light_gallery → modules/lightGallery}/js/core/lightgallery.min.js +0 -0
- data/assets/themes/j1/{extensions/light_gallery → modules/lightGallery}/js/modules/j1/j1-video.js +0 -0
- data/assets/themes/j1/{extensions/light_gallery → modules/lightGallery}/js/modules/j1/j1-video.min.js +0 -0
- data/assets/themes/j1/{extensions/light_gallery → modules/lightGallery}/js/modules/lg-autoplay.js +0 -0
- data/assets/themes/j1/{extensions/light_gallery → modules/lightGallery}/js/modules/lg-autoplay.min.js +0 -0
- data/assets/themes/j1/{extensions/light_gallery → modules/lightGallery}/js/modules/lg-fullscreen.js +0 -0
- data/assets/themes/j1/{extensions/light_gallery → modules/lightGallery}/js/modules/lg-fullscreen.min.js +0 -0
- data/assets/themes/j1/{extensions/light_gallery → modules/lightGallery}/js/modules/lg-hash.js +0 -0
- data/assets/themes/j1/{extensions/light_gallery → modules/lightGallery}/js/modules/lg-hash.min.js +0 -0
- data/assets/themes/j1/{extensions/light_gallery → modules/lightGallery}/js/modules/lg-pager.js +0 -0
- data/assets/themes/j1/{extensions/light_gallery → modules/lightGallery}/js/modules/lg-pager.min.js +0 -0
- data/assets/themes/j1/{extensions/light_gallery → modules/lightGallery}/js/modules/lg-share.js +0 -0
- data/assets/themes/j1/{extensions/light_gallery → modules/lightGallery}/js/modules/lg-share.min.js +0 -0
- data/assets/themes/j1/{extensions/light_gallery → modules/lightGallery}/js/modules/lg-thumbnail.js +0 -0
- data/assets/themes/j1/{extensions/light_gallery → modules/lightGallery}/js/modules/lg-thumbnail.min.js +0 -0
- data/assets/themes/j1/{extensions/light_gallery → modules/lightGallery}/js/modules/lg-video.js +0 -0
- data/assets/themes/j1/{extensions/light_gallery → modules/lightGallery}/js/modules/lg-video.min.js +0 -0
- data/assets/themes/j1/{extensions/light_gallery → modules/lightGallery}/js/modules/lg-zoom.js +0 -0
- data/assets/themes/j1/{extensions/light_gallery → modules/lightGallery}/js/modules/lg-zoom.min.js +0 -0
- data/assets/themes/j1/modules/lightbox/LICENSE +22 -0
- data/assets/themes/j1/modules/lightbox/css/lightbox.css +224 -0
- data/assets/themes/j1/modules/lightbox/css/lightbox.min.css +21 -0
- data/assets/themes/j1/modules/lightbox/css/theme/uno.css +25 -0
- data/assets/themes/j1/modules/lightbox/css/theme/uno.min.css +26 -0
- data/{lib/starter_web/assets/images/modules/lightbox → assets/themes/j1/modules/lightbox/images}/close.png +0 -0
- data/{lib/starter_web/assets/images/modules/lightbox → assets/themes/j1/modules/lightbox/images}/loading.gif +0 -0
- data/{lib/starter_web/assets/images/modules/lightbox → assets/themes/j1/modules/lightbox/images}/next.png +0 -0
- data/{lib/starter_web/assets/images/modules/lightbox → assets/themes/j1/modules/lightbox/images}/prev.png +0 -0
- data/assets/themes/j1/modules/lightbox/js/lightbox.js +583 -0
- data/assets/themes/j1/modules/lightbox/js/lightbox.min.js +35 -0
- data/assets/themes/j1/modules/mmenuLight/css/mmenu.css +392 -0
- data/assets/themes/j1/modules/mmenuLight/css/mmenu.min.css +393 -0
- data/assets/themes/j1/modules/mmenuLight/css/theme/uno.css +178 -0
- data/assets/themes/j1/modules/mmenuLight/css/theme/uno.min.css +170 -0
- data/assets/themes/j1/modules/mmenuLight/js/mmenu.js +563 -0
- data/assets/themes/j1/modules/mmenuLight/js/mmenu.min.js +30 -0
- data/assets/themes/j1/modules/noUISlider/LICENSE +13 -0
- data/assets/themes/j1/modules/noUISlider/css/nouislider.css +260 -0
- data/assets/themes/j1/modules/noUISlider/css/nouislider.min.css +1 -0
- data/assets/themes/j1/modules/noUISlider/js/nouislider.js +2312 -0
- data/assets/themes/j1/modules/noUISlider/js/nouislider.min.js +3 -0
- data/assets/themes/j1/modules/polyfills/js/msie.js +140 -0
- data/assets/themes/j1/modules/popper/js/popper.js +2623 -0
- data/assets/themes/j1/modules/popper/js/popper.js.map +1 -0
- data/assets/themes/j1/modules/popper/js/popper.min.js +4 -0
- data/assets/themes/j1/modules/popper/js/popper.min.js.map +1 -0
- data/assets/themes/j1/{extensions → modules}/rouge/css/base16.dark/theme.css +0 -0
- data/assets/themes/j1/{extensions → modules}/rouge/css/base16.light/theme.css +0 -0
- data/assets/themes/j1/{extensions → modules}/rouge/css/base16.monokai.dark/theme.css +0 -0
- data/assets/themes/j1/{extensions → modules}/rouge/css/base16.monokai.light/theme.css +0 -0
- data/assets/themes/j1/{extensions → modules}/rouge/css/base16.monokai/theme.css +0 -0
- data/assets/themes/j1/{extensions → modules}/rouge/css/base16.solarized.dark/theme.css +0 -0
- data/assets/themes/j1/{extensions → modules}/rouge/css/base16.solarized.light/theme.css +0 -0
- data/assets/themes/j1/{extensions → modules}/rouge/css/base16.solarized/theme.css +0 -0
- data/assets/themes/j1/{extensions → modules}/rouge/css/base16/theme.css +0 -0
- data/assets/themes/j1/{extensions → modules}/rouge/css/colorful/theme.css +0 -0
- data/assets/themes/j1/{extensions → modules}/rouge/css/github/theme.css +0 -0
- data/assets/themes/j1/{extensions → modules}/rouge/css/gruvbox.dark/theme.css +0 -0
- data/assets/themes/j1/{extensions → modules}/rouge/css/gruvbox.light/theme.css +0 -0
- data/assets/themes/j1/{extensions → modules}/rouge/css/gruvbox/theme.css +0 -0
- data/assets/themes/j1/{extensions → modules}/rouge/css/igorpro/theme.css +0 -0
- data/assets/themes/j1/{extensions → modules}/rouge/css/molokai/theme.css +0 -0
- data/assets/themes/j1/{extensions → modules}/rouge/css/monokai.sublime/theme.css +0 -0
- data/assets/themes/j1/{extensions → modules}/rouge/css/monokai/theme.css +0 -0
- data/assets/themes/j1/{extensions → modules}/rouge/css/pastie/theme.css +0 -0
- data/assets/themes/j1/{extensions → modules}/rouge/css/thankful_eyes/theme.css +0 -0
- data/assets/themes/j1/{extensions → modules}/rouge/css/tulip/theme.css +0 -0
- data/assets/themes/j1/modules/tocbot/css/theme/uno.css +89 -0
- data/assets/themes/j1/modules/tocbot/css/theme/uno.min.css +89 -0
- data/assets/themes/j1/modules/tocbot/css/tocbot.css +75 -0
- data/assets/themes/j1/modules/tocbot/css/tocbot.min.css +19 -0
- data/assets/themes/j1/modules/tocbot/js/tocbot.js +19 -0
- data/assets/themes/j1/modules/tocbot/js/tocbot.min.js +19 -0
- data/assets/themes/j1/modules/twemoji/js/LICENSE +21 -0
- data/assets/themes/j1/modules/twemoji/js/picker/LICENSE +21 -0
- data/assets/themes/j1/modules/twemoji/js/picker/twemoji-picker.js +275 -0
- data/assets/themes/j1/modules/twemoji/js/picker/twemoji-picker.min.js +275 -0
- data/assets/themes/j1/modules/twemoji/js/twemoji.js +589 -0
- data/assets/themes/j1/modules/twemoji/js/twemoji.min.js +25 -0
- data/assets/themes/j1/modules/util/js/js.cookie.js +163 -0
- data/assets/themes/j1/modules/util/js/lite-url.js +203 -0
- data/assets/themes/j1/modules/util/js/lite-url.min.js +7 -0
- data/assets/themes/j1/{extensions/log4javascript/log4javascript.min.js → modules/util/js/log4javascript.js} +0 -2
- data/assets/themes/j1/modules/util/js/platform.js +1260 -0
- data/assets/themes/j1/{extensions → modules}/videojs/css/themes/city.css +0 -0
- data/assets/themes/j1/{extensions → modules}/videojs/css/themes/city.min.css +0 -0
- data/assets/themes/j1/{extensions → modules}/videojs/css/themes/fantasy.css +0 -0
- data/assets/themes/j1/{extensions → modules}/videojs/css/themes/fantasy.min.css +0 -0
- data/assets/themes/j1/{extensions → modules}/videojs/css/themes/forest.css +0 -0
- data/assets/themes/j1/{extensions → modules}/videojs/css/themes/forest.min.css +0 -0
- data/assets/themes/j1/{extensions → modules}/videojs/css/themes/sea.css +0 -0
- data/assets/themes/j1/{extensions → modules}/videojs/css/themes/sea.min.css +0 -0
- data/assets/themes/j1/{extensions → modules}/videojs/css/video-js.css +0 -0
- data/assets/themes/j1/{extensions → modules}/videojs/css/video-js.min.css +0 -0
- data/assets/themes/j1/{extensions → modules}/videojs/js/video.js +0 -0
- data/assets/themes/j1/{extensions → modules}/videojs/js/video.min.js +0 -0
- data/assets/themes/j1/{extensions → modules}/vimeo/froogaloop/js/froogaloop2.min.js +0 -0
- data/assets/themes/j1/{extensions → modules}/vimeo/player/js/player.js +0 -0
- data/assets/themes/j1/{extensions → modules}/vimeo/player/js/player.js.map +0 -0
- data/assets/themes/j1/{extensions → modules}/vimeo/player/js/player.min.js +0 -0
- data/assets/themes/j1/{extensions → modules}/vimeo/player/js/player.min.js.map +0 -0
- data/lib/j1/version.rb +1 -1
- data/lib/starter_web/Gemfile +21 -12
- data/lib/starter_web/_config.yml +11 -10
- data/lib/starter_web/_data/_defaults/resources.yml +13 -13
- data/lib/starter_web/_data/blocks/banner.yml +23 -31
- data/lib/starter_web/_data/blocks/footer.yml +10 -3
- data/lib/starter_web/_data/blocks/panel.yml +21 -21
- data/lib/starter_web/_data/layouts/default.yml +10 -0
- data/lib/starter_web/_data/layouts/home.yml +7 -7
- data/lib/starter_web/_data/layouts/page.yml +15 -16
- data/lib/starter_web/_data/modules/advertising.yml +48 -0
- data/lib/starter_web/_data/modules/attics.yml +3 -39
- data/lib/starter_web/_data/modules/cookiebar.yml +2 -2
- data/lib/starter_web/_data/modules/defaults/attics.yml +17 -16
- data/lib/starter_web/_data/modules/defaults/cookie_consent.yml +75 -12
- data/lib/starter_web/_data/modules/defaults/cookiebar.yml +101 -50
- data/lib/starter_web/_data/modules/defaults/jekyll_search.yml +12 -9
- data/lib/starter_web/_data/modules/defaults/navigator.yml +55 -21
- data/lib/starter_web/_data/modules/jekyll_search.yml +1 -20
- data/lib/starter_web/_data/modules/navigator.yml +1 -1
- data/lib/starter_web/_data/modules/navigator_menu.yml +3 -0
- data/lib/starter_web/_data/modules/themer.yml +10 -11
- data/lib/starter_web/_data/resources.yml +379 -174
- data/lib/starter_web/_data/template_settings.yml +118 -6
- data/lib/starter_web/_data/utilities/util_srv.yml +1 -1
- data/lib/starter_web/_plugins/asciidoctor-extensions/banner.rb +43 -0
- data/lib/starter_web/_plugins/asciidoctor-extensions/fab-icon-inline.rb +1 -1
- data/lib/starter_web/_plugins/asciidoctor-extensions/fas-icon-inline.rb +2 -2
- data/lib/starter_web/_plugins/asciidoctor-extensions/iconify-icon-inline.rb +2 -2
- data/lib/starter_web/_plugins/asciidoctor-extensions/mdi-icon-inline.rb +2 -2
- data/lib/starter_web/_plugins/asciidoctor-extensions/panel.rb +43 -0
- data/lib/starter_web/_plugins/asciidoctor-extensions/twitter-emoji-inline.rb +2 -2
- data/lib/starter_web/_plugins/{asciidoctor-extensions/lorem-inline.rb → lorem-inline.rb} +0 -0
- data/lib/starter_web/_plugins/minifyJS.rb +54 -0
- data/lib/starter_web/_plugins/minifyJSON.rb +47 -0
- data/lib/starter_web/assets/images/modules/attics/aditya-joshi-1920x1280.webp +0 -0
- data/lib/starter_web/assets/images/modules/attics/admin-dashboard-bootstrap-1280x600.webp +0 -0
- data/lib/starter_web/assets/images/modules/attics/alex-holyoake-1920x1280.webp +0 -0
- data/lib/starter_web/assets/images/modules/attics/anaya-katlego-1920x1280.webp +0 -0
- data/lib/starter_web/assets/images/modules/attics/antonella-lombardi-1920x1280.webp +0 -0
- data/lib/starter_web/assets/images/modules/attics/antonino-visalli-1920x1280.webp +0 -0
- data/lib/starter_web/assets/images/modules/attics/banner/admin-dashboard-bootstrap-1280x800-bw.webp +0 -0
- data/lib/starter_web/assets/images/modules/attics/banner/docker-1280x600-bw.webp +0 -0
- data/lib/starter_web/assets/images/modules/attics/banner/jekyll.1200x600-bw.webp +0 -0
- data/lib/starter_web/assets/images/modules/attics/banner/library-1920x800-bw.webp +0 -0
- data/lib/starter_web/assets/images/modules/attics/banner/signpost-1920x800-bw.webp +0 -0
- data/lib/starter_web/assets/images/modules/attics/banner/water-journal-1280x600.webp +0 -0
- data/lib/starter_web/assets/images/modules/attics/banner/write-1280x600-bw.webp +0 -0
- data/lib/starter_web/assets/images/modules/attics/brandon-mowinkel-1920x1280.webp +0 -0
- data/lib/starter_web/assets/images/modules/attics/building-blocks-1920x1280-bw.webp +0 -0
- data/lib/starter_web/assets/images/modules/attics/cookies-1920x1200-bw.webp +0 -0
- data/lib/starter_web/assets/images/modules/attics/daniel-jensen-1920x1280.webp +0 -0
- data/lib/starter_web/assets/images/modules/attics/giammarco-boscaro-1920x1280.webp +0 -0
- data/lib/starter_web/assets/images/modules/attics/go-up-1920x1280-bw.webp +0 -0
- data/lib/starter_web/assets/images/modules/attics/ian-schneider-1920x1280.webp +0 -0
- data/lib/starter_web/assets/images/modules/attics/ideas-start-here-1920x1280-bw.webp +0 -0
- data/lib/starter_web/assets/images/modules/attics/jason-rosewell-1920x1280.webp +0 -0
- data/lib/starter_web/assets/images/modules/attics/jessica-ruscello-1920x1280.webp +0 -0
- data/lib/starter_web/assets/images/modules/attics/lianhao-1920x1280.webp +0 -0
- data/lib/starter_web/assets/images/modules/attics/library-1920x1280-bw.webp +0 -0
- data/lib/starter_web/assets/images/modules/attics/matthaeus-1920x1280.webp +0 -0
- data/lib/starter_web/assets/images/modules/attics/nousnou-iwasaki-1920x1280.webp +0 -0
- data/lib/starter_web/assets/images/modules/attics/premium-1920x1280-bw.webp +0 -0
- data/lib/starter_web/assets/images/modules/attics/robert-v-ruggiero-1920x1280.webp +0 -0
- data/lib/starter_web/assets/images/modules/attics/romain-vignes-1920x1280.webp +0 -0
- data/lib/starter_web/assets/images/modules/attics/runner-1920x1200-bw.webp +0 -0
- data/lib/starter_web/assets/images/modules/attics/spider-web-1920x1200-bw.webp +0 -0
- data/lib/starter_web/assets/images/modules/attics/the-place-1920x1280-bw.webp +0 -0
- data/lib/starter_web/assets/images/modules/attics/welcome-1920x1280-bw.webp +0 -0
- data/lib/starter_web/assets/images/modules/carousel/cats/cat-1.jpg +0 -0
- data/lib/starter_web/assets/images/modules/carousel/mega_cities/andreas-brucker_b.jpg +0 -0
- data/lib/starter_web/assets/images/modules/carousel/mega_cities/denys-nevozhai-1_b.jpg +0 -0
- data/lib/starter_web/assets/images/modules/carousel/mega_cities/denys-nevozhai-2_b.jpg +0 -0
- data/lib/starter_web/assets/images/modules/carousel/mega_cities/luca-bravo_b.jpg +0 -0
- data/lib/starter_web/assets/images/modules/carousel/mega_cities/thomas-tucker_b.jpg +0 -0
- data/lib/starter_web/assets/images/modules/gallery/mega_cities/banter-snaps_b.jpg +0 -0
- data/lib/starter_web/assets/images/modules/gallery/mega_cities/denys-nevozhai-1_b.jpg +0 -0
- data/lib/starter_web/assets/images/modules/gallery/mega_cities/denys-nevozhai-2-bw.jpg +0 -0
- data/lib/starter_web/assets/images/modules/gallery/mega_cities/denys-nevozhai-2_b.jpg +0 -0
- data/lib/starter_web/assets/images/modules/gallery/mega_cities/emmad-mazhari_b.jpg +0 -0
- data/lib/starter_web/assets/images/modules/gallery/mega_cities/ethan-brooke_b.jpg +0 -0
- data/lib/starter_web/assets/images/modules/gallery/mega_cities/federico-rizzarelli_b.jpg +0 -0
- data/lib/starter_web/assets/images/modules/gallery/mega_cities/gints-gailis_b.jpg +0 -0
- data/lib/starter_web/assets/images/modules/gallery/mega_cities/johan-mouchet_b.jpg +0 -0
- data/lib/starter_web/assets/images/modules/gallery/mega_cities/luca-bravo_b.jpg +0 -0
- data/lib/starter_web/assets/images/modules/gallery/mega_cities/oskars-sylwan_b.jpg +0 -0
- data/lib/starter_web/assets/images/modules/gallery/mega_cities/steven-diaz_b.jpg +0 -0
- data/lib/starter_web/assets/images/modules/gallery/mega_cities/thomas-tucker-bw.jpg +0 -0
- data/lib/starter_web/assets/images/modules/gallery/mega_cities/thomas-tucker_b.jpg +0 -0
- data/lib/starter_web/assets/images/pages/roundtrip/bootstrap-1920x1000-bw.webp +0 -0
- data/lib/starter_web/assets/images/pages/roundtrip/cards-1920x1280-bw.webp +0 -0
- data/lib/starter_web/assets/images/pages/roundtrip/emojies-1920x1280-bw.webp +0 -0
- data/lib/starter_web/assets/images/pages/roundtrip/icon-fonts-1920x1280-bw.webp +0 -0
- data/lib/starter_web/assets/images/pages/roundtrip/images-1920x1280-bw.webp +0 -0
- data/lib/starter_web/assets/images/pages/roundtrip/puzzle-1920x1280-bw.webp +0 -0
- data/lib/starter_web/assets/images/pages/roundtrip/tables-1920x1280-bw.webp +0 -0
- data/lib/starter_web/assets/images/pages/roundtrip/themes-1920x1280-bw.webp +0 -0
- data/lib/starter_web/assets/images/pages/roundtrip/typography-1920x1280-bw.webp +0 -0
- data/lib/starter_web/assets/videos/headers/still/underground-broadway.webp +0 -0
- data/lib/starter_web/assets/videos/headers/still/victoria-oskolovich-on-vimeo.webp +0 -0
- data/lib/starter_web/collections/posts/public/featured/_posts/0000-00-00-welcome-to-j1-template.adoc.erb +5 -6
- data/lib/starter_web/collections/posts/public/featured/_posts/2018-05-01-confusion-about-base-url.adoc +2 -2
- data/lib/starter_web/collections/posts/public/featured/_posts/2019-05-01-top-open-source-static-site-generators.adoc +19 -19
- data/lib/starter_web/collections/posts/public/featured/_posts/2019-06-01-about-cookies.adoc +38 -42
- data/lib/starter_web/collections/posts/public/series/_posts/2018-11-01-docker-using-shared-folders.adoc +4 -7
- data/lib/starter_web/collections/posts/public/wikipedia/_posts/2016-11-20-minneapolis.adoc +1 -3
- data/lib/starter_web/collections/posts/public/wikipedia/_posts/2016-11-24-narcisse-snake-dens.adoc +3 -3
- data/lib/starter_web/collections/posts/public/wikipedia/_posts/2016-11-26-columbia-river.adoc +4 -4
- data/lib/starter_web/index.html +13 -12
- data/lib/starter_web/package.json +9 -9
- data/lib/starter_web/pages/public/about/about_site.adoc +1 -1
- data/lib/starter_web/pages/public/about/become_a_patron.adoc +1 -1
- data/lib/starter_web/pages/public/blog/navigator/archive.html +24 -18
- data/lib/starter_web/pages/public/blog/navigator/archive/categoryview.html +39 -34
- data/lib/starter_web/pages/public/blog/navigator/archive/dateview.html +43 -30
- data/lib/starter_web/pages/public/blog/navigator/archive/tagview.html +29 -29
- data/lib/starter_web/pages/public/blog/navigator/index.html +3 -3
- data/lib/starter_web/pages/public/learn/examples/floating_ad.adoc +221 -0
- data/lib/starter_web/pages/public/learn/{floating_sidebar.adoc → examples/floating_div.adoc} +60 -50
- data/lib/starter_web/pages/public/learn/kickstarter/web_in_a_day/000_includes/parts.asciidoc +1 -1
- data/lib/starter_web/pages/public/learn/kickstarter/web_in_a_day/100_meet_and_greet_jekyll.adoc +1 -0
- data/lib/starter_web/pages/public/learn/roundtrip/000_bs_tour.1.asciidoc +1 -2
- data/lib/starter_web/pages/public/learn/roundtrip/000_bs_tour.adoc +1 -2
- data/lib/starter_web/pages/public/learn/roundtrip/000_bs_tour_api.adoc +18 -20
- data/lib/starter_web/pages/public/learn/roundtrip/000_includes/attributes.asciidoc +1 -1
- data/lib/starter_web/pages/public/learn/roundtrip/000_includes/documents/410_table_3_column.asciidoc +1 -1
- data/lib/starter_web/pages/public/learn/roundtrip/000_includes/documents/419_advanced_modals_html.asciidoc +5 -5
- data/lib/starter_web/pages/public/learn/roundtrip/100_present_images.adoc +3 -3
- data/lib/starter_web/pages/public/learn/roundtrip/100_present_videos.adoc +2 -2
- data/lib/starter_web/pages/public/learn/roundtrip/200_typography.adoc +8 -4
- data/lib/starter_web/pages/public/learn/roundtrip/300_icon_fonts.adoc +37 -46
- data/lib/starter_web/pages/public/learn/roundtrip/400_asciidoc_extensions.adoc +3 -3
- data/lib/starter_web/pages/public/learn/roundtrip/410_bs_modals_extentions.adoc +10 -11
- data/lib/starter_web/pages/public/learn/roundtrip/420_responsive_tables_extensions.adoc +40 -40
- data/lib/starter_web/pages/public/learn/roundtrip/500_themes.adoc +21 -23
- data/lib/starter_web/pages/public/learn/roundtrip/510_mdb_preview/000_includes/attributes.asciidoc +69 -0
- data/lib/starter_web/pages/public/learn/roundtrip/510_mdb_preview/000_includes/documents/100_buttons.asciidoc +170 -0
- data/lib/starter_web/pages/public/learn/roundtrip/510_mdb_preview/mdb_previewer.adoc +52 -0
- data/lib/starter_web/pages/public/learn/vtutorials/000_includes/attributes.asciidoc +3 -3
- data/lib/starter_web/pages/public/learn/vtutorials/000_includes/documents/410_table_3_column.asciidoc +1 -1
- data/lib/starter_web/pages/public/learn/vtutorials/000_includes/documents/419_advanced_modals_html.asciidoc +5 -5
- data/lib/starter_web/pages/public/learn/whats_up.adoc +3 -3
- data/lib/starter_web/pages/public/legal/en/000_copyright.adoc +1 -1
- data/lib/starter_web/pages/public/legal/en/100_impress.adoc +1 -1
- data/lib/starter_web/pages/public/legal/en/300_privacy.adoc +1 -1
- data/lib/starter_web/pages/public/panels/intro_panel/panel.adoc +1 -1
- data/lib/starter_web/pages/public/previewer/000_includes/tables/mdi_icons/100_absolute_sizes.asciidoc +1 -1
- data/lib/starter_web/pages/public/previewer/000_includes/tables/mdi_icons/110_bs_grid_sizes.asciidoc +1 -1
- data/lib/starter_web/pages/public/previewer/000_includes/tables/mdi_icons/120_relative_sizes.asciidoc +1 -41
- data/lib/starter_web/pages/public/previewer/000_includes/tables/mdi_icons/200_rotate.asciidoc +1 -1
- data/lib/starter_web/pages/public/previewer/000_includes/tables/mdi_icons/300_flip.asciidoc +1 -1
- data/lib/starter_web/pages/public/previewer/000_includes/tables/mdi_icons/400_spin_pulsed.asciidoc +1 -1
- data/lib/starter_web/pages/public/previewer/000_includes/tables/mdi_icons/500_bw_color_palette.asciidoc +1 -1
- data/lib/starter_web/pages/public/previewer/000_includes/tables/mdi_icons/510_bs_color_palette.asciidoc +1 -1
- data/lib/starter_web/pages/public/previewer/000_includes/tables/mdi_icons/600_md_color_palette.asciidoc +1 -1
- data/lib/starter_web/pages/public/previewer/000_includes/tables/mdi_icons/601_md_color_palette_indigo.asciidoc +1 -1
- data/lib/starter_web/pages/public/previewer/000_includes/tables/mdi_icons/602_md_color_palette_pink.asciidoc +1 -1
- data/lib/starter_web/pages/public/previewer/000_includes/tables/twitter_emoji/100_bs_sizes.asciidoc +1 -1
- data/lib/starter_web/pages/public/previewer/000_includes/tables/twitter_emoji/100_relative_sizes.asciidoc +1 -1
- data/lib/starter_web/pages/public/previewer/000_includes/tables/twitter_emoji/200_rotate.asciidoc +1 -1
- data/lib/starter_web/pages/public/previewer/000_includes/tables/twitter_emoji/300_flip.asciidoc +1 -1
- data/lib/starter_web/pages/public/previewer/000_includes/tables/twitter_emoji/400_spin_pulsed.asciidoc +1 -1
- data/lib/starter_web/pages/public/previewer/bootstrap_theme.adoc +672 -865
- data/lib/starter_web/pages/public/previewer/iframer.adoc +18 -16
- data/lib/starter_web/pages/public/previewer/justified_gallery.html +1 -1
- data/lib/starter_web/pages/public/previewer/mdi_icons_preview.adoc +1 -1
- data/lib/starter_web/pages/public/previewer/twitter_emoji_preview.adoc +3 -3
- data/lib/starter_web/pages/public/site_search.adoc +1 -1
- data/lib/starter_web/utilsrv/_defaults/package.json +1 -1
- data/lib/starter_web/utilsrv/package.json +1 -1
- metadata +295 -216
- data/assets/data/colors.json +0 -42
- data/assets/data/cookie_consent.html +0 -223
- data/assets/data/font_sizes.json +0 -42
- data/assets/data/messages.yml +0 -131
- data/assets/data/search.yml +0 -153
- data/assets/themes/j1/adapter/js/cookie_consent.js +0 -277
- data/assets/themes/j1/core/css/custom.scss +0 -28
- data/assets/themes/j1/core/css/globals.css +0 -14523
- data/assets/themes/j1/core/css/globals.min.css +0 -1
- data/assets/themes/j1/core/css/uno.scss +0 -28
- data/assets/themes/j1/core/css/vendor.scss +0 -28
- data/assets/themes/j1/extensions/iframe_resizer/examples/frame.absolute.html +0 -86
- data/assets/themes/j1/extensions/iframe_resizer/examples/frame.content.html +0 -58
- data/assets/themes/j1/extensions/iframe_resizer/examples/frame.hover.html +0 -51
- data/assets/themes/j1/extensions/iframe_resizer/examples/frame.nested.html +0 -68
- data/assets/themes/j1/extensions/iframe_resizer/examples/frame.textarea.html +0 -46
- data/assets/themes/j1/extensions/iframe_resizer/examples/frame.tolerance.html +0 -79
- data/assets/themes/j1/extensions/iframe_resizer/examples/index.html +0 -70
- data/assets/themes/j1/extensions/iframe_resizer/examples/two.html +0 -71
- data/assets/themes/j1/extensions/iframe_resizer/js/client/iframeResizer.contentWindow.js +0 -1104
- data/assets/themes/j1/extensions/iframe_resizer/js/client/iframeResizer.contentWindow.map +0 -1
- data/assets/themes/j1/extensions/iframe_resizer/js/client/iframeResizer.contentWindow.min.js +0 -10
- data/assets/themes/j1/extensions/log4javascript/log4javascript.js +0 -5826
- data/lib/starter_web/_data/modules/cookie_consent.yml +0 -128
- data/lib/starter_web/assets/images/modules/attics/aditya-joshi-1920x1280.jpg +0 -0
- data/lib/starter_web/assets/images/modules/attics/admin-dashboard-bootstrap-1280x600.png +0 -0
- data/lib/starter_web/assets/images/modules/attics/alex-holyoake-1920x1280.jpg +0 -0
- data/lib/starter_web/assets/images/modules/attics/anaya-katlego-1920x1280.jpg +0 -0
- data/lib/starter_web/assets/images/modules/attics/antonella-lombardi-1920x1280.jpg +0 -0
- data/lib/starter_web/assets/images/modules/attics/antonino-visalli-1920x1280.jpg +0 -0
- data/lib/starter_web/assets/images/modules/attics/banner/admin-dashboard-bootstrap-1280x800-bw.jpg +0 -0
- data/lib/starter_web/assets/images/modules/attics/banner/docker-1280x600-bw.jpg +0 -0
- data/lib/starter_web/assets/images/modules/attics/banner/jekyll.1200x600-bw.jpg +0 -0
- data/lib/starter_web/assets/images/modules/attics/banner/library-1920x800-bw.jpg +0 -0
- data/lib/starter_web/assets/images/modules/attics/banner/signpost-1920x800-bw.jpg +0 -0
- data/lib/starter_web/assets/images/modules/attics/banner/water-journal-1280x600.jpg +0 -0
- data/lib/starter_web/assets/images/modules/attics/banner/write-1280x600-bw.jpg +0 -0
- data/lib/starter_web/assets/images/modules/attics/brandon-mowinkel-1920x1280.jpg +0 -0
- data/lib/starter_web/assets/images/modules/attics/building-blocks-1920x1280-bw.jpg +0 -0
- data/lib/starter_web/assets/images/modules/attics/cookies-1920x1200-bw.jpg +0 -0
- data/lib/starter_web/assets/images/modules/attics/daniel-jensen-1920x1280.jpg +0 -0
- data/lib/starter_web/assets/images/modules/attics/giammarco-boscaro-1920x1280.jpg +0 -0
- data/lib/starter_web/assets/images/modules/attics/go-up-1920x1280-bw.jpg +0 -0
- data/lib/starter_web/assets/images/modules/attics/ian-schneider-1920x1280.jpg +0 -0
- data/lib/starter_web/assets/images/modules/attics/ideas-start-here-1920x1280-bw.jpg +0 -0
- data/lib/starter_web/assets/images/modules/attics/jason-rosewell-1920x1280.jpg +0 -0
- data/lib/starter_web/assets/images/modules/attics/jessica-ruscello-1920x1280.jpg +0 -0
- data/lib/starter_web/assets/images/modules/attics/lianhao-1920x1280.jpg +0 -0
- data/lib/starter_web/assets/images/modules/attics/library-1920x1280-bw.jpg +0 -0
- data/lib/starter_web/assets/images/modules/attics/mae-mu-Vf9gbsLZyf0-unsplash.jpg +0 -0
- data/lib/starter_web/assets/images/modules/attics/mae-mue-1920x1280-v.jpg +0 -0
- data/lib/starter_web/assets/images/modules/attics/mae-mue-1920x1280.jpg +0 -0
- data/lib/starter_web/assets/images/modules/attics/matthaeus-1920x1280.jpg +0 -0
- data/lib/starter_web/assets/images/modules/attics/nousnou-iwasaki-1920x1280.jpg +0 -0
- data/lib/starter_web/assets/images/modules/attics/premium-1920x1280-bw.jpg +0 -0
- data/lib/starter_web/assets/images/modules/attics/robert-v-ruggiero-1920x1280.jpg +0 -0
- data/lib/starter_web/assets/images/modules/attics/romain-vignes-1920x1280.jpg +0 -0
- data/lib/starter_web/assets/images/modules/attics/runner-1920x1200-bw.jpg +0 -0
- data/lib/starter_web/assets/images/modules/attics/spider-web-1920x1200-bw.jpg +0 -0
- data/lib/starter_web/assets/images/modules/attics/the-place-1920x1280-bw.jpg +0 -0
- data/lib/starter_web/assets/images/modules/attics/welcome-1920x1280-bw.jpg +0 -0
- data/lib/starter_web/assets/images/pages/roundtrip/bootstrap-1920x1000-bw.jpg +0 -0
- data/lib/starter_web/assets/images/pages/roundtrip/cards-1920x1280-bw.jpg +0 -0
- data/lib/starter_web/assets/images/pages/roundtrip/emojies-1920x1280-bw.jpg +0 -0
- data/lib/starter_web/assets/images/pages/roundtrip/icon-fonts-1920x1280-bw.jpg +0 -0
- data/lib/starter_web/assets/images/pages/roundtrip/images-1920x1280-bw.jpg +0 -0
- data/lib/starter_web/assets/images/pages/roundtrip/puzzle-1920x1280-bw.jpg +0 -0
- data/lib/starter_web/assets/images/pages/roundtrip/tables-1920x1280-bw.jpg +0 -0
- data/lib/starter_web/assets/images/pages/roundtrip/themes-1920x1280-bw.jpg +0 -0
- data/lib/starter_web/assets/images/pages/roundtrip/typography-1920x1280-bw.jpg +0 -0
- data/lib/starter_web/assets/videos/headers/still/underground-broadway.png +0 -0
- data/lib/starter_web/assets/videos/headers/still/victoria-oskolovich-on-vimeo.png +0 -0
- data/lib/starter_web/pages/public/clear_button.adoc +0 -121
@@ -9,8 +9,9 @@ categories: [ pages ]
|
|
9
9
|
|
10
10
|
permalink: /pages/public/learn/whats_up/
|
11
11
|
regenerate: false
|
12
|
+
toc: true
|
12
13
|
|
13
|
-
resources: [
|
14
|
+
resources: []
|
14
15
|
resource_options:
|
15
16
|
- ssm:
|
16
17
|
mode: menu
|
@@ -19,7 +20,7 @@ resource_options:
|
|
19
20
|
padding_bottom: 50
|
20
21
|
opacity: 0.5
|
21
22
|
slides:
|
22
|
-
- url: /assets/images/modules/attics/runner-1920x1200-bw.
|
23
|
+
- url: /assets/images/modules/attics/runner-1920x1200-bw.webp
|
23
24
|
alt: Photo by Alexander Redl on Unsplash
|
24
25
|
badge:
|
25
26
|
type: unsplash
|
@@ -83,7 +84,6 @@ implemented.
|
|
83
84
|
|
84
85
|
For that reason, it was a good decision to start from here.
|
85
86
|
|
86
|
-
|
87
87
|
== Whats up
|
88
88
|
|
89
89
|
First of all, you've started already! The important first step in to find
|
@@ -17,7 +17,7 @@ resource_options:
|
|
17
17
|
padding_bottom: 50
|
18
18
|
opacity: 0.5
|
19
19
|
slides:
|
20
|
-
- url: /assets/images/modules/attics/giammarco-boscaro-1920x1280.
|
20
|
+
- url: /assets/images/modules/attics/giammarco-boscaro-1920x1280.webp
|
21
21
|
alt: Photo by Giammarco Boscaro
|
22
22
|
alignY: 0.5
|
23
23
|
badge:
|
@@ -1,6 +1,6 @@
|
|
1
1
|
|
2
2
|
.Fixed (absolute) sizes
|
3
|
-
[cols="2,1,9a", options="header", role="table-responsive mb-5"]
|
3
|
+
[cols="2,1,9a", options="header", role="table-responsive-stacked-lg mb-5"]
|
4
4
|
|===============================================================================
|
5
5
|
|Class |Result |Code
|
6
6
|
|
data/lib/starter_web/pages/public/previewer/000_includes/tables/mdi_icons/110_bs_grid_sizes.asciidoc
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
|
2
2
|
.Bootstrap (BS) grid sizes
|
3
|
-
[cols="2,1,9a", options="header", role="table-responsive mb-5"]
|
3
|
+
[cols="2,1,9a", options="header", role="table-responsive-stacked-lg mb-5"]
|
4
4
|
|===============================================================================
|
5
5
|
|Class |Result |Code
|
6
6
|
|
@@ -1,6 +1,6 @@
|
|
1
1
|
|
2
2
|
.Relative sizes
|
3
|
-
[cols="2,
|
3
|
+
[cols="2,^2m,8a", options="header", role="table-responsive-stacked-lg mb-5"]
|
4
4
|
|===============================================================================
|
5
5
|
|Class |Result |Code
|
6
6
|
|
@@ -44,44 +44,4 @@
|
|
44
44
|
<i class="mdi mdi-5x mdi-account"></i>
|
45
45
|
----
|
46
46
|
|
47
|
-
|`mdi-6x`
|
48
|
-
^|pass:[<i class="mdi mdi-6x mdi-account"></i>]
|
49
|
-
|
|
50
|
-
[source, html]
|
51
|
-
----
|
52
|
-
<i class="mdi mdi-6x mdi-account"></i>
|
53
|
-
----
|
54
|
-
|
55
|
-
|`mdi-7x`
|
56
|
-
^|pass:[<i class="mdi mdi-7x mdi-account"></i>]
|
57
|
-
|
|
58
|
-
[source, html]
|
59
|
-
----
|
60
|
-
<i class="mdi mdi-7x mdi-account"></i>
|
61
|
-
----
|
62
|
-
|
63
|
-
|`mdi-8x`
|
64
|
-
^|pass:[<i class="mdi mdi-8x mdi-account"></i>]
|
65
|
-
|
|
66
|
-
[source, html]
|
67
|
-
----
|
68
|
-
<i class="mdi mdi-1x mdi-account"></i>
|
69
|
-
----
|
70
|
-
|
71
|
-
|`mdi-9x`
|
72
|
-
^|pass:[<i class="mdi mdi-9x mdi-account"></i>]
|
73
|
-
|
|
74
|
-
[source, html]
|
75
|
-
----
|
76
|
-
<i class="mdi mdi-9x mdi-account"></i>
|
77
|
-
----
|
78
|
-
|
79
|
-
|`mdi-10x`
|
80
|
-
^|pass:[<i class="mdi mdi-10x mdi-account"></i>]
|
81
|
-
|
|
82
|
-
[source, html]
|
83
|
-
----
|
84
|
-
<i class="mdi mdi-10x mdi-account"></i>
|
85
|
-
----
|
86
|
-
|
87
47
|
|===============================================================================
|
@@ -1,6 +1,6 @@
|
|
1
1
|
|
2
2
|
.Black and White color palette
|
3
|
-
[cols="2,1,9a", options="header", role="table-responsive mb-5"]
|
3
|
+
[cols="2,1,9a", options="header", role="table-responsive-stacked-lg mb-5"]
|
4
4
|
|===============================================================================
|
5
5
|
|Class |Result |Code
|
6
6
|
|
@@ -1,6 +1,6 @@
|
|
1
1
|
|
2
2
|
.Bootstrap (BS) color palette
|
3
|
-
[cols="2,1,9a", options="header", role="table-responsive mb-5"]
|
3
|
+
[cols="2,1,9a", options="header", role="table-responsive-stacked-lg mb-5"]
|
4
4
|
|===============================================================================
|
5
5
|
|Class |Result |Code
|
6
6
|
|
@@ -1,6 +1,6 @@
|
|
1
1
|
|
2
2
|
.Material Design (MD) color palette
|
3
|
-
[cols="2,1,9a", options="header", role="table-responsive mb-5"]
|
3
|
+
[cols="2,1,9a", options="header", role="table-responsive-stacked-lg mb-5"]
|
4
4
|
|===============================================================================
|
5
5
|
|Class |Result |Code
|
6
6
|
|
@@ -1,6 +1,6 @@
|
|
1
1
|
|
2
2
|
.MD colors - Indigo
|
3
|
-
[cols="2,1,9a", options="header", role="table-responsive mb-5"]
|
3
|
+
[cols="2,1,9a", options="header", role="table-responsive-stacked-lg mb-5"]
|
4
4
|
|===============================================================================
|
5
5
|
|Class |Result |Code
|
6
6
|
|
@@ -1,6 +1,6 @@
|
|
1
1
|
|
2
2
|
.MD colors - Pink
|
3
|
-
[cols="2,1,9a", options="header", role="table-responsive mb-5"]
|
3
|
+
[cols="2,1,9a", options="header", role="table-responsive-stacked-lg mb-5"]
|
4
4
|
|===============================================================================
|
5
5
|
|Class |Result |Code
|
6
6
|
|
data/lib/starter_web/pages/public/previewer/000_includes/tables/twitter_emoji/100_bs_sizes.asciidoc
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
|
2
2
|
.Bootstrap (BS) grid sizes
|
3
|
-
[cols="2,1,9a", options="header", role="table-responsive mb-5"]
|
3
|
+
[cols="2,1,9a", options="header", role="table-responsive-stacked-lg mb-5"]
|
4
4
|
|===============================================================================
|
5
5
|
|Class |Result |Code
|
6
6
|
|
@@ -1,6 +1,6 @@
|
|
1
1
|
|
2
2
|
.Relative sizes
|
3
|
-
[cols="2,1,9a", options="header", role="table-responsive mb-5"]
|
3
|
+
[cols="2,1,9a", options="header", role="table-responsive-stacked-lg mb-5"]
|
4
4
|
|===============================================================================
|
5
5
|
|Class |Result |Code
|
6
6
|
|
@@ -4,7 +4,7 @@ tagline: common components
|
|
4
4
|
description: Themes Previewer for common components of a selected theme.
|
5
5
|
|
6
6
|
tags: [ App, Previewer ]
|
7
|
-
index:
|
7
|
+
index: [
|
8
8
|
Bootstrap, Theme, Preview, Common,
|
9
9
|
Component, Navbars, Buttons, Typography,
|
10
10
|
Tables, Forms, Navs, Pills, Breadcrumbs,
|
@@ -20,14 +20,14 @@ flowtext: false
|
|
20
20
|
permalink: /pages/public/previewer/theme/
|
21
21
|
regenerate: false
|
22
22
|
|
23
|
-
resources: []
|
23
|
+
resources: [ rouge ]
|
24
24
|
resource_options:
|
25
25
|
- attic:
|
26
26
|
padding_top: 400
|
27
27
|
padding_bottom: 50
|
28
28
|
opacity: 0.5
|
29
29
|
slides:
|
30
|
-
- url: /assets/images/pages/roundtrip/themes-1920x1280-bw.
|
30
|
+
- url: /assets/images/pages/roundtrip/themes-1920x1280-bw.webp
|
31
31
|
alt: Photo by Clem Onojeghuo on Unsplash
|
32
32
|
badge:
|
33
33
|
type: unsplash
|
@@ -60,7 +60,6 @@ include::{includedir}/attributes.asciidoc[tag=urls]
|
|
60
60
|
// Additional ASCIIDOC attributes goes here
|
61
61
|
//
|
62
62
|
|
63
|
-
|
64
63
|
++++
|
65
64
|
<!-- Prepend H1 tag here -->
|
66
65
|
<div id="h1_theme_name" class="row mb-3">
|
@@ -110,101 +109,115 @@ support for the collapse plugin.
|
|
110
109
|
pass:[<i class="mdi mdi-book-open mdi-24px mdi-md-bg-primary"></i>]
|
111
110
|
Refer to: link:{bs_doc_components_navbar}[Bootstrap Docs, window="_blank"].
|
112
111
|
|
112
|
+
Theming the navbar has never been easier thanks to the combination of
|
113
|
+
theming classes and background-color utilities. Choose from `.navbar-light`
|
114
|
+
for use with light background colors, or '.navbar-dark' for dark background
|
115
|
+
colors. Then, customize with `.bg-*` utilities.
|
116
|
+
|
113
117
|
++++
|
114
|
-
|
115
|
-
|
116
|
-
<
|
117
|
-
|
118
|
-
|
119
|
-
|
120
|
-
|
121
|
-
|
122
|
-
|
123
|
-
|
124
|
-
</
|
125
|
-
|
126
|
-
|
127
|
-
|
128
|
-
|
129
|
-
|
130
|
-
|
131
|
-
|
132
|
-
|
133
|
-
|
134
|
-
|
135
|
-
|
136
|
-
|
137
|
-
|
138
|
-
|
139
|
-
|
140
|
-
<form class="form-inline my-2 my-lg-0">
|
141
|
-
<input class="form-control mr-sm-2" type="text" placeholder="Search">
|
142
|
-
<button class="btn btn-secondary btn-raised my-2 my-sm-0" type="submit">Search</button>
|
143
|
-
</form>
|
144
|
-
</div>
|
145
|
-
</nav>
|
146
|
-
</div>
|
147
|
-
<div class="bs-component mb-2">
|
148
|
-
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
|
149
|
-
<a class="navbar-brand" href="#">Navbar</a>
|
150
|
-
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor02" aria-controls="navbarColor02" aria-expanded="false" aria-label="Toggle navigation">
|
151
|
-
<span class="navbar-toggler-icon"></span>
|
152
|
-
</button>
|
153
|
-
<div class="collapse navbar-collapse" id="navbarColor02">
|
154
|
-
<ul class="navbar-nav mr-auto">
|
155
|
-
<li class="nav-item active">
|
156
|
-
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
|
157
|
-
</li>
|
158
|
-
<li class="nav-item">
|
159
|
-
<a class="nav-link" href="#">Features</a>
|
160
|
-
</li>
|
161
|
-
<li class="nav-item">
|
162
|
-
<a class="nav-link" href="#">Pricing</a>
|
163
|
-
</li>
|
164
|
-
<li class="nav-item">
|
165
|
-
<a class="nav-link" href="#">About</a>
|
166
|
-
</li>
|
167
|
-
</ul>
|
168
|
-
<form class="form-inline my-2 my-lg-0">
|
169
|
-
<input class="form-control mr-sm-2" type="text" placeholder="Search">
|
170
|
-
<button class="btn btn-secondary btn-raised my-2 my-sm-0" type="submit">Search</button>
|
171
|
-
</form>
|
172
|
-
</div>
|
173
|
-
</nav>
|
174
|
-
</div>
|
175
|
-
<div class="bs-component mb-2">
|
176
|
-
<nav class="navbar navbar-expand-lg navbar-light bg-light">
|
177
|
-
<a class="navbar-brand" href="#">Navbar</a>
|
178
|
-
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor03" aria-controls="navbarColor03" aria-expanded="false" aria-label="Toggle navigation">
|
179
|
-
<span class="navbar-toggler-icon"></span>
|
180
|
-
</button>
|
181
|
-
<div class="collapse navbar-collapse" id="navbarColor03">
|
182
|
-
<ul class="navbar-nav mr-auto">
|
183
|
-
<li class="nav-item active">
|
184
|
-
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
|
185
|
-
</li>
|
186
|
-
<li class="nav-item">
|
187
|
-
<a class="nav-link" href="#">Features</a>
|
188
|
-
</li>
|
189
|
-
<li class="nav-item">
|
190
|
-
<a class="nav-link" href="#">Pricing</a>
|
191
|
-
</li>
|
192
|
-
<li class="nav-item">
|
193
|
-
<a class="nav-link" href="#">About</a>
|
194
|
-
</li>
|
195
|
-
</ul>
|
196
|
-
<form class="form-inline my-2 my-lg-0">
|
197
|
-
<input class="form-control mr-sm-2" type="text" placeholder="Search">
|
198
|
-
<button class="btn btn-secondary btn-raised my-2 my-sm-0" type="submit">Search</button>
|
199
|
-
</form>
|
200
|
-
</div>
|
201
|
-
</nav>
|
202
|
-
</div>
|
118
|
+
<div class="doc-example">
|
119
|
+
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
|
120
|
+
<a class="navbar-brand" href="#">Navbar<div class="ripple-container"></div></a>
|
121
|
+
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor01" aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation">
|
122
|
+
<span class="navbar-toggler-icon"></span>
|
123
|
+
</button>
|
124
|
+
|
125
|
+
<div class="collapse navbar-collapse" id="navbarColor01">
|
126
|
+
<ul class="navbar-nav mr-auto">
|
127
|
+
<li class="nav-item active">
|
128
|
+
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
|
129
|
+
</li>
|
130
|
+
<li class="nav-item">
|
131
|
+
<a class="nav-link" href="#">Features</a>
|
132
|
+
</li>
|
133
|
+
<li class="nav-item">
|
134
|
+
<a class="nav-link" href="#">Pricing</a>
|
135
|
+
</li>
|
136
|
+
<li class="nav-item">
|
137
|
+
<a class="nav-link" href="#">About</a>
|
138
|
+
</li>
|
139
|
+
</ul>
|
140
|
+
<form class="form-inline">
|
141
|
+
<span class="bmd-form-group"><input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search"></span>
|
142
|
+
<button class="btn btn-outline-info my-2 my-sm-0" type="submit">Search</button>
|
143
|
+
</form>
|
203
144
|
</div>
|
204
|
-
</
|
145
|
+
</nav>
|
146
|
+
|
147
|
+
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
|
148
|
+
<a class="navbar-brand" href="#">Navbar</a>
|
149
|
+
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor02" aria-controls="navbarColor02" aria-expanded="false" aria-label="Toggle navigation">
|
150
|
+
<span class="navbar-toggler-icon"></span>
|
151
|
+
</button>
|
152
|
+
|
153
|
+
<div class="collapse navbar-collapse" id="navbarColor02">
|
154
|
+
<ul class="navbar-nav mr-auto">
|
155
|
+
<li class="nav-item active">
|
156
|
+
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
|
157
|
+
</li>
|
158
|
+
<li class="nav-item">
|
159
|
+
<a class="nav-link" href="#">Features</a>
|
160
|
+
</li>
|
161
|
+
<li class="nav-item">
|
162
|
+
<a class="nav-link" href="#">Pricing</a>
|
163
|
+
</li>
|
164
|
+
<li class="nav-item">
|
165
|
+
<a class="nav-link" href="#">About</a>
|
166
|
+
</li>
|
167
|
+
</ul>
|
168
|
+
<form class="form-inline">
|
169
|
+
<span class="bmd-form-group"><input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search"></span>
|
170
|
+
<button class="btn btn-outline-light my-2 my-sm-0" type="submit">Search</button>
|
171
|
+
</form>
|
172
|
+
</div>
|
173
|
+
</nav>
|
174
|
+
|
175
|
+
<nav class="navbar navbar-expand-lg navbar-light" style="background-color: #e3f2fd;">
|
176
|
+
<a class="navbar-brand" href="#">Navbar</a>
|
177
|
+
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor03" aria-controls="navbarColor03" aria-expanded="false" aria-label="Toggle navigation">
|
178
|
+
<span class="navbar-toggler-icon"></span>
|
179
|
+
</button>
|
180
|
+
|
181
|
+
<div class="collapse navbar-collapse" id="navbarColor03">
|
182
|
+
<ul class="navbar-nav mr-auto">
|
183
|
+
<li class="nav-item active">
|
184
|
+
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
|
185
|
+
</li>
|
186
|
+
<li class="nav-item">
|
187
|
+
<a class="nav-link" href="#">Features</a>
|
188
|
+
</li>
|
189
|
+
<li class="nav-item">
|
190
|
+
<a class="nav-link" href="#">Pricing</a>
|
191
|
+
</li>
|
192
|
+
<li class="nav-item">
|
193
|
+
<a class="nav-link" href="#">About</a>
|
194
|
+
</li>
|
195
|
+
</ul>
|
196
|
+
<form class="form-inline">
|
197
|
+
<span class="bmd-form-group"><input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search"></span>
|
198
|
+
<button class="btn btn-outline-primary my-2 my-sm-0" type="submit">Search</button>
|
199
|
+
</form>
|
200
|
+
</div>
|
201
|
+
</nav>
|
205
202
|
</div>
|
206
203
|
++++
|
207
204
|
|
205
|
+
[source, html, role="noclip"]
|
206
|
+
----
|
207
|
+
<nav class="navbar navbar-dark bg-dark">
|
208
|
+
<!-- Navbar content -->
|
209
|
+
</nav>
|
210
|
+
|
211
|
+
<nav class="navbar navbar-dark bg-primary">
|
212
|
+
<!-- Navbar content -->
|
213
|
+
</nav>
|
214
|
+
|
215
|
+
<nav class="navbar navbar-light" style="background-color: #e3f2fd;">
|
216
|
+
<!-- Navbar content -->
|
217
|
+
</nav>
|
218
|
+
----
|
219
|
+
|
220
|
+
|
208
221
|
== Buttons
|
209
222
|
|
210
223
|
Use Bootstrap’s custom button styles for actions in forms, dialogs, and
|
@@ -215,169 +228,128 @@ with a few extras thrown in for more control.
|
|
215
228
|
pass:[<i class="mdi mdi-book-open mdi-24px mdi-md-bg-primary"></i>]
|
216
229
|
Refer to: link:{bs_doc_components_buttons}[Bootstrap Docs, window="_blank"].
|
217
230
|
|
231
|
+
=== Active buttons
|
232
|
+
|
233
|
+
Buttons will appear pressed (with a darker background, darker border, and
|
234
|
+
inset shadow) when active.
|
235
|
+
++++
|
236
|
+
<div class="doc-example mb-3">
|
237
|
+
<button type="button" class="btn btn-primary btn-raised">Primary</button>
|
238
|
+
<button type="button" class="btn btn-secondary btn-raised">Secondary</button>
|
239
|
+
<button type="button" class="btn btn-success btn-raised">Success</button>
|
240
|
+
<button type="button" class="btn btn-info btn-raised">Info</button>
|
241
|
+
<button type="button" class="btn btn-warning btn-raised">Warning</button>
|
242
|
+
<button type="button" class="btn btn-danger btn-raised">Danger</button>
|
243
|
+
<button type="button" class="btn btn-link btn-raised">Link</button>
|
244
|
+
</div>
|
218
245
|
++++
|
219
|
-
<!-- Buttons
|
220
|
-
============================================================================ -->
|
221
|
-
<div class="bs-docs-section">
|
222
|
-
<div class="row mb-4">
|
223
|
-
<div class="col-md-10">
|
224
|
-
<p class="bs-component">
|
225
|
-
<button type="button" class="btn btn-primary btn-raised">Primary</button>
|
226
|
-
<button type="button" class="btn btn-secondary btn-raised">Secondary</button>
|
227
|
-
<button type="button" class="btn btn-success btn-raised">Success</button>
|
228
|
-
<button type="button" class="btn btn-info btn-raised">Info</button>
|
229
|
-
<button type="button" class="btn btn-warning btn-raised">Warning</button>
|
230
|
-
<button type="button" class="btn btn-danger btn-raised">Danger</button>
|
231
|
-
<button type="button" class="btn btn-link btn-raised">Link</button>
|
232
|
-
</p>
|
233
|
-
<p class="bs-component">
|
234
|
-
<button type="button" class="btn btn-primary btn-raised disabled">Primary</button>
|
235
|
-
<button type="button" class="btn btn-secondary btn-raised disabled">Secondary</button>
|
236
|
-
<button type="button" class="btn btn-success btn-raised disabled">Success</button>
|
237
|
-
<button type="button" class="btn btn-info btn-raised disabled">Info</button>
|
238
|
-
<button type="button" class="btn btn-warning btn-raised disabled">Warning</button>
|
239
|
-
<button type="button" class="btn btn-danger btn-raised disabled">Danger</button>
|
240
|
-
<button type="button" class="btn btn-link btn-raised disabled">Link</button>
|
241
|
-
</p>
|
242
|
-
<p class="bs-component">
|
243
|
-
<button type="button" class="btn btn-outline-primary btn-raised">Primary</button>
|
244
|
-
<button type="button" class="btn btn-outline-secondary btn-raised">Secondary</button>
|
245
|
-
<button type="button" class="btn btn-outline-success btn-raised">Success</button>
|
246
|
-
<button type="button" class="btn btn-outline-info btn-raised">Info</button>
|
247
|
-
<button type="button" class="btn btn-outline-warning btn-raised">Warning</button>
|
248
|
-
<button type="button" class="btn btn-outline-danger btn-raised">Danger</button>
|
249
|
-
</p>
|
250
|
-
<div class="bs-component">
|
251
|
-
<div class="btn-group" role="group" aria-label="Button group with nested dropdown">
|
252
|
-
<button type="button" class="btn btn-primary btn-raised">Primary</button>
|
253
|
-
<div class="btn-group" role="group">
|
254
|
-
<button id="btnGroupDrop1" type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
|
255
|
-
<div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
|
256
|
-
<a class="dropdown-item" href="#">Dropdown link</a>
|
257
|
-
<a class="dropdown-item" href="#">Dropdown link</a>
|
258
|
-
</div>
|
259
|
-
</div>
|
260
|
-
</div>
|
261
|
-
<div class="btn-group" role="group" aria-label="Button group with nested dropdown">
|
262
|
-
<button type="button" class="btn btn-success btn-raised">Success</button>
|
263
|
-
<div class="btn-group" role="group">
|
264
|
-
<button id="btnGroupDrop2" type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
|
265
|
-
<div class="dropdown-menu" aria-labelledby="btnGroupDrop2">
|
266
|
-
<a class="dropdown-item" href="#">Dropdown link</a>
|
267
|
-
<a class="dropdown-item" href="#">Dropdown link</a>
|
268
|
-
</div>
|
269
|
-
</div>
|
270
|
-
</div>
|
271
|
-
<div class="btn-group" role="group" aria-label="Button group with nested dropdown">
|
272
|
-
<button type="button" class="btn btn-info">Info</button>
|
273
|
-
<div class="btn-group" role="group">
|
274
|
-
<button id="btnGroupDrop3" type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
|
275
|
-
<div class="dropdown-menu" aria-labelledby="btnGroupDrop3">
|
276
|
-
<a class="dropdown-item" href="#">Dropdown link</a>
|
277
|
-
<a class="dropdown-item" href="#">Dropdown link</a>
|
278
|
-
</div>
|
279
|
-
</div>
|
280
|
-
</div>
|
281
|
-
<div class="btn-group" role="group" aria-label="Button group with nested dropdown">
|
282
|
-
<button type="button" class="btn btn-danger">Danger</button>
|
283
|
-
<div class="btn-group" role="group">
|
284
|
-
<button id="btnGroupDrop4" type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
|
285
|
-
<div class="dropdown-menu" aria-labelledby="btnGroupDrop4">
|
286
|
-
<a class="dropdown-item" href="#">Dropdown link</a>
|
287
|
-
<a class="dropdown-item" href="#">Dropdown link</a>
|
288
|
-
</div>
|
289
|
-
</div>
|
290
|
-
</div>
|
291
|
-
</div>
|
292
|
-
<div class="bs-component mt-2">
|
293
|
-
<button type="button" class="btn btn-primary btn-raised btn-lg">Large button</button>
|
294
|
-
<button type="button" class="btn btn-primary btn-raised">Default button</button>
|
295
|
-
<button type="button" class="btn btn-primary btn-raised btn-sm">Small button</button>
|
296
|
-
</div>
|
297
|
-
</div>
|
298
|
-
<div class="col-md-12">
|
299
|
-
<p class="bs-component mt-2">
|
300
|
-
<button type="button" class="btn btn-primary btn-raised btn-lg btn-block">Block level button</button>
|
301
|
-
</p>
|
302
|
-
<div class="bs-component" style="margin-bottom: 15px;">
|
303
|
-
<div class="btn-group" data-toggle="buttons">
|
304
|
-
<label class="btn btn-primary btn-raised active">
|
305
|
-
<input type="checkbox" checked> Checkbox 1
|
306
|
-
</label>
|
307
|
-
<label class="btn btn-primary btn-raised">
|
308
|
-
<input type="checkbox"> Checkbox 2
|
309
|
-
</label>
|
310
|
-
<label class="btn btn-primary btn-raised">
|
311
|
-
<input type="checkbox"> Checkbox 3
|
312
|
-
</label>
|
313
|
-
</div>
|
314
|
-
</div>
|
315
|
-
<div class="bs-component" style="margin-bottom: 15px;">
|
316
|
-
<div class="btn-group" data-toggle="buttons">
|
317
|
-
<label class="btn btn-primary btn-raised active">
|
318
|
-
<input type="radio" name="options" id="option1" checked> Radio 1
|
319
|
-
</label>
|
320
|
-
<label class="btn btn-primary btn-raised">
|
321
|
-
<input type="radio" name="options" id="option2"> Radio 2
|
322
|
-
</label>
|
323
|
-
<label class="btn btn-primary btn-raised">
|
324
|
-
<input type="radio" name="options" id="option3"> Radio 3
|
325
|
-
</label>
|
326
|
-
</div>
|
327
|
-
</div>
|
328
246
|
|
329
|
-
|
330
|
-
|
331
|
-
|
332
|
-
|
333
|
-
|
334
|
-
|
335
|
-
|
336
|
-
|
337
|
-
|
338
|
-
|
339
|
-
|
340
|
-
|
341
|
-
|
342
|
-
|
343
|
-
|
344
|
-
|
345
|
-
|
346
|
-
|
347
|
-
|
348
|
-
|
349
|
-
|
350
|
-
|
351
|
-
|
352
|
-
|
353
|
-
|
354
|
-
|
355
|
-
|
356
|
-
|
357
|
-
|
358
|
-
|
359
|
-
|
360
|
-
|
361
|
-
|
362
|
-
|
363
|
-
|
364
|
-
|
365
|
-
|
366
|
-
|
367
|
-
|
368
|
-
|
369
|
-
|
370
|
-
|
371
|
-
|
372
|
-
|
373
|
-
|
374
|
-
|
375
|
-
|
376
|
-
|
247
|
+
=== Disabled buttons
|
248
|
+
|
249
|
+
Buttons look inactive by adding the disabled boolean attribute to any
|
250
|
+
<button> element.
|
251
|
+
++++
|
252
|
+
<div class="doc-example mb-3">
|
253
|
+
<button type="button" class="btn btn-primary btn-raised disabled">Primary</button>
|
254
|
+
<button type="button" class="btn btn-secondary btn-raised disabled">Secondary</button>
|
255
|
+
<button type="button" class="btn btn-success btn-raised disabled">Success</button>
|
256
|
+
<button type="button" class="btn btn-info btn-raised disabled">Info</button>
|
257
|
+
<button type="button" class="btn btn-warning btn-raised disabled">Warning</button>
|
258
|
+
<button type="button" class="btn btn-danger btn-raised disabled">Danger</button>
|
259
|
+
<button type="button" class="btn btn-link btn-raised disabled">Link</button>
|
260
|
+
</div>
|
261
|
+
++++
|
262
|
+
|
263
|
+
=== Outline buttons
|
264
|
+
|
265
|
+
In need of a button, but not the hefty background colors they bring? Replace
|
266
|
+
the default modifier classes with the `.btn-outline-*` ones to remove all
|
267
|
+
background images and colors on any button.
|
268
|
+
|
269
|
+
++++
|
270
|
+
<div class="doc-example mb-3">
|
271
|
+
<button type="button" class="btn btn-outline-primary btn-raised">Primary</button>
|
272
|
+
<button type="button" class="btn btn-outline-secondary btn-raised">Secondary</button>
|
273
|
+
<button type="button" class="btn btn-outline-success btn-raised">Success</button>
|
274
|
+
<button type="button" class="btn btn-outline-info btn-raised">Info</button>
|
275
|
+
<button type="button" class="btn btn-outline-warning btn-raised">Warning</button>
|
276
|
+
<button type="button" class="btn btn-outline-danger btn-raised">Danger</button>
|
277
|
+
</div>
|
278
|
+
++++
|
279
|
+
|
280
|
+
=== Button sizes
|
281
|
+
|
282
|
+
Beside the default size, small and large buttons are available.
|
283
|
+
|
284
|
+
++++
|
285
|
+
<div class="doc-example mb-3">
|
286
|
+
<button type="button" class="btn btn-primary btn-raised btn-lg">Large button</button>
|
287
|
+
<button type="button" class="btn btn-primary btn-raised">Default button</button>
|
288
|
+
<button type="button" class="btn btn-primary btn-raised btn-sm">Small button</button>
|
289
|
+
</div>
|
290
|
+
++++
|
291
|
+
|
292
|
+
=== Block level button
|
293
|
+
|
294
|
+
Create block level buttons—those that span the full width of a parent—by
|
295
|
+
adding .btn-block.
|
296
|
+
|
297
|
+
++++
|
298
|
+
<div class="doc-example mb-3">
|
299
|
+
<button type="button" class="btn btn-primary btn-lg btn-block btn-raised">Block level button</button>
|
300
|
+
<button type="button" class="btn btn-secondary btn-lg btn-block btn-raised">Block level button</button>
|
301
|
+
</div>
|
302
|
+
++++
|
303
|
+
|
304
|
+
=== Toggle button
|
305
|
+
|
306
|
+
++++
|
307
|
+
<div class="doc-example mb-3">
|
308
|
+
<button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false" autocomplete="off">
|
309
|
+
Single toggle
|
310
|
+
</button>
|
311
|
+
</div>
|
312
|
+
++++
|
313
|
+
|
314
|
+
=== Checkbox and radio buttons
|
315
|
+
|
316
|
+
Bootstrap’s .button styles can be applied to other elements, such as
|
317
|
+
`<label>`, to provide checkbox or radio style button toggling. The checked
|
318
|
+
state for these buttons is only updated via click event on the button.
|
319
|
+
|
320
|
+
++++
|
321
|
+
<div class="doc-example mb-3">
|
322
|
+
<div class="btn-group" data-toggle="buttons">
|
323
|
+
<label class="btn btn-primary btn-raised btn-flex active">
|
324
|
+
<input type="checkbox" checked> Checkbox 1
|
325
|
+
</label>
|
326
|
+
<label class="btn btn-primary 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
|
+
<div class="btn-group btn-group-toggle" data-toggle="buttons">
|
339
|
+
<label class="btn btn-secondary btn-raised btn-flex active">
|
340
|
+
<input type="radio" name="options" id="option1" autocomplete="off" checked> Active
|
341
|
+
</label>
|
342
|
+
<label class="btn btn-secondary btn-raised btn-flex">
|
343
|
+
<input type="radio" name="options" id="option2" autocomplete="off"> Radio
|
344
|
+
</label>
|
345
|
+
<label class="btn btn-secondary btn-raised btn-flex">
|
346
|
+
<input type="radio" name="options" id="option3" autocomplete="off"> Radio
|
347
|
+
</label>
|
377
348
|
</div>
|
378
349
|
</div>
|
379
350
|
++++
|
380
351
|
|
352
|
+
|
381
353
|
== Typography
|
382
354
|
|
383
355
|
Bootstrap sets basic global display, typography, and link styles. When more
|
@@ -390,13 +362,10 @@ customize their browser defaults as needed.
|
|
390
362
|
pass:[<i class="mdi mdi-book-open mdi-24px mdi-md-bg-primary"></i>]
|
391
363
|
Refer to: link:{bs_doc_content_typography}[Bootstrap Docs, window="_blank"].
|
392
364
|
|
365
|
+
=== Headings
|
366
|
+
|
393
367
|
++++
|
394
|
-
|
395
|
-
============================================================================ -->
|
396
|
-
<div class="bs-docs-section">
|
397
|
-
<!-- Typography - Headings
|
398
|
-
========================================================================== -->
|
399
|
-
<!-- Headings -->
|
368
|
+
<div class="doc-example mb-3">
|
400
369
|
<div class="row mb-5">
|
401
370
|
<div class="col-md-4">
|
402
371
|
<div class="bs-component">
|
@@ -416,7 +385,7 @@ Refer to: link:{bs_doc_content_typography}[Bootstrap Docs, window="_blank"].
|
|
416
385
|
<div class="col-md-4">
|
417
386
|
<div class="bs-component">
|
418
387
|
<h3 class="notoc">Example body text</h2>
|
419
|
-
<p>Nullam quis risus eget <a href="
|
388
|
+
<p>Nullam quis risus eget <a href="javascript:(void)">urna mollis ornare</a> vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.</p>
|
420
389
|
<p><small>This line of text is meant to be treated as fine print.</small></p>
|
421
390
|
<p>The following is <strong>rendered as bold text</strong>.</p>
|
422
391
|
<p>The following is <em>rendered as italicized text</em>.</p>
|
@@ -435,15 +404,14 @@ Refer to: link:{bs_doc_content_typography}[Bootstrap Docs, window="_blank"].
|
|
435
404
|
</div>
|
436
405
|
</div>
|
437
406
|
</div>
|
407
|
+
</div>
|
408
|
+
++++
|
438
409
|
|
439
|
-
|
440
|
-
|
410
|
+
=== Blockquotes
|
411
|
+
|
412
|
+
++++
|
413
|
+
<div class="doc-example mb-3">
|
441
414
|
<div class="row">
|
442
|
-
<div class="col-md-12">
|
443
|
-
<h2 id="type-blockquotes" class="notoc">Blockquotes</h3>
|
444
|
-
</div>
|
445
|
-
</div>
|
446
|
-
<div class="row mb-5">
|
447
415
|
<div class="col-md-6">
|
448
416
|
<div class="bs-component">
|
449
417
|
<blockquote class="blockquote">
|
@@ -468,7 +436,7 @@ Refer to: link:{bs_doc_content_typography}[Bootstrap Docs, window="_blank"].
|
|
468
436
|
|
469
437
|
Due to the widespread use of tables across third-party widgets like calendars
|
470
438
|
and date pickers, we’ve designed our tables to be opt-in. Just add the base
|
471
|
-
class
|
439
|
+
class `.table` to any `<table>`, then extend with custom styles or our various
|
472
440
|
included modifier classes.
|
473
441
|
|
474
442
|
Using the most basic table markup, here’s how .table-based tables look in
|
@@ -478,71 +446,64 @@ tables will be styled in the same manner as the parent.
|
|
478
446
|
pass:[<i class="mdi mdi-book-open mdi-24px mdi-md-bg-primary"></i>]
|
479
447
|
Refer to: link:{bs_doc_content_tables}[Bootstrap Docs, window="_blank"].
|
480
448
|
|
481
|
-
++++
|
482
|
-
<!-- Tables
|
483
|
-
============================================================================ -->
|
484
|
-
<div class="bs-docs-section">
|
485
|
-
<div class="row mb-5">
|
486
|
-
<div class="col-md-12">
|
487
449
|
|
488
|
-
|
489
|
-
|
490
|
-
|
491
|
-
|
492
|
-
|
493
|
-
|
494
|
-
|
495
|
-
|
496
|
-
|
497
|
-
</
|
498
|
-
|
499
|
-
|
500
|
-
|
501
|
-
|
502
|
-
|
503
|
-
|
504
|
-
|
505
|
-
|
506
|
-
|
507
|
-
|
508
|
-
|
509
|
-
|
510
|
-
|
511
|
-
|
512
|
-
|
513
|
-
|
514
|
-
|
515
|
-
|
516
|
-
|
517
|
-
|
518
|
-
|
519
|
-
|
520
|
-
|
521
|
-
|
522
|
-
|
523
|
-
|
524
|
-
|
525
|
-
|
526
|
-
|
527
|
-
|
528
|
-
|
529
|
-
|
530
|
-
|
531
|
-
|
532
|
-
|
533
|
-
|
534
|
-
|
535
|
-
|
536
|
-
|
537
|
-
|
538
|
-
|
539
|
-
|
540
|
-
|
541
|
-
</
|
542
|
-
</
|
543
|
-
</
|
544
|
-
|
545
|
-
</div>
|
450
|
+
++++
|
451
|
+
<div class="doc-example mb-3">
|
452
|
+
<div class="bs-component">
|
453
|
+
<table class="table table-striped table-hover table-bordered">
|
454
|
+
<thead>
|
455
|
+
<tr>
|
456
|
+
<th>#</th>
|
457
|
+
<th>Column heading</th>
|
458
|
+
<th>Column heading</th>
|
459
|
+
<th>Column heading</th>
|
460
|
+
</tr>
|
461
|
+
</thead>
|
462
|
+
<tbody>
|
463
|
+
<tr>
|
464
|
+
<td>1</td>
|
465
|
+
<td>Column content</td>
|
466
|
+
<td>Column content</td>
|
467
|
+
<td>Column content</td>
|
468
|
+
</tr>
|
469
|
+
<tr>
|
470
|
+
<td>2</td>
|
471
|
+
<td>Column content</td>
|
472
|
+
<td>Column content</td>
|
473
|
+
<td>Column content</td>
|
474
|
+
</tr>
|
475
|
+
<tr class="table-info">
|
476
|
+
<td>3</td>
|
477
|
+
<td>Column content</td>
|
478
|
+
<td>Column content</td>
|
479
|
+
<td>Column content</td>
|
480
|
+
</tr>
|
481
|
+
<tr class="table-success">
|
482
|
+
<td>4</td>
|
483
|
+
<td>Column content</td>
|
484
|
+
<td>Column content</td>
|
485
|
+
<td>Column content</td>
|
486
|
+
</tr>
|
487
|
+
<tr class="table-danger">
|
488
|
+
<td>5</td>
|
489
|
+
<td>Column content</td>
|
490
|
+
<td>Column content</td>
|
491
|
+
<td>Column content</td>
|
492
|
+
</tr>
|
493
|
+
<tr class="table-warning">
|
494
|
+
<td>6</td>
|
495
|
+
<td>Column content</td>
|
496
|
+
<td>Column content</td>
|
497
|
+
<td>Column content</td>
|
498
|
+
</tr>
|
499
|
+
<tr class="table-active">
|
500
|
+
<td>7</td>
|
501
|
+
<td>Column content</td>
|
502
|
+
<td>Column content</td>
|
503
|
+
<td>Column content</td>
|
504
|
+
</tr>
|
505
|
+
</tbody>
|
506
|
+
</table>
|
546
507
|
</div>
|
547
508
|
</div>
|
548
509
|
++++
|
@@ -564,80 +525,75 @@ pass:[<i class="mdi mdi-book-open mdi-24px mdi-md-bg-primary"></i>]
|
|
564
525
|
Refer to: link:{bs_doc_components_forms}[Bootstrap Docs, window="_blank"].
|
565
526
|
|
566
527
|
++++
|
567
|
-
|
568
|
-
|
569
|
-
<div class="
|
570
|
-
|
528
|
+
<div class="doc-example mb-3">
|
529
|
+
<form>
|
530
|
+
<div class="form-group">
|
531
|
+
<label for="exampleInputEmail1" class="bmd-label-floating">Email address</label>
|
532
|
+
<input type="email" class="form-control" id="exampleInputEmail1" autocomplete="none">
|
533
|
+
<span class="form-clear d-none"><i class="mdi mdi-2x mdi-format-clear"></i></span>
|
534
|
+
<span class="bmd-help">We'll never share your email with anyone else.</span>
|
535
|
+
</div>
|
536
|
+
<div class="form-group">
|
537
|
+
<label for="exampleInputPassword1" class="bmd-label-floating">Password</label>
|
538
|
+
<input type="password" class="form-control" id="exampleInputPassword1">
|
539
|
+
<span class="form-clear d-none"><i class="mdi mdi-2x mdi-format-clear"></i></span>
|
540
|
+
</div>
|
541
|
+
<div class="form-group form-check">
|
542
|
+
<input type="checkbox" class="form-check-input" id="exampleCheck1">
|
543
|
+
<label class="form-check-label" for="exampleCheck1">Check me out</label>
|
544
|
+
</div>
|
545
|
+
<button type="submit" class="btn btn-primary btn-raised">Submit</button>
|
546
|
+
</form>
|
547
|
+
</div>
|
548
|
+
++++
|
571
549
|
|
572
|
-
|
573
|
-
|
574
|
-
|
575
|
-
<input type="email" class="form-control" id="exampleInputEmail1" autocomplete="none">
|
576
|
-
<span class="form-clear d-none"><i class="mdi mdi-2x mdi-format-clear"></i></span>
|
577
|
-
<span class="bmd-help">We'll never share your email with anyone else.</span>
|
578
|
-
</div>
|
579
|
-
<div class="form-group">
|
580
|
-
<label for="exampleInputPassword1" class="bmd-label-floating">Password</label>
|
581
|
-
<input type="password" class="form-control" id="exampleInputPassword1">
|
582
|
-
<span class="form-clear d-none"><i class="mdi mdi-2x mdi-format-clear"></i></span>
|
583
|
-
</div>
|
584
|
-
<div class="form-group">
|
585
|
-
<label for="exampleSelect1" class="bmd-label-floating">Example select</label>
|
586
|
-
<select class="form-control" id="exampleSelect1">
|
587
|
-
<option>1</option>
|
588
|
-
<option>2</option>
|
589
|
-
<option>3</option>
|
590
|
-
<option>4</option>
|
591
|
-
<option>5</option>
|
592
|
-
</select>
|
593
|
-
</div>
|
594
|
-
<div class="form-group">
|
595
|
-
<label for="exampleSelect2" class="bmd-label-floating">Example multiple select</label>
|
596
|
-
<select multiple class="form-control" id="exampleSelect2">
|
597
|
-
<option>1</option>
|
598
|
-
<option>2</option>
|
599
|
-
<option>3</option>
|
600
|
-
<option>4</option>
|
601
|
-
<option>5</option>
|
602
|
-
</select>
|
603
|
-
</div>
|
604
|
-
<div class="form-group">
|
605
|
-
<label for="exampleTextarea" class="bmd-label-floating">Example textarea</label>
|
606
|
-
<textarea class="form-control" id="exampleTextarea" rows="3"></textarea>
|
607
|
-
</div>
|
608
|
-
<div class="form-group">
|
609
|
-
<label for="exampleInputFile" class="bmd-label-floating">File input</label>
|
610
|
-
<input type="file" class="form-control-file" id="exampleInputFile">
|
611
|
-
<small class="text-muted">This is some placeholder block-level help text for the above input. It's a bit lighter and easily wraps to a new line.</small>
|
612
|
-
</div>
|
613
|
-
<div class="radio">
|
614
|
-
<label>
|
615
|
-
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
|
616
|
-
Option one is this and that—be sure to include why it's great
|
617
|
-
</label>
|
618
|
-
</div>
|
619
|
-
<div class="radio">
|
620
|
-
<label>
|
621
|
-
<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
|
622
|
-
Option two can be something else and selecting it will deselect option one
|
623
|
-
</label>
|
624
|
-
</div>
|
625
|
-
<div class="radio disabled">
|
626
|
-
<label>
|
627
|
-
<input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled>
|
628
|
-
Option three is disabled
|
629
|
-
</label>
|
630
|
-
</div>
|
631
|
-
<div class="checkbox">
|
632
|
-
<label>
|
633
|
-
<input type="checkbox"> Check me out
|
634
|
-
</label>
|
635
|
-
</div>
|
636
|
-
<button class="btn btn-default">Cancel</button>
|
637
|
-
<button type="submit" class="btn btn-primary btn-raised">Submit</button>
|
638
|
-
</form>
|
550
|
+
Textual form controls—like <input>s, <select>s, and <textarea>s—are styled with
|
551
|
+
the .form-control class. Included are styles for general appearance, focus
|
552
|
+
state, sizing, and more.
|
639
553
|
|
640
|
-
|
554
|
+
++++
|
555
|
+
<div class="doc-example mb-3">
|
556
|
+
<form>
|
557
|
+
<div class="form-group">
|
558
|
+
<label for="exampleInputEmail1">Email address</label>
|
559
|
+
<input type="email" class="form-control" id="exampleFormControlInput1" placeholder="name@example.com">
|
560
|
+
</div>
|
561
|
+
<div class="form-group">
|
562
|
+
<label for="exampleFormControlSelect1">Example select</label>
|
563
|
+
<select class="form-control" id="exampleFormControlSelect1">
|
564
|
+
<option>1</option>
|
565
|
+
<option>2</option>
|
566
|
+
<option>3</option>
|
567
|
+
<option>4</option>
|
568
|
+
<option>5</option>
|
569
|
+
</select>
|
570
|
+
</div>
|
571
|
+
<div class="form-group">
|
572
|
+
<label for="exampleFormControlSelect2">Example multiple select</label>
|
573
|
+
<select multiple class="form-control" id="exampleFormControlSelect2">
|
574
|
+
<option>option 1</option>
|
575
|
+
<option>option 2</option>
|
576
|
+
<option>option 3</option>
|
577
|
+
</select>
|
578
|
+
</div>
|
579
|
+
<div class="form-group">
|
580
|
+
<label for="exampleFormControlTextarea1">Example textarea</label>
|
581
|
+
<textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
|
582
|
+
</div>
|
583
|
+
</form>
|
584
|
+
</div>
|
585
|
+
++++
|
586
|
+
|
587
|
+
For file inputs, swap the .form-control for .form-control-file.
|
588
|
+
|
589
|
+
++++
|
590
|
+
<div class="doc-example mb-3">
|
591
|
+
<form>
|
592
|
+
<div class="form-group">
|
593
|
+
<label for="exampleFormControlFile1">Example file input</label>
|
594
|
+
<input type="file" class="form-control-file" id="exampleFormControlFile1">
|
595
|
+
</div>
|
596
|
+
</form>
|
641
597
|
</div>
|
642
598
|
++++
|
643
599
|
|
@@ -662,117 +618,107 @@ a tabbed interface. Use them to create tabbable regions with our tab
|
|
662
618
|
JavaScript plugin.
|
663
619
|
|
664
620
|
++++
|
665
|
-
|
666
|
-
|
667
|
-
<
|
668
|
-
|
669
|
-
|
670
|
-
|
671
|
-
<
|
672
|
-
<
|
673
|
-
|
674
|
-
|
675
|
-
|
676
|
-
|
677
|
-
|
678
|
-
|
679
|
-
|
680
|
-
|
681
|
-
|
682
|
-
|
683
|
-
|
684
|
-
|
685
|
-
|
686
|
-
|
687
|
-
</div>
|
688
|
-
</li>
|
689
|
-
<li class="nav-item">
|
690
|
-
<a class="nav-link disabled" href="#">Disabled</a>
|
691
|
-
</li>
|
692
|
-
</ul>
|
693
|
-
<div id="myTabContent" class="tab-content">
|
694
|
-
<div class="tab-pane fade active in" id="home">
|
695
|
-
<p>Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.</p>
|
696
|
-
</div>
|
697
|
-
<div class="tab-pane fade" id="profile">
|
698
|
-
<p>Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit.</p>
|
699
|
-
</div>
|
700
|
-
<div class="tab-pane fade" id="dropdown1">
|
701
|
-
<p>Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork.</p>
|
702
|
-
</div>
|
703
|
-
<div class="tab-pane fade" id="dropdown2">
|
704
|
-
<p>Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out master cleanse gluten-free squid scenester freegan cosby sweater. Fanny pack portland seitan DIY, art party locavore wolf cliche high life echo park Austin. Cred vinyl keffiyeh DIY salvia PBR, banh mi before they sold out farm-to-table VHS viral locavore cosby sweater.</p>
|
705
|
-
</div>
|
621
|
+
<div class="doc-example mb-3">
|
622
|
+
<div class="bs-component">
|
623
|
+
<ul class="nav nav-tabs">
|
624
|
+
<li class="nav-item">
|
625
|
+
<a class="nav-link active" data-toggle="tab" href="#home">Home</a>
|
626
|
+
</li>
|
627
|
+
<li class="nav-item">
|
628
|
+
<a class="nav-link" data-toggle="tab" href="#profile">Profile</a>
|
629
|
+
</li>
|
630
|
+
<li class="nav-item dropdown">
|
631
|
+
<a class="nav-link dropdown-toggle" data-toggle="dropdown"
|
632
|
+
href="javascript:(void)"
|
633
|
+
role="button"
|
634
|
+
aria-haspopup="true" aria-expanded="false">
|
635
|
+
Dropdown
|
636
|
+
</a>
|
637
|
+
<div class="dropdown-menu">
|
638
|
+
<a class="dropdown-item" href="javascript:(void)">Action</a>
|
639
|
+
<a class="dropdown-item" href="javascript:(void)">Another action</a>
|
640
|
+
<a class="dropdown-item" href="javascript:(void)">Something else here</a>
|
641
|
+
<div class="dropdown-divider"></div>
|
642
|
+
<a class="dropdown-item" href="javascript:(void)">Separated link</a>
|
706
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>
|
707
661
|
</div>
|
708
662
|
</div>
|
709
|
-
|
710
663
|
</div>
|
711
664
|
</div>
|
712
665
|
++++
|
713
666
|
|
667
|
+
|
714
668
|
=== Pills
|
715
669
|
|
716
|
-
Take that same HTML as Tabs, but use .nav-pills class instead
|
670
|
+
Take that same HTML as Tabs, but use .nav-pills class instead.
|
717
671
|
|
718
672
|
++++
|
719
|
-
|
720
|
-
|
721
|
-
<div class="bs-
|
722
|
-
|
723
|
-
|
724
|
-
|
725
|
-
|
726
|
-
<
|
727
|
-
<
|
728
|
-
|
729
|
-
|
730
|
-
</
|
731
|
-
<
|
732
|
-
|
733
|
-
|
734
|
-
|
735
|
-
|
736
|
-
|
737
|
-
|
738
|
-
|
739
|
-
|
740
|
-
|
741
|
-
|
742
|
-
|
743
|
-
|
744
|
-
|
745
|
-
|
746
|
-
|
747
|
-
|
748
|
-
|
749
|
-
|
750
|
-
|
751
|
-
<
|
752
|
-
<
|
753
|
-
|
754
|
-
|
755
|
-
</
|
756
|
-
<
|
757
|
-
|
758
|
-
|
759
|
-
|
760
|
-
|
761
|
-
|
762
|
-
|
763
|
-
|
764
|
-
|
765
|
-
|
766
|
-
|
767
|
-
|
768
|
-
</li>
|
769
|
-
<li class="nav-item">
|
770
|
-
<a class="nav-link disabled" href="#">Disabled</a>
|
771
|
-
</li>
|
772
|
-
</ul>
|
773
|
-
</div>
|
774
|
-
</div>
|
775
|
-
|
673
|
+
<div class="doc-example mb-3">
|
674
|
+
<h5 class="notoc">Standard Pills</h5>
|
675
|
+
<div class="bs-component">
|
676
|
+
<ul class="nav nav-pills">
|
677
|
+
<li class="nav-item">
|
678
|
+
<a class="nav-link active" href="javascript:(void)">Active</a>
|
679
|
+
</li>
|
680
|
+
<li class="nav-item dropdown">
|
681
|
+
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="javascript:(void)" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
|
682
|
+
<div class="dropdown-menu">
|
683
|
+
<a class="dropdown-item" href="javascript:(void)">Action</a>
|
684
|
+
<a class="dropdown-item" href="javascript:(void)">Another action</a>
|
685
|
+
<a class="dropdown-item" href="javascript:(void)">Something else here</a>
|
686
|
+
<div class="dropdown-divider"></div>
|
687
|
+
<a class="dropdown-item" href="javascript:(void)">Separated link</a>
|
688
|
+
</div>
|
689
|
+
</li>
|
690
|
+
<li class="nav-item">
|
691
|
+
<a class="nav-link" href="javascript:(void)">Link</a>
|
692
|
+
</li>
|
693
|
+
<li class="nav-item">
|
694
|
+
<a class="nav-link disabled" href="javascript:(void)">Disabled</a>
|
695
|
+
</li>
|
696
|
+
</ul>
|
697
|
+
</div>
|
698
|
+
<br>
|
699
|
+
<h5 class="notoc">Stacked Pills (vertical)</h5>
|
700
|
+
<div class="bs-component">
|
701
|
+
<ul class="nav nav-pills flex-column">
|
702
|
+
<li class="nav-item">
|
703
|
+
<a class="nav-link active" href="javascript:(void)">Active</a>
|
704
|
+
</li>
|
705
|
+
<li class="nav-item dropdown">
|
706
|
+
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="javascript:(void)" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
|
707
|
+
<div class="dropdown-menu">
|
708
|
+
<a class="dropdown-item" href="javascript:(void)">Action</a>
|
709
|
+
<a class="dropdown-item" href="javascript:(void)">Another action</a>
|
710
|
+
<a class="dropdown-item" href="javascript:(void)">Something else here</a>
|
711
|
+
<div class="dropdown-divider"></div>
|
712
|
+
<a class="dropdown-item" href="javascript:(void)">Separated link</a>
|
713
|
+
</div>
|
714
|
+
</li>
|
715
|
+
<li class="nav-item">
|
716
|
+
<a class="nav-link" href="javascript:(void)">Link</a>
|
717
|
+
</li>
|
718
|
+
<li class="nav-item">
|
719
|
+
<a class="nav-link disabled" href="javascript:(void)">Disabled</a>
|
720
|
+
</li>
|
721
|
+
</ul>
|
776
722
|
</div>
|
777
723
|
</div>
|
778
724
|
++++
|
@@ -785,28 +731,20 @@ hierarchy that automatically adds separators via CSS.
|
|
785
731
|
Separators are automatically added in CSS through ::before and content.
|
786
732
|
|
787
733
|
++++
|
788
|
-
|
789
|
-
|
790
|
-
<
|
791
|
-
|
792
|
-
|
793
|
-
<
|
794
|
-
<
|
795
|
-
|
796
|
-
|
797
|
-
|
798
|
-
|
799
|
-
|
800
|
-
|
801
|
-
|
802
|
-
<ol class="breadcrumb">
|
803
|
-
<li class="breadcrumb-item"><a href="#">Home</a></li>
|
804
|
-
<li class="breadcrumb-item"><a href="#">Library</a></li>
|
805
|
-
<li class="breadcrumb-item active">Data</li>
|
806
|
-
</ol>
|
807
|
-
</div>
|
808
|
-
</div>
|
809
|
-
|
734
|
+
<div class="doc-example mb-3">
|
735
|
+
<div class="bs-component">
|
736
|
+
<ol class="breadcrumb">
|
737
|
+
<li class="breadcrumb-item active">Home</li>
|
738
|
+
</ol>
|
739
|
+
<ol class="breadcrumb">
|
740
|
+
<li class="breadcrumb-item"><a href="javascript:(void)">Home</a></li>
|
741
|
+
<li class="breadcrumb-item active">Library</li>
|
742
|
+
</ol>
|
743
|
+
<ol class="breadcrumb">
|
744
|
+
<li class="breadcrumb-item"><a href="javascript:(void)">Home</a></li>
|
745
|
+
<li class="breadcrumb-item"><a href="javascript:(void)">Library</a></li>
|
746
|
+
<li class="breadcrumb-item active">Data</li>
|
747
|
+
</ol>
|
810
748
|
</div>
|
811
749
|
</div>
|
812
750
|
++++
|
@@ -820,90 +758,81 @@ the number of available links. Use a wrapping <nav> element to identify
|
|
820
758
|
it as a navigation section to screen readers and other assistive technologies.
|
821
759
|
|
822
760
|
++++
|
823
|
-
|
824
|
-
|
825
|
-
|
826
|
-
<
|
827
|
-
|
828
|
-
|
829
|
-
|
830
|
-
|
831
|
-
|
832
|
-
|
833
|
-
|
834
|
-
|
835
|
-
|
836
|
-
|
837
|
-
|
838
|
-
|
839
|
-
|
840
|
-
|
841
|
-
|
842
|
-
|
843
|
-
|
844
|
-
|
845
|
-
|
846
|
-
|
847
|
-
|
848
|
-
|
849
|
-
|
850
|
-
|
851
|
-
|
852
|
-
|
853
|
-
|
854
|
-
|
855
|
-
|
856
|
-
|
857
|
-
|
858
|
-
|
859
|
-
|
860
|
-
|
861
|
-
|
862
|
-
|
863
|
-
|
864
|
-
|
865
|
-
|
866
|
-
|
867
|
-
|
868
|
-
|
869
|
-
|
870
|
-
|
871
|
-
|
872
|
-
|
873
|
-
|
874
|
-
|
875
|
-
|
876
|
-
|
877
|
-
|
878
|
-
|
879
|
-
|
880
|
-
|
881
|
-
|
882
|
-
|
883
|
-
|
884
|
-
|
885
|
-
|
886
|
-
|
887
|
-
|
888
|
-
|
889
|
-
|
890
|
-
|
891
|
-
|
892
|
-
|
893
|
-
|
894
|
-
|
895
|
-
|
896
|
-
|
897
|
-
|
898
|
-
<a class="page-link" href="#">5</a>
|
899
|
-
</li>
|
900
|
-
<li class="page-item">
|
901
|
-
<a class="page-link" href="#">»</a>
|
902
|
-
</li>
|
903
|
-
</ul>
|
904
|
-
</div>
|
905
|
-
|
906
|
-
</div>
|
761
|
+
<div class="doc-example mb-3">
|
762
|
+
<div>
|
763
|
+
<ul class="pagination">
|
764
|
+
<li class="page-item disabled">
|
765
|
+
<a class="page-link" href="javascript:(void)">«</a>
|
766
|
+
</li>
|
767
|
+
<li class="page-item active">
|
768
|
+
<a class="page-link" href="javascript:(void)">1</a>
|
769
|
+
</li>
|
770
|
+
<li class="page-item">
|
771
|
+
<a class="page-link" href="javascript:(void)">2</a>
|
772
|
+
</li>
|
773
|
+
<li class="page-item">
|
774
|
+
<a class="page-link" href="javascript:(void)">3</a>
|
775
|
+
</li>
|
776
|
+
<li class="page-item">
|
777
|
+
<a class="page-link" href="javascript:(void)">4</a>
|
778
|
+
</li>
|
779
|
+
<li class="page-item">
|
780
|
+
<a class="page-link" href="javascript:(void)">5</a>
|
781
|
+
</li>
|
782
|
+
<li class="page-item">
|
783
|
+
<a class="page-link" href="javascript:(void)">»</a>
|
784
|
+
</li>
|
785
|
+
</ul>
|
786
|
+
</div>
|
787
|
+
<div>
|
788
|
+
<ul class="pagination pagination-lg">
|
789
|
+
<li class="page-item disabled">
|
790
|
+
<a class="page-link" href="javascript:(void)">«</a>
|
791
|
+
</li>
|
792
|
+
<li class="page-item active">
|
793
|
+
<a class="page-link" href="javascript:(void)">1</a>
|
794
|
+
</li>
|
795
|
+
<li class="page-item">
|
796
|
+
<a class="page-link" href="javascript:(void)">2</a>
|
797
|
+
</li>
|
798
|
+
<li class="page-item">
|
799
|
+
<a class="page-link" href="javascript:(void)">3</a>
|
800
|
+
</li>
|
801
|
+
<li class="page-item">
|
802
|
+
<a class="page-link" href="javascript:(void)">4</a>
|
803
|
+
</li>
|
804
|
+
<li class="page-item">
|
805
|
+
<a class="page-link" href="javascript:(void)">5</a>
|
806
|
+
</li>
|
807
|
+
<li class="page-item">
|
808
|
+
<a class="page-link" href="javascript:(void)">»</a>
|
809
|
+
</li>
|
810
|
+
</ul>
|
811
|
+
</div>
|
812
|
+
<div>
|
813
|
+
<ul class="pagination pagination-sm">
|
814
|
+
<li class="page-item disabled">
|
815
|
+
<a class="page-link" href="javascript:(void)">«</a>
|
816
|
+
</li>
|
817
|
+
<li class="page-item active">
|
818
|
+
<a class="page-link" href="javascript:(void)">1</a>
|
819
|
+
</li>
|
820
|
+
<li class="page-item">
|
821
|
+
<a class="page-link" href="javascript:(void)">2</a>
|
822
|
+
</li>
|
823
|
+
<li class="page-item">
|
824
|
+
<a class="page-link" href="javascript:(void)">3</a>
|
825
|
+
</li>
|
826
|
+
<li class="page-item">
|
827
|
+
<a class="page-link" href="javascript:(void)">4</a>
|
828
|
+
</li>
|
829
|
+
<li class="page-item">
|
830
|
+
<a class="page-link" href="javascript:(void)">5</a>
|
831
|
+
</li>
|
832
|
+
<li class="page-item">
|
833
|
+
<a class="page-link" href="javascript:(void)">»</a>
|
834
|
+
</li>
|
835
|
+
</ul>
|
907
836
|
</div>
|
908
837
|
</div>
|
909
838
|
++++
|
@@ -912,7 +841,6 @@ it as a navigation section to screen readers and other assistive technologies.
|
|
912
841
|
|
913
842
|
lorem:sentences[5]
|
914
843
|
|
915
|
-
|
916
844
|
=== Alerts
|
917
845
|
|
918
846
|
Alerts provide contextual feedback messages for typical user actions with the
|
@@ -927,16 +855,14 @@ pass:[<i class="mdi mdi-book-open mdi-24px mdi-md-bg-primary"></i>]
|
|
927
855
|
Refer to: link:{bs_doc_components_alerts}[Bootstrap Docs, window="_blank"].
|
928
856
|
|
929
857
|
++++
|
930
|
-
|
931
|
-
============================================================================ -->
|
932
|
-
<div class="bs-docs-section">
|
858
|
+
<div class="doc-example mb-3">
|
933
859
|
<div class="row mb-3">
|
934
860
|
<div class="col-md-12">
|
935
861
|
<div class="bs-component">
|
936
862
|
<div class="alert alert-dismissible alert-warning">
|
937
863
|
<button type="button" class="close" data-dismiss="alert">×</button>
|
938
864
|
<h4 class="alert-heading notoc">Warning!</h4>
|
939
|
-
<p class="mb-0">Best check yo self, you're not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, <a href="
|
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>
|
940
866
|
</div>
|
941
867
|
</div>
|
942
868
|
</div>
|
@@ -946,7 +872,7 @@ Refer to: link:{bs_doc_components_alerts}[Bootstrap Docs, window="_blank"].
|
|
946
872
|
<div class="bs-component">
|
947
873
|
<div class="alert alert-dismissible alert-danger">
|
948
874
|
<button type="button" class="close" data-dismiss="alert">×</button>
|
949
|
-
<strong>Oh snap!</strong> <a href="
|
875
|
+
<strong>Oh snap!</strong> <a href="javascript:(void)" class="alert-link">Change a few things up</a> and try submitting again.
|
950
876
|
</div>
|
951
877
|
</div>
|
952
878
|
</div>
|
@@ -954,7 +880,7 @@ Refer to: link:{bs_doc_components_alerts}[Bootstrap Docs, window="_blank"].
|
|
954
880
|
<div class="bs-component">
|
955
881
|
<div class="alert alert-dismissible alert-success">
|
956
882
|
<button type="button" class="close" data-dismiss="alert">×</button>
|
957
|
-
<strong>Well done!</strong> You successfully read <a href="
|
883
|
+
<strong>Well done!</strong> You successfully read <a href="javascript:(void)" class="alert-link">this important alert message</a>.
|
958
884
|
</div>
|
959
885
|
</div>
|
960
886
|
</div>
|
@@ -962,7 +888,7 @@ Refer to: link:{bs_doc_components_alerts}[Bootstrap Docs, window="_blank"].
|
|
962
888
|
<div class="bs-component">
|
963
889
|
<div class="alert alert-dismissible alert-info">
|
964
890
|
<button type="button" class="close" data-dismiss="alert">×</button>
|
965
|
-
<strong>Heads up!</strong> This <a href="
|
891
|
+
<strong>Heads up!</strong> This <a href="javascript:(void)" class="alert-link">alert needs your attention</a>, but it's not super important.
|
966
892
|
</div>
|
967
893
|
</div>
|
968
894
|
</div>
|
@@ -986,32 +912,26 @@ pass:[<i class="mdi mdi-book-open mdi-24px mdi-md-bg-primary"></i>]
|
|
986
912
|
Refer to: link:{bs_doc_components_badges}[Bootstrap Docs, window="_blank"].
|
987
913
|
|
988
914
|
++++
|
989
|
-
|
990
|
-
|
991
|
-
<
|
992
|
-
|
993
|
-
<
|
994
|
-
|
995
|
-
|
996
|
-
|
997
|
-
|
998
|
-
|
999
|
-
|
1000
|
-
|
1001
|
-
|
1002
|
-
|
1003
|
-
|
1004
|
-
|
1005
|
-
|
1006
|
-
|
1007
|
-
|
1008
|
-
|
1009
|
-
<span class="badge badge-pill badge-warning">Warning</span>
|
1010
|
-
<span class="badge badge-pill badge-info">Info</span>
|
1011
|
-
<span class="badge badge-pill badge-light">Light</span>
|
1012
|
-
<span class="badge badge-pill badge-dark">Dark</span>
|
1013
|
-
</div>
|
1014
|
-
</div>
|
915
|
+
<div class="doc-example mb-3">
|
916
|
+
<div class="bs-component mb-3">
|
917
|
+
<span class="badge badge-primary">Primary</span>
|
918
|
+
<span class="badge badge-secondary">Secondary</span>
|
919
|
+
<span class="badge badge-success">Success</span>
|
920
|
+
<span class="badge badge-danger">Danger</span>
|
921
|
+
<span class="badge badge-warning">Warning</span>
|
922
|
+
<span class="badge badge-info">Info</span>
|
923
|
+
<span class="badge badge-light">Light</span>
|
924
|
+
<span class="badge badge-dark">Dark</span>
|
925
|
+
</div>
|
926
|
+
<div class="bs-component mb-4">
|
927
|
+
<span class="badge badge-pill badge-primary">Primary</span>
|
928
|
+
<span class="badge badge-pill badge-secondary">Secondary</span>
|
929
|
+
<span class="badge badge-pill badge-success">Success</span>
|
930
|
+
<span class="badge badge-pill badge-danger">Danger</span>
|
931
|
+
<span class="badge badge-pill badge-warning">Warning</span>
|
932
|
+
<span class="badge badge-pill badge-info">Info</span>
|
933
|
+
<span class="badge badge-pill badge-light">Light</span>
|
934
|
+
<span class="badge badge-pill badge-dark">Dark</span>
|
1015
935
|
</div>
|
1016
936
|
</div>
|
1017
937
|
++++
|
@@ -1030,18 +950,10 @@ Refer to: link:{bs_doc_components_progress}[Bootstrap Docs, window="_blank"].
|
|
1030
950
|
=== Basic
|
1031
951
|
|
1032
952
|
++++
|
1033
|
-
|
1034
|
-
|
1035
|
-
<div class="
|
1036
|
-
|
1037
|
-
<div class="col-md-10">
|
1038
|
-
|
1039
|
-
<div class="bs-component">
|
1040
|
-
<div class="progress">
|
1041
|
-
<div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
|
1042
|
-
</div>
|
1043
|
-
</div>
|
1044
|
-
|
953
|
+
<div class="doc-example mb-3">
|
954
|
+
<div class="bs-component">
|
955
|
+
<div class="progress">
|
956
|
+
<div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
|
1045
957
|
</div>
|
1046
958
|
</div>
|
1047
959
|
</div>
|
@@ -1050,27 +962,19 @@ Refer to: link:{bs_doc_components_progress}[Bootstrap Docs, window="_blank"].
|
|
1050
962
|
=== Contextual alternatives
|
1051
963
|
|
1052
964
|
++++
|
1053
|
-
|
1054
|
-
|
1055
|
-
<div class="
|
1056
|
-
|
1057
|
-
|
1058
|
-
|
1059
|
-
<div class="
|
1060
|
-
|
1061
|
-
|
1062
|
-
|
1063
|
-
|
1064
|
-
|
1065
|
-
|
1066
|
-
<div class="progress">
|
1067
|
-
<div class="progress-bar bg-warning" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
|
1068
|
-
</div>
|
1069
|
-
<div class="progress">
|
1070
|
-
<div class="progress-bar bg-danger" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
|
1071
|
-
</div>
|
1072
|
-
</div>
|
1073
|
-
|
965
|
+
<div class="doc-example mb-3">
|
966
|
+
<div class="bs-component">
|
967
|
+
<div class="progress">
|
968
|
+
<div class="progress-bar bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
|
969
|
+
</div>
|
970
|
+
<div class="progress">
|
971
|
+
<div class="progress-bar bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
|
972
|
+
</div>
|
973
|
+
<div class="progress">
|
974
|
+
<div class="progress-bar bg-warning" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
|
975
|
+
</div>
|
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>
|
1074
978
|
</div>
|
1075
979
|
</div>
|
1076
980
|
</div>
|
@@ -1079,20 +983,12 @@ Refer to: link:{bs_doc_components_progress}[Bootstrap Docs, window="_blank"].
|
|
1079
983
|
=== Multiple bars
|
1080
984
|
|
1081
985
|
++++
|
1082
|
-
|
1083
|
-
|
1084
|
-
<div class="
|
1085
|
-
|
1086
|
-
|
1087
|
-
|
1088
|
-
<div class="bs-component">
|
1089
|
-
<div class="progress">
|
1090
|
-
<div class="progress-bar" role="progressbar" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
|
1091
|
-
<div class="progress-bar bg-success" role="progressbar" style="width: 30%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
|
1092
|
-
<div class="progress-bar bg-info" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
|
1093
|
-
</div>
|
1094
|
-
</div>
|
1095
|
-
|
986
|
+
<div class="doc-example mb-3">
|
987
|
+
<div class="bs-component">
|
988
|
+
<div class="progress">
|
989
|
+
<div class="progress-bar" role="progressbar" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
|
990
|
+
<div class="progress-bar bg-success" role="progressbar" style="width: 30%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
|
991
|
+
<div class="progress-bar bg-info" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
|
1096
992
|
</div>
|
1097
993
|
</div>
|
1098
994
|
</div>
|
@@ -1101,30 +997,22 @@ Refer to: link:{bs_doc_components_progress}[Bootstrap Docs, window="_blank"].
|
|
1101
997
|
=== Striped
|
1102
998
|
|
1103
999
|
++++
|
1104
|
-
|
1105
|
-
|
1106
|
-
<div class="
|
1107
|
-
|
1108
|
-
|
1109
|
-
|
1110
|
-
<div class="
|
1111
|
-
|
1112
|
-
|
1113
|
-
|
1114
|
-
|
1115
|
-
|
1116
|
-
|
1117
|
-
|
1118
|
-
|
1119
|
-
|
1120
|
-
<div class="progress">
|
1121
|
-
<div class="progress-bar progress-bar-striped bg-warning" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
|
1122
|
-
</div>
|
1123
|
-
<div class="progress">
|
1124
|
-
<div class="progress-bar progress-bar-striped bg-danger" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
|
1125
|
-
</div>
|
1126
|
-
</div>
|
1127
|
-
|
1000
|
+
<div class="doc-example mb-3">
|
1001
|
+
<div class="bs-component">
|
1002
|
+
<div class="progress">
|
1003
|
+
<div class="progress-bar progress-bar-striped" role="progressbar" style="width: 10%" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
|
1004
|
+
</div>
|
1005
|
+
<div class="progress">
|
1006
|
+
<div class="progress-bar progress-bar-striped bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
|
1007
|
+
</div>
|
1008
|
+
<div class="progress">
|
1009
|
+
<div class="progress-bar progress-bar-striped bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
|
1010
|
+
</div>
|
1011
|
+
<div class="progress">
|
1012
|
+
<div class="progress-bar progress-bar-striped bg-warning" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
|
1013
|
+
</div>
|
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>
|
1128
1016
|
</div>
|
1129
1017
|
</div>
|
1130
1018
|
</div>
|
@@ -1133,18 +1021,10 @@ Refer to: link:{bs_doc_components_progress}[Bootstrap Docs, window="_blank"].
|
|
1133
1021
|
=== Animated
|
1134
1022
|
|
1135
1023
|
++++
|
1136
|
-
|
1137
|
-
|
1138
|
-
<div class="
|
1139
|
-
|
1140
|
-
<div class="col-md-10">
|
1141
|
-
|
1142
|
-
<div class="bs-component">
|
1143
|
-
<div class="progress">
|
1144
|
-
<div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%"></div>
|
1145
|
-
</div>
|
1146
|
-
</div>
|
1147
|
-
|
1024
|
+
<div class="doc-example mb-3">
|
1025
|
+
<div class="bs-component">
|
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>
|
1148
1028
|
</div>
|
1149
1029
|
</div>
|
1150
1030
|
</div>
|
@@ -1152,7 +1032,7 @@ Refer to: link:{bs_doc_components_progress}[Bootstrap Docs, window="_blank"].
|
|
1152
1032
|
|
1153
1033
|
== Containers
|
1154
1034
|
|
1155
|
-
lorem:sentences[
|
1035
|
+
lorem:sentences[3]
|
1156
1036
|
|
1157
1037
|
lorem:sentences[2]
|
1158
1038
|
|
@@ -1164,22 +1044,16 @@ pass:[<i class="mdi mdi-book-open mdi-24px mdi-md-bg-primary"></i>]
|
|
1164
1044
|
Refer to: link:{bs_doc_components_jumbotron}[Bootstrap Docs, window="_blank"].
|
1165
1045
|
|
1166
1046
|
++++
|
1167
|
-
|
1168
|
-
|
1169
|
-
<div class="
|
1170
|
-
|
1171
|
-
|
1172
|
-
<
|
1173
|
-
|
1174
|
-
|
1175
|
-
|
1176
|
-
|
1177
|
-
<p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
|
1178
|
-
<p class="lead">
|
1179
|
-
<a class="btn btn-primary btn-raised btn-lg" href="#" role="button">Learn more</a>
|
1180
|
-
</p>
|
1181
|
-
</div>
|
1182
|
-
</div>
|
1047
|
+
<div class="doc-example mb-3">
|
1048
|
+
<div class="bs-component">
|
1049
|
+
<div class="jumbotron">
|
1050
|
+
<h1 class="display-3">Hello, world!</h1>
|
1051
|
+
<p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
|
1052
|
+
<hr class="my-4">
|
1053
|
+
<p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
|
1054
|
+
<p class="lead">
|
1055
|
+
<a class="btn btn-primary btn-raised btn-lg" href="javascript:(void)" role="button">Learn more</a>
|
1056
|
+
</p>
|
1183
1057
|
</div>
|
1184
1058
|
</div>
|
1185
1059
|
</div>
|
@@ -1194,11 +1068,8 @@ pass:[<i class="mdi mdi-book-open mdi-24px mdi-md-bg-primary"></i>]
|
|
1194
1068
|
Refer to: link:{bs_doc_components_list_group}[Bootstrap Docs, window="_blank"].
|
1195
1069
|
|
1196
1070
|
++++
|
1197
|
-
|
1198
|
-
============================================================================ -->
|
1199
|
-
<div class="bs-docs-section">
|
1071
|
+
<div class="doc-example mb-3">
|
1200
1072
|
<div class="row mb-5">
|
1201
|
-
|
1202
1073
|
<div class="col-md-4">
|
1203
1074
|
<div class="bs-component">
|
1204
1075
|
<ul class="list-group">
|
@@ -1221,12 +1092,12 @@ Refer to: link:{bs_doc_components_list_group}[Bootstrap Docs, window="_blank"].
|
|
1221
1092
|
<div class="col-md-4">
|
1222
1093
|
<div class="bs-component">
|
1223
1094
|
<div class="list-group">
|
1224
|
-
<a href="
|
1095
|
+
<a href="javascript:(void)" class="list-group-item list-group-item-action active">
|
1225
1096
|
Cras justo odio
|
1226
1097
|
</a>
|
1227
|
-
<a href="
|
1098
|
+
<a href="javascript:(void)" class="list-group-item list-group-item-action">Dapibus ac facilisis
|
1228
1099
|
</a>
|
1229
|
-
<a href="
|
1100
|
+
<a href="javascript:(void)" class="list-group-item list-group-item-action disabled">Morbi leo risus
|
1230
1101
|
</a>
|
1231
1102
|
</div>
|
1232
1103
|
</div>
|
@@ -1235,7 +1106,7 @@ Refer to: link:{bs_doc_components_list_group}[Bootstrap Docs, window="_blank"].
|
|
1235
1106
|
<div class="col-md-4">
|
1236
1107
|
<div class="bs-component">
|
1237
1108
|
<div class="list-group">
|
1238
|
-
<a href="
|
1109
|
+
<a href="javascript:(void)" class="list-group-item list-group-item-action flex-column align-items-start active">
|
1239
1110
|
<div class="d-flex w-100 justify-content-between">
|
1240
1111
|
<h5 class="mb-1 notoc">List group item heading</h5>
|
1241
1112
|
<small>3 days ago</small>
|
@@ -1243,7 +1114,7 @@ Refer to: link:{bs_doc_components_list_group}[Bootstrap Docs, window="_blank"].
|
|
1243
1114
|
<p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
|
1244
1115
|
<small>Donec id elit non mi porta.</small>
|
1245
1116
|
</a>
|
1246
|
-
<a href="
|
1117
|
+
<a href="javascript:(void)" class="list-group-item list-group-item-action flex-column align-items-start">
|
1247
1118
|
<div class="d-flex w-100 justify-content-between">
|
1248
1119
|
<h5 class="mb-1 notoc">List group item heading</h5>
|
1249
1120
|
<small class="text-muted">3 days ago</small>
|
@@ -1259,6 +1130,7 @@ Refer to: link:{bs_doc_components_list_group}[Bootstrap Docs, window="_blank"].
|
|
1259
1130
|
</div>
|
1260
1131
|
++++
|
1261
1132
|
|
1133
|
+
|
1262
1134
|
=== Cards
|
1263
1135
|
|
1264
1136
|
Bootstrap’s cards provide a flexible and extensible content container with
|
@@ -1279,10 +1151,8 @@ pass:[<i class="mdi mdi-book-open mdi-24px mdi-md-bg-primary"></i>]
|
|
1279
1151
|
Refer to: link:{bs_doc_components_cards}[Bootstrap Docs, window="_blank"].
|
1280
1152
|
|
1281
1153
|
++++
|
1282
|
-
|
1283
|
-
|
1284
|
-
<div class="bs-docs-section">
|
1285
|
-
<div class="row mb-5">
|
1154
|
+
<div class="doc-example mb-3">
|
1155
|
+
<div class="row">
|
1286
1156
|
|
1287
1157
|
<div class="col-md-4">
|
1288
1158
|
<div class="bs-component">
|
@@ -1424,8 +1294,8 @@ Refer to: link:{bs_doc_components_cards}[Bootstrap Docs, window="_blank"].
|
|
1424
1294
|
<li class="list-group-item">Vestibulum at eros</li>
|
1425
1295
|
</ul>
|
1426
1296
|
<div class="card-body">
|
1427
|
-
<a href="
|
1428
|
-
<a href="
|
1297
|
+
<a href="javascript:(void)" class="card-link">Card link</a>
|
1298
|
+
<a href="javascript:(void)" class="card-link">Another link</a>
|
1429
1299
|
</div>
|
1430
1300
|
<div class="card-footer text-muted">
|
1431
1301
|
2 days ago
|
@@ -1436,8 +1306,8 @@ Refer to: link:{bs_doc_components_cards}[Bootstrap Docs, window="_blank"].
|
|
1436
1306
|
<h4 class="card-title notoc">Card title</h4>
|
1437
1307
|
<h6 class="card-subtitle mb-2 text-muted notoc">Card subtitle</h6>
|
1438
1308
|
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
|
1439
|
-
<a href="
|
1440
|
-
<a href="
|
1309
|
+
<a href="javascript:(void)" class="card-link">Card link</a>
|
1310
|
+
<a href="javascript:(void)" class="card-link">Another link</a>
|
1441
1311
|
</div>
|
1442
1312
|
</div>
|
1443
1313
|
</div>
|
@@ -1462,16 +1332,20 @@ content scrolls instead.
|
|
1462
1332
|
pass:[<i class="mdi mdi-book-open mdi-24px mdi-md-bg-primary"></i>]
|
1463
1333
|
Refer to: link:{bs_doc_components_modal}[Bootstrap Docs, window="_blank"].
|
1464
1334
|
|
1465
|
-
|
1335
|
+
.Modal types
|
1336
|
+
[cols="3a,7a,2a", options="header", width="100%", role="table-responsive mt-3"]
|
1337
|
+
|===============================================================================
|
1338
|
+
|Type |Description |Launch
|
1466
1339
|
|
1467
|
-
|
1340
|
+
|*Base*
|
1341
|
+
|Toggle a working modal demo by clicking the button below. It will slide
|
1468
1342
|
down and fade in from the top of the page.
|
1469
|
-
|
1343
|
+
|
|
1470
1344
|
++++
|
1471
1345
|
<div class="ml-2 mb-5">
|
1472
1346
|
<!-- Button trigger modal -->
|
1473
1347
|
<button type="button" class="btn btn-primary btn-round btn-raised" data-toggle="modal" data-target="#exampleSimpleModal">
|
1474
|
-
Launch
|
1348
|
+
Launch
|
1475
1349
|
</button>
|
1476
1350
|
</div>
|
1477
1351
|
|
@@ -1497,16 +1371,16 @@ down and fade in from the top of the page.
|
|
1497
1371
|
</div>
|
1498
1372
|
++++
|
1499
1373
|
|
1500
|
-
|
1501
|
-
|
1502
|
-
|
1503
|
-
|
1504
|
-
|
1374
|
+
|*Scrolling long content*
|
1375
|
+
|When modals become too long for the user’s viewport or device, they scroll
|
1376
|
+
independent of the page itself. Try the demo and resize your browser for
|
1377
|
+
the height.
|
1378
|
+
|
|
1505
1379
|
++++
|
1506
1380
|
<div class="ml-2 mb-5">
|
1507
1381
|
<!-- Button trigger modal -->
|
1508
1382
|
<button type="button" class="btn btn-primary btn-round btn-raised" data-toggle="modal" data-target="#exampleModalLong">
|
1509
|
-
Launch
|
1383
|
+
Launch
|
1510
1384
|
</button>
|
1511
1385
|
</div>
|
1512
1386
|
|
@@ -1549,15 +1423,14 @@ independent of the page itself. Try the demo below to see what we mean.
|
|
1549
1423
|
</div>
|
1550
1424
|
++++
|
1551
1425
|
|
1552
|
-
|
1553
|
-
|
1554
|
-
|
1555
|
-
|
1426
|
+
|*Vertically centered*
|
1427
|
+
|For important messages, center the modal.
|
1428
|
+
|
|
1556
1429
|
++++
|
1557
1430
|
<div class="ml-2 mb-5">
|
1558
1431
|
<!-- Button trigger modal -->
|
1559
1432
|
<button type="button" class="btn btn-primary btn-round btn-raised" data-toggle="modal" data-target="#exampleModalVerticalCenter">
|
1560
|
-
Launch
|
1433
|
+
Launch
|
1561
1434
|
</button>
|
1562
1435
|
</div>
|
1563
1436
|
|
@@ -1586,15 +1459,14 @@ Add `.modal-dialog-centered` to `.modal-dialog` to vertically center the modal.
|
|
1586
1459
|
++++
|
1587
1460
|
|
1588
1461
|
|
1589
|
-
|
1590
|
-
|
1591
|
-
|
1592
|
-
|
1462
|
+
|*Form*
|
1463
|
+
|To save space on forms, dialogs can be part of a modal.
|
1464
|
+
|
|
1593
1465
|
++++
|
1594
1466
|
<div class="ml-2 mb-5">
|
1595
1467
|
<!-- Button trigger modal -->
|
1596
1468
|
<button type="button" class="btn btn-primary btn-round btn-raised" data-toggle="modal" data-target="#modalContactForm">
|
1597
|
-
Launch
|
1469
|
+
Launch
|
1598
1470
|
</button>
|
1599
1471
|
</div>
|
1600
1472
|
|
@@ -1641,15 +1513,14 @@ Add `.modal-dialog-centered` to `.modal-dialog` to vertically center the modal.
|
|
1641
1513
|
</div>
|
1642
1514
|
++++
|
1643
1515
|
|
1644
|
-
|
1645
|
-
|
1646
|
-
|
1647
|
-
|
1516
|
+
|*Fluid*
|
1517
|
+
|For e.g larger summaries, a vertical fluid modal can be used for that.
|
1518
|
+
|
|
1648
1519
|
++++
|
1649
1520
|
<div class="ml-2 mb-5">
|
1650
1521
|
<!-- Button trigger modal -->
|
1651
1522
|
<button type="button" class="btn btn-primary btn-round btn-raised" data-toggle="modal" data-target="#fluidModalRightSuccess">
|
1652
|
-
Launch
|
1523
|
+
Launch
|
1653
1524
|
</button>
|
1654
1525
|
</div>
|
1655
1526
|
|
@@ -1713,18 +1584,15 @@ Add `.modal-dialog-centered` to `.modal-dialog` to vertically center the modal.
|
|
1713
1584
|
<!-- Full Height Modal Right Success-->
|
1714
1585
|
++++
|
1715
1586
|
|
1716
|
-
|
1717
|
-
|
1718
|
-
==== Tooltips and Popovers
|
1719
|
-
|
1720
|
-
Tooltips and popovers can be placed within modals as needed. When modals are
|
1587
|
+
|*Tooltips and Popovers*
|
1588
|
+
|Tooltips and popovers can be placed within modals as needed. When modals are
|
1721
1589
|
closed, any tooltips and popovers within are also automatically dismissed.
|
1722
|
-
|
1590
|
+
|
|
1723
1591
|
++++
|
1724
1592
|
<div class="ml-2 mb-5">
|
1725
1593
|
<!-- Button trigger modal -->
|
1726
1594
|
<button type="button" class="btn btn-primary btn-round btn-raised" data-toggle="modal" data-target="#exampleModalTooltip">
|
1727
|
-
Launch
|
1595
|
+
Launch
|
1728
1596
|
</button>
|
1729
1597
|
</div>
|
1730
1598
|
|
@@ -1743,7 +1611,7 @@ closed, any tooltips and popovers within are also automatically dismissed.
|
|
1743
1611
|
<p>This <a href="#" role="button" class="btn btn-secondary btn-round btn-raised popover-test" data-toggle="popover" title="Popover title" data-content="Popover body content is set in this attribute.">button</a> triggers a popover on click.</p>
|
1744
1612
|
<hr>
|
1745
1613
|
<h5>Tooltips in a modal</h5>
|
1746
|
-
<p><a href="
|
1614
|
+
<p><a href="javascript:(void)" class="tooltip-test" data-toggle="tooltip" title="Tooltip">This link</a> and <a href="#" class="tooltip-test" data-toggle="tooltip" title="Tooltip">that link</a> have tooltips on hover.</p>
|
1747
1615
|
</div>
|
1748
1616
|
<div class="modal-footer">
|
1749
1617
|
<button type="button" class="btn btn-secondary btn-round btn-raised mr-2" data-dismiss="modal">Close</button>
|
@@ -1754,6 +1622,7 @@ closed, any tooltips and popovers within are also automatically dismissed.
|
|
1754
1622
|
</div>
|
1755
1623
|
++++
|
1756
1624
|
|
1625
|
+
|===============================================================================
|
1757
1626
|
|
1758
1627
|
=== Popovers
|
1759
1628
|
|
@@ -1763,27 +1632,16 @@ bootstrap.bundle.js which contains Popper.js in order for popovers to work.
|
|
1763
1632
|
|
1764
1633
|
Note: Popovers require the tooltip plugin as a dependency.
|
1765
1634
|
|
1766
|
-
|
1767
1635
|
pass:[<i class="mdi mdi-book-open mdi-24px mdi-md-bg-primary"></i>]
|
1768
1636
|
Refer to: link:{bs_doc_components_popovers}[Bootstrap Docs, window="_blank"].
|
1769
1637
|
|
1770
1638
|
++++
|
1771
|
-
|
1772
|
-
|
1773
|
-
<
|
1774
|
-
|
1775
|
-
|
1776
|
-
|
1777
|
-
<div class="bs-component mt-3 mb-4">
|
1778
|
-
<button type="button" class="btn btn-secondary btn-raised" title="Popover Title" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">Top</button>
|
1779
|
-
<button type="button" class="btn btn-secondary btn-raised" title="Popover Title" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus
|
1780
|
-
sagittis lacus vel augue laoreet rutrum faucibus.">Bottom</button>
|
1781
|
-
<button type="button" class="btn btn-secondary btn-raised" title="Popover Title" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">Right</button>
|
1782
|
-
<button type="button" class="btn btn-secondary btn-raised" title="Popover Title" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">Left</button>
|
1783
|
-
</div>
|
1784
|
-
</div>
|
1785
|
-
|
1786
|
-
</div>
|
1639
|
+
<div class="doc-example mb-3">
|
1640
|
+
<button type="button" class="btn btn-secondary btn-raised" title="Popover Title" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">Top</button>
|
1641
|
+
<button type="button" class="btn btn-secondary btn-raised" title="Popover Title" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus
|
1642
|
+
sagittis lacus vel augue laoreet rutrum faucibus.">Bottom</button>
|
1643
|
+
<button type="button" class="btn btn-secondary btn-raised" title="Popover Title" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">Right</button>
|
1644
|
+
<button type="button" class="btn btn-secondary btn-raised" title="Popover Title" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">Left</button>
|
1787
1645
|
</div>
|
1788
1646
|
++++
|
1789
1647
|
|
@@ -1800,61 +1658,10 @@ pass:[<i class="mdi mdi-book-open mdi-24px mdi-md-bg-primary"></i>]
|
|
1800
1658
|
Refer to: link:{bs_doc_components_tooltips}[Bootstrap Docs, window="_blank"].
|
1801
1659
|
|
1802
1660
|
++++
|
1803
|
-
|
1804
|
-
|
1805
|
-
<
|
1806
|
-
<
|
1807
|
-
|
1808
|
-
<div class="col-md-8">
|
1809
|
-
<div class="bs-component mt-3 mb-4">
|
1810
|
-
<button type="button" class="btn btn-secondary btn-raised" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Top</button>
|
1811
|
-
<button type="button" class="btn btn-secondary btn-raised" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Bottom</button>
|
1812
|
-
<button type="button" class="btn btn-secondary btn-raised" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Right</button>
|
1813
|
-
<button type="button" class="btn btn-secondary btn-raised" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Left</button>
|
1814
|
-
</div>
|
1815
|
-
</div>
|
1816
|
-
|
1817
|
-
</div>
|
1661
|
+
<div class="doc-example mb-3">
|
1662
|
+
<button type="button" class="btn btn-secondary btn-raised" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Top</button>
|
1663
|
+
<button type="button" class="btn btn-secondary btn-raised" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Bottom</button>
|
1664
|
+
<button type="button" class="btn btn-secondary btn-raised" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Right</button>
|
1665
|
+
<button type="button" class="btn btn-secondary btn-raised" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Left</button>
|
1818
1666
|
</div>
|
1819
1667
|
++++
|
1820
|
-
|
1821
|
-
|
1822
|
-
/////
|
1823
|
-
See: https://stackoverflow.com/questions/15738259/disabling-chrome-autofill
|
1824
|
-
<script>
|
1825
|
-
$(document).ready(function () {
|
1826
|
-
$('input').attr('autocomplete', 'false');
|
1827
|
-
});
|
1828
|
-
</script>
|
1829
|
-
|
1830
|
-
(function($) {
|
1831
|
-
$.fn.autoCompleteFix = function(opt) {
|
1832
|
-
var ro = 'readonly', settings = $.extend({
|
1833
|
-
attribute : 'autocomplete',
|
1834
|
-
trigger : {
|
1835
|
-
disable : ["off"],
|
1836
|
-
},
|
1837
|
-
focus : function() {
|
1838
|
-
$(this).removeAttr(ro);
|
1839
|
-
},
|
1840
|
-
force : false
|
1841
|
-
}, opt);
|
1842
|
-
|
1843
|
-
$(this).each(function(i, el) {
|
1844
|
-
el = $(el);
|
1845
|
-
|
1846
|
-
if(el.is('form')) {
|
1847
|
-
var force = (-1 !== $.inArray(el.attr(settings.attribute), settings.trigger.disable))
|
1848
|
-
el.find('input').autoCompleteFix({force:force});
|
1849
|
-
} else {
|
1850
|
-
var disabled = -1 !== $.inArray(el.attr(settings.attribute), settings.trigger.disable);
|
1851
|
-
var enabled = -1 !== $.inArray(el.attr(settings.attribute), settings.trigger.enable);
|
1852
|
-
if (settings.force && !enabled || disabled)
|
1853
|
-
el.attr(ro, ro).focus(settings.focus).val("");
|
1854
|
-
}
|
1855
|
-
});
|
1856
|
-
};
|
1857
|
-
$('form').autoCompleteFix();
|
1858
|
-
})(jQuery);
|
1859
|
-
|
1860
|
-
/////
|