mdbootstrap/mdb-ui-kit
1
1
Fork 0
mirror of https://github.com/mdbootstrap/mdb-ui-kit.git synced 2025-02-19 21:20:40 +03:00
Code Issues Packages Projects Releases Wiki Activity

publish: v4.1.0

Browse Source 
generated from commit 6821b53b3a
This commit is contained in:
Federico Zivolo 2018-01-23 13:38:38 +01:00
parent dc34b0aa74
commit ece12ebe34
180 changed files with 56479 additions and 39556 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11237
assets/css/docs.css
View File

File diff suppressed because it is too large Load Diff

9
assets/css/docs.min.css vendored
View File

File diff suppressed because one or more lines are too long

5208
dist/css/bootstrap-material-design.css vendored
View File

File diff suppressed because it is too large Load Diff

9
dist/css/bootstrap-material-design.min.css vendored
View File

File diff suppressed because one or more lines are too long

7293
dist/js/bootstrap-material-design.js vendored
View File

File diff suppressed because it is too large Load Diff

2
dist/js/bootstrap-material-design.js.map vendored
View File

File diff suppressed because one or more lines are too long

2
dist/js/bootstrap-material-design.min.js vendored
View File

File diff suppressed because one or more lines are too long

1337
docs/4.0/about/brand/index.html
View File

File diff suppressed because it is too large Load Diff

1263
docs/4.0/about/history/index.html
View File

File diff suppressed because it is too large Load Diff

8
about/index.html → docs/4.0/about/index.html
View File

@ -2,9 +2,9 @@
<html lang="en-US">
<meta charset="utf-8">
<title>Redirecting…</title>
<link rel="canonical" href="https://fezvrasta.github.io/bootstrap-material-design/docs/4.0/about/history/">
<meta http-equiv="refresh" content="0; url=https://fezvrasta.github.io/bootstrap-material-design/docs/4.0/about/history/">
<link rel="canonical" href="https://fezvrasta.github.io/bootstrap-material-design/docs/4.0/about/overview/">
<meta http-equiv="refresh" content="0; url=https://fezvrasta.github.io/bootstrap-material-design/docs/4.0/about/overview/">
<h1>Redirecting…</h1>
<a href="https://fezvrasta.github.io/bootstrap-material-design/docs/4.0/about/history/">Click here if you are not redirected.</a>
<script>location="https://fezvrasta.github.io/bootstrap-material-design/docs/4.0/about/history/"</script>
<a href="https://fezvrasta.github.io/bootstrap-material-design/docs/4.0/about/overview/">Click here if you are not redirected.</a>
<script>location="https://fezvrasta.github.io/bootstrap-material-design/docs/4.0/about/overview/"</script>
</html>

672
docs/4.0/about/license/index.html
View File

@ -230,8 +230,8 @@
<li class="">
<a href="/bootstrap-material-design/docs/4.0/getting-started/options/">
Options
<a href="/bootstrap-material-design/docs/4.0/getting-started/theming/">
Theming
</a>
@ -450,296 +450,6 @@
<div class="bd-toc-item ">
<a class="bd-toc-link" href="/bootstrap-material-design/docs/4.0/components/alerts/">
Components
</a>
<ul class="nav bd-sidenav">
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/alerts/">
Alerts
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/badge/">
Badge
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/breadcrumb/">
Breadcrumb
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/buttons/">
Buttons
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/button-group/">
Button group
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/card/">
Card
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/carousel/">
Carousel
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/collapse/">
Collapse
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/dropdowns/">
Dropdowns
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/forms/">
Forms
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/input-group/">
Input group
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/jumbotron/">
Jumbotron
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/list-group/">
List group
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/modal/">
Modal
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/navs/">
Navs
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/navbar/">
Navbar
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/pagination/">
Pagination
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/popovers/">
Popovers
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/progress/">
Progress
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/scrollspy/">
Scrollspy
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/tooltips/">
Tooltips
</a>
</li>
</ul>
</div>
<div class="bd-toc-item ">
<a class="bd-toc-link" href="/bootstrap-material-design/docs/4.0/material-design/buttons/">
Material Design
@ -900,6 +610,296 @@
<div class="bd-toc-item ">
<a class="bd-toc-link" href="/bootstrap-material-design/docs/4.0/bootstrap-components/alerts/">
Bootstrap Components
</a>
<ul class="nav bd-sidenav">
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/alerts/">
Alerts
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/badge/">
Badge
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/breadcrumb/">
Breadcrumb
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/buttons/">
Buttons
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/button-group/">
Button group
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/card/">
Card
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/carousel/">
Carousel
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/collapse/">
Collapse
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/dropdowns/">
Dropdowns
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/forms/">
Forms
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/input-group/">
Input group
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/jumbotron/">
Jumbotron
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/list-group/">
List group
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/modal/">
Modal
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/navs/">
Navs
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/navbar/">
Navbar
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/pagination/">
Pagination
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/popovers/">
Popovers
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/progress/">
Progress
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/scrollspy/">
Scrollspy
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/tooltips/">
Tooltips
</a>
</li>
</ul>
</div>
<div class="bd-toc-item ">
<a class="bd-toc-link" href="/bootstrap-material-design/docs/4.0/utilities/borders/">
Utilities
@ -1126,7 +1126,7 @@
<div class="bd-toc-item ">
<a class="bd-toc-link" href="/bootstrap-material-design/docs/4.0/extend/icons/">
<a class="bd-toc-link" href="/bootstrap-material-design/docs/4.0/extend/approach/">
Extend
</a>
@ -1137,6 +1137,19 @@
<li class="">
<a href="/bootstrap-material-design/docs/4.0/extend/approach/">
Approach
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/extend/icons/">
Icons
@ -1165,6 +1178,75 @@
</ul>
</div>
<div class="bd-toc-item active">
<a class="bd-toc-link" href="/bootstrap-material-design/docs/4.0/about/overview/">
About
</a>
<ul class="nav bd-sidenav">
<li class="">
<a href="/bootstrap-material-design/docs/4.0/about/overview/">
Overview
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/about/brand/">
Brand
</a>
</li>
<li class="active bd-sidenav-active">
<a href="/bootstrap-material-design/docs/4.0/about/license/">
License
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/about/translations/">
Translations
</a>
</li>
</ul>
</div>
</nav>
</div>
@ -1176,7 +1258,7 @@
<p class="bd-lead">Commonly asked questions about Bootstrap's open source license.</p>
<script async type="text/javascript" src="https://cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=fezvrastagithubiobootstrapmateri" id="_carbonads_js"></script>
<p>Bootstrap is released under the MIT license and is copyright 2017 Twitter. Boiled down to smaller chunks, it can be described with the following conditions.</p>
<p>Bootstrap is released under the MIT license and is copyright 2018 Twitter. Boiled down to smaller chunks, it can be described with the following conditions.</p>
<h4 id="it-requires-you-to">It requires you to:</h4>
@ -1210,7 +1292,7 @@
<li>Submit changes that you make to Bootstrap back to the Bootstrap project (though such feedback is encouraged)</li>
</ul>
<p>The full Bootstrap license is located <a href="https://github.com/FezVrasta/bootstrap-material-design/blob/master/LICENSE">in the project repository</a> for more information.</p>
<p>The full Material Design for Bootstrap license is located <a href="https://github.com/FezVrasta/bootstrap-material-design/blob/v4.1.0/LICENSE">in the project repository</a> for more information.</p>
</main>
</div>

698
docs/4.0/about/translations/index.html → docs/4.0/about/overview/index.html
View File

@ -6,7 +6,7 @@
<title>
Translations &middot; Bootstrap Material Design
About &middot; Bootstrap Material Design
</title>
@ -16,16 +16,16 @@
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="Translations">
<meta name="twitter:description" content="Links to community-translated Bootstrap documentation sites.">
<meta name="twitter:title" content="About">
<meta name="twitter:description" content="Learn more about the team maintaining Bootstrap, how and why the project started, and how to get involved.">
<meta name="twitter:image" content="https://fezvrasta.github.io/assets/brand/bootstrap-social-logo.png">
<!-- Facebook -->
<meta property="og:url" content="https://fezvrasta.github.io/docs/4.0/about/translations/">
<meta property="og:title" content="Translations">
<meta property="og:description" content="Links to community-translated Bootstrap documentation sites.">
<meta property="og:url" content="https://fezvrasta.github.io/docs/4.0/about/overview/">
<meta property="og:title" content="About">
<meta property="og:description" content="Learn more about the team maintaining Bootstrap, how and why the project started, and how to get involved.">
<meta property="og:type" content="website">
<meta property="og:image" content="http://fezvrasta.github.io/assets/brand/bootstrap-social.png">
@ -230,8 +230,8 @@
<li class="">
<a href="/bootstrap-material-design/docs/4.0/getting-started/options/">
Options
<a href="/bootstrap-material-design/docs/4.0/getting-started/theming/">
Theming
</a>
@ -450,296 +450,6 @@
<div class="bd-toc-item ">
<a class="bd-toc-link" href="/bootstrap-material-design/docs/4.0/components/alerts/">
Components
</a>
<ul class="nav bd-sidenav">
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/alerts/">
Alerts
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/badge/">
Badge
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/breadcrumb/">
Breadcrumb
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/buttons/">
Buttons
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/button-group/">
Button group
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/card/">
Card
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/carousel/">
Carousel
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/collapse/">
Collapse
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/dropdowns/">
Dropdowns
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/forms/">
Forms
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/input-group/">
Input group
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/jumbotron/">
Jumbotron
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/list-group/">
List group
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/modal/">
Modal
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/navs/">
Navs
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/navbar/">
Navbar
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/pagination/">
Pagination
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/popovers/">
Popovers
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/progress/">
Progress
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/scrollspy/">
Scrollspy
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/tooltips/">
Tooltips
</a>
</li>
</ul>
</div>
<div class="bd-toc-item ">
<a class="bd-toc-link" href="/bootstrap-material-design/docs/4.0/material-design/buttons/">
Material Design
@ -900,6 +610,296 @@
<div class="bd-toc-item ">
<a class="bd-toc-link" href="/bootstrap-material-design/docs/4.0/bootstrap-components/alerts/">
Bootstrap Components
</a>
<ul class="nav bd-sidenav">
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/alerts/">
Alerts
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/badge/">
Badge
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/breadcrumb/">
Breadcrumb
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/buttons/">
Buttons
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/button-group/">
Button group
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/card/">
Card
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/carousel/">
Carousel
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/collapse/">
Collapse
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/dropdowns/">
Dropdowns
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/forms/">
Forms
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/input-group/">
Input group
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/jumbotron/">
Jumbotron
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/list-group/">
List group
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/modal/">
Modal
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/navs/">
Navs
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/navbar/">
Navbar
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/pagination/">
Pagination
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/popovers/">
Popovers
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/progress/">
Progress
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/scrollspy/">
Scrollspy
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/tooltips/">
Tooltips
</a>
</li>
</ul>
</div>
<div class="bd-toc-item ">
<a class="bd-toc-link" href="/bootstrap-material-design/docs/4.0/utilities/borders/">
Utilities
@ -1126,7 +1126,7 @@
<div class="bd-toc-item ">
<a class="bd-toc-link" href="/bootstrap-material-design/docs/4.0/extend/icons/">
<a class="bd-toc-link" href="/bootstrap-material-design/docs/4.0/extend/approach/">
Extend
</a>
@ -1137,6 +1137,19 @@
<li class="">
<a href="/bootstrap-material-design/docs/4.0/extend/approach/">
Approach
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/extend/icons/">
Icons
@ -1165,6 +1178,75 @@
</ul>
</div>
<div class="bd-toc-item active">
<a class="bd-toc-link" href="/bootstrap-material-design/docs/4.0/about/overview/">
About
</a>
<ul class="nav bd-sidenav">
<li class="active bd-sidenav-active">
<a href="/bootstrap-material-design/docs/4.0/about/overview/">
Overview
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/about/brand/">
Brand
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/about/license/">
License
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/about/translations/">
Translations
</a>
</li>
</ul>
</div>
</nav>
</div>
@ -1172,23 +1254,17 @@
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<h1 class="bd-title" id="content">Translations</h1>
<p class="bd-lead">Links to community-translated Bootstrap documentation sites.</p>
<h1 class="bd-title" id="content">About</h1>
<p class="bd-lead">Learn more about the team maintaining Bootstrap, how and why the project started, and how to get involved.</p>
<script async type="text/javascript" src="https://cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=fezvrastagithubiobootstrapmateri" id="_carbonads_js"></script>
<p>Community members have translated Bootstrap’s documentation into various languages. None are officially supported and they may not always be up to date.</p>
<h2 id="team">Team</h2>
<ul>
<p>Bootstrap is maintained by <a href="https://github.com/FezVrasta">Federico (@FezVrasta) Zivolo</a> on GitHub. I’m actively looking to grow the team and would love to hear from you if you’re excited about CSS at scale, writing and maintaining vanilla JavaScript plugins, and improving build tooling processes for frontend code.</p>
<li><a href="http://wiki.jikexueyuan.com/project/bootstrap4/" hreflang="zh">Bootstrap 4 中文文档教程 (Chinese)</a></li>
<h2 id="get-involved">Get involved</h2>
<li><a href="https://bootstrapbrasil.github.io/v4/" hreflang="pt-BR">Bootstrap 4 Português do Brasil (Brazilian Portuguese)</a></li>
</ul>
<p><strong>We don’t help organize or host translations, we just link to them.</strong></p>
<p>Finished a new or better translation? Open a pull request to add it to our list.</p>
<p>Get involved with Material Design for Bootstrap development by <a href="https://github.com/FezVrasta/bootstrap-material-design/issues/new">opening an issue</a> or submitting a pull request. Read our <a href="https://github.com/FezVrasta/bootstrap-material-design/blob/v4.1.0/.github/CONTRIBUTING.md">contributing guidelines</a> for information on how we develop.</p>
</main>
</div>

1345
docs/4.0/about/team/index.html
View File

File diff suppressed because it is too large Load Diff

672
docs/4.0/browser-bugs/index.html
View File

@ -230,8 +230,8 @@
<li class="">
<a href="/bootstrap-material-design/docs/4.0/getting-started/options/">
Options
<a href="/bootstrap-material-design/docs/4.0/getting-started/theming/">
Theming
</a>
@ -450,296 +450,6 @@
<div class="bd-toc-item ">
<a class="bd-toc-link" href="/bootstrap-material-design/docs/4.0/components/alerts/">
Components
</a>
<ul class="nav bd-sidenav">
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/alerts/">
Alerts
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/badge/">
Badge
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/breadcrumb/">
Breadcrumb
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/buttons/">
Buttons
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/button-group/">
Button group
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/card/">
Card
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/carousel/">
Carousel
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/collapse/">
Collapse
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/dropdowns/">
Dropdowns
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/forms/">
Forms
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/input-group/">
Input group
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/jumbotron/">
Jumbotron
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/list-group/">
List group
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/modal/">
Modal
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/navs/">
Navs
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/navbar/">
Navbar
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/pagination/">
Pagination
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/popovers/">
Popovers
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/progress/">
Progress
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/scrollspy/">
Scrollspy
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/tooltips/">
Tooltips
</a>
</li>
</ul>
</div>
<div class="bd-toc-item ">
<a class="bd-toc-link" href="/bootstrap-material-design/docs/4.0/material-design/buttons/">
Material Design
@ -900,6 +610,296 @@
<div class="bd-toc-item ">
<a class="bd-toc-link" href="/bootstrap-material-design/docs/4.0/bootstrap-components/alerts/">
Bootstrap Components
</a>
<ul class="nav bd-sidenav">
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/alerts/">
Alerts
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/badge/">
Badge
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/breadcrumb/">
Breadcrumb
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/buttons/">
Buttons
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/button-group/">
Button group
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/card/">
Card
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/carousel/">
Carousel
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/collapse/">
Collapse
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/dropdowns/">
Dropdowns
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/forms/">
Forms
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/input-group/">
Input group
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/jumbotron/">
Jumbotron
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/list-group/">
List group
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/modal/">
Modal
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/navs/">
Navs
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/navbar/">
Navbar
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/pagination/">
Pagination
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/popovers/">
Popovers
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/progress/">
Progress
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/scrollspy/">
Scrollspy
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/tooltips/">
Tooltips
</a>
</li>
</ul>
</div>
<div class="bd-toc-item ">
<a class="bd-toc-link" href="/bootstrap-material-design/docs/4.0/utilities/borders/">
Utilities
@ -1126,7 +1126,7 @@
<div class="bd-toc-item ">
<a class="bd-toc-link" href="/bootstrap-material-design/docs/4.0/extend/icons/">
<a class="bd-toc-link" href="/bootstrap-material-design/docs/4.0/extend/approach/">
Extend
</a>
@ -1137,6 +1137,19 @@
<li class="">
<a href="/bootstrap-material-design/docs/4.0/extend/approach/">
Approach
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/extend/icons/">
Icons
@ -1165,6 +1178,75 @@
</ul>
</div>
<div class="bd-toc-item ">
<a class="bd-toc-link" href="/bootstrap-material-design/docs/4.0/about/overview/">
About
</a>
<ul class="nav bd-sidenav">
<li class="">
<a href="/bootstrap-material-design/docs/4.0/about/overview/">
Overview
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/about/brand/">
Brand
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/about/license/">
License
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/about/translations/">
Translations
</a>
</li>
</ul>
</div>
</nav>
</div>
@ -1189,7 +1271,7 @@
<li><a href="https://docs.google.com/document/d/1LPaPA30bLUB_publLIMF0RlhdnPx_ePXm7oW02iiT6o">jQuery’s browser bug workarounds</a></li>
</ul>
<table class="bd-browser-bugs table table-bordered table-hover table-responsive">
<table class="bd-browser-bugs table table-bordered table-hover">
<thead>
<tr>
<th>Browser(s)</th>
@ -1682,7 +1764,7 @@
<p>We publicly list these “most wanted” feature requests here, in the hopes of expediting the process of getting them implemented.</p>
<table class="bd-browser-bugs table table-bordered table-hover table-responsive">
<table class="bd-browser-bugs table table-bordered table-hover">
<thead>
<tr>
<th>Browser(s)</th>

682
docs/4.0/components/alerts/index.html
View File

@ -230,8 +230,8 @@
<li class="">
<a href="/bootstrap-material-design/docs/4.0/getting-started/options/">
Options
<a href="/bootstrap-material-design/docs/4.0/getting-started/theming/">
Theming
</a>
@ -450,296 +450,6 @@
<div class="bd-toc-item active">
<a class="bd-toc-link" href="/bootstrap-material-design/docs/4.0/components/alerts/">
Components
</a>
<ul class="nav bd-sidenav">
<li class="active bd-sidenav-active">
<a href="/bootstrap-material-design/docs/4.0/components/alerts/">
Alerts
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/badge/">
Badge
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/breadcrumb/">
Breadcrumb
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/buttons/">
Buttons
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/button-group/">
Button group
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/card/">
Card
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/carousel/">
Carousel
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/collapse/">
Collapse
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/dropdowns/">
Dropdowns
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/forms/">
Forms
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/input-group/">
Input group
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/jumbotron/">
Jumbotron
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/list-group/">
List group
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/modal/">
Modal
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/navs/">
Navs
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/navbar/">
Navbar
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/pagination/">
Pagination
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/popovers/">
Popovers
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/progress/">
Progress
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/scrollspy/">
Scrollspy
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/tooltips/">
Tooltips
</a>
</li>
</ul>
</div>
<div class="bd-toc-item ">
<a class="bd-toc-link" href="/bootstrap-material-design/docs/4.0/material-design/buttons/">
Material Design
@ -900,6 +610,296 @@
<div class="bd-toc-item ">
<a class="bd-toc-link" href="/bootstrap-material-design/docs/4.0/bootstrap-components/alerts/">
Bootstrap Components
</a>
<ul class="nav bd-sidenav">
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/alerts/">
Alerts
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/badge/">
Badge
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/breadcrumb/">
Breadcrumb
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/buttons/">
Buttons
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/button-group/">
Button group
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/card/">
Card
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/carousel/">
Carousel
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/collapse/">
Collapse
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/dropdowns/">
Dropdowns
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/forms/">
Forms
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/input-group/">
Input group
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/jumbotron/">
Jumbotron
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/list-group/">
List group
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/modal/">
Modal
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/navs/">
Navs
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/navbar/">
Navbar
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/pagination/">
Pagination
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/popovers/">
Popovers
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/progress/">
Progress
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/scrollspy/">
Scrollspy
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/tooltips/">
Tooltips
</a>
</li>
</ul>
</div>
<div class="bd-toc-item ">
<a class="bd-toc-link" href="/bootstrap-material-design/docs/4.0/utilities/borders/">
Utilities
@ -1126,7 +1126,7 @@
<div class="bd-toc-item ">
<a class="bd-toc-link" href="/bootstrap-material-design/docs/4.0/extend/icons/">
<a class="bd-toc-link" href="/bootstrap-material-design/docs/4.0/extend/approach/">
Extend
</a>
@ -1137,6 +1137,19 @@
<li class="">
<a href="/bootstrap-material-design/docs/4.0/extend/approach/">
Approach
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/extend/icons/">
Icons
@ -1165,6 +1178,75 @@
</ul>
</div>
<div class="bd-toc-item ">
<a class="bd-toc-link" href="/bootstrap-material-design/docs/4.0/about/overview/">
About
</a>
<ul class="nav bd-sidenav">
<li class="">
<a href="/bootstrap-material-design/docs/4.0/about/overview/">
Overview
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/about/brand/">
Brand
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/about/license/">
License
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/about/translations/">
Translations
</a>
</li>
</ul>
</div>
</nav>
</div>
@ -1204,7 +1286,7 @@
<h2 id="examples">Examples</h2>
<p>Alerts are available for any length of text, as well as an optional dismiss button. For proper styling, use one of the four <strong>required</strong> contextual classes (e.g., <code class="highlighter-rouge">.alert-success</code>). For inline dismissal, use the <a href="#dismissing">alerts jQuery plugin</a>.</p>
<p>Alerts are available for any length of text, as well as an optional dismiss button. For proper styling, use one of the eight <strong>required</strong> contextual classes (e.g., <code class="highlighter-rouge">.alert-success</code>). For inline dismissal, use the <a href="#dismissing">alerts jQuery plugin</a>.</p>
<div class="bd-example" data-example-id="">
<div class="alert alert-primary" role="alert">
@ -1343,7 +1425,7 @@
<ul>
<li>Be sure you’ve loaded the alert plugin, or the compiled Bootstrap JavaScript.</li>
<li>If you’re building our JS from source, it <a href="/bootstrap-material-design/docs/getting-started/javascript/#util">requires <code class="highlighter-rouge">util.js</code></a>. The compiled version includes this.</li>
<li>If you’re building our JavaScript from source, it <a href="/bootstrap-material-design/docs/4.0/getting-started/javascript/#util">requires <code class="highlighter-rouge">util.js</code></a>. The compiled version includes this.</li>
<li>Add a dismiss button and the <code class="highlighter-rouge">.alert-dismissible</code> class, which adds extra padding to the right of the alert and positions the <code class="highlighter-rouge">.close</code> button.</li>
<li>On the dismiss button, add the <code class="highlighter-rouge">data-dismiss="alert"</code> attribute, which triggers the JavaScript functionality. Be sure to use the <code class="highlighter-rouge">&lt;button&gt;</code> element with it for proper behavior across all devices.</li>
<li>To animate alerts when dismissing them, be sure to add the <code class="highlighter-rouge">.fade</code> and <code class="highlighter-rouge">.show</code> classes.</li>
@ -1353,17 +1435,17 @@
<div class="bd-example" data-example-id="">
<div class="alert alert-warning alert-dismissible fade show" role="alert">
<strong>Holy guacamole!</strong> You should check in on some of those fields below.
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
<strong>Holy guacamole!</strong> You should check in on some of those fields below.
</div>
</div>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"alert alert-warning alert-dismissible fade show"</span> <span class="na">role=</span><span class="s">"alert"</span><span class="nt">&gt;</span>
<span class="nt">&lt;strong&gt;</span>Holy guacamole!<span class="nt">&lt;/strong&gt;</span> You should check in on some of those fields below.
<span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"close"</span> <span class="na">data-dismiss=</span><span class="s">"alert"</span> <span class="na">aria-label=</span><span class="s">"Close"</span><span class="nt">&gt;</span>
<span class="nt">&lt;span</span> <span class="na">aria-hidden=</span><span class="s">"true"</span><span class="nt">&gt;</span><span class="ni">&amp;times;</span><span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;strong&gt;</span>Holy guacamole!<span class="nt">&lt;/strong&gt;</span> You should check in on some of those fields below.
<span class="nt">&lt;/div&gt;</span></code></pre></div>
<h2 id="javascript-behavior">JavaScript behavior</h2>
@ -1372,7 +1454,7 @@
<p>Enable dismissal of an alert via JavaScript:</p>
<figure class="highlight"><pre><code class="language-js" data-lang="js"><span class="nx">$</span><span class="p">(</span><span class="s2">".alert"</span><span class="p">).</span><span class="nx">alert</span><span class="p">()</span></code></pre></figure>
<figure class="highlight"><pre><code class="language-js" data-lang="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'.alert'</span><span class="p">).</span><span class="nx">alert</span><span class="p">()</span></code></pre></figure>
<p>Or with <code class="highlighter-rouge">data</code> attributes on a button <strong>within the alert</strong>, as demonstrated above:</p>
@ -1400,6 +1482,10 @@
<td><code class="highlighter-rouge">$().alert('close')</code></td>
<td>Closes an alert by removing it from the DOM. If the <code class="highlighter-rouge">.fade</code> and <code class="highlighter-rouge">.show</code> classes are present on the element, the alert will fade out before it is removed.</td>
</tr>
<tr>
<td><code class="highlighter-rouge">$().alert('dispose')</code></td>
<td>Destroys an element’s alert.</td>
</tr>
</tbody>
</table>

678
docs/4.0/components/badge/index.html
View File

@ -230,8 +230,8 @@
<li class="">
<a href="/bootstrap-material-design/docs/4.0/getting-started/options/">
Options
<a href="/bootstrap-material-design/docs/4.0/getting-started/theming/">
Theming
</a>
@ -450,296 +450,6 @@
<div class="bd-toc-item active">
<a class="bd-toc-link" href="/bootstrap-material-design/docs/4.0/components/alerts/">
Components
</a>
<ul class="nav bd-sidenav">
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/alerts/">
Alerts
</a>
</li>
<li class="active bd-sidenav-active">
<a href="/bootstrap-material-design/docs/4.0/components/badge/">
Badge
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/breadcrumb/">
Breadcrumb
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/buttons/">
Buttons
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/button-group/">
Button group
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/card/">
Card
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/carousel/">
Carousel
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/collapse/">
Collapse
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/dropdowns/">
Dropdowns
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/forms/">
Forms
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/input-group/">
Input group
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/jumbotron/">
Jumbotron
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/list-group/">
List group
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/modal/">
Modal
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/navs/">
Navs
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/navbar/">
Navbar
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/pagination/">
Pagination
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/popovers/">
Popovers
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/progress/">
Progress
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/scrollspy/">
Scrollspy
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/tooltips/">
Tooltips
</a>
</li>
</ul>
</div>
<div class="bd-toc-item ">
<a class="bd-toc-link" href="/bootstrap-material-design/docs/4.0/material-design/buttons/">
Material Design
@ -900,6 +610,296 @@
<div class="bd-toc-item ">
<a class="bd-toc-link" href="/bootstrap-material-design/docs/4.0/bootstrap-components/alerts/">
Bootstrap Components
</a>
<ul class="nav bd-sidenav">
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/alerts/">
Alerts
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/badge/">
Badge
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/breadcrumb/">
Breadcrumb
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/buttons/">
Buttons
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/button-group/">
Button group
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/card/">
Card
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/carousel/">
Carousel
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/collapse/">
Collapse
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/dropdowns/">
Dropdowns
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/forms/">
Forms
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/input-group/">
Input group
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/jumbotron/">
Jumbotron
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/list-group/">
List group
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/modal/">
Modal
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/navs/">
Navs
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/navbar/">
Navbar
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/pagination/">
Pagination
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/popovers/">
Popovers
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/progress/">
Progress
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/scrollspy/">
Scrollspy
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/tooltips/">
Tooltips
</a>
</li>
</ul>
</div>
<div class="bd-toc-item ">
<a class="bd-toc-link" href="/bootstrap-material-design/docs/4.0/utilities/borders/">
Utilities
@ -1126,7 +1126,7 @@
<div class="bd-toc-item ">
<a class="bd-toc-link" href="/bootstrap-material-design/docs/4.0/extend/icons/">
<a class="bd-toc-link" href="/bootstrap-material-design/docs/4.0/extend/approach/">
Extend
</a>
@ -1137,6 +1137,19 @@
<li class="">
<a href="/bootstrap-material-design/docs/4.0/extend/approach/">
Approach
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/extend/icons/">
Icons
@ -1165,6 +1178,75 @@
</ul>
</div>
<div class="bd-toc-item ">
<a class="bd-toc-link" href="/bootstrap-material-design/docs/4.0/about/overview/">
About
</a>
<ul class="nav bd-sidenav">
<li class="">
<a href="/bootstrap-material-design/docs/4.0/about/overview/">
Overview
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/about/brand/">
Brand
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/about/license/">
License
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/about/translations/">
Translations
</a>
</li>
</ul>
</div>
</nav>
</div>
@ -1214,11 +1296,11 @@
<p>Badges can be used as part of links or buttons to provide a counter.</p>
<div class="bd-example" data-example-id="">
<button class="btn btn-primary">
<button type="button" class="btn btn-primary">
Notifications <span class="badge badge-light">4</span>
</button>
</div>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span><span class="nt">&gt;</span>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span><span class="nt">&gt;</span>
Notifications <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"badge badge-light"</span><span class="nt">&gt;</span>4<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;/button&gt;</span></code></pre></div>
@ -1227,12 +1309,12 @@
<p>Unless the context is clear (as with the “Notifications” example, where it is understood that the “4” is the number of notifications), consider including additional context with a visually hidden piece of additional text.</p>
<div class="bd-example" data-example-id="">
<button class="btn btn-primary">
<button type="button" class="btn btn-primary">
Profile <span class="badge badge-light">9</span>
<span class="sr-only">unread messages</span>
</button>
</div>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span><span class="nt">&gt;</span>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span><span class="nt">&gt;</span>
Profile <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"badge badge-light"</span><span class="nt">&gt;</span>9<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"sr-only"</span><span class="nt">&gt;</span>unread messages<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;/button&gt;</span></code></pre></div>
@ -1291,7 +1373,7 @@
<h2 id="links">Links</h2>
<p>Using the <code class="highlighter-rouge">.badge</code> classes with the <code class="highlighter-rouge">&lt;a&gt;</code> element quickly provide <em>actionable</em> badges with hover and focus states.</p>
<p>Using the contextual <code class="highlighter-rouge">.badge-*</code> classes on an <code class="highlighter-rouge">&lt;a&gt;</code> element quickly provide <em>actionable</em> badges with hover and focus states.</p>
<div class="bd-example" data-example-id="">
<a href="#" class="badge badge-primary">Primary</a>

750
docs/4.0/components/breadcrumb/index.html
View File

@ -230,8 +230,8 @@
<li class="">
<a href="/bootstrap-material-design/docs/4.0/getting-started/options/">
Options
<a href="/bootstrap-material-design/docs/4.0/getting-started/theming/">
Theming
</a>
@ -450,296 +450,6 @@
<div class="bd-toc-item active">
<a class="bd-toc-link" href="/bootstrap-material-design/docs/4.0/components/alerts/">
Components
</a>
<ul class="nav bd-sidenav">
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/alerts/">
Alerts
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/badge/">
Badge
</a>
</li>
<li class="active bd-sidenav-active">
<a href="/bootstrap-material-design/docs/4.0/components/breadcrumb/">
Breadcrumb
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/buttons/">
Buttons
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/button-group/">
Button group
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/card/">
Card
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/carousel/">
Carousel
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/collapse/">
Collapse
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/dropdowns/">
Dropdowns
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/forms/">
Forms
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/input-group/">
Input group
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/jumbotron/">
Jumbotron
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/list-group/">
List group
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/modal/">
Modal
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/navs/">
Navs
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/navbar/">
Navbar
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/pagination/">
Pagination
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/popovers/">
Popovers
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/progress/">
Progress
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/scrollspy/">
Scrollspy
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/tooltips/">
Tooltips
</a>
</li>
</ul>
</div>
<div class="bd-toc-item ">
<a class="bd-toc-link" href="/bootstrap-material-design/docs/4.0/material-design/buttons/">
Material Design
@ -900,6 +610,296 @@
<div class="bd-toc-item ">
<a class="bd-toc-link" href="/bootstrap-material-design/docs/4.0/bootstrap-components/alerts/">
Bootstrap Components
</a>
<ul class="nav bd-sidenav">
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/alerts/">
Alerts
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/badge/">
Badge
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/breadcrumb/">
Breadcrumb
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/buttons/">
Buttons
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/button-group/">
Button group
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/card/">
Card
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/carousel/">
Carousel
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/collapse/">
Collapse
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/dropdowns/">
Dropdowns
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/forms/">
Forms
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/input-group/">
Input group
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/jumbotron/">
Jumbotron
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/list-group/">
List group
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/modal/">
Modal
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/navs/">
Navs
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/navbar/">
Navbar
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/pagination/">
Pagination
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/popovers/">
Popovers
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/progress/">
Progress
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/scrollspy/">
Scrollspy
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/tooltips/">
Tooltips
</a>
</li>
</ul>
</div>
<div class="bd-toc-item ">
<a class="bd-toc-link" href="/bootstrap-material-design/docs/4.0/utilities/borders/">
Utilities
@ -1126,7 +1126,7 @@
<div class="bd-toc-item ">
<a class="bd-toc-link" href="/bootstrap-material-design/docs/4.0/extend/icons/">
<a class="bd-toc-link" href="/bootstrap-material-design/docs/4.0/extend/approach/">
Extend
</a>
@ -1137,6 +1137,19 @@
<li class="">
<a href="/bootstrap-material-design/docs/4.0/extend/approach/">
Approach
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/extend/icons/">
Icons
@ -1165,6 +1178,75 @@
</ul>
</div>
<div class="bd-toc-item ">
<a class="bd-toc-link" href="/bootstrap-material-design/docs/4.0/about/overview/">
About
</a>
<ul class="nav bd-sidenav">
<li class="">
<a href="/bootstrap-material-design/docs/4.0/about/overview/">
Overview
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/about/brand/">
Brand
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/about/license/">
License
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/about/translations/">
Translations
</a>
</li>
</ul>
</div>
</nav>
</div>
@ -1176,52 +1258,58 @@
<p class="bd-lead">Indicate the current page's location within a navigational hierarchy that automatically adds separators via CSS.</p>
<script async type="text/javascript" src="https://cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=fezvrastagithubiobootstrapmateri" id="_carbonads_js"></script>
<p>Separators are automatically added in CSS through <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/::before"><code class="highlighter-rouge">::before</code></a> and <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/content"><code class="highlighter-rouge">content</code></a>.</p>
<h2 id="overview">Overview</h2>
<p>Separators are automatically added in CSS through <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/::before"><code class="highlighter-rouge">::before</code></a> and <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/content"><code class="highlighter-rouge">content</code></a>.</p>
<div class="bd-example" data-example-id="">
<ol class="breadcrumb">
<li class="breadcrumb-item active">Home</li>
</ol>
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item active">Library</li>
</ol>
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item"><a href="#">Library</a></li>
<li class="breadcrumb-item active">Data</li>
</ol>
</div>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;ol</span> <span class="na">class=</span><span class="s">"breadcrumb"</span><span class="nt">&gt;</span>
<span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"breadcrumb-item active"</span><span class="nt">&gt;</span>Home<span class="nt">&lt;/li&gt;</span>
<span class="nt">&lt;/ol&gt;</span>
<span class="nt">&lt;ol</span> <span class="na">class=</span><span class="s">"breadcrumb"</span><span class="nt">&gt;</span>
<span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"breadcrumb-item"</span><span class="nt">&gt;&lt;a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>Home<span class="nt">&lt;/a&gt;&lt;/li&gt;</span>
<span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"breadcrumb-item active"</span><span class="nt">&gt;</span>Library<span class="nt">&lt;/li&gt;</span>
<span class="nt">&lt;/ol&gt;</span>
<span class="nt">&lt;ol</span> <span class="na">class=</span><span class="s">"breadcrumb"</span><span class="nt">&gt;</span>
<span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"breadcrumb-item"</span><span class="nt">&gt;&lt;a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>Home<span class="nt">&lt;/a&gt;&lt;/li&gt;</span>
<span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"breadcrumb-item"</span><span class="nt">&gt;&lt;a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>Library<span class="nt">&lt;/a&gt;&lt;/li&gt;</span>
<span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"breadcrumb-item active"</span><span class="nt">&gt;</span>Data<span class="nt">&lt;/li&gt;</span>
<span class="nt">&lt;/ol&gt;</span></code></pre></div>
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item active" aria-current="page">Home</li>
</ol>
</nav>
<p>Similar to our navigation components, breadcrumbs work fine with or without the usage of list markup.</p>
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item active" aria-current="page">Library</li>
</ol>
</nav>
<div class="bd-example" data-example-id="">
<nav class="breadcrumb">
<a class="breadcrumb-item" href="#">Home</a>
<a class="breadcrumb-item" href="#">Library</a>
<a class="breadcrumb-item" href="#">Data</a>
<span class="breadcrumb-item active">Bootstrap</span>
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item"><a href="#">Library</a></li>
<li class="breadcrumb-item active" aria-current="page">Data</li>
</ol>
</nav>
</div>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;nav</span> <span class="na">class=</span><span class="s">"breadcrumb"</span><span class="nt">&gt;</span>
<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"breadcrumb-item"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>Home<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"breadcrumb-item"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>Library<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"breadcrumb-item"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>Data<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"breadcrumb-item active"</span><span class="nt">&gt;</span>Bootstrap<span class="nt">&lt;/span&gt;</span>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;nav</span> <span class="na">aria-label=</span><span class="s">"breadcrumb"</span><span class="nt">&gt;</span>
<span class="nt">&lt;ol</span> <span class="na">class=</span><span class="s">"breadcrumb"</span><span class="nt">&gt;</span>
<span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"breadcrumb-item active"</span> <span class="na">aria-current=</span><span class="s">"page"</span><span class="nt">&gt;</span>Home<span class="nt">&lt;/li&gt;</span>
<span class="nt">&lt;/ol&gt;</span>
<span class="nt">&lt;/nav&gt;</span>
<span class="nt">&lt;nav</span> <span class="na">aria-label=</span><span class="s">"breadcrumb"</span><span class="nt">&gt;</span>
<span class="nt">&lt;ol</span> <span class="na">class=</span><span class="s">"breadcrumb"</span><span class="nt">&gt;</span>
<span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"breadcrumb-item"</span><span class="nt">&gt;&lt;a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>Home<span class="nt">&lt;/a&gt;&lt;/li&gt;</span>
<span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"breadcrumb-item active"</span> <span class="na">aria-current=</span><span class="s">"page"</span><span class="nt">&gt;</span>Library<span class="nt">&lt;/li&gt;</span>
<span class="nt">&lt;/ol&gt;</span>
<span class="nt">&lt;/nav&gt;</span>
<span class="nt">&lt;nav</span> <span class="na">aria-label=</span><span class="s">"breadcrumb"</span><span class="nt">&gt;</span>
<span class="nt">&lt;ol</span> <span class="na">class=</span><span class="s">"breadcrumb"</span><span class="nt">&gt;</span>
<span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"breadcrumb-item"</span><span class="nt">&gt;&lt;a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>Home<span class="nt">&lt;/a&gt;&lt;/li&gt;</span>
<span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"breadcrumb-item"</span><span class="nt">&gt;&lt;a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>Library<span class="nt">&lt;/a&gt;&lt;/li&gt;</span>
<span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"breadcrumb-item active"</span> <span class="na">aria-current=</span><span class="s">"page"</span><span class="nt">&gt;</span>Data<span class="nt">&lt;/li&gt;</span>
<span class="nt">&lt;/ol&gt;</span>
<span class="nt">&lt;/nav&gt;</span></code></pre></div>
<h2 id="accessibility">Accessibility</h2>
<p>Since breadcrumbs provide a navigation, it’s a good idea to add a meaningful label such as <code class="highlighter-rouge">aria-label="breadcrumb"</code> to describe the type of navigation provided in the <code class="highlighter-rouge">&lt;nav&gt;</code> element, as well as applying an <code class="highlighter-rouge">aria-current="page"</code> to the last item of the set to indicate that it represents the current page.</p>
<p>For more information, see the <a href="https://www.w3.org/TR/wai-aria-practices/#breadcrumb">WAI-ARIA Authoring Practices for the breadcrumb pattern</a>.</p>
</main>
</div>

691
docs/4.0/components/button-group/index.html
View File

@ -230,8 +230,8 @@
<li class="">
<a href="/bootstrap-material-design/docs/4.0/getting-started/options/">
Options
<a href="/bootstrap-material-design/docs/4.0/getting-started/theming/">
Theming
</a>
@ -450,296 +450,6 @@
<div class="bd-toc-item active">
<a class="bd-toc-link" href="/bootstrap-material-design/docs/4.0/components/alerts/">
Components
</a>
<ul class="nav bd-sidenav">
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/alerts/">
Alerts
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/badge/">
Badge
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/breadcrumb/">
Breadcrumb
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/buttons/">
Buttons
</a>
</li>
<li class="active bd-sidenav-active">
<a href="/bootstrap-material-design/docs/4.0/components/button-group/">
Button group
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/card/">
Card
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/carousel/">
Carousel
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/collapse/">
Collapse
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/dropdowns/">
Dropdowns
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/forms/">
Forms
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/input-group/">
Input group
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/jumbotron/">
Jumbotron
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/list-group/">
List group
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/modal/">
Modal
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/navs/">
Navs
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/navbar/">
Navbar
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/pagination/">
Pagination
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/popovers/">
Popovers
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/progress/">
Progress
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/scrollspy/">
Scrollspy
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/tooltips/">
Tooltips
</a>
</li>
</ul>
</div>
<div class="bd-toc-item ">
<a class="bd-toc-link" href="/bootstrap-material-design/docs/4.0/material-design/buttons/">
Material Design
@ -900,6 +610,296 @@
<div class="bd-toc-item ">
<a class="bd-toc-link" href="/bootstrap-material-design/docs/4.0/bootstrap-components/alerts/">
Bootstrap Components
</a>
<ul class="nav bd-sidenav">
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/alerts/">
Alerts
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/badge/">
Badge
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/breadcrumb/">
Breadcrumb
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/buttons/">
Buttons
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/button-group/">
Button group
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/card/">
Card
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/carousel/">
Carousel
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/collapse/">
Collapse
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/dropdowns/">
Dropdowns
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/forms/">
Forms
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/input-group/">
Input group
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/jumbotron/">
Jumbotron
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/list-group/">
List group
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/modal/">
Modal
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/navs/">
Navs
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/navbar/">
Navbar
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/pagination/">
Pagination
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/popovers/">
Popovers
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/progress/">
Progress
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/scrollspy/">
Scrollspy
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/tooltips/">
Tooltips
</a>
</li>
</ul>
</div>
<div class="bd-toc-item ">
<a class="bd-toc-link" href="/bootstrap-material-design/docs/4.0/utilities/borders/">
Utilities
@ -1126,7 +1126,7 @@
<div class="bd-toc-item ">
<a class="bd-toc-link" href="/bootstrap-material-design/docs/4.0/extend/icons/">
<a class="bd-toc-link" href="/bootstrap-material-design/docs/4.0/extend/approach/">
Extend
</a>
@ -1137,6 +1137,19 @@
<li class="">
<a href="/bootstrap-material-design/docs/4.0/extend/approach/">
Approach
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/extend/icons/">
Icons
@ -1165,6 +1178,75 @@
</ul>
</div>
<div class="bd-toc-item ">
<a class="bd-toc-link" href="/bootstrap-material-design/docs/4.0/about/overview/">
About
</a>
<ul class="nav bd-sidenav">
<li class="">
<a href="/bootstrap-material-design/docs/4.0/about/overview/">
Overview
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/about/brand/">
Brand
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/about/license/">
License
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/about/translations/">
Translations
</a>
</li>
</ul>
</div>
</nav>
</div>
@ -1175,7 +1257,9 @@
<li class="toc-entry toc-h2"><a href="#basic-example">Basic example</a>
<ul>
<ul>
<li class="toc-entry toc-h4"><a href="#ensure-correct-role-and-provide-a-label">Ensure correct role and provide a label</a></li>
<ul>
<li class="toc-entry toc-h5"><a href="#ensure-correct-role-and-provide-a-label">Ensure correct role and provide a label</a></li>
</ul>
</ul>
</ul>
</li>
@ -1210,12 +1294,13 @@
<span class="nt">&lt;/div&gt;</span></code></pre></div>
<div class="bd-callout bd-callout-warning">
<h4 id="ensure-correct-role-and-provide-a-label">Ensure correct <code class="highlighter-rouge">role</code> and provide a label</h4>
<h5 id="ensure-correct-role-and-provide-a-label">Ensure correct <code class="highlighter-rouge">role</code> and provide a label</h5>
<p>In order for assistive technologies (such as screen readers) to convey that a series of buttons is grouped, an appropriate <code class="highlighter-rouge">role</code> attribute needs to be provided. For button groups, this would be <code class="highlighter-rouge">role="group"</code>, while toolbars should have a <code class="highlighter-rouge">role="toolbar"</code>.</p>
<p>In addition, groups and toolbars should be given an explicit label, as most assistive technologies will otherwise not announce them, despite the presence of the correct role attribute. In the examples provided here, we use <code class="highlighter-rouge">aria-label</code>, but alternatives such as <code class="highlighter-rouge">aria-labelledby</code> can also be used.</p>
</div>
<h2 id="button-toolbar">Button toolbar</h2>
<p>Combine sets of button groups into button toolbars for more complex components. Use utility classes as needed to space out groups, buttons, and more.</p>
@ -1266,7 +1351,9 @@
<button type="button" class="btn btn-secondary">4</button>
</div>
<div class="input-group">
<span class="input-group-addon" id="btnGroupAddon">@</span>
<div class="input-group-prepend">
<div class="input-group-text" id="btnGroupAddon">@</div>
</div>
<input type="text" class="form-control" placeholder="Input group example" aria-label="Input group example" aria-describedby="btnGroupAddon" />
</div>
</div>
@ -1279,7 +1366,9 @@
<button type="button" class="btn btn-secondary">4</button>
</div>
<div class="input-group">
<span class="input-group-addon" id="btnGroupAddon2">@</span>
<div class="input-group-prepend">
<div class="input-group-text" id="btnGroupAddon2">@</div>
</div>
<input type="text" class="form-control" placeholder="Input group example" aria-label="Input group example" aria-describedby="btnGroupAddon2" />
</div>
</div>
@ -1292,7 +1381,9 @@
<span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-secondary"</span><span class="nt">&gt;</span>4<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"input-group"</span><span class="nt">&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"input-group-addon"</span> <span class="na">id=</span><span class="s">"btnGroupAddon"</span><span class="nt">&gt;</span>@<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"input-group-prepend"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"input-group-text"</span> <span class="na">id=</span><span class="s">"btnGroupAddon"</span><span class="nt">&gt;</span>@<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">placeholder=</span><span class="s">"Input group example"</span> <span class="na">aria-label=</span><span class="s">"Input group example"</span> <span class="na">aria-describedby=</span><span class="s">"btnGroupAddon"</span><span class="nt">&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
@ -1305,7 +1396,9 @@
<span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-secondary"</span><span class="nt">&gt;</span>4<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"input-group"</span><span class="nt">&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"input-group-addon"</span> <span class="na">id=</span><span class="s">"btnGroupAddon2"</span><span class="nt">&gt;</span>@<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"input-group-prepend"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"input-group-text"</span> <span class="na">id=</span><span class="s">"btnGroupAddon2"</span><span class="nt">&gt;</span>@<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">placeholder=</span><span class="s">"Input group example"</span> <span class="na">aria-label=</span><span class="s">"Input group example"</span> <span class="na">aria-describedby=</span><span class="s">"btnGroupAddon2"</span><span class="nt">&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre></div>

716
docs/4.0/components/buttons/index.html
View File

@ -230,8 +230,8 @@
<li class="">
<a href="/bootstrap-material-design/docs/4.0/getting-started/options/">
Options
<a href="/bootstrap-material-design/docs/4.0/getting-started/theming/">
Theming
</a>
@ -450,296 +450,6 @@
<div class="bd-toc-item active">
<a class="bd-toc-link" href="/bootstrap-material-design/docs/4.0/components/alerts/">
Components
</a>
<ul class="nav bd-sidenav">
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/alerts/">
Alerts
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/badge/">
Badge
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/breadcrumb/">
Breadcrumb
</a>
</li>
<li class="active bd-sidenav-active">
<a href="/bootstrap-material-design/docs/4.0/components/buttons/">
Buttons
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/button-group/">
Button group
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/card/">
Card
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/carousel/">
Carousel
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/collapse/">
Collapse
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/dropdowns/">
Dropdowns
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/forms/">
Forms
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/input-group/">
Input group
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/jumbotron/">
Jumbotron
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/list-group/">
List group
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/modal/">
Modal
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/navs/">
Navs
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/navbar/">
Navbar
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/pagination/">
Pagination
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/popovers/">
Popovers
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/progress/">
Progress
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/scrollspy/">
Scrollspy
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/tooltips/">
Tooltips
</a>
</li>
</ul>
</div>
<div class="bd-toc-item ">
<a class="bd-toc-link" href="/bootstrap-material-design/docs/4.0/material-design/buttons/">
Material Design
@ -900,6 +610,296 @@
<div class="bd-toc-item ">
<a class="bd-toc-link" href="/bootstrap-material-design/docs/4.0/bootstrap-components/alerts/">
Bootstrap Components
</a>
<ul class="nav bd-sidenav">
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/alerts/">
Alerts
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/badge/">
Badge
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/breadcrumb/">
Breadcrumb
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/buttons/">
Buttons
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/button-group/">
Button group
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/card/">
Card
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/carousel/">
Carousel
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/collapse/">
Collapse
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/dropdowns/">
Dropdowns
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/forms/">
Forms
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/input-group/">
Input group
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/jumbotron/">
Jumbotron
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/list-group/">
List group
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/modal/">
Modal
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/navs/">
Navs
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/navbar/">
Navbar
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/pagination/">
Pagination
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/popovers/">
Popovers
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/progress/">
Progress
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/scrollspy/">
Scrollspy
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/tooltips/">
Tooltips
</a>
</li>
</ul>
</div>
<div class="bd-toc-item ">
<a class="bd-toc-link" href="/bootstrap-material-design/docs/4.0/utilities/borders/">
Utilities
@ -1126,7 +1126,7 @@
<div class="bd-toc-item ">
<a class="bd-toc-link" href="/bootstrap-material-design/docs/4.0/extend/icons/">
<a class="bd-toc-link" href="/bootstrap-material-design/docs/4.0/extend/approach/">
Extend
</a>
@ -1137,6 +1137,19 @@
<li class="">
<a href="/bootstrap-material-design/docs/4.0/extend/approach/">
Approach
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/extend/icons/">
Icons
@ -1165,6 +1178,75 @@
</ul>
</div>
<div class="bd-toc-item ">
<a class="bd-toc-link" href="/bootstrap-material-design/docs/4.0/about/overview/">
About
</a>
<ul class="nav bd-sidenav">
<li class="">
<a href="/bootstrap-material-design/docs/4.0/about/overview/">
Overview
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/about/brand/">
Brand
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/about/license/">
License
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/about/translations/">
Translations
</a>
</li>
</ul>
</div>
</nav>
</div>
@ -1186,7 +1268,9 @@
<li class="toc-entry toc-h2"><a href="#disabled-state">Disabled state</a>
<ul>
<ul>
<li class="toc-entry toc-h4"><a href="#link-functionality-caveat">Link functionality caveat</a></li>
<ul>
<li class="toc-entry toc-h5"><a href="#link-functionality-caveat">Link functionality caveat</a></li>
</ul>
</ul>
</ul>
</li>
@ -1346,7 +1430,7 @@
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-secondary btn-lg disabled"</span> <span class="na">role=</span><span class="s">"button"</span> <span class="na">aria-disabled=</span><span class="s">"true"</span><span class="nt">&gt;</span>Link<span class="nt">&lt;/a&gt;</span></code></pre></div>
<div class="bd-callout bd-callout-warning">
<h4 id="link-functionality-caveat">Link functionality caveat</h4>
<h5 id="link-functionality-caveat">Link functionality caveat</h5>
<p>The <code class="highlighter-rouge">.disabled</code> class uses <code class="highlighter-rouge">pointer-events: none</code> to try to disable the link functionality of <code class="highlighter-rouge">&lt;a&gt;</code>s, but that CSS property is not yet standardized. In addition, even in browsers that do support <code class="highlighter-rouge">pointer-events: none</code>, keyboard navigation remains unaffected, meaning that sighted keyboard users and users of assistive technologies will still be able to activate these links. So to be safe, add a <code class="highlighter-rouge">tabindex="-1"</code> attribute on these links (to prevent them from receiving keyboard focus) and use custom JavaScript to disable their functionality.</p>
</div>
@ -1370,59 +1454,47 @@
<h3 id="checkbox-and-radio-buttons">Checkbox and radio buttons</h3>
<p>Bootstrap’s <code class="highlighter-rouge">.button</code> styles can be applied to other elements, such as <code class="highlighter-rouge">&lt;label&gt;</code>s, to provide checkbox or radio style button toggling. Add <code class="highlighter-rouge">data-toggle="buttons"</code> to a <code class="highlighter-rouge">.btn-group</code> containing those modified buttons to enable toggling in their respective styles.</p>
<p>Bootstrap’s <code class="highlighter-rouge">.button</code> styles can be applied to other elements, such as <code class="highlighter-rouge">&lt;label&gt;</code>s, to provide checkbox or radio style button toggling. Add <code class="highlighter-rouge">data-toggle="buttons"</code> to a <code class="highlighter-rouge">.btn-group</code> containing those modified buttons to enable their toggling behavior via JavaScript and add <code class="highlighter-rouge">.btn-group-toggle</code> to style the <code class="highlighter-rouge">&lt;input&gt;</code>s within your buttons. <strong>Note that you can create single input-powered buttons or groups of them.</strong></p>
<p>The checked state for these buttons is <strong>only updated via <code class="highlighter-rouge">click</code> event</strong> on the button. If you use another method to update the input—e.g., with <code class="highlighter-rouge">&lt;input type="reset"&gt;</code> or by manually applying the input’s <code class="highlighter-rouge">checked</code> property—you’ll need to toggle <code class="highlighter-rouge">.active</code> on the <code class="highlighter-rouge">&lt;label&gt;</code> manually.</p>
<p>Note that pre-checked buttons require you to manually add the <code class="highlighter-rouge">.active</code> class to the input’s <code class="highlighter-rouge">&lt;label&gt;</code>.</p>
<div class="bd-example" data-example-id="">
<div class="btn-group" data-toggle="buttons">
<div class="btn-group-toggle" data-toggle="buttons">
<label class="btn btn-secondary active">
<input type="checkbox" checked="" autocomplete="off" /> Checkbox 1 (pre-checked)
</label>
<label class="btn btn-secondary">
<input type="checkbox" autocomplete="off" /> Checkbox 2
</label>
<label class="btn btn-secondary">
<input type="checkbox" autocomplete="off" /> Checkbox 3
<input type="checkbox" checked="" autocomplete="off" /> Checked
</label>
</div>
</div>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"btn-group"</span> <span class="na">data-toggle=</span><span class="s">"buttons"</span><span class="nt">&gt;</span>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"btn-group-toggle"</span> <span class="na">data-toggle=</span><span class="s">"buttons"</span><span class="nt">&gt;</span>
<span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"btn btn-secondary active"</span><span class="nt">&gt;</span>
<span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">checked</span> <span class="na">autocomplete=</span><span class="s">"off"</span><span class="nt">&gt;</span> Checkbox 1 (pre-checked)
<span class="nt">&lt;/label&gt;</span>
<span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"btn btn-secondary"</span><span class="nt">&gt;</span>
<span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">autocomplete=</span><span class="s">"off"</span><span class="nt">&gt;</span> Checkbox 2
<span class="nt">&lt;/label&gt;</span>
<span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"btn btn-secondary"</span><span class="nt">&gt;</span>
<span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">autocomplete=</span><span class="s">"off"</span><span class="nt">&gt;</span> Checkbox 3
<span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">checked</span> <span class="na">autocomplete=</span><span class="s">"off"</span><span class="nt">&gt;</span> Checked
<span class="nt">&lt;/label&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre></div>
<div class="bd-example" data-example-id="">
<div class="btn-group" data-toggle="buttons">
<div class="btn-group btn-group-toggle" data-toggle="buttons">
<label class="btn btn-secondary active">
<input type="radio" name="options" id="option1" autocomplete="off" checked="" /> Radio 1 (preselected)
<input type="radio" name="options" id="option1" autocomplete="off" checked="" /> Active
</label>
<label class="btn btn-secondary">
<input type="radio" name="options" id="option2" autocomplete="off" /> Radio 2
<input type="radio" name="options" id="option2" autocomplete="off" /> Radio
</label>
<label class="btn btn-secondary">
<input type="radio" name="options" id="option3" autocomplete="off" /> Radio 3
<input type="radio" name="options" id="option3" autocomplete="off" /> Radio
</label>
</div>
</div>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"btn-group"</span> <span class="na">data-toggle=</span><span class="s">"buttons"</span><span class="nt">&gt;</span>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"btn-group btn-group-toggle"</span> <span class="na">data-toggle=</span><span class="s">"buttons"</span><span class="nt">&gt;</span>
<span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"btn btn-secondary active"</span><span class="nt">&gt;</span>
<span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"radio"</span> <span class="na">name=</span><span class="s">"options"</span> <span class="na">id=</span><span class="s">"option1"</span> <span class="na">autocomplete=</span><span class="s">"off"</span> <span class="na">checked</span><span class="nt">&gt;</span> Radio 1 (preselected)
<span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"radio"</span> <span class="na">name=</span><span class="s">"options"</span> <span class="na">id=</span><span class="s">"option1"</span> <span class="na">autocomplete=</span><span class="s">"off"</span> <span class="na">checked</span><span class="nt">&gt;</span> Active
<span class="nt">&lt;/label&gt;</span>
<span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"btn btn-secondary"</span><span class="nt">&gt;</span>
<span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"radio"</span> <span class="na">name=</span><span class="s">"options"</span> <span class="na">id=</span><span class="s">"option2"</span> <span class="na">autocomplete=</span><span class="s">"off"</span><span class="nt">&gt;</span> Radio 2
<span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"radio"</span> <span class="na">name=</span><span class="s">"options"</span> <span class="na">id=</span><span class="s">"option2"</span> <span class="na">autocomplete=</span><span class="s">"off"</span><span class="nt">&gt;</span> Radio
<span class="nt">&lt;/label&gt;</span>
<span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"btn btn-secondary"</span><span class="nt">&gt;</span>
<span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"radio"</span> <span class="na">name=</span><span class="s">"options"</span> <span class="na">id=</span><span class="s">"option3"</span> <span class="na">autocomplete=</span><span class="s">"off"</span><span class="nt">&gt;</span> Radio 3
<span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"radio"</span> <span class="na">name=</span><span class="s">"options"</span> <span class="na">id=</span><span class="s">"option3"</span> <span class="na">autocomplete=</span><span class="s">"off"</span><span class="nt">&gt;</span> Radio
<span class="nt">&lt;/label&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre></div>
@ -1440,6 +1512,10 @@
<td><code class="highlighter-rouge">$().button('toggle')</code></td>
<td>Toggles push state. Gives the button the appearance that it has been activated.</td>
</tr>
<tr>
<td><code class="highlighter-rouge">$().button('dispose')</code></td>
<td>Destroys an element’s button.</td>
</tr>
</tbody>
</table>

1169
docs/4.0/components/card/index.html
View File

File diff suppressed because it is too large Load Diff

758
docs/4.0/components/carousel/index.html
View File

@ -230,8 +230,8 @@
<li class="">
<a href="/bootstrap-material-design/docs/4.0/getting-started/options/">
Options
<a href="/bootstrap-material-design/docs/4.0/getting-started/theming/">
Theming
</a>
@ -450,296 +450,6 @@
<div class="bd-toc-item active">
<a class="bd-toc-link" href="/bootstrap-material-design/docs/4.0/components/alerts/">
Components
</a>
<ul class="nav bd-sidenav">
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/alerts/">
Alerts
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/badge/">
Badge
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/breadcrumb/">
Breadcrumb
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/buttons/">
Buttons
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/button-group/">
Button group
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/card/">
Card
</a>
</li>
<li class="active bd-sidenav-active">
<a href="/bootstrap-material-design/docs/4.0/components/carousel/">
Carousel
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/collapse/">
Collapse
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/dropdowns/">
Dropdowns
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/forms/">
Forms
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/input-group/">
Input group
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/jumbotron/">
Jumbotron
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/list-group/">
List group
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/modal/">
Modal
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/navs/">
Navs
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/navbar/">
Navbar
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/pagination/">
Pagination
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/popovers/">
Popovers
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/progress/">
Progress
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/scrollspy/">
Scrollspy
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/tooltips/">
Tooltips
</a>
</li>
</ul>
</div>
<div class="bd-toc-item ">
<a class="bd-toc-link" href="/bootstrap-material-design/docs/4.0/material-design/buttons/">
Material Design
@ -900,6 +610,296 @@
<div class="bd-toc-item ">
<a class="bd-toc-link" href="/bootstrap-material-design/docs/4.0/bootstrap-components/alerts/">
Bootstrap Components
</a>
<ul class="nav bd-sidenav">
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/alerts/">
Alerts
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/badge/">
Badge
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/breadcrumb/">
Breadcrumb
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/buttons/">
Buttons
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/button-group/">
Button group
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/card/">
Card
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/carousel/">
Carousel
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/collapse/">
Collapse
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/dropdowns/">
Dropdowns
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/forms/">
Forms
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/input-group/">
Input group
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/jumbotron/">
Jumbotron
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/list-group/">
List group
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/modal/">
Modal
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/navs/">
Navs
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/navbar/">
Navbar
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/pagination/">
Pagination
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/popovers/">
Popovers
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/progress/">
Progress
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/scrollspy/">
Scrollspy
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/tooltips/">
Tooltips
</a>
</li>
</ul>
</div>
<div class="bd-toc-item ">
<a class="bd-toc-link" href="/bootstrap-material-design/docs/4.0/utilities/borders/">
Utilities
@ -1126,7 +1126,7 @@
<div class="bd-toc-item ">
<a class="bd-toc-link" href="/bootstrap-material-design/docs/4.0/extend/icons/">
<a class="bd-toc-link" href="/bootstrap-material-design/docs/4.0/extend/approach/">
Extend
</a>
@ -1137,6 +1137,19 @@
<li class="">
<a href="/bootstrap-material-design/docs/4.0/extend/approach/">
Approach
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/extend/icons/">
Icons
@ -1165,6 +1178,75 @@
</ul>
</div>
<div class="bd-toc-item ">
<a class="bd-toc-link" href="/bootstrap-material-design/docs/4.0/about/overview/">
About
</a>
<ul class="nav bd-sidenav">
<li class="">
<a href="/bootstrap-material-design/docs/4.0/about/overview/">
Overview
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/about/brand/">
Brand
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/about/license/">
License
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/about/translations/">
Translations
</a>
</li>
</ul>
</div>
</nav>
</div>
@ -1177,15 +1259,17 @@
<ul>
<li class="toc-entry toc-h3"><a href="#slides-only">Slides only</a></li>
<li class="toc-entry toc-h3"><a href="#with-controls">With controls</a></li>
<li class="toc-entry toc-h3"><a href="#with-indicators">With indicators</a>
<li class="toc-entry toc-h3"><a href="#with-indicators">With indicators</a></li>
<li class="toc-entry toc-h3"><a href="#with-captions">With captions</a>
<ul>
<li class="toc-entry toc-h4"><a href="#initial-active-element-required">Initial active element required</a></li>
<ul>
<li class="toc-entry toc-h5"><a href="#first-slide-label">First slide label</a></li>
<li class="toc-entry toc-h5"><a href="#second-slide-label">Second slide label</a></li>
<li class="toc-entry toc-h5"><a href="#third-slide-label">Third slide label</a></li>
</ul>
</ul>
</li>
<li class="toc-entry toc-h3"><a href="#with-captions">With captions</a></li>
<li class="toc-entry toc-h3"><a href="#first-slide-label">First slide label</a></li>
<li class="toc-entry toc-h3"><a href="#second-slide-label">Second slide label</a></li>
<li class="toc-entry toc-h3"><a href="#third-slide-label">Third slide label</a></li>
<li class="toc-entry toc-h3"><a href="#crossfade">Crossfade</a></li>
</ul>
</li>
<li class="toc-entry toc-h2"><a href="#usage">Usage</a>
@ -1202,6 +1286,7 @@
<li class="toc-entry toc-h4"><a href="#carouselnumber">.carousel(number)</a></li>
<li class="toc-entry toc-h4"><a href="#carouselprev">.carousel('prev')</a></li>
<li class="toc-entry toc-h4"><a href="#carouselnext">.carousel('next')</a></li>
<li class="toc-entry toc-h4"><a href="#carouseldispose">.carousel('dispose')</a></li>
</ul>
</li>
<li class="toc-entry toc-h3"><a href="#events">Events</a></li>
@ -1224,13 +1309,13 @@
<p>Please be aware that nested carousels are not supported, and carousels are generally not compliant with accessibility standards.</p>
<p>Lastly, if you’re building our JS from source, it <a href="/bootstrap-material-design/docs/getting-started/javascript/#util">requires <code class="highlighter-rouge">util.js</code></a>.</p>
<p>Lastly, if you’re building our JavaScript from source, it <a href="/bootstrap-material-design/docs/4.0/getting-started/javascript/#util">requires <code class="highlighter-rouge">util.js</code></a>.</p>
<h2 id="example">Example</h2>
<p>Carousels don’t automatically normalize slide dimensions. As such, you may need to use additional utilities or custom styles to appropriately size content. While carousels support previous/next controls and indicators, they’re not explicitly required. Add and customize as you see fit.</p>
<p>Be sure to set a unique id on the <code class="highlighter-rouge">.carousel</code> for optional controls, especially if you’re using multiple carousels on a single page.</p>
<p><strong>The <code class="highlighter-rouge">.active</code> class needs to be added to one of the slides</strong> otherwise the carousel will not be visible. Also be sure to set a unique id on the <code class="highlighter-rouge">.carousel</code> for optional controls, especially if you’re using multiple carousels on a single page.</p>
<h3 id="slides-only">Slides only</h3>
@ -1373,12 +1458,6 @@
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre></div>
<div class="bd-callout bd-callout-warning">
<h4 id="initial-active-element-required">Initial active element required</h4>
<p>The <code class="highlighter-rouge">.active</code> class needs to be added to one of the slides. Otherwise, the carousel will not be visible.</p>
</div>
<h3 id="with-captions">With captions</h3>
<p>Add captions to your slides easily with the <code class="highlighter-rouge">.carousel-caption</code> element within any <code class="highlighter-rouge">.carousel-item</code>. They can be easily hidden on smaller viewports, as shown below, with optional <a href="/bootstrap-material-design/docs/4.0/utilities/display/">display utilities</a>. We hide them initially with <code class="highlighter-rouge">.d-none</code> and bring them back on medium-sized devices with <code class="highlighter-rouge">.d-md-block</code>.</p>
@ -1394,21 +1473,21 @@
<div class="carousel-item active">
<img class="d-block w-100" data-src="holder.js/800x400?auto=yes&amp;bg=777&amp;fg=555&amp;text=First slide" alt="First slide" />
<div class="carousel-caption d-none d-md-block">
<h3>First slide label</h3>
<h5>First slide label</h5>
<p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" data-src="holder.js/800x400?auto=yes&amp;bg=666&amp;fg=444&amp;text=Second slide" alt="Second slide" />
<div class="carousel-caption d-none d-md-block">
<h3>Second slide label</h3>
<h5>Second slide label</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" data-src="holder.js/800x400?auto=yes&amp;bg=555&amp;fg=333&amp;text=Third slide" alt="Third slide" />
<div class="carousel-caption d-none d-md-block">
<h3>Third slide label</h3>
<h5>Third slide label</h5>
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
</div>
</div>
@ -1427,11 +1506,60 @@
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"carousel-item"</span><span class="nt">&gt;</span>
<span class="nt">&lt;img</span> <span class="na">src=</span><span class="s">"..."</span> <span class="na">alt=</span><span class="s">"..."</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"carousel-caption d-none d-md-block"</span><span class="nt">&gt;</span>
<span class="nt">&lt;h3&gt;</span>...<span class="nt">&lt;/h3&gt;</span>
<span class="nt">&lt;h5&gt;</span>...<span class="nt">&lt;/h5&gt;</span>
<span class="nt">&lt;p&gt;</span>...<span class="nt">&lt;/p&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre></figure>
<h3 id="crossfade">Crossfade</h3>
<p>Add <code class="highlighter-rouge">.carousel-fade</code> to your carousel to animate slides with a fade transition instead of a slide.</p>
<div class="bd-example" data-example-id="">
<div id="carouselExampleFade" class="carousel slide carousel-fade" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" data-src="holder.js/800x400?auto=yes&amp;bg=777&amp;fg=555&amp;text=First slide" alt="First slide" />
</div>
<div class="carousel-item">
<img class="d-block w-100" data-src="holder.js/800x400?auto=yes&amp;bg=666&amp;fg=444&amp;text=Second slide" alt="Second slide" />
</div>
<div class="carousel-item">
<img class="d-block w-100" data-src="holder.js/800x400?auto=yes&amp;bg=555&amp;fg=333&amp;text=Third slide" alt="Third slide" />
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleFade" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleFade" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">id=</span><span class="s">"carouselExampleFade"</span> <span class="na">class=</span><span class="s">"carousel slide carousel-fade"</span> <span class="na">data-ride=</span><span class="s">"carousel"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"carousel-inner"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"carousel-item active"</span><span class="nt">&gt;</span>
<span class="nt">&lt;img</span> <span class="na">class=</span><span class="s">"d-block w-100"</span> <span class="na">src=</span><span class="s">"..."</span> <span class="na">alt=</span><span class="s">"First slide"</span><span class="nt">&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"carousel-item"</span><span class="nt">&gt;</span>
<span class="nt">&lt;img</span> <span class="na">class=</span><span class="s">"d-block w-100"</span> <span class="na">src=</span><span class="s">"..."</span> <span class="na">alt=</span><span class="s">"Second slide"</span><span class="nt">&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"carousel-item"</span><span class="nt">&gt;</span>
<span class="nt">&lt;img</span> <span class="na">class=</span><span class="s">"d-block w-100"</span> <span class="na">src=</span><span class="s">"..."</span> <span class="na">alt=</span><span class="s">"Third slide"</span><span class="nt">&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"carousel-control-prev"</span> <span class="na">href=</span><span class="s">"#carouselExampleFade"</span> <span class="na">role=</span><span class="s">"button"</span> <span class="na">data-slide=</span><span class="s">"prev"</span><span class="nt">&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"carousel-control-prev-icon"</span> <span class="na">aria-hidden=</span><span class="s">"true"</span><span class="nt">&gt;&lt;/span&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"sr-only"</span><span class="nt">&gt;</span>Previous<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"carousel-control-next"</span> <span class="na">href=</span><span class="s">"#carouselExampleFade"</span> <span class="na">role=</span><span class="s">"button"</span> <span class="na">data-slide=</span><span class="s">"next"</span><span class="nt">&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"carousel-control-next-icon"</span> <span class="na">aria-hidden=</span><span class="s">"true"</span><span class="nt">&gt;&lt;/span&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"sr-only"</span><span class="nt">&gt;</span>Next<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre></div>
<h2 id="usage">Usage</h2>
<h3 id="via-data-attributes">Via data attributes</h3>
@ -1450,7 +1578,7 @@
<p>Options can be passed via data attributes or JavaScript. For data attributes, append the option name to <code class="highlighter-rouge">data-</code>, as in <code class="highlighter-rouge">data-interval=""</code>.</p>
<table class="table table-bordered table-striped table-responsive">
<table class="table table-bordered table-striped">
<thead>
<tr>
<th style="width: 100px;">Name</th>
@ -1532,6 +1660,10 @@
<p>Cycles to the next item. <strong>Returns to the caller before the next item has been shown</strong> (i.e. before the <code class="highlighter-rouge">slid.bs.carousel</code> event occurs).</p>
<h4 id="carouseldispose"><code class="highlighter-rouge">.carousel('dispose')</code></h4>
<p>Destroys an element’s carousel.</p>
<h3 id="events">Events</h3>
<p>Bootstrap’s carousel class exposes two events for hooking into carousel functionality. Both events have the following additional properties:</p>
@ -1545,7 +1677,7 @@
<p>All carousel events are fired at the carousel itself (i.e. at the <code class="highlighter-rouge">&lt;div class="carousel"&gt;</code>).</p>
<table class="table table-bordered table-striped table-responsive">
<table class="table table-bordered table-striped">
<thead>
<tr>
<th style="width: 150px;">Event Type</th>

804
docs/4.0/components/collapse/index.html
View File

@ -230,8 +230,8 @@
<li class="">
<a href="/bootstrap-material-design/docs/4.0/getting-started/options/">
Options
<a href="/bootstrap-material-design/docs/4.0/getting-started/theming/">
Theming
</a>
@ -450,296 +450,6 @@
<div class="bd-toc-item active">
<a class="bd-toc-link" href="/bootstrap-material-design/docs/4.0/components/alerts/">
Components
</a>
<ul class="nav bd-sidenav">
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/alerts/">
Alerts
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/badge/">
Badge
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/breadcrumb/">
Breadcrumb
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/buttons/">
Buttons
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/button-group/">
Button group
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/card/">
Card
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/carousel/">
Carousel
</a>
</li>
<li class="active bd-sidenav-active">
<a href="/bootstrap-material-design/docs/4.0/components/collapse/">
Collapse
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/dropdowns/">
Dropdowns
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/forms/">
Forms
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/input-group/">
Input group
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/jumbotron/">
Jumbotron
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/list-group/">
List group
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/modal/">
Modal
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/navs/">
Navs
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/navbar/">
Navbar
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/pagination/">
Pagination
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/popovers/">
Popovers
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/progress/">
Progress
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/scrollspy/">
Scrollspy
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/tooltips/">
Tooltips
</a>
</li>
</ul>
</div>
<div class="bd-toc-item ">
<a class="bd-toc-link" href="/bootstrap-material-design/docs/4.0/material-design/buttons/">
Material Design
@ -900,6 +610,296 @@
<div class="bd-toc-item ">
<a class="bd-toc-link" href="/bootstrap-material-design/docs/4.0/bootstrap-components/alerts/">
Bootstrap Components
</a>
<ul class="nav bd-sidenav">
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/alerts/">
Alerts
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/badge/">
Badge
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/breadcrumb/">
Breadcrumb
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/buttons/">
Buttons
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/button-group/">
Button group
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/card/">
Card
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/carousel/">
Carousel
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/collapse/">
Collapse
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/dropdowns/">
Dropdowns
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/forms/">
Forms
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/input-group/">
Input group
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/jumbotron/">
Jumbotron
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/list-group/">
List group
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/modal/">
Modal
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/navs/">
Navs
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/navbar/">
Navbar
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/pagination/">
Pagination
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/popovers/">
Popovers
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/progress/">
Progress
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/scrollspy/">
Scrollspy
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/tooltips/">
Tooltips
</a>
</li>
</ul>
</div>
<div class="bd-toc-item ">
<a class="bd-toc-link" href="/bootstrap-material-design/docs/4.0/utilities/borders/">
Utilities
@ -1126,7 +1126,7 @@
<div class="bd-toc-item ">
<a class="bd-toc-link" href="/bootstrap-material-design/docs/4.0/extend/icons/">
<a class="bd-toc-link" href="/bootstrap-material-design/docs/4.0/extend/approach/">
Extend
</a>
@ -1137,6 +1137,19 @@
<li class="">
<a href="/bootstrap-material-design/docs/4.0/extend/approach/">
Approach
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/extend/icons/">
Icons
@ -1165,6 +1178,75 @@
</ul>
</div>
<div class="bd-toc-item ">
<a class="bd-toc-link" href="/bootstrap-material-design/docs/4.0/about/overview/">
About
</a>
<ul class="nav bd-sidenav">
<li class="">
<a href="/bootstrap-material-design/docs/4.0/about/overview/">
Overview
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/about/brand/">
Brand
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/about/license/">
License
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/about/translations/">
Translations
</a>
</li>
</ul>
</div>
</nav>
</div>
@ -1210,6 +1292,7 @@
<li class="toc-entry toc-h4"><a href="#collapsetoggle">.collapse('toggle')</a></li>
<li class="toc-entry toc-h4"><a href="#collapseshow">.collapse('show')</a></li>
<li class="toc-entry toc-h4"><a href="#collapsehide">.collapse('hide')</a></li>
<li class="toc-entry toc-h4"><a href="#collapsedispose">.collapse('dispose')</a></li>
</ul>
</li>
<li class="toc-entry toc-h3"><a href="#events">Events</a></li>
@ -1238,7 +1321,7 @@
<div class="bd-example" data-example-id="">
<p>
<a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
<a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
Link with href
</a>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
@ -1252,7 +1335,7 @@
</div>
</div>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;p&gt;</span>
<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span> <span class="na">data-toggle=</span><span class="s">"collapse"</span> <span class="na">href=</span><span class="s">"#collapseExample"</span> <span class="na">aria-expanded=</span><span class="s">"false"</span> <span class="na">aria-controls=</span><span class="s">"collapseExample"</span><span class="nt">&gt;</span>
<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span> <span class="na">data-toggle=</span><span class="s">"collapse"</span> <span class="na">href=</span><span class="s">"#collapseExample"</span> <span class="na">role=</span><span class="s">"button"</span> <span class="na">aria-expanded=</span><span class="s">"false"</span> <span class="na">aria-controls=</span><span class="s">"collapseExample"</span><span class="nt">&gt;</span>
Link with href
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">data-toggle=</span><span class="s">"collapse"</span> <span class="na">data-target=</span><span class="s">"#collapseExample"</span> <span class="na">aria-expanded=</span><span class="s">"false"</span> <span class="na">aria-controls=</span><span class="s">"collapseExample"</span><span class="nt">&gt;</span>
@ -1268,12 +1351,12 @@
<h2 id="multiple-targets">Multiple targets</h2>
<p>A <code class="highlighter-rouge">&lt;button&gt;</code> or <code class="highlighter-rouge">&lt;a&gt;</code> can show and hide multiple elements by referencing them with a JQuery selector in its <code class="highlighter-rouge">href</code> or <code class="highlighter-rouge">data-target</code> attribute.
Multiple <code class="highlighter-rouge">&lt;button&gt;</code> or <code class="highlighter-rouge">&lt;a&gt;</code> can show and hide an element if they each reference it with their <code class="highlighter-rouge">href</code> or <code class="highlighter-rouge">data-target</code> attribute</p>
Multiple <code class="highlighter-rouge">&lt;button&gt;</code> or <code class="highlighter-rouge">&lt;a&gt;</code> can show and hide an element if they each reference it with their <code class="highlighter-rouge">href</code> or <code class="highlighter-rouge">data-target</code> attribute</p>
<div class="bd-example" data-example-id="">
<p>
<a class="btn btn-primary" data-toggle="collapse" href="#multiCollapseExample1" aria-expanded="false" aria-controls="multiCollapseExample1">Toggle first element</a>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample1">Toggle second element</button>
<a class="btn btn-primary" data-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Toggle first element</a>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Toggle second element</button>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target=".multi-collapse" aria-expanded="false" aria-controls="multiCollapseExample1 multiCollapseExample2">Toggle both elements</button>
</p>
<div class="row">
@ -1294,8 +1377,8 @@ Multiple <code class="highlighter-rouge">&lt;button&gt;</code> or <code class="h
</div>
</div>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;p&gt;</span>
<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span> <span class="na">data-toggle=</span><span class="s">"collapse"</span> <span class="na">href=</span><span class="s">"#multiCollapseExample1"</span> <span class="na">aria-expanded=</span><span class="s">"false"</span> <span class="na">aria-controls=</span><span class="s">"multiCollapseExample1"</span><span class="nt">&gt;</span>Toggle first element<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">data-toggle=</span><span class="s">"collapse"</span> <span class="na">data-target=</span><span class="s">"#multiCollapseExample2"</span> <span class="na">aria-expanded=</span><span class="s">"false"</span> <span class="na">aria-controls=</span><span class="s">"multiCollapseExample1"</span><span class="nt">&gt;</span>Toggle second element<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span> <span class="na">data-toggle=</span><span class="s">"collapse"</span> <span class="na">href=</span><span class="s">"#multiCollapseExample1"</span> <span class="na">role=</span><span class="s">"button"</span> <span class="na">aria-expanded=</span><span class="s">"false"</span> <span class="na">aria-controls=</span><span class="s">"multiCollapseExample1"</span><span class="nt">&gt;</span>Toggle first element<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">data-toggle=</span><span class="s">"collapse"</span> <span class="na">data-target=</span><span class="s">"#multiCollapseExample2"</span> <span class="na">aria-expanded=</span><span class="s">"false"</span> <span class="na">aria-controls=</span><span class="s">"multiCollapseExample2"</span><span class="nt">&gt;</span>Toggle second element<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">data-toggle=</span><span class="s">"collapse"</span> <span class="na">data-target=</span><span class="s">".multi-collapse"</span> <span class="na">aria-expanded=</span><span class="s">"false"</span> <span class="na">aria-controls=</span><span class="s">"multiCollapseExample1 multiCollapseExample2"</span><span class="nt">&gt;</span>Toggle both elements<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;/p&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"row"</span><span class="nt">&gt;</span>
@ -1320,45 +1403,45 @@ Multiple <code class="highlighter-rouge">&lt;button&gt;</code> or <code class="h
<p>Using the <a href="/bootstrap-material-design/docs/4.0/components/card/">card</a> component, you can extend the default collapse behavior to create an accordion.</p>
<div class="bd-example" data-example-id="">
<div id="accordion" role="tablist">
<div id="accordion">
<div class="card">
<div class="card-header" role="tab" id="headingOne">
<div class="card-header" id="headingOne">
<h5 class="mb-0">
<a data-toggle="collapse" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
<button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Collapsible Group Item #1
</a>
</button>
</h5>
</div>
<div id="collapseOne" class="collapse show" role="tabpanel" aria-labelledby="headingOne" data-parent="#accordion">
<div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
<div class="card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
<div class="card">
<div class="card-header" role="tab" id="headingTwo">
<div class="card-header" id="headingTwo">
<h5 class="mb-0">
<a class="collapsed" data-toggle="collapse" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
<button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Collapsible Group Item #2
</a>
</button>
</h5>
</div>
<div id="collapseTwo" class="collapse" role="tabpanel" aria-labelledby="headingTwo" data-parent="#accordion">
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion">
<div class="card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
<div class="card">
<div class="card-header" role="tab" id="headingThree">
<div class="card-header" id="headingThree">
<h5 class="mb-0">
<a class="collapsed" data-toggle="collapse" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
<button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
Collapsible Group Item #3
</a>
</button>
</h5>
</div>
<div id="collapseThree" class="collapse" role="tabpanel" aria-labelledby="headingThree" data-parent="#accordion">
<div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordion">
<div class="card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
@ -1366,45 +1449,45 @@ Multiple <code class="highlighter-rouge">&lt;button&gt;</code> or <code class="h
</div>
</div>
</div>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">id=</span><span class="s">"accordion"</span> <span class="na">role=</span><span class="s">"tablist"</span><span class="nt">&gt;</span>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">id=</span><span class="s">"accordion"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-header"</span> <span class="na">role=</span><span class="s">"tab"</span> <span class="na">id=</span><span class="s">"headingOne"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-header"</span> <span class="na">id=</span><span class="s">"headingOne"</span><span class="nt">&gt;</span>
<span class="nt">&lt;h5</span> <span class="na">class=</span><span class="s">"mb-0"</span><span class="nt">&gt;</span>
<span class="nt">&lt;a</span> <span class="na">data-toggle=</span><span class="s">"collapse"</span> <span class="na">href=</span><span class="s">"#collapseOne"</span> <span class="na">aria-expanded=</span><span class="s">"true"</span> <span class="na">aria-controls=</span><span class="s">"collapseOne"</span><span class="nt">&gt;</span>
<span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">"btn btn-link"</span> <span class="na">data-toggle=</span><span class="s">"collapse"</span> <span class="na">data-target=</span><span class="s">"#collapseOne"</span> <span class="na">aria-expanded=</span><span class="s">"true"</span> <span class="na">aria-controls=</span><span class="s">"collapseOne"</span><span class="nt">&gt;</span>
Collapsible Group Item #1
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;/h5&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">id=</span><span class="s">"collapseOne"</span> <span class="na">class=</span><span class="s">"collapse show"</span> <span class="na">role=</span><span class="s">"tabpanel"</span> <span class="na">aria-labelledby=</span><span class="s">"headingOne"</span> <span class="na">data-parent=</span><span class="s">"#accordion"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">id=</span><span class="s">"collapseOne"</span> <span class="na">class=</span><span class="s">"collapse show"</span> <span class="na">aria-labelledby=</span><span class="s">"headingOne"</span> <span class="na">data-parent=</span><span class="s">"#accordion"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">&gt;</span>
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-header"</span> <span class="na">role=</span><span class="s">"tab"</span> <span class="na">id=</span><span class="s">"headingTwo"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-header"</span> <span class="na">id=</span><span class="s">"headingTwo"</span><span class="nt">&gt;</span>
<span class="nt">&lt;h5</span> <span class="na">class=</span><span class="s">"mb-0"</span><span class="nt">&gt;</span>
<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"collapsed"</span> <span class="na">data-toggle=</span><span class="s">"collapse"</span> <span class="na">href=</span><span class="s">"#collapseTwo"</span> <span class="na">aria-expanded=</span><span class="s">"false"</span> <span class="na">aria-controls=</span><span class="s">"collapseTwo"</span><span class="nt">&gt;</span>
<span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">"btn btn-link collapsed"</span> <span class="na">data-toggle=</span><span class="s">"collapse"</span> <span class="na">data-target=</span><span class="s">"#collapseTwo"</span> <span class="na">aria-expanded=</span><span class="s">"false"</span> <span class="na">aria-controls=</span><span class="s">"collapseTwo"</span><span class="nt">&gt;</span>
Collapsible Group Item #2
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;/h5&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">id=</span><span class="s">"collapseTwo"</span> <span class="na">class=</span><span class="s">"collapse"</span> <span class="na">role=</span><span class="s">"tabpanel"</span> <span class="na">aria-labelledby=</span><span class="s">"headingTwo"</span> <span class="na">data-parent=</span><span class="s">"#accordion"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">id=</span><span class="s">"collapseTwo"</span> <span class="na">class=</span><span class="s">"collapse"</span> <span class="na">aria-labelledby=</span><span class="s">"headingTwo"</span> <span class="na">data-parent=</span><span class="s">"#accordion"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">&gt;</span>
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-header"</span> <span class="na">role=</span><span class="s">"tab"</span> <span class="na">id=</span><span class="s">"headingThree"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-header"</span> <span class="na">id=</span><span class="s">"headingThree"</span><span class="nt">&gt;</span>
<span class="nt">&lt;h5</span> <span class="na">class=</span><span class="s">"mb-0"</span><span class="nt">&gt;</span>
<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"collapsed"</span> <span class="na">data-toggle=</span><span class="s">"collapse"</span> <span class="na">href=</span><span class="s">"#collapseThree"</span> <span class="na">aria-expanded=</span><span class="s">"false"</span> <span class="na">aria-controls=</span><span class="s">"collapseThree"</span><span class="nt">&gt;</span>
<span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">"btn btn-link collapsed"</span> <span class="na">data-toggle=</span><span class="s">"collapse"</span> <span class="na">data-target=</span><span class="s">"#collapseThree"</span> <span class="na">aria-expanded=</span><span class="s">"false"</span> <span class="na">aria-controls=</span><span class="s">"collapseThree"</span><span class="nt">&gt;</span>
Collapsible Group Item #3
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;/h5&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">id=</span><span class="s">"collapseThree"</span> <span class="na">class=</span><span class="s">"collapse"</span> <span class="na">role=</span><span class="s">"tabpanel"</span> <span class="na">aria-labelledby=</span><span class="s">"headingThree"</span> <span class="na">data-parent=</span><span class="s">"#accordion"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">id=</span><span class="s">"collapseThree"</span> <span class="na">class=</span><span class="s">"collapse"</span> <span class="na">aria-labelledby=</span><span class="s">"headingThree"</span> <span class="na">data-parent=</span><span class="s">"#accordion"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">&gt;</span>
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
<span class="nt">&lt;/div&gt;</span>
@ -1412,60 +1495,13 @@ Multiple <code class="highlighter-rouge">&lt;button&gt;</code> or <code class="h
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre></div>
<p>You can also create accordions with custom markup. Add the <code class="highlighter-rouge">data-children</code> attribute and specify a set of sibling elements to toggle (e.g., <code class="highlighter-rouge">.item</code>). Then, use the same attributes and classes as shown above for connecting toggles to their associated content.</p>
<div class="bd-example" data-example-id="">
<div id="exampleAccordion" data-children=".item">
<div class="item">
<a data-toggle="collapse" data-parent="#exampleAccordion" href="#exampleAccordion1" aria-expanded="true" aria-controls="exampleAccordion1">
Toggle item
</a>
<div id="exampleAccordion1" class="collapse show" role="tabpanel">
<p class="mb-3">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pretium lorem non vestibulum scelerisque. Proin a vestibulum sem, eget tristique massa. Aliquam lacinia rhoncus nibh quis ornare.
</p>
</div>
</div>
<div class="item">
<a data-toggle="collapse" data-parent="#exampleAccordion" href="#exampleAccordion2" aria-expanded="false" aria-controls="exampleAccordion2">
Toggle item 2
</a>
<div id="exampleAccordion2" class="collapse" role="tabpanel">
<p class="mb-3">
Donec at ipsum dignissim, rutrum turpis scelerisque, tristique lectus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus nec dui turpis. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
</p>
</div>
</div>
</div>
</div>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">id=</span><span class="s">"exampleAccordion"</span> <span class="na">data-children=</span><span class="s">".item"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"item"</span><span class="nt">&gt;</span>
<span class="nt">&lt;a</span> <span class="na">data-toggle=</span><span class="s">"collapse"</span> <span class="na">data-parent=</span><span class="s">"#exampleAccordion"</span> <span class="na">href=</span><span class="s">"#exampleAccordion1"</span> <span class="na">aria-expanded=</span><span class="s">"true"</span> <span class="na">aria-controls=</span><span class="s">"exampleAccordion1"</span><span class="nt">&gt;</span>
Toggle item
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;div</span> <span class="na">id=</span><span class="s">"exampleAccordion1"</span> <span class="na">class=</span><span class="s">"collapse show"</span> <span class="na">role=</span><span class="s">"tabpanel"</span><span class="nt">&gt;</span>
<span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"mb-3"</span><span class="nt">&gt;</span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pretium lorem non vestibulum scelerisque. Proin a vestibulum sem, eget tristique massa. Aliquam lacinia rhoncus nibh quis ornare.
<span class="nt">&lt;/p&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"item"</span><span class="nt">&gt;</span>
<span class="nt">&lt;a</span> <span class="na">data-toggle=</span><span class="s">"collapse"</span> <span class="na">data-parent=</span><span class="s">"#exampleAccordion"</span> <span class="na">href=</span><span class="s">"#exampleAccordion2"</span> <span class="na">aria-expanded=</span><span class="s">"false"</span> <span class="na">aria-controls=</span><span class="s">"exampleAccordion2"</span><span class="nt">&gt;</span>
Toggle item 2
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;div</span> <span class="na">id=</span><span class="s">"exampleAccordion2"</span> <span class="na">class=</span><span class="s">"collapse"</span> <span class="na">role=</span><span class="s">"tabpanel"</span><span class="nt">&gt;</span>
<span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"mb-3"</span><span class="nt">&gt;</span>
Donec at ipsum dignissim, rutrum turpis scelerisque, tristique lectus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus nec dui turpis. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
<span class="nt">&lt;/p&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre></div>
<h2 id="accessibility">Accessibility</h2>
<p>Be sure to add <code class="highlighter-rouge">aria-expanded</code> to the control element. This attribute explicitly conveys the current state of the collapsible element tied to the control to screen readers and similar assistive technologies. If the collapsible element is closed by default, the attribute on the control element should have a value of <code class="highlighter-rouge">aria-expanded="false"</code>. If you’ve set the collapsible element to be open by default using the <code class="highlighter-rouge">show</code> class, set <code class="highlighter-rouge">aria-expanded="true"</code> on the control instead. The plugin will automatically toggle this attribute on the control based on whether or not the collapsible element has been opened or closed (via JavaScript, or because the user triggered another control element also tied to the same collapsbile element).</p>
<p>Be sure to add <code class="highlighter-rouge">aria-expanded</code> to the control element. This attribute explicitly conveys the current state of the collapsible element tied to the control to screen readers and similar assistive technologies. If the collapsible element is closed by default, the attribute on the control element should have a value of <code class="highlighter-rouge">aria-expanded="false"</code>. If you’ve set the collapsible element to be open by default using the <code class="highlighter-rouge">show</code> class, set <code class="highlighter-rouge">aria-expanded="true"</code> on the control instead. The plugin will automatically toggle this attribute on the control based on whether or not the collapsible element has been opened or closed (via JavaScript, or because the user triggered another control element also tied to the same collapsbile element). If the control element’s HTML element is not a button (e.g., an <code class="highlighter-rouge">&lt;a&gt;</code> or <code class="highlighter-rouge">&lt;div&gt;</code>), the attribute <code class="highlighter-rouge">role="button"</code> should be added to the element.</p>
<p>Additionally, if your control element is targeting a single collapsible element – i.e. the <code class="highlighter-rouge">data-target</code> attribute is pointing to an <code class="highlighter-rouge">id</code> selector – you may add an additional <code class="highlighter-rouge">aria-controls</code> attribute to the control element, containing the <code class="highlighter-rouge">id</code> of the collapsible element. Modern screen readers and similar assistive technologies make use of this attribute to provide users with additional shortcuts to navigate directly to the collapsible element itself.</p>
<p>If your control element is targeting a single collapsible element – i.e. the <code class="highlighter-rouge">data-target</code> attribute is pointing to an <code class="highlighter-rouge">id</code> selector – you should add the <code class="highlighter-rouge">aria-controls</code> attribute to the control element, containing the <code class="highlighter-rouge">id</code> of the collapsible element. Modern screen readers and similar assistive technologies make use of this attribute to provide users with additional shortcuts to navigate directly to the collapsible element itself.</p>
<p>Note that Bootstrap’s current implementation does not cover the various keyboard interactions described in the <a href="https://www.w3.org/TR/wai-aria-practices-1.1/#accordion">WAI-ARIA Authoring Practices 1.1 accordion pattern</a> - you will need to include these yourself with custom JavaScript.</p>
<h2 id="usage">Usage</h2>
@ -1495,7 +1531,7 @@ Multiple <code class="highlighter-rouge">&lt;button&gt;</code> or <code class="h
<p>Options can be passed via data attributes or JavaScript. For data attributes, append the option name to <code class="highlighter-rouge">data-</code>, as in <code class="highlighter-rouge">data-parent=""</code>.</p>
<table class="table table-bordered table-striped table-responsive">
<table class="table table-bordered table-striped">
<thead>
<tr>
<th style="width: 100px;">Name</th>
@ -1507,9 +1543,9 @@ Multiple <code class="highlighter-rouge">&lt;button&gt;</code> or <code class="h
<tbody>
<tr>
<td>parent</td>
<td>selector</td>
<td>selector | jQuery object | DOM element </td>
<td>false</td>
<td>If a selector is provided, then all collapsible elements under the specified parent will be closed when this collapsible item is shown. (similar to traditional accordion behavior - this is dependent on the <code>card</code> class). The attribute has to be set on the target collapsible area.</td>
<td>If parent is provided, then all collapsible elements under the specified parent will be closed when this collapsible item is shown. (similar to traditional accordion behavior - this is dependent on the <code>card</code> class). The attribute has to be set on the target collapsible area.</td>
</tr>
<tr>
<td>toggle</td>
@ -1540,7 +1576,7 @@ Multiple <code class="highlighter-rouge">&lt;button&gt;</code> or <code class="h
<h4 id="collapsetoggle"><code class="highlighter-rouge">.collapse('toggle')</code></h4>
<p>Toggles a collapsible element to shown or hidden. **Returns to the caller before the collapsible element has actually been shown or hidden (i.e. before the <code class="highlighter-rouge">shown.bs.collapse</code> or <code class="highlighter-rouge">hidden.bs.collapse</code> event occurs).</p>
<p>Toggles a collapsible element to shown or hidden. <strong>Returns to the caller before the collapsible element has actually been shown or hidden</strong> (i.e. before the <code class="highlighter-rouge">shown.bs.collapse</code> or <code class="highlighter-rouge">hidden.bs.collapse</code> event occurs).</p>
<h4 id="collapseshow"><code class="highlighter-rouge">.collapse('show')</code></h4>
@ -1550,11 +1586,15 @@ Multiple <code class="highlighter-rouge">&lt;button&gt;</code> or <code class="h
<p>Hides a collapsible element. <strong>Returns to the caller before the collapsible element has actually been hidden</strong> (i.e. before the <code class="highlighter-rouge">hidden.bs.collapse</code> event occurs).</p>
<h4 id="collapsedispose"><code class="highlighter-rouge">.collapse('dispose')</code></h4>
<p>Destroys an element’s collapse.</p>
<h3 id="events">Events</h3>
<p>Bootstrap’s collapse class exposes a few events for hooking into collapse functionality.</p>
<table class="table table-bordered table-striped table-responsive">
<table class="table table-bordered table-striped">
<thead>
<tr>
<th style="width: 150px;">Event Type</th>

1041
docs/4.0/components/dropdowns/index.html
View File

File diff suppressed because it is too large Load Diff

2138
docs/4.0/components/forms/index.html
View File

File diff suppressed because it is too large Load Diff

1466
docs/4.0/components/input-group/index.html
View File

File diff suppressed because it is too large Load Diff

676
docs/4.0/components/jumbotron/index.html
View File

@ -230,8 +230,8 @@
<li class="">
<a href="/bootstrap-material-design/docs/4.0/getting-started/options/">
Options
<a href="/bootstrap-material-design/docs/4.0/getting-started/theming/">
Theming
</a>
@ -450,296 +450,6 @@
<div class="bd-toc-item active">
<a class="bd-toc-link" href="/bootstrap-material-design/docs/4.0/components/alerts/">
Components
</a>
<ul class="nav bd-sidenav">
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/alerts/">
Alerts
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/badge/">
Badge
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/breadcrumb/">
Breadcrumb
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/buttons/">
Buttons
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/button-group/">
Button group
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/card/">
Card
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/carousel/">
Carousel
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/collapse/">
Collapse
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/dropdowns/">
Dropdowns
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/forms/">
Forms
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/input-group/">
Input group
</a>
</li>
<li class="active bd-sidenav-active">
<a href="/bootstrap-material-design/docs/4.0/components/jumbotron/">
Jumbotron
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/list-group/">
List group
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/modal/">
Modal
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/navs/">
Navs
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/navbar/">
Navbar
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/pagination/">
Pagination
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/popovers/">
Popovers
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/progress/">
Progress
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/scrollspy/">
Scrollspy
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/tooltips/">
Tooltips
</a>
</li>
</ul>
</div>
<div class="bd-toc-item ">
<a class="bd-toc-link" href="/bootstrap-material-design/docs/4.0/material-design/buttons/">
Material Design
@ -900,6 +610,296 @@
<div class="bd-toc-item ">
<a class="bd-toc-link" href="/bootstrap-material-design/docs/4.0/bootstrap-components/alerts/">
Bootstrap Components
</a>
<ul class="nav bd-sidenav">
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/alerts/">
Alerts
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/badge/">
Badge
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/breadcrumb/">
Breadcrumb
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/buttons/">
Buttons
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/button-group/">
Button group
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/card/">
Card
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/carousel/">
Carousel
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/collapse/">
Collapse
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/dropdowns/">
Dropdowns
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/forms/">
Forms
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/input-group/">
Input group
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/jumbotron/">
Jumbotron
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/list-group/">
List group
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/modal/">
Modal
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/navs/">
Navs
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/navbar/">
Navbar
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/pagination/">
Pagination
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/popovers/">
Popovers
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/progress/">
Progress
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/scrollspy/">
Scrollspy
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/tooltips/">
Tooltips
</a>
</li>
</ul>
</div>
<div class="bd-toc-item ">
<a class="bd-toc-link" href="/bootstrap-material-design/docs/4.0/utilities/borders/">
Utilities
@ -1126,7 +1126,7 @@
<div class="bd-toc-item ">
<a class="bd-toc-link" href="/bootstrap-material-design/docs/4.0/extend/icons/">
<a class="bd-toc-link" href="/bootstrap-material-design/docs/4.0/extend/approach/">
Extend
</a>
@ -1137,6 +1137,19 @@
<li class="">
<a href="/bootstrap-material-design/docs/4.0/extend/approach/">
Approach
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/extend/icons/">
Icons
@ -1165,6 +1178,75 @@
</ul>
</div>
<div class="bd-toc-item ">
<a class="bd-toc-link" href="/bootstrap-material-design/docs/4.0/about/overview/">
About
</a>
<ul class="nav bd-sidenav">
<li class="">
<a href="/bootstrap-material-design/docs/4.0/about/overview/">
Overview
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/about/brand/">
Brand
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/about/license/">
License
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/about/translations/">
Translations
</a>
</li>
</ul>
</div>
</nav>
</div>
@ -1180,7 +1262,7 @@
<div class="bd-example" data-example-id="">
<div class="jumbotron">
<h1 class="display-3">Hello, world!</h1>
<h1 class="display-4">Hello, world!</h1>
<p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
<hr class="my-4" />
<p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
@ -1190,7 +1272,7 @@
</div>
</div>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"jumbotron"</span><span class="nt">&gt;</span>
<span class="nt">&lt;h1</span> <span class="na">class=</span><span class="s">"display-3"</span><span class="nt">&gt;</span>Hello, world!<span class="nt">&lt;/h1&gt;</span>
<span class="nt">&lt;h1</span> <span class="na">class=</span><span class="s">"display-4"</span><span class="nt">&gt;</span>Hello, world!<span class="nt">&lt;/h1&gt;</span>
<span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"lead"</span><span class="nt">&gt;</span>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.<span class="nt">&lt;/p&gt;</span>
<span class="nt">&lt;hr</span> <span class="na">class=</span><span class="s">"my-4"</span><span class="nt">&gt;</span>
<span class="nt">&lt;p&gt;</span>It uses utility classes for typography and spacing to space content out within the larger container.<span class="nt">&lt;/p&gt;</span>
@ -1204,14 +1286,14 @@
<div class="bd-example" data-example-id="">
<div class="jumbotron jumbotron-fluid">
<div class="container">
<h1 class="display-3">Fluid jumbotron</h1>
<h1 class="display-4">Fluid jumbotron</h1>
<p class="lead">This is a modified jumbotron that occupies the entire horizontal space of its parent.</p>
</div>
</div>
</div>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"jumbotron jumbotron-fluid"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"container"</span><span class="nt">&gt;</span>
<span class="nt">&lt;h1</span> <span class="na">class=</span><span class="s">"display-3"</span><span class="nt">&gt;</span>Fluid jumbotron<span class="nt">&lt;/h1&gt;</span>
<span class="nt">&lt;h1</span> <span class="na">class=</span><span class="s">"display-4"</span><span class="nt">&gt;</span>Fluid jumbotron<span class="nt">&lt;/h1&gt;</span>
<span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"lead"</span><span class="nt">&gt;</span>This is a modified jumbotron that occupies the entire horizontal space of its parent.<span class="nt">&lt;/p&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre></div>

720
docs/4.0/components/list-group/index.html
View File

@ -230,8 +230,8 @@
<li class="">
<a href="/bootstrap-material-design/docs/4.0/getting-started/options/">
Options
<a href="/bootstrap-material-design/docs/4.0/getting-started/theming/">
Theming
</a>
@ -450,296 +450,6 @@
<div class="bd-toc-item active">
<a class="bd-toc-link" href="/bootstrap-material-design/docs/4.0/components/alerts/">
Components
</a>
<ul class="nav bd-sidenav">
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/alerts/">
Alerts
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/badge/">
Badge
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/breadcrumb/">
Breadcrumb
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/buttons/">
Buttons
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/button-group/">
Button group
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/card/">
Card
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/carousel/">
Carousel
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/collapse/">
Collapse
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/dropdowns/">
Dropdowns
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/forms/">
Forms
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/input-group/">
Input group
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/jumbotron/">
Jumbotron
</a>
</li>
<li class="active bd-sidenav-active">
<a href="/bootstrap-material-design/docs/4.0/components/list-group/">
List group
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/modal/">
Modal
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/navs/">
Navs
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/navbar/">
Navbar
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/pagination/">
Pagination
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/popovers/">
Popovers
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/progress/">
Progress
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/scrollspy/">
Scrollspy
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/tooltips/">
Tooltips
</a>
</li>
</ul>
</div>
<div class="bd-toc-item ">
<a class="bd-toc-link" href="/bootstrap-material-design/docs/4.0/material-design/buttons/">
Material Design
@ -900,6 +610,296 @@
<div class="bd-toc-item ">
<a class="bd-toc-link" href="/bootstrap-material-design/docs/4.0/bootstrap-components/alerts/">
Bootstrap Components
</a>
<ul class="nav bd-sidenav">
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/alerts/">
Alerts
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/badge/">
Badge
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/breadcrumb/">
Breadcrumb
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/buttons/">
Buttons
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/button-group/">
Button group
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/card/">
Card
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/carousel/">
Carousel
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/collapse/">
Collapse
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/dropdowns/">
Dropdowns
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/forms/">
Forms
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/input-group/">
Input group
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/jumbotron/">
Jumbotron
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/list-group/">
List group
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/modal/">
Modal
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/navs/">
Navs
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/navbar/">
Navbar
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/pagination/">
Pagination
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/popovers/">
Popovers
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/progress/">
Progress
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/scrollspy/">
Scrollspy
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/tooltips/">
Tooltips
</a>
</li>
</ul>
</div>
<div class="bd-toc-item ">
<a class="bd-toc-link" href="/bootstrap-material-design/docs/4.0/utilities/borders/">
Utilities
@ -1126,7 +1126,7 @@
<div class="bd-toc-item ">
<a class="bd-toc-link" href="/bootstrap-material-design/docs/4.0/extend/icons/">
<a class="bd-toc-link" href="/bootstrap-material-design/docs/4.0/extend/approach/">
Extend
</a>
@ -1137,6 +1137,19 @@
<li class="">
<a href="/bootstrap-material-design/docs/4.0/extend/approach/">
Approach
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/extend/icons/">
Icons
@ -1165,6 +1178,75 @@
</ul>
</div>
<div class="bd-toc-item ">
<a class="bd-toc-link" href="/bootstrap-material-design/docs/4.0/about/overview/">
About
</a>
<ul class="nav bd-sidenav">
<li class="">
<a href="/bootstrap-material-design/docs/4.0/about/overview/">
Overview
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/about/brand/">
Brand
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/about/license/">
License
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/about/translations/">
Translations
</a>
</li>
</ul>
</div>
</nav>
</div>
@ -1176,6 +1258,7 @@
<li class="toc-entry toc-h2"><a href="#active-items">Active items</a></li>
<li class="toc-entry toc-h2"><a href="#disabled-items">Disabled items</a></li>
<li class="toc-entry toc-h2"><a href="#links-and-buttons">Links and buttons</a></li>
<li class="toc-entry toc-h2"><a href="#flush">Flush</a></li>
<li class="toc-entry toc-h2"><a href="#contextual-classes">Contextual classes</a>
<ul>
<ul>
@ -1289,7 +1372,7 @@
<div class="bd-example" data-example-id="">
<div class="list-group">
<a href="#" class="list-group-item active">
<a href="#" class="list-group-item list-group-item-action active">
Cras justo odio
</a>
<a href="#" class="list-group-item list-group-item-action">Dapibus ac facilisis in</a>
@ -1299,7 +1382,7 @@
</div>
</div>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"list-group"</span><span class="nt">&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"list-group-item active"</span><span class="nt">&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"list-group-item list-group-item-action active"</span><span class="nt">&gt;</span>
Cras justo odio
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"list-group-item list-group-item-action"</span><span class="nt">&gt;</span>Dapibus ac facilisis in<span class="nt">&lt;/a&gt;</span>
@ -1331,6 +1414,27 @@
<span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"list-group-item list-group-item-action"</span> <span class="na">disabled</span><span class="nt">&gt;</span>Vestibulum at eros<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre></div>
<h2 id="flush">Flush</h2>
<p>Add <code class="highlighter-rouge">.list-group-flush</code> to remove some borders and rounded corners to render list group items edge-to-edge in a parent container (e.g., cards).</p>
<div class="bd-example" data-example-id="">
<ul class="list-group list-group-flush">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Morbi leo risus</li>
<li class="list-group-item">Porta ac consectetur ac</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
</div>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;ul</span> <span class="na">class=</span><span class="s">"list-group list-group-flush"</span><span class="nt">&gt;</span>
<span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"list-group-item"</span><span class="nt">&gt;</span>Cras justo odio<span class="nt">&lt;/li&gt;</span>
<span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"list-group-item"</span><span class="nt">&gt;</span>Dapibus ac facilisis in<span class="nt">&lt;/li&gt;</span>
<span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"list-group-item"</span><span class="nt">&gt;</span>Morbi leo risus<span class="nt">&lt;/li&gt;</span>
<span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"list-group-item"</span><span class="nt">&gt;</span>Porta ac consectetur ac<span class="nt">&lt;/li&gt;</span>
<span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"list-group-item"</span><span class="nt">&gt;</span>Vestibulum at eros<span class="nt">&lt;/li&gt;</span>
<span class="nt">&lt;/ul&gt;</span></code></pre></div>
<h2 id="contextual-classes">Contextual classes</h2>
<p>Use contextual classes to style list items with a stateful background and color.</p>
@ -1409,30 +1513,30 @@
<ul class="list-group">
<li class="list-group-item d-flex justify-content-between align-items-center">
Cras justo odio
<span class="badge badge-default badge-pill">14</span>
<span class="badge badge-primary badge-pill">14</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
Dapibus ac facilisis in
<span class="badge badge-default badge-pill">2</span>
<span class="badge badge-primary badge-pill">2</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
Morbi leo risus
<span class="badge badge-default badge-pill">1</span>
<span class="badge badge-primary badge-pill">1</span>
</li>
</ul>
</div>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;ul</span> <span class="na">class=</span><span class="s">"list-group"</span><span class="nt">&gt;</span>
<span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"list-group-item d-flex justify-content-between align-items-center"</span><span class="nt">&gt;</span>
Cras justo odio
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"badge badge-default badge-pill"</span><span class="nt">&gt;</span>14<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"badge badge-primary badge-pill"</span><span class="nt">&gt;</span>14<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;/li&gt;</span>
<span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"list-group-item d-flex justify-content-between align-items-center"</span><span class="nt">&gt;</span>
Dapibus ac facilisis in
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"badge badge-default badge-pill"</span><span class="nt">&gt;</span>2<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"badge badge-primary badge-pill"</span><span class="nt">&gt;</span>2<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;/li&gt;</span>
<span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"list-group-item d-flex justify-content-between align-items-center"</span><span class="nt">&gt;</span>
Morbi leo risus
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"badge badge-default badge-pill"</span><span class="nt">&gt;</span>1<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"badge badge-primary badge-pill"</span><span class="nt">&gt;</span>1<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;/li&gt;</span>
<span class="nt">&lt;/ul&gt;</span></code></pre></div>
@ -1549,7 +1653,7 @@
<h3 id="using-data-attributes">Using data attributes</h3>
<p>You can activate a list group navigation without writing any JavaScript by simply specifying <code class="highlighter-rouge">data-toggle="list"</code> or on an element. Use these data attributes on <code class="highlighter-rouge">.list-group-item</code>.</p>
<p>You can activate a list group navigation without writing any JavaScript by simply specifying <code class="highlighter-rouge">data-toggle="list"</code> or on an element. Use these data attributes on <code class="highlighter-rouge">.list-group-item</code>.</p>
<div role="tabpanel">
@ -1575,7 +1679,7 @@
<p>Enable tabbable list item via JavaScript (each list item needs to be activated individually):</p>
<figure class="highlight"><pre><code class="language-js" data-lang="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'#myList a'</span><span class="p">).</span><span class="nx">click</span><span class="p">(</span><span class="kd">function</span> <span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span>
<figure class="highlight"><pre><code class="language-js" data-lang="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'#myList a'</span><span class="p">).</span><span class="nx">on</span><span class="p">(</span><span class="s1">'click'</span><span class="p">,</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">e</span><span class="p">.</span><span class="nx">preventDefault</span><span class="p">()</span>
<span class="nx">$</span><span class="p">(</span><span class="k">this</span><span class="p">).</span><span class="nx">tab</span><span class="p">(</span><span class="s1">'show'</span><span class="p">)</span>
<span class="p">})</span></code></pre></figure>
@ -1583,9 +1687,9 @@
<p>You can activate individual list item in several ways:</p>
<figure class="highlight"><pre><code class="language-js" data-lang="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'#myList a[href="#profile"]'</span><span class="p">).</span><span class="nx">tab</span><span class="p">(</span><span class="s1">'show'</span><span class="p">)</span> <span class="c1">// Select tab by name</span>
<span class="nx">$</span><span class="p">(</span><span class="s1">'#myList a:first'</span><span class="p">).</span><span class="nx">tab</span><span class="p">(</span><span class="s1">'show'</span><span class="p">)</span> <span class="c1">// Select first tab</span>
<span class="nx">$</span><span class="p">(</span><span class="s1">'#myList a:last'</span><span class="p">).</span><span class="nx">tab</span><span class="p">(</span><span class="s1">'show'</span><span class="p">)</span> <span class="c1">// Select last tab</span>
<span class="nx">$</span><span class="p">(</span><span class="s1">'#myList li:eq(2) a'</span><span class="p">).</span><span class="nx">tab</span><span class="p">(</span><span class="s1">'show'</span><span class="p">)</span> <span class="c1">// Select third tab (0-indexed)</span></code></pre></figure>
<span class="nx">$</span><span class="p">(</span><span class="s1">'#myList a:first-child'</span><span class="p">).</span><span class="nx">tab</span><span class="p">(</span><span class="s1">'show'</span><span class="p">)</span> <span class="c1">// Select first tab</span>
<span class="nx">$</span><span class="p">(</span><span class="s1">'#myList a:last-child'</span><span class="p">).</span><span class="nx">tab</span><span class="p">(</span><span class="s1">'show'</span><span class="p">)</span> <span class="c1">// Select last tab</span>
<span class="nx">$</span><span class="p">(</span><span class="s1">'#myList a:nth-child(3)'</span><span class="p">).</span><span class="nx">tab</span><span class="p">(</span><span class="s1">'show'</span><span class="p">)</span> <span class="c1">// Select third tab</span></code></pre></figure>
<h3 id="fade-effect">Fade effect</h3>
@ -1620,7 +1724,7 @@
<span class="nt">&lt;script&gt;</span>
<span class="nx">$</span><span class="p">(</span><span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
<span class="nx">$</span><span class="p">(</span><span class="s1">'#myList a:last'</span><span class="p">).</span><span class="nx">tab</span><span class="p">(</span><span class="s1">'show'</span><span class="p">)</span>
<span class="nx">$</span><span class="p">(</span><span class="s1">'#myList a:last-child'</span><span class="p">).</span><span class="nx">tab</span><span class="p">(</span><span class="s1">'show'</span><span class="p">)</span>
<span class="p">})</span>
<span class="nt">&lt;/script&gt;</span></code></pre></figure>
@ -1643,7 +1747,7 @@
<p>If no tab was already active, the <code class="highlighter-rouge">hide.bs.tab</code> and <code class="highlighter-rouge">hidden.bs.tab</code> events will not be fired.</p>
<table class="table table-bordered table-striped table-responsive">
<table class="table table-bordered table-striped">
<thead>
<tr>
<th style="width: 150px;">Event type</th>

760
docs/4.0/components/modal/index.html
View File

@ -230,8 +230,8 @@
<li class="">
<a href="/bootstrap-material-design/docs/4.0/getting-started/options/">
Options
<a href="/bootstrap-material-design/docs/4.0/getting-started/theming/">
Theming
</a>
@ -450,296 +450,6 @@
<div class="bd-toc-item active">
<a class="bd-toc-link" href="/bootstrap-material-design/docs/4.0/components/alerts/">
Components
</a>
<ul class="nav bd-sidenav">
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/alerts/">
Alerts
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/badge/">
Badge
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/breadcrumb/">
Breadcrumb
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/buttons/">
Buttons
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/button-group/">
Button group
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/card/">
Card
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/carousel/">
Carousel
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/collapse/">
Collapse
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/dropdowns/">
Dropdowns
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/forms/">
Forms
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/input-group/">
Input group
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/jumbotron/">
Jumbotron
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/list-group/">
List group
</a>
</li>
<li class="active bd-sidenav-active">
<a href="/bootstrap-material-design/docs/4.0/components/modal/">
Modal
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/navs/">
Navs
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/navbar/">
Navbar
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/pagination/">
Pagination
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/popovers/">
Popovers
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/progress/">
Progress
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/scrollspy/">
Scrollspy
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/tooltips/">
Tooltips
</a>
</li>
</ul>
</div>
<div class="bd-toc-item ">
<a class="bd-toc-link" href="/bootstrap-material-design/docs/4.0/material-design/buttons/">
Material Design
@ -900,6 +610,296 @@
<div class="bd-toc-item ">
<a class="bd-toc-link" href="/bootstrap-material-design/docs/4.0/bootstrap-components/alerts/">
Bootstrap Components
</a>
<ul class="nav bd-sidenav">
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/alerts/">
Alerts
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/badge/">
Badge
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/breadcrumb/">
Breadcrumb
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/buttons/">
Buttons
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/button-group/">
Button group
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/card/">
Card
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/carousel/">
Carousel
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/collapse/">
Collapse
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/dropdowns/">
Dropdowns
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/forms/">
Forms
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/input-group/">
Input group
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/jumbotron/">
Jumbotron
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/list-group/">
List group
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/modal/">
Modal
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/navs/">
Navs
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/navbar/">
Navbar
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/pagination/">
Pagination
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/popovers/">
Popovers
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/progress/">
Progress
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/scrollspy/">
Scrollspy
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/tooltips/">
Tooltips
</a>
</li>
</ul>
</div>
<div class="bd-toc-item ">
<a class="bd-toc-link" href="/bootstrap-material-design/docs/4.0/utilities/borders/">
Utilities
@ -1126,7 +1126,7 @@
<div class="bd-toc-item ">
<a class="bd-toc-link" href="/bootstrap-material-design/docs/4.0/extend/icons/">
<a class="bd-toc-link" href="/bootstrap-material-design/docs/4.0/extend/approach/">
Extend
</a>
@ -1137,6 +1137,19 @@
<li class="">
<a href="/bootstrap-material-design/docs/4.0/extend/approach/">
Approach
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/extend/icons/">
Icons
@ -1165,6 +1178,75 @@
</ul>
</div>
<div class="bd-toc-item ">
<a class="bd-toc-link" href="/bootstrap-material-design/docs/4.0/about/overview/">
About
</a>
<ul class="nav bd-sidenav">
<li class="">
<a href="/bootstrap-material-design/docs/4.0/about/overview/">
Overview
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/about/brand/">
Brand
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/about/license/">
License
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/about/translations/">
Translations
</a>
</li>
</ul>
</div>
</nav>
</div>
@ -1196,10 +1278,17 @@
</ul>
</ul>
</li>
<li class="toc-entry toc-h3"><a href="#tooltips-and-popovers">Tooltips and popovers</a>
<li class="toc-entry toc-h3"><a href="#vertically-centered">Vertically centered</a>
<ul>
<ul>
<li class="toc-entry toc-h5"><a href="#modal-title-3">Modal title</a></li>
</ul>
</ul>
</li>
<li class="toc-entry toc-h3"><a href="#tooltips-and-popovers">Tooltips and popovers</a>
<ul>
<ul>
<li class="toc-entry toc-h5"><a href="#modal-title-4">Modal title</a></li>
<li class="toc-entry toc-h5"><a href="#popover-in-a-modal">Popover in a modal</a></li>
<li class="toc-entry toc-h5"><a href="#tooltips-in-a-modal">Tooltips in a modal</a></li>
</ul>
@ -1246,6 +1335,7 @@
<li class="toc-entry toc-h4"><a href="#modalshow">.modal('show')</a></li>
<li class="toc-entry toc-h4"><a href="#modalhide">.modal('hide')</a></li>
<li class="toc-entry toc-h4"><a href="#modalhandleupdate">.modal('handleUpdate')</a></li>
<li class="toc-entry toc-h4"><a href="#modaldispose">.modal('dispose')</a></li>
</ul>
</li>
<li class="toc-entry toc-h3"><a href="#events">Events</a></li>
@ -1274,7 +1364,7 @@
</ul>
<figure class="highlight"><pre><code class="language-js" data-lang="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'#myModal'</span><span class="p">).</span><span class="nx">on</span><span class="p">(</span><span class="s1">'shown.bs.modal'</span><span class="p">,</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
<span class="nx">$</span><span class="p">(</span><span class="s1">'#myInput'</span><span class="p">).</span><span class="nx">focus</span><span class="p">()</span>
<span class="nx">$</span><span class="p">(</span><span class="s1">'#myInput'</span><span class="p">).</span><span class="nx">trigger</span><span class="p">(</span><span class="s1">'focus'</span><span class="p">)</span>
<span class="p">})</span></code></pre></figure>
<p>Keep reading for demos and usage guidelines.</p>
@ -1286,7 +1376,7 @@
<p>Below is a <em>static</em> modal example (meaning its <code class="highlighter-rouge">position</code> and <code class="highlighter-rouge">display</code> have been overridden). Included are the modal header, modal body (required for <code class="highlighter-rouge">padding</code>), and modal footer (optional). We ask that you include modal headers with dismiss actions whenever possible, or provide another explicit dismiss action.</p>
<div class="bd-example bd-example-modal">
<div class="modal">
<div class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
@ -1307,7 +1397,7 @@
</div>
</div>
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"modal"</span><span class="nt">&gt;</span>
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"modal"</span> <span class="na">tabindex=</span><span class="s">"-1"</span> <span class="na">role=</span><span class="s">"dialog"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"modal-dialog"</span> <span class="na">role=</span><span class="s">"document"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"modal-content"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"modal-header"</span><span class="nt">&gt;</span>
@ -1456,6 +1546,62 @@
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre></figure>
<h3 id="vertically-centered">Vertically centered</h3>
<p>Add <code class="highlighter-rouge">.modal-dialog-centered</code> to <code class="highlighter-rouge">.modal-dialog</code> to vertically center the modal.</p>
<div id="exampleModalCenter" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalCenterTitle">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<div class="bd-example">
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalCenter">
Launch demo modal
</button>
</div>
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="c">&lt;!-- Button trigger modal --&gt;</span>
<span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span> <span class="na">data-toggle=</span><span class="s">"modal"</span> <span class="na">data-target=</span><span class="s">"#exampleModalCenter"</span><span class="nt">&gt;</span>
Launch demo modal
<span class="nt">&lt;/button&gt;</span>
<span class="c">&lt;!-- Modal --&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"modal fade"</span> <span class="na">id=</span><span class="s">"exampleModalCenter"</span> <span class="na">tabindex=</span><span class="s">"-1"</span> <span class="na">role=</span><span class="s">"dialog"</span> <span class="na">aria-labelledby=</span><span class="s">"exampleModalCenterTitle"</span> <span class="na">aria-hidden=</span><span class="s">"true"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"modal-dialog modal-dialog-centered"</span> <span class="na">role=</span><span class="s">"document"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"modal-content"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"modal-header"</span><span class="nt">&gt;</span>
<span class="nt">&lt;h5</span> <span class="na">class=</span><span class="s">"modal-title"</span> <span class="na">id=</span><span class="s">"exampleModalLongTitle"</span><span class="nt">&gt;</span>Modal title<span class="nt">&lt;/h5&gt;</span>
<span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"close"</span> <span class="na">data-dismiss=</span><span class="s">"modal"</span> <span class="na">aria-label=</span><span class="s">"Close"</span><span class="nt">&gt;</span>
<span class="nt">&lt;span</span> <span class="na">aria-hidden=</span><span class="s">"true"</span><span class="nt">&gt;</span><span class="ni">&amp;times;</span><span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"modal-body"</span><span class="nt">&gt;</span>
...
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"modal-footer"</span><span class="nt">&gt;</span>
<span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-secondary"</span> <span class="na">data-dismiss=</span><span class="s">"modal"</span><span class="nt">&gt;</span>Close<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span><span class="nt">&gt;</span>Save changes<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre></figure>
<h3 id="tooltips-and-popovers">Tooltips and popovers</h3>
<p><a href="/bootstrap-material-design/docs/4.0/components/tooltips/">Tooltips</a> and <a href="/bootstrap-material-design/docs/4.0/components/popovers/">popovers</a> can be placed within modals as needed. When modals are closed, any tooltips and popovers within are also automatically dismissed.</p>
@ -1603,11 +1749,11 @@
<div class="modal-body">
<form>
<div class="form-group">
<label for="recipient-name" class="form-control-label">Recipient:</label>
<label for="recipient-name" class="col-form-label">Recipient:</label>
<input type="text" class="form-control" id="recipient-name" />
</div>
<div class="form-group">
<label for="message-text" class="form-control-label">Message:</label>
<label for="message-text" class="col-form-label">Message:</label>
<textarea class="form-control" id="message-text"></textarea>
</div>
</form>
@ -1636,11 +1782,11 @@
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"modal-body"</span><span class="nt">&gt;</span>
<span class="nt">&lt;form&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"form-group"</span><span class="nt">&gt;</span>
<span class="nt">&lt;label</span> <span class="na">for=</span><span class="s">"recipient-name"</span> <span class="na">class=</span><span class="s">"form-control-label"</span><span class="nt">&gt;</span>Recipient:<span class="nt">&lt;/label&gt;</span>
<span class="nt">&lt;label</span> <span class="na">for=</span><span class="s">"recipient-name"</span> <span class="na">class=</span><span class="s">"col-form-label"</span><span class="nt">&gt;</span>Recipient:<span class="nt">&lt;/label&gt;</span>
<span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">id=</span><span class="s">"recipient-name"</span><span class="nt">&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"form-group"</span><span class="nt">&gt;</span>
<span class="nt">&lt;label</span> <span class="na">for=</span><span class="s">"message-text"</span> <span class="na">class=</span><span class="s">"form-control-label"</span><span class="nt">&gt;</span>Message:<span class="nt">&lt;/label&gt;</span>
<span class="nt">&lt;label</span> <span class="na">for=</span><span class="s">"message-text"</span> <span class="na">class=</span><span class="s">"col-form-label"</span><span class="nt">&gt;</span>Message:<span class="nt">&lt;/label&gt;</span>
<span class="nt">&lt;textarea</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">id=</span><span class="s">"message-text"</span><span class="nt">&gt;&lt;/textarea&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/form&gt;</span>
@ -1673,7 +1819,7 @@
<h3 id="dynamic-heights">Dynamic heights</h3>
<p>If the height of a modal changes while it is open, you should call <code class="highlighter-rouge">$('#myModal').data('bs.modal').handleUpdate()</code> or <code class="highlighter-rouge">$('#myModal').modal('handleUpdate')</code> to readjust the modal’s position in case a scrollbar appears.</p>
<p>If the height of a modal changes while it is open, you should call <code class="highlighter-rouge">$('#myModal').modal('handleUpdate')</code> to readjust the modal’s position in case a scrollbar appears.</p>
<h3 id="accessibility">Accessibility</h3>
@ -1693,7 +1839,7 @@
</div>
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="c">&lt;!-- Large modal --&gt;</span>
<span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span> <span class="na">data-toggle=</span><span class="s">"modal"</span> <span class="na">data-target=</span><span class="s">".bd-example-modal-lg"</span><span class="nt">&gt;</span>Large modal<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span> <span class="na">data-toggle=</span><span class="s">"modal"</span> <span class="na">data-target=</span><span class="s">".bd-example-modal-lg"</span><span class="nt">&gt;</span>Large modal<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"modal fade bd-example-modal-lg"</span> <span class="na">tabindex=</span><span class="s">"-1"</span> <span class="na">role=</span><span class="s">"dialog"</span> <span class="na">aria-labelledby=</span><span class="s">"myLargeModalLabel"</span> <span class="na">aria-hidden=</span><span class="s">"true"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"modal-dialog modal-lg"</span><span class="nt">&gt;</span>
@ -1767,7 +1913,7 @@
<p>Options can be passed via data attributes or JavaScript. For data attributes, append the option name to <code class="highlighter-rouge">data-</code>, as in <code class="highlighter-rouge">data-backdrop=""</code>.</p>
<table class="table table-bordered table-striped table-responsive">
<table class="table table-bordered table-striped">
<thead>
<tr>
<th style="width: 100px;">Name</th>
@ -1846,11 +1992,15 @@
<figure class="highlight"><pre><code class="language-js" data-lang="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'#myModal'</span><span class="p">).</span><span class="nx">modal</span><span class="p">(</span><span class="s1">'handleUpdate'</span><span class="p">)</span></code></pre></figure>
<h4 id="modaldispose"><code class="highlighter-rouge">.modal('dispose')</code></h4>
<p>Destroys an element’s modal.</p>
<h3 id="events">Events</h3>
<p>Bootstrap’s modal class exposes a few events for hooking into modal functionality. All modal events are fired at the modal itself (i.e. at the <code class="highlighter-rouge">&lt;div class="modal"&gt;</code>).</p>
<table class="table table-bordered table-striped table-responsive">
<table class="table table-bordered table-striped">
<thead>
<tr>
<th style="width: 150px;">Event Type</th>

755
docs/4.0/components/navbar/index.html
View File

@ -230,8 +230,8 @@
<li class="">
<a href="/bootstrap-material-design/docs/4.0/getting-started/options/">
Options
<a href="/bootstrap-material-design/docs/4.0/getting-started/theming/">
Theming
</a>
@ -450,296 +450,6 @@
<div class="bd-toc-item active">
<a class="bd-toc-link" href="/bootstrap-material-design/docs/4.0/components/alerts/">
Components
</a>
<ul class="nav bd-sidenav">
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/alerts/">
Alerts
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/badge/">
Badge
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/breadcrumb/">
Breadcrumb
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/buttons/">
Buttons
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/button-group/">
Button group
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/card/">
Card
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/carousel/">
Carousel
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/collapse/">
Collapse
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/dropdowns/">
Dropdowns
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/forms/">
Forms
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/input-group/">
Input group
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/jumbotron/">
Jumbotron
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/list-group/">
List group
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/modal/">
Modal
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/navs/">
Navs
</a>
</li>
<li class="active bd-sidenav-active">
<a href="/bootstrap-material-design/docs/4.0/components/navbar/">
Navbar
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/pagination/">
Pagination
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/popovers/">
Popovers
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/progress/">
Progress
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/scrollspy/">
Scrollspy
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/tooltips/">
Tooltips
</a>
</li>
</ul>
</div>
<div class="bd-toc-item ">
<a class="bd-toc-link" href="/bootstrap-material-design/docs/4.0/material-design/buttons/">
Material Design
@ -900,6 +610,296 @@
<div class="bd-toc-item ">
<a class="bd-toc-link" href="/bootstrap-material-design/docs/4.0/bootstrap-components/alerts/">
Bootstrap Components
</a>
<ul class="nav bd-sidenav">
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/alerts/">
Alerts
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/badge/">
Badge
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/breadcrumb/">
Breadcrumb
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/buttons/">
Buttons
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/button-group/">
Button group
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/card/">
Card
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/carousel/">
Carousel
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/collapse/">
Collapse
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/dropdowns/">
Dropdowns
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/forms/">
Forms
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/input-group/">
Input group
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/jumbotron/">
Jumbotron
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/list-group/">
List group
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/modal/">
Modal
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/navs/">
Navs
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/navbar/">
Navbar
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/pagination/">
Pagination
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/popovers/">
Popovers
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/progress/">
Progress
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/scrollspy/">
Scrollspy
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/tooltips/">
Tooltips
</a>
</li>
</ul>
</div>
<div class="bd-toc-item ">
<a class="bd-toc-link" href="/bootstrap-material-design/docs/4.0/utilities/borders/">
Utilities
@ -1126,7 +1126,7 @@
<div class="bd-toc-item ">
<a class="bd-toc-link" href="/bootstrap-material-design/docs/4.0/extend/icons/">
<a class="bd-toc-link" href="/bootstrap-material-design/docs/4.0/extend/approach/">
Extend
</a>
@ -1137,6 +1137,19 @@
<li class="">
<a href="/bootstrap-material-design/docs/4.0/extend/approach/">
Approach
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/extend/icons/">
Icons
@ -1165,6 +1178,75 @@
</ul>
</div>
<div class="bd-toc-item ">
<a class="bd-toc-link" href="/bootstrap-material-design/docs/4.0/about/overview/">
About
</a>
<ul class="nav bd-sidenav">
<li class="">
<a href="/bootstrap-material-design/docs/4.0/about/overview/">
Overview
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/about/brand/">
Brand
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/about/license/">
License
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/about/translations/">
Translations
</a>
</li>
</ul>
</div>
</nav>
</div>
@ -1210,8 +1292,9 @@
<ul>
<li>Navbars require a wrapping <code class="highlighter-rouge">.navbar</code> with <code class="highlighter-rouge">.navbar-expand{-sm|-md|-lg|-xl}</code> for responsive collapsing and <a href="#color-schemes">color scheme</a> classes.</li>
<li>Navbars and their contents are fluid by default. Use <a href="#containers">optional containers</a> to limit their horizontal width.</li>
<li>Navbars and their contents are built with flexbox, providing easy alignment options via utility classes.</li>
<li>Use our <a href="/bootstrap-material-design/docs/4.0/utilities/spacing/">spacing</a> and <a href="/bootstrap-material-design/docs/4.0/utilities/flex/">flex</a> utility classes for controlling spacing and alignment within navbars.</li>
<li>Navbars are responsive by default, but you can easily modify them to change that. Responsive behavior depends on our Collapse JavaScript plugin.</li>
<li>Navbars are hidden by default when printing. Force them to be printed by adding <code class="highlighter-rouge">.d-print</code> to the <code class="highlighter-rouge">.navbar</code>. See the <a href="/bootstrap-material-design/docs/4.0/utilities/display/">display</a> utility class.</li>
<li>Ensure accessibility by using a <code class="highlighter-rouge">&lt;nav&gt;</code> element or, if using a more generic element such as a <code class="highlighter-rouge">&lt;div&gt;</code>, add a <code class="highlighter-rouge">role="navigation"</code> to every navbar to explicitly identify it as a landmark region for users of assistive technologies.</li>
</ul>
@ -1247,12 +1330,23 @@
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search" />
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search" />
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
@ -1272,17 +1366,30 @@
<span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">&gt;</span>
<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"nav-link"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>Link<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;/li&gt;</span>
<span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"nav-item dropdown"</span><span class="nt">&gt;</span>
<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"nav-link dropdown-toggle"</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">id=</span><span class="s">"navbarDropdown"</span> <span class="na">role=</span><span class="s">"button"</span> <span class="na">data-toggle=</span><span class="s">"dropdown"</span> <span class="na">aria-haspopup=</span><span class="s">"true"</span> <span class="na">aria-expanded=</span><span class="s">"false"</span><span class="nt">&gt;</span>
Dropdown
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"dropdown-menu"</span> <span class="na">aria-labelledby=</span><span class="s">"navbarDropdown"</span><span class="nt">&gt;</span>
<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"dropdown-item"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>Action<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"dropdown-item"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>Another action<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"dropdown-divider"</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"dropdown-item"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>Something else here<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/li&gt;</span>
<span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">&gt;</span>
<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"nav-link disabled"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>Disabled<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;/li&gt;</span>
<span class="nt">&lt;/ul&gt;</span>
<span class="nt">&lt;form</span> <span class="na">class=</span><span class="s">"form-inline my-2 my-lg-0"</span><span class="nt">&gt;</span>
<span class="nt">&lt;input</span> <span class="na">class=</span><span class="s">"form-control mr-sm-2"</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">placeholder=</span><span class="s">"Search"</span> <span class="na">aria-label=</span><span class="s">"Search"</span><span class="nt">&gt;</span>
<span class="nt">&lt;input</span> <span class="na">class=</span><span class="s">"form-control mr-sm-2"</span> <span class="na">type=</span><span class="s">"search"</span> <span class="na">placeholder=</span><span class="s">"Search"</span> <span class="na">aria-label=</span><span class="s">"Search"</span><span class="nt">&gt;</span>
<span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">"btn btn-outline-success my-2 my-sm-0"</span> <span class="na">type=</span><span class="s">"submit"</span><span class="nt">&gt;</span>Search<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;/form&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/nav&gt;</span></code></pre></div>
<p>This example uses <a href="/bootstrap-material-design/docs/4.0/utilities/colors/">color</a> (<code class="highlighter-rouge">bg-light</code>) and <a href="/bootstrap-material-design/docs/4.0/utilities/spacing/">spacing</a> (<code class="highlighter-rouge">my-2</code>, <code class="highlighter-rouge">my-lg-0</code>, <code class="highlighter-rouge">mr-sm-0</code>, <code class="highlighter-rouge">my-sm-0</code>) utility classes.</p>
<h3 id="brand">Brand</h3>
<p>The <code class="highlighter-rouge">.navbar-brand</code> can be applied to most elements, but an anchor works best as some elements might require utility classes or custom styles.</p>
@ -1295,7 +1402,7 @@
<!-- As a heading -->
<nav class="navbar navbar-light bg-light">
<span class="navbar-brand mb-0">Navbar</span>
<span class="navbar-brand mb-0 h1">Navbar</span>
</nav>
</div>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="c">&lt;!-- As a link --&gt;</span>
@ -1305,7 +1412,7 @@
<span class="c">&lt;!-- As a heading --&gt;</span>
<span class="nt">&lt;nav</span> <span class="na">class=</span><span class="s">"navbar navbar-light bg-light"</span><span class="nt">&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"h1"</span> <span class="na">class=</span><span class="s">"navbar-brand mb-0"</span><span class="nt">&gt;</span>Navbar<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"navbar-brand mb-0 h1"</span><span class="nt">&gt;</span>Navbar<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;/nav&gt;</span></code></pre></div>
<p>Adding images to the <code class="highlighter-rouge">.navbar-brand</code> will likely always require custom styles or utilities to properly size. Here are some examples to demonstrate.</p>
@ -1448,7 +1555,7 @@
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown link
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
@ -1478,7 +1585,7 @@
<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"nav-link"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>Pricing<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;/li&gt;</span>
<span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"nav-item dropdown"</span><span class="nt">&gt;</span>
<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"nav-link dropdown-toggle"</span> <span class="na">href=</span><span class="s">"http://example.com"</span> <span class="na">id=</span><span class="s">"navbarDropdownMenuLink"</span> <span class="na">data-toggle=</span><span class="s">"dropdown"</span> <span class="na">aria-haspopup=</span><span class="s">"true"</span> <span class="na">aria-expanded=</span><span class="s">"false"</span><span class="nt">&gt;</span>
<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"nav-link dropdown-toggle"</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">id=</span><span class="s">"navbarDropdownMenuLink"</span> <span class="na">data-toggle=</span><span class="s">"dropdown"</span> <span class="na">aria-haspopup=</span><span class="s">"true"</span> <span class="na">aria-expanded=</span><span class="s">"false"</span><span class="nt">&gt;</span>
Dropdown link
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"dropdown-menu"</span> <span class="na">aria-labelledby=</span><span class="s">"navbarDropdownMenuLink"</span><span class="nt">&gt;</span>
@ -1498,14 +1605,14 @@
<div class="bd-example" data-example-id="">
<nav class="navbar navbar-light bg-light">
<form class="form-inline">
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search" />
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search" />
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</nav>
</div>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;nav</span> <span class="na">class=</span><span class="s">"navbar navbar-light bg-light"</span><span class="nt">&gt;</span>
<span class="nt">&lt;form</span> <span class="na">class=</span><span class="s">"form-inline"</span><span class="nt">&gt;</span>
<span class="nt">&lt;input</span> <span class="na">class=</span><span class="s">"form-control mr-sm-2"</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">placeholder=</span><span class="s">"Search"</span> <span class="na">aria-label=</span><span class="s">"Search"</span><span class="nt">&gt;</span>
<span class="nt">&lt;input</span> <span class="na">class=</span><span class="s">"form-control mr-sm-2"</span> <span class="na">type=</span><span class="s">"search"</span> <span class="na">placeholder=</span><span class="s">"Search"</span> <span class="na">aria-label=</span><span class="s">"Search"</span><span class="nt">&gt;</span>
<span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">"btn btn-outline-success my-2 my-sm-0"</span> <span class="na">type=</span><span class="s">"submit"</span><span class="nt">&gt;</span>Search<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;/form&gt;</span>
<span class="nt">&lt;/nav&gt;</span></code></pre></div>
@ -1516,7 +1623,7 @@
<nav class="navbar navbar-light bg-light justify-content-between">
<a class="navbar-brand">Navbar</a>
<form class="form-inline">
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search" />
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search" />
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</nav>
@ -1524,7 +1631,7 @@
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;nav</span> <span class="na">class=</span><span class="s">"navbar navbar-light bg-light justify-content-between"</span><span class="nt">&gt;</span>
<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"navbar-brand"</span><span class="nt">&gt;</span>Navbar<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;form</span> <span class="na">class=</span><span class="s">"form-inline"</span><span class="nt">&gt;</span>
<span class="nt">&lt;input</span> <span class="na">class=</span><span class="s">"form-control mr-sm-2"</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">placeholder=</span><span class="s">"Search"</span> <span class="na">aria-label=</span><span class="s">"Search"</span><span class="nt">&gt;</span>
<span class="nt">&lt;input</span> <span class="na">class=</span><span class="s">"form-control mr-sm-2"</span> <span class="na">type=</span><span class="s">"search"</span> <span class="na">placeholder=</span><span class="s">"Search"</span> <span class="na">aria-label=</span><span class="s">"Search"</span><span class="nt">&gt;</span>
<span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">"btn btn-outline-success my-2 my-sm-0"</span> <span class="na">type=</span><span class="s">"submit"</span><span class="nt">&gt;</span>Search<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;/form&gt;</span>
<span class="nt">&lt;/nav&gt;</span></code></pre></div>
@ -1535,7 +1642,9 @@
<nav class="navbar navbar-light bg-light">
<form class="form-inline">
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">@</span>
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon1">@</span>
</div>
<input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1" />
</div>
</form>
@ -1544,7 +1653,9 @@
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;nav</span> <span class="na">class=</span><span class="s">"navbar navbar-light bg-light"</span><span class="nt">&gt;</span>
<span class="nt">&lt;form</span> <span class="na">class=</span><span class="s">"form-inline"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"input-group"</span><span class="nt">&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"input-group-addon"</span> <span class="na">id=</span><span class="s">"basic-addon1"</span><span class="nt">&gt;</span>@<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"input-group-prepend"</span><span class="nt">&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"input-group-text"</span> <span class="na">id=</span><span class="s">"basic-addon1"</span><span class="nt">&gt;</span>@<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">placeholder=</span><span class="s">"Username"</span> <span class="na">aria-label=</span><span class="s">"Username"</span> <span class="na">aria-describedby=</span><span class="s">"basic-addon1"</span><span class="nt">&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/form&gt;</span>
@ -1556,14 +1667,14 @@
<nav class="navbar navbar-light bg-light">
<form class="form-inline">
<button class="btn btn-outline-success" type="button">Main button</button>
<button class="btn btn-sm align-middle btn-outline-secondary" type="button">Smaller button</button>
<button class="btn btn-sm btn-outline-secondary" type="button">Smaller button</button>
</form>
</nav>
</div>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;nav</span> <span class="na">class=</span><span class="s">"navbar navbar-light bg-light"</span><span class="nt">&gt;</span>
<span class="nt">&lt;form</span> <span class="na">class=</span><span class="s">"form-inline"</span><span class="nt">&gt;</span>
<span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">"btn btn-outline-success"</span> <span class="na">type=</span><span class="s">"button"</span><span class="nt">&gt;</span>Main button<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">"btn btn-sm align-middle btn-outline-secondary"</span> <span class="na">type=</span><span class="s">"button"</span><span class="nt">&gt;</span>Smaller button<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">"btn btn-sm btn-outline-secondary"</span> <span class="na">type=</span><span class="s">"button"</span><span class="nt">&gt;</span>Smaller button<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;/form&gt;</span>
<span class="nt">&lt;/nav&gt;</span></code></pre></div>
@ -1660,7 +1771,7 @@
</li>
</ul>
<form class="form-inline">
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search" />
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search" />
<button class="btn btn-outline-info my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
@ -1688,8 +1799,8 @@
</li>
</ul>
<form class="form-inline">
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search" />
<button class="btn btn-outline-secondary my-2 my-sm-0" type="submit">Search</button>
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search" />
<button class="btn btn-outline-light my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
@ -1716,7 +1827,7 @@
</li>
</ul>
<form class="form-inline">
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search" />
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search" />
<button class="btn btn-outline-primary my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
@ -1769,15 +1880,17 @@
<h2 id="placement">Placement</h2>
<p>Use our position utilities to place navbars in non-static positions. Choose from fixed to the top, fixed to the bottom, or stickied to the top. <strong>Note that <code class="highlighter-rouge">position: sticky</code>, used for <code class="highlighter-rouge">.sticky-top</code>, <a href="http://caniuse.com/#feat=css-sticky">isn’t fully supported in every browser</a>.</strong></p>
<p>Use our <a href="/bootstrap-material-design/docs/4.0/utilities/position/">position utilities</a> to place navbars in non-static positions. Choose from fixed to the top, fixed to the bottom, or stickied to the top (scrolls with the page until it reaches the top, then stays there). Fixed navbars use <code class="highlighter-rouge">position: fixed</code>, meaning they’re pulled from the normal flow of the DOM and may require custom CSS (e.g., <code class="highlighter-rouge">padding-top</code> on the <code class="highlighter-rouge">&lt;body&gt;</code>) to prevent overlap with other elements.</p>
<p>Also note that <strong><code class="highlighter-rouge">.sticky-top</code> uses <code class="highlighter-rouge">position: sticky</code>, which <a href="https://caniuse.com/#feat=css-sticky">isn’t fully supported in every browser</a></strong>.</p>
<div class="bd-example" data-example-id="">
<nav class="navbar navbar-light bg-light">
<a class="navbar-brand" href="#">Full width</a>
<a class="navbar-brand" href="#">Default</a>
</nav>
</div>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;nav</span> <span class="na">class=</span><span class="s">"navbar navbar-light bg-light"</span><span class="nt">&gt;</span>
<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"navbar-brand"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>Full width<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"navbar-brand"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>Default<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;/nav&gt;</span></code></pre></div>
<div class="bd-example" data-example-id="">
@ -1838,7 +1951,7 @@
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search" />
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search" />
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
@ -1862,7 +1975,7 @@
<span class="nt">&lt;/li&gt;</span>
<span class="nt">&lt;/ul&gt;</span>
<span class="nt">&lt;form</span> <span class="na">class=</span><span class="s">"form-inline my-2 my-lg-0"</span><span class="nt">&gt;</span>
<span class="nt">&lt;input</span> <span class="na">class=</span><span class="s">"form-control mr-sm-2"</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">placeholder=</span><span class="s">"Search"</span> <span class="na">aria-label=</span><span class="s">"Search"</span><span class="nt">&gt;</span>
<span class="nt">&lt;input</span> <span class="na">class=</span><span class="s">"form-control mr-sm-2"</span> <span class="na">type=</span><span class="s">"search"</span> <span class="na">placeholder=</span><span class="s">"Search"</span> <span class="na">aria-label=</span><span class="s">"Search"</span><span class="nt">&gt;</span>
<span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">"btn btn-outline-success my-2 my-sm-0"</span> <span class="na">type=</span><span class="s">"submit"</span><span class="nt">&gt;</span>Search<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;/form&gt;</span>
<span class="nt">&lt;/div&gt;</span>
@ -1890,7 +2003,7 @@
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search" />
<input class="form-control mr-sm-2" type="search" placeholder="Search" />
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
@ -1915,7 +2028,7 @@
<span class="nt">&lt;/li&gt;</span>
<span class="nt">&lt;/ul&gt;</span>
<span class="nt">&lt;form</span> <span class="na">class=</span><span class="s">"form-inline my-2 my-lg-0"</span><span class="nt">&gt;</span>
<span class="nt">&lt;input</span> <span class="na">class=</span><span class="s">"form-control mr-sm-2"</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">placeholder=</span><span class="s">"Search"</span><span class="nt">&gt;</span>
<span class="nt">&lt;input</span> <span class="na">class=</span><span class="s">"form-control mr-sm-2"</span> <span class="na">type=</span><span class="s">"search"</span> <span class="na">placeholder=</span><span class="s">"Search"</span><span class="nt">&gt;</span>
<span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">"btn btn-outline-success my-2 my-sm-0"</span> <span class="na">type=</span><span class="s">"submit"</span><span class="nt">&gt;</span>Search<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;/form&gt;</span>
<span class="nt">&lt;/div&gt;</span>
@ -1943,7 +2056,7 @@
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search" />
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search" />
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
@ -1968,7 +2081,7 @@
<span class="nt">&lt;/li&gt;</span>
<span class="nt">&lt;/ul&gt;</span>
<span class="nt">&lt;form</span> <span class="na">class=</span><span class="s">"form-inline my-2 my-lg-0"</span><span class="nt">&gt;</span>
<span class="nt">&lt;input</span> <span class="na">class=</span><span class="s">"form-control mr-sm-2"</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">placeholder=</span><span class="s">"Search"</span> <span class="na">aria-label=</span><span class="s">"Search"</span><span class="nt">&gt;</span>
<span class="nt">&lt;input</span> <span class="na">class=</span><span class="s">"form-control mr-sm-2"</span> <span class="na">type=</span><span class="s">"search"</span> <span class="na">placeholder=</span><span class="s">"Search"</span> <span class="na">aria-label=</span><span class="s">"Search"</span><span class="nt">&gt;</span>
<span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">"btn btn-outline-success my-2 my-sm-0"</span> <span class="na">type=</span><span class="s">"submit"</span><span class="nt">&gt;</span>Search<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;/form&gt;</span>
<span class="nt">&lt;/div&gt;</span>

861
docs/4.0/components/navs/index.html
View File

File diff suppressed because it is too large Load Diff

692
docs/4.0/components/pagination/index.html
View File

@ -230,8 +230,8 @@
<li class="">
<a href="/bootstrap-material-design/docs/4.0/getting-started/options/">
Options
<a href="/bootstrap-material-design/docs/4.0/getting-started/theming/">
Theming
</a>
@ -450,296 +450,6 @@
<div class="bd-toc-item active">
<a class="bd-toc-link" href="/bootstrap-material-design/docs/4.0/components/alerts/">
Components
</a>
<ul class="nav bd-sidenav">
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/alerts/">
Alerts
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/badge/">
Badge
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/breadcrumb/">
Breadcrumb
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/buttons/">
Buttons
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/button-group/">
Button group
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/card/">
Card
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/carousel/">
Carousel
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/collapse/">
Collapse
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/dropdowns/">
Dropdowns
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/forms/">
Forms
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/input-group/">
Input group
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/jumbotron/">
Jumbotron
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/list-group/">
List group
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/modal/">
Modal
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/navs/">
Navs
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/navbar/">
Navbar
</a>
</li>
<li class="active bd-sidenav-active">
<a href="/bootstrap-material-design/docs/4.0/components/pagination/">
Pagination
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/popovers/">
Popovers
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/progress/">
Progress
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/scrollspy/">
Scrollspy
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/tooltips/">
Tooltips
</a>
</li>
</ul>
</div>
<div class="bd-toc-item ">
<a class="bd-toc-link" href="/bootstrap-material-design/docs/4.0/material-design/buttons/">
Material Design
@ -900,6 +610,296 @@
<div class="bd-toc-item ">
<a class="bd-toc-link" href="/bootstrap-material-design/docs/4.0/bootstrap-components/alerts/">
Bootstrap Components
</a>
<ul class="nav bd-sidenav">
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/alerts/">
Alerts
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/badge/">
Badge
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/breadcrumb/">
Breadcrumb
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/buttons/">
Buttons
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/button-group/">
Button group
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/card/">
Card
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/carousel/">
Carousel
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/collapse/">
Collapse
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/dropdowns/">
Dropdowns
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/forms/">
Forms
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/input-group/">
Input group
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/jumbotron/">
Jumbotron
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/list-group/">
List group
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/modal/">
Modal
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/navs/">
Navs
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/navbar/">
Navbar
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/pagination/">
Pagination
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/popovers/">
Popovers
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/progress/">
Progress
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/scrollspy/">
Scrollspy
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/tooltips/">
Tooltips
</a>
</li>
</ul>
</div>
<div class="bd-toc-item ">
<a class="bd-toc-link" href="/bootstrap-material-design/docs/4.0/utilities/borders/">
Utilities
@ -1126,7 +1126,7 @@
<div class="bd-toc-item ">
<a class="bd-toc-link" href="/bootstrap-material-design/docs/4.0/extend/icons/">
<a class="bd-toc-link" href="/bootstrap-material-design/docs/4.0/extend/approach/">
Extend
</a>
@ -1137,6 +1137,19 @@
<li class="">
<a href="/bootstrap-material-design/docs/4.0/extend/approach/">
Approach
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/extend/icons/">
Icons
@ -1165,6 +1178,75 @@
</ul>
</div>
<div class="bd-toc-item ">
<a class="bd-toc-link" href="/bootstrap-material-design/docs/4.0/about/overview/">
About
</a>
<ul class="nav bd-sidenav">
<li class="">
<a href="/bootstrap-material-design/docs/4.0/about/overview/">
Overview
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/about/brand/">
Brand
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/about/license/">
License
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/about/translations/">
Translations
</a>
</li>
</ul>
</div>
</nav>
</div>
@ -1346,28 +1428,20 @@
<nav aria-label="...">
<ul class="pagination pagination-lg">
<li class="page-item disabled">
<a class="page-link" href="#" tabindex="-1">Previous</a>
<a class="page-link" href="#" tabindex="-1">1</a>
</li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item">
<a class="page-link" href="#">Next</a>
</li>
</ul>
</nav>
</div>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;nav</span> <span class="na">aria-label=</span><span class="s">"..."</span><span class="nt">&gt;</span>
<span class="nt">&lt;ul</span> <span class="na">class=</span><span class="s">"pagination pagination-lg"</span><span class="nt">&gt;</span>
<span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"page-item disabled"</span><span class="nt">&gt;</span>
<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"page-link"</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">tabindex=</span><span class="s">"-1"</span><span class="nt">&gt;</span>Previous<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"page-link"</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">tabindex=</span><span class="s">"-1"</span><span class="nt">&gt;</span>1<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;/li&gt;</span>
<span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"page-item"</span><span class="nt">&gt;&lt;a</span> <span class="na">class=</span><span class="s">"page-link"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>1<span class="nt">&lt;/a&gt;&lt;/li&gt;</span>
<span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"page-item"</span><span class="nt">&gt;&lt;a</span> <span class="na">class=</span><span class="s">"page-link"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>2<span class="nt">&lt;/a&gt;&lt;/li&gt;</span>
<span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"page-item"</span><span class="nt">&gt;&lt;a</span> <span class="na">class=</span><span class="s">"page-link"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>3<span class="nt">&lt;/a&gt;&lt;/li&gt;</span>
<span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"page-item"</span><span class="nt">&gt;</span>
<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"page-link"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>Next<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;/li&gt;</span>
<span class="nt">&lt;/ul&gt;</span>
<span class="nt">&lt;/nav&gt;</span></code></pre></div>
@ -1375,28 +1449,20 @@
<nav aria-label="...">
<ul class="pagination pagination-sm">
<li class="page-item disabled">
<a class="page-link" href="#" tabindex="-1">Previous</a>
<a class="page-link" href="#" tabindex="-1">1</a>
</li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item">
<a class="page-link" href="#">Next</a>
</li>
</ul>
</nav>
</div>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;nav</span> <span class="na">aria-label=</span><span class="s">"..."</span><span class="nt">&gt;</span>
<span class="nt">&lt;ul</span> <span class="na">class=</span><span class="s">"pagination pagination-sm"</span><span class="nt">&gt;</span>
<span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"page-item disabled"</span><span class="nt">&gt;</span>
<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"page-link"</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">tabindex=</span><span class="s">"-1"</span><span class="nt">&gt;</span>Previous<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"page-link"</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">tabindex=</span><span class="s">"-1"</span><span class="nt">&gt;</span>1<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;/li&gt;</span>
<span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"page-item"</span><span class="nt">&gt;&lt;a</span> <span class="na">class=</span><span class="s">"page-link"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>1<span class="nt">&lt;/a&gt;&lt;/li&gt;</span>
<span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"page-item"</span><span class="nt">&gt;&lt;a</span> <span class="na">class=</span><span class="s">"page-link"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>2<span class="nt">&lt;/a&gt;&lt;/li&gt;</span>
<span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"page-item"</span><span class="nt">&gt;&lt;a</span> <span class="na">class=</span><span class="s">"page-link"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>3<span class="nt">&lt;/a&gt;&lt;/li&gt;</span>
<span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"page-item"</span><span class="nt">&gt;</span>
<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"page-link"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>Next<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;/li&gt;</span>
<span class="nt">&lt;/ul&gt;</span>
<span class="nt">&lt;/nav&gt;</span></code></pre></div>

764
docs/4.0/components/popovers/index.html
View File

@ -230,8 +230,8 @@
<li class="">
<a href="/bootstrap-material-design/docs/4.0/getting-started/options/">
Options
<a href="/bootstrap-material-design/docs/4.0/getting-started/theming/">
Theming
</a>
@ -450,296 +450,6 @@
<div class="bd-toc-item active">
<a class="bd-toc-link" href="/bootstrap-material-design/docs/4.0/components/alerts/">
Components
</a>
<ul class="nav bd-sidenav">
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/alerts/">
Alerts
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/badge/">
Badge
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/breadcrumb/">
Breadcrumb
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/buttons/">
Buttons
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/button-group/">
Button group
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/card/">
Card
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/carousel/">
Carousel
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/collapse/">
Collapse
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/dropdowns/">
Dropdowns
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/forms/">
Forms
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/input-group/">
Input group
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/jumbotron/">
Jumbotron
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/list-group/">
List group
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/modal/">
Modal
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/navs/">
Navs
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/navbar/">
Navbar
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/pagination/">
Pagination
</a>
</li>
<li class="active bd-sidenav-active">
<a href="/bootstrap-material-design/docs/4.0/components/popovers/">
Popovers
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/progress/">
Progress
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/scrollspy/">
Scrollspy
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/tooltips/">
Tooltips
</a>
</li>
</ul>
</div>
<div class="bd-toc-item ">
<a class="bd-toc-link" href="/bootstrap-material-design/docs/4.0/material-design/buttons/">
Material Design
@ -900,6 +610,296 @@
<div class="bd-toc-item ">
<a class="bd-toc-link" href="/bootstrap-material-design/docs/4.0/bootstrap-components/alerts/">
Bootstrap Components
</a>
<ul class="nav bd-sidenav">
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/alerts/">
Alerts
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/badge/">
Badge
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/breadcrumb/">
Breadcrumb
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/buttons/">
Buttons
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/button-group/">
Button group
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/card/">
Card
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/carousel/">
Carousel
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/collapse/">
Collapse
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/dropdowns/">
Dropdowns
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/forms/">
Forms
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/input-group/">
Input group
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/jumbotron/">
Jumbotron
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/list-group/">
List group
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/modal/">
Modal
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/navs/">
Navs
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/navbar/">
Navbar
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/pagination/">
Pagination
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/popovers/">
Popovers
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/progress/">
Progress
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/scrollspy/">
Scrollspy
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/tooltips/">
Tooltips
</a>
</li>
</ul>
</div>
<div class="bd-toc-item ">
<a class="bd-toc-link" href="/bootstrap-material-design/docs/4.0/utilities/borders/">
Utilities
@ -1126,7 +1126,7 @@
<div class="bd-toc-item ">
<a class="bd-toc-link" href="/bootstrap-material-design/docs/4.0/extend/icons/">
<a class="bd-toc-link" href="/bootstrap-material-design/docs/4.0/extend/approach/">
Extend
</a>
@ -1137,6 +1137,19 @@
<li class="">
<a href="/bootstrap-material-design/docs/4.0/extend/approach/">
Approach
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/extend/icons/">
Icons
@ -1165,6 +1178,75 @@
</ul>
</div>
<div class="bd-toc-item ">
<a class="bd-toc-link" href="/bootstrap-material-design/docs/4.0/about/overview/">
About
</a>
<ul class="nav bd-sidenav">
<li class="">
<a href="/bootstrap-material-design/docs/4.0/about/overview/">
Overview
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/about/brand/">
Brand
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/about/license/">
License
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/about/translations/">
Translations
</a>
</li>
</ul>
</div>
</nav>
</div>
@ -1175,15 +1257,7 @@
<li class="toc-entry toc-h2"><a href="#overview">Overview</a></li>
<li class="toc-entry toc-h2"><a href="#example-enable-popovers-everywhere">Example: Enable popovers everywhere</a></li>
<li class="toc-entry toc-h2"><a href="#example-using-the-container-option">Example: Using the container option</a></li>
<li class="toc-entry toc-h2"><a href="#static-popover">Static popover</a>
<ul>
<li class="toc-entry toc-h3"><a href="#popover-top">Popover top</a></li>
<li class="toc-entry toc-h3"><a href="#popover-right">Popover right</a></li>
<li class="toc-entry toc-h3"><a href="#popover-bottom">Popover bottom</a></li>
<li class="toc-entry toc-h3"><a href="#popover-left">Popover left</a></li>
</ul>
</li>
<li class="toc-entry toc-h2"><a href="#live-demo">Live demo</a>
<li class="toc-entry toc-h2"><a href="#example">Example</a>
<ul>
<li class="toc-entry toc-h3"><a href="#four-directions">Four directions</a></li>
<li class="toc-entry toc-h3"><a href="#dismiss-on-next-click">Dismiss on next click</a>
@ -1191,6 +1265,7 @@
<li class="toc-entry toc-h4"><a href="#specific-markup-required-for-dismiss-on-next-click">Specific markup required for dismiss-on-next-click</a></li>
</ul>
</li>
<li class="toc-entry toc-h3"><a href="#disabled-elements">Disabled elements</a></li>
</ul>
</li>
<li class="toc-entry toc-h2"><a href="#usage">Usage</a>
@ -1231,19 +1306,19 @@
<p>Things to know when using the popover plugin:</p>
<ul>
<li>Popovers rely on the 3rd party library <a href="https://popper.js.org">Popper.js</a> for positioning. You must include <a href="https://unpkg.com/popper.js@1.12.6/dist/umd/popper.js">popper.min.js</a> before bootstrap.js in order for popovers to work!</li>
<li>Popovers rely on the 3rd party library <a href="https://popper.js.org/">Popper.js</a> for positioning. You must include <a href="https://unpkg.com/popper.js@1.12.6/dist/umd/popper.js">popper.min.js</a> before bootstrap.js or use <code class="highlighter-rouge">bootstrap.bundle.min.js</code> / <code class="highlighter-rouge">bootstrap.bundle.js</code> which contains Popper.js in order for popovers to work!</li>
<li>Popovers require the <a href="/bootstrap-material-design/docs/4.0/components/tooltips/">tooltip plugin</a> as a dependency.</li>
<li>If building our JS from source, it <a href="/bootstrap-material-design/docs/getting-started/javascript/#util">requires <code class="highlighter-rouge">util.js</code></a>.</li>
<li>If you’re building our JavaScript from source, it <a href="/bootstrap-material-design/docs/4.0/getting-started/javascript/#util">requires <code class="highlighter-rouge">util.js</code></a>.</li>
<li>Popovers are opt-in for performance reasons, so <strong>you must initialize them yourself</strong>.</li>
<li>Zero-length <code class="highlighter-rouge">title</code> and <code class="highlighter-rouge">content</code> values will never show a popover.</li>
<li>Specify <code class="highlighter-rouge">container: 'body'</code> to avoid rendering problems in more complex components (like our input groups, button groups, etc).</li>
<li>Triggering popovers on hidden elements will not work.</li>
<li>Popovers for <code class="highlighter-rouge">.disabled</code> or <code class="highlighter-rouge">disabled</code> elements must be triggered on a wrapper element.</li>
<li>When triggered from hyperlinks that span multiple lines, popovers will be centered. Use <code class="highlighter-rouge">white-space: nowrap;</code> on your <code class="highlighter-rouge">&lt;a&gt;</code>s to avoid this behavior.</li>
<li>When triggered from anchors that wrap across multiple lines, popovers will be centered between the anchors’ overall width. Use <code class="highlighter-rouge">white-space: nowrap;</code> on your <code class="highlighter-rouge">&lt;a&gt;</code>s to avoid this behavior.</li>
<li>Popovers must be hidden before their corresponding elements have been removed from the DOM.</li>
</ul>
<p>Got all that? Great, let’s see how they work with some examples.</p>
<p>Keep reading to see how popovers work with some examples.</p>
<h2 id="example-enable-popovers-everywhere">Example: Enable popovers everywhere</h2>
@ -1263,47 +1338,7 @@
<span class="p">})</span>
<span class="p">})</span></code></pre></figure>
<h2 id="static-popover">Static popover</h2>
<p>Four options are available: top, right, bottom, and left aligned.</p>
<div class="bd-example bd-example-popover-static">
<div class="popover bs-popover-top bs-popover-top-docs">
<div class="arrow"></div>
<h3 class="popover-header">Popover top</h3>
<div class="popover-body">
<p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
</div>
</div>
<div class="popover bs-popover-right bs-popover-right-docs">
<div class="arrow"></div>
<h3 class="popover-header">Popover right</h3>
<div class="popover-body">
<p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
</div>
</div>
<div class="popover bs-popover-bottom bs-popover-bottom-docs">
<div class="arrow"></div>
<h3 class="popover-header">Popover bottom</h3>
<div class="popover-body">
<p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
</div>
</div>
<div class="popover bs-popover-left bs-popover-left-docs">
<div class="arrow"></div>
<h3 class="popover-header">Popover left</h3>
<div class="popover-body">
<p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
</div>
</div>
<div class="clearfix"></div>
</div>
<h2 id="live-demo">Live demo</h2>
<h2 id="example">Example</h2>
<div class="bd-example" data-example-id="">
<button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>
@ -1312,6 +1347,8 @@
<h3 id="four-directions">Four directions</h3>
<p>Four options are available: top, right, bottom, and left aligned.</p>
<div class="bd-example popover-demo">
<div class="bd-example-popovers">
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
@ -1348,7 +1385,7 @@ sagittis lacus vel augue laoreet rutrum faucibus."</span><span class="nt">&gt;</
<h3 id="dismiss-on-next-click">Dismiss on next click</h3>
<p>Use the <code class="highlighter-rouge">focus</code> trigger to dismiss popovers on the next click that the user makes.</p>
<p>Use the <code class="highlighter-rouge">focus</code> trigger to dismiss popovers on the user’s next click of a different element than the toggle element.</p>
<div class="bd-callout bd-callout-danger">
<h4 id="specific-markup-required-for-dismiss-on-next-click">Specific markup required for dismiss-on-next-click</h4>
@ -1365,6 +1402,21 @@ sagittis lacus vel augue laoreet rutrum faucibus."</span><span class="nt">&gt;</
<span class="na">trigger</span><span class="p">:</span> <span class="s1">'focus'</span>
<span class="p">})</span></code></pre></figure>
<h3 id="disabled-elements">Disabled elements</h3>
<p>Elements with the <code class="highlighter-rouge">disabled</code> attribute aren’t interactive, meaning users cannot hover or click them to trigger a popover (or tooltip). As a workaround, you’ll want to trigger the popover from a wrapper <code class="highlighter-rouge">&lt;div&gt;</code> or <code class="highlighter-rouge">&lt;span&gt;</code> and override the <code class="highlighter-rouge">pointer-events</code> on the disabled element.</p>
<p>For disabled popover triggers, you may also prefer <code class="highlighter-rouge">data-trigger="hover"</code> so that the popover appears as immediate visual feedback to your users as they may not expect to <em>click</em> on a disabled element.</p>
<div class="bd-example" data-example-id="">
<span class="d-inline-block" data-toggle="popover" data-content="Disabled popover">
<button class="btn btn-primary" style="pointer-events: none;" type="button" disabled="">Disabled button</button>
</span>
</div>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"d-inline-block"</span> <span class="na">data-toggle=</span><span class="s">"popover"</span> <span class="na">data-content=</span><span class="s">"Disabled popover"</span><span class="nt">&gt;</span>
<span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span> <span class="na">style=</span><span class="s">"pointer-events: none;"</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">disabled</span><span class="nt">&gt;</span>Disabled button<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;/span&gt;</span></code></pre></div>
<h2 id="usage">Usage</h2>
<p>Enable popovers via JavaScript:</p>
@ -1375,7 +1427,7 @@ sagittis lacus vel augue laoreet rutrum faucibus."</span><span class="nt">&gt;</
<p>Options can be passed via data attributes or JavaScript. For data attributes, append the option name to <code class="highlighter-rouge">data-</code>, as in <code class="highlighter-rouge">data-animation=""</code>.</p>
<table class="table table-bordered table-striped table-responsive">
<table class="table table-bordered table-striped">
<thead>
<tr>
<th style="width: 100px;">Name</th>
@ -1393,7 +1445,7 @@ sagittis lacus vel augue laoreet rutrum faucibus."</span><span class="nt">&gt;</
</tr>
<tr>
<td>container</td>
<td>string | false</td>
<td>string | element | false</td>
<td>false</td>
<td>
<p>Appends the popover to a specific element. Example: <code>container: 'body'</code>. This option is particularly useful in that it allows you to position the popover in the flow of the document near the triggering element - which will prevent the popover from floating away from the triggering element during a window resize.</p>
@ -1435,7 +1487,7 @@ sagittis lacus vel augue laoreet rutrum faucibus."</span><span class="nt">&gt;</
</tr>
<tr>
<td>selector</td>
<td>string</td>
<td>string | false</td>
<td>false</td>
<td>If a selector is provided, popover objects will be delegated to the specified targets. In practice, this is used to enable dynamic HTML content to have popovers added. See <a href="https://github.com/twbs/bootstrap/issues/4215">this</a> and <a href="https://jsbin.com/zopod/1/edit">an informative example</a>.</td>
</tr>
@ -1479,6 +1531,12 @@ sagittis lacus vel augue laoreet rutrum faucibus."</span><span class="nt">&gt;</
<td>Allow to specify which position Popper will use on fallback. For more information refer to
Popper.js's <a href="https://popper.js.org/popper-documentation.html#modifiers..flip.behavior">behavior docs</a></td>
</tr>
<tr>
<td>boundary</td>
<td>string | element</td>
<td>'scrollParent'</td>
<td>Overflow constraint boundary of the popover. Accepts the values of <code>'viewport'</code>, <code>'window'</code>, <code>'scrollParent'</code>, or an HTMLElement reference (JavaScript only). For more information refer to Popper.js's <a href="https://popper.js.org/popper-documentation.html#modifiers..preventOverflow.boundariesElement">preventOverflow docs</a>.</td>
</tr>
</tbody>
</table>
@ -1552,7 +1610,7 @@ sagittis lacus vel augue laoreet rutrum faucibus."</span><span class="nt">&gt;</
<h3 id="events">Events</h3>
<table class="table table-bordered table-striped table-responsive">
<table class="table table-bordered table-striped">
<thead>
<tr>
<th style="width: 150px;">Event Type</th>
@ -1578,7 +1636,7 @@ sagittis lacus vel augue laoreet rutrum faucibus."</span><span class="nt">&gt;</
</tr>
<tr>
<td>inserted.bs.popover</td>
<td>This event is fired after the <code>show.bs.popover</code> event when the tooltip template has been added to the DOM.</td>
<td>This event is fired after the <code>show.bs.popover</code> event when the popover template has been added to the DOM.</td>
</tr>
</tbody>
</table>

670
docs/4.0/components/progress/index.html
View File

@ -230,8 +230,8 @@
<li class="">
<a href="/bootstrap-material-design/docs/4.0/getting-started/options/">
Options
<a href="/bootstrap-material-design/docs/4.0/getting-started/theming/">
Theming
</a>
@ -450,296 +450,6 @@
<div class="bd-toc-item active">
<a class="bd-toc-link" href="/bootstrap-material-design/docs/4.0/components/alerts/">
Components
</a>
<ul class="nav bd-sidenav">
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/alerts/">
Alerts
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/badge/">
Badge
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/breadcrumb/">
Breadcrumb
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/buttons/">
Buttons
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/button-group/">
Button group
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/card/">
Card
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/carousel/">
Carousel
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/collapse/">
Collapse
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/dropdowns/">
Dropdowns
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/forms/">
Forms
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/input-group/">
Input group
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/jumbotron/">
Jumbotron
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/list-group/">
List group
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/modal/">
Modal
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/navs/">
Navs
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/navbar/">
Navbar
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/pagination/">
Pagination
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/popovers/">
Popovers
</a>
</li>
<li class="active bd-sidenav-active">
<a href="/bootstrap-material-design/docs/4.0/components/progress/">
Progress
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/scrollspy/">
Scrollspy
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/tooltips/">
Tooltips
</a>
</li>
</ul>
</div>
<div class="bd-toc-item ">
<a class="bd-toc-link" href="/bootstrap-material-design/docs/4.0/material-design/buttons/">
Material Design
@ -900,6 +610,296 @@
<div class="bd-toc-item ">
<a class="bd-toc-link" href="/bootstrap-material-design/docs/4.0/bootstrap-components/alerts/">
Bootstrap Components
</a>
<ul class="nav bd-sidenav">
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/alerts/">
Alerts
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/badge/">
Badge
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/breadcrumb/">
Breadcrumb
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/buttons/">
Buttons
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/button-group/">
Button group
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/card/">
Card
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/carousel/">
Carousel
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/collapse/">
Collapse
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/dropdowns/">
Dropdowns
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/forms/">
Forms
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/input-group/">
Input group
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/jumbotron/">
Jumbotron
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/list-group/">
List group
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/modal/">
Modal
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/navs/">
Navs
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/navbar/">
Navbar
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/pagination/">
Pagination
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/popovers/">
Popovers
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/progress/">
Progress
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/scrollspy/">
Scrollspy
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/tooltips/">
Tooltips
</a>
</li>
</ul>
</div>
<div class="bd-toc-item ">
<a class="bd-toc-link" href="/bootstrap-material-design/docs/4.0/utilities/borders/">
Utilities
@ -1126,7 +1126,7 @@
<div class="bd-toc-item ">
<a class="bd-toc-link" href="/bootstrap-material-design/docs/4.0/extend/icons/">
<a class="bd-toc-link" href="/bootstrap-material-design/docs/4.0/extend/approach/">
Extend
</a>
@ -1137,6 +1137,19 @@
<li class="">
<a href="/bootstrap-material-design/docs/4.0/extend/approach/">
Approach
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/extend/icons/">
Icons
@ -1165,6 +1178,75 @@
</ul>
</div>
<div class="bd-toc-item ">
<a class="bd-toc-link" href="/bootstrap-material-design/docs/4.0/about/overview/">
About
</a>
<ul class="nav bd-sidenav">
<li class="">
<a href="/bootstrap-material-design/docs/4.0/about/overview/">
Overview
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/about/brand/">
Brand
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/about/license/">
License
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/about/translations/">
Translations
</a>
</li>
</ul>
</div>
</nav>
</div>
@ -1366,8 +1448,6 @@
<p>The striped gradient can also be animated. Add <code class="highlighter-rouge">.progress-bar-animated</code> to <code class="highlighter-rouge">.progress-bar</code> to animate the stripes right to left via CSS3 animations.</p>
<p><strong>Animated progress bars don’t work in Opera 12</strong>—as they don’t support CSS3 animations.</p>
<div class="bd-example">
<div class="progress">
<div class="progress-bar progress-bar-striped" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%"></div>

685
docs/4.0/components/scrollspy/index.html
View File

@ -230,8 +230,8 @@
<li class="">
<a href="/bootstrap-material-design/docs/4.0/getting-started/options/">
Options
<a href="/bootstrap-material-design/docs/4.0/getting-started/theming/">
Theming
</a>
@ -450,296 +450,6 @@
<div class="bd-toc-item active">
<a class="bd-toc-link" href="/bootstrap-material-design/docs/4.0/components/alerts/">
Components
</a>
<ul class="nav bd-sidenav">
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/alerts/">
Alerts
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/badge/">
Badge
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/breadcrumb/">
Breadcrumb
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/buttons/">
Buttons
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/button-group/">
Button group
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/card/">
Card
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/carousel/">
Carousel
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/collapse/">
Collapse
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/dropdowns/">
Dropdowns
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/forms/">
Forms
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/input-group/">
Input group
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/jumbotron/">
Jumbotron
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/list-group/">
List group
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/modal/">
Modal
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/navs/">
Navs
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/navbar/">
Navbar
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/pagination/">
Pagination
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/popovers/">
Popovers
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/progress/">
Progress
</a>
</li>
<li class="active bd-sidenav-active">
<a href="/bootstrap-material-design/docs/4.0/components/scrollspy/">
Scrollspy
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/tooltips/">
Tooltips
</a>
</li>
</ul>
</div>
<div class="bd-toc-item ">
<a class="bd-toc-link" href="/bootstrap-material-design/docs/4.0/material-design/buttons/">
Material Design
@ -900,6 +610,296 @@
<div class="bd-toc-item ">
<a class="bd-toc-link" href="/bootstrap-material-design/docs/4.0/bootstrap-components/alerts/">
Bootstrap Components
</a>
<ul class="nav bd-sidenav">
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/alerts/">
Alerts
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/badge/">
Badge
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/breadcrumb/">
Breadcrumb
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/buttons/">
Buttons
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/button-group/">
Button group
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/card/">
Card
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/carousel/">
Carousel
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/collapse/">
Collapse
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/dropdowns/">
Dropdowns
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/forms/">
Forms
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/input-group/">
Input group
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/jumbotron/">
Jumbotron
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/list-group/">
List group
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/modal/">
Modal
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/navs/">
Navs
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/navbar/">
Navbar
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/pagination/">
Pagination
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/popovers/">
Popovers
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/progress/">
Progress
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/scrollspy/">
Scrollspy
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/tooltips/">
Tooltips
</a>
</li>
</ul>
</div>
<div class="bd-toc-item ">
<a class="bd-toc-link" href="/bootstrap-material-design/docs/4.0/utilities/borders/">
Utilities
@ -1126,7 +1126,7 @@
<div class="bd-toc-item ">
<a class="bd-toc-link" href="/bootstrap-material-design/docs/4.0/extend/icons/">
<a class="bd-toc-link" href="/bootstrap-material-design/docs/4.0/extend/approach/">
Extend
</a>
@ -1137,6 +1137,19 @@
<li class="">
<a href="/bootstrap-material-design/docs/4.0/extend/approach/">
Approach
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/extend/icons/">
Icons
@ -1165,6 +1178,75 @@
</ul>
</div>
<div class="bd-toc-item ">
<a class="bd-toc-link" href="/bootstrap-material-design/docs/4.0/about/overview/">
About
</a>
<ul class="nav bd-sidenav">
<li class="">
<a href="/bootstrap-material-design/docs/4.0/about/overview/">
Overview
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/about/brand/">
Brand
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/about/license/">
License
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/about/translations/">
Translations
</a>
</li>
</ul>
</div>
</nav>
</div>
@ -1225,6 +1307,7 @@
<li class="toc-entry toc-h3"><a href="#methods">Methods</a>
<ul>
<li class="toc-entry toc-h4"><a href="#scrollspyrefresh">.scrollspy('refresh')</a></li>
<li class="toc-entry toc-h4"><a href="#scrollspydispose">.scrollspy('dispose')</a></li>
</ul>
</li>
<li class="toc-entry toc-h3"><a href="#options">Options</a></li>
@ -1245,8 +1328,8 @@
<p>Scrollspy has a few requirements to function properly:</p>
<ul>
<li>If building our JS from source, it <a href="/bootstrap-material-design/docs/getting-started/javascript/#util">requires <code class="highlighter-rouge">util.js</code></a>.</li>
<li>It must to be used on a Bootstrap <a href="/bootstrap-material-design/docs/4.0/components/navs/">nav component</a> or <a href="/bootstrap-material-design/docs/4.0/components/list-group/">list group</a>.</li>
<li>If you’re building our JavaScript from source, it <a href="/bootstrap-material-design/docs/4.0/getting-started/javascript/#util">requires <code class="highlighter-rouge">util.js</code></a>.</li>
<li>It must be used on a Bootstrap <a href="/bootstrap-material-design/docs/4.0/components/navs/">nav component</a> or <a href="/bootstrap-material-design/docs/4.0/components/list-group/">list group</a>.</li>
<li>Scrollspy requires <code class="highlighter-rouge">position: relative;</code> on the element you’re spying on, usually the <code class="highlighter-rouge">&lt;body&gt;</code>.</li>
<li>When spying on elements other than the <code class="highlighter-rouge">&lt;body&gt;</code>, be sure to have a <code class="highlighter-rouge">height</code> set and <code class="highlighter-rouge">overflow-y: scroll;</code> applied.</li>
<li>Anchors (<code class="highlighter-rouge">&lt;a&gt;</code>) are required and must point to an element with that <code class="highlighter-rouge">id</code>.</li>
@ -1501,11 +1584,15 @@
<span class="kd">var</span> <span class="nx">$spy</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="k">this</span><span class="p">).</span><span class="nx">scrollspy</span><span class="p">(</span><span class="s1">'refresh'</span><span class="p">)</span>
<span class="p">})</span></code></pre></figure>
<h4 id="scrollspydispose"><code class="highlighter-rouge">.scrollspy('dispose')</code></h4>
<p>Destroys an element’s scrollspy.</p>
<h3 id="options">Options</h3>
<p>Options can be passed via data attributes or JavaScript. For data attributes, append the option name to <code class="highlighter-rouge">data-</code>, as in <code class="highlighter-rouge">data-offset=""</code>.</p>
<table class="table table-bordered table-striped table-responsive">
<table class="table table-bordered table-striped">
<thead>
<tr>
<th style="width: 100px;">Name</th>
@ -1526,7 +1613,7 @@
<h3 id="events">Events</h3>
<table class="table table-bordered table-striped table-responsive">
<table class="table table-bordered table-striped">
<thead>
<tr>
<th style="width: 150px;">Event Type</th>
@ -1536,12 +1623,12 @@
<tbody>
<tr>
<td>activate.bs.scrollspy</td>
<td>This event fires whenever a new item becomes activated by the scrollspy.</td>
<td>This event fires on the scroll element whenever a new item becomes activated by the scrollspy.</td>
</tr>
</tbody>
</table>
<figure class="highlight"><pre><code class="language-js" data-lang="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'#myScrollspy'</span><span class="p">).</span><span class="nx">on</span><span class="p">(</span><span class="s1">'activate.bs.scrollspy'</span><span class="p">,</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
<figure class="highlight"><pre><code class="language-js" data-lang="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'[data-spy="scroll"]'</span><span class="p">).</span><span class="nx">on</span><span class="p">(</span><span class="s1">'activate.bs.scrollspy'</span><span class="p">,</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
<span class="c1">// do something…</span>
<span class="p">})</span></code></pre></figure>

759
docs/4.0/components/tooltips/index.html
View File

@ -230,8 +230,8 @@
<li class="">
<a href="/bootstrap-material-design/docs/4.0/getting-started/options/">
Options
<a href="/bootstrap-material-design/docs/4.0/getting-started/theming/">
Theming
</a>
@ -450,296 +450,6 @@
<div class="bd-toc-item active">
<a class="bd-toc-link" href="/bootstrap-material-design/docs/4.0/components/alerts/">
Components
</a>
<ul class="nav bd-sidenav">
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/alerts/">
Alerts
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/badge/">
Badge
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/breadcrumb/">
Breadcrumb
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/buttons/">
Buttons
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/button-group/">
Button group
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/card/">
Card
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/carousel/">
Carousel
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/collapse/">
Collapse
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/dropdowns/">
Dropdowns
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/forms/">
Forms
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/input-group/">
Input group
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/jumbotron/">
Jumbotron
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/list-group/">
List group
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/modal/">
Modal
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/navs/">
Navs
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/navbar/">
Navbar
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/pagination/">
Pagination
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/popovers/">
Popovers
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/progress/">
Progress
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/scrollspy/">
Scrollspy
</a>
</li>
<li class="active bd-sidenav-active">
<a href="/bootstrap-material-design/docs/4.0/components/tooltips/">
Tooltips
</a>
</li>
</ul>
</div>
<div class="bd-toc-item ">
<a class="bd-toc-link" href="/bootstrap-material-design/docs/4.0/material-design/buttons/">
Material Design
@ -900,6 +610,296 @@
<div class="bd-toc-item ">
<a class="bd-toc-link" href="/bootstrap-material-design/docs/4.0/bootstrap-components/alerts/">
Bootstrap Components
</a>
<ul class="nav bd-sidenav">
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/alerts/">
Alerts
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/badge/">
Badge
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/breadcrumb/">
Breadcrumb
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/buttons/">
Buttons
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/button-group/">
Button group
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/card/">
Card
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/carousel/">
Carousel
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/collapse/">
Collapse
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/dropdowns/">
Dropdowns
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/forms/">
Forms
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/input-group/">
Input group
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/jumbotron/">
Jumbotron
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/list-group/">
List group
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/modal/">
Modal
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/navs/">
Navs
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/navbar/">
Navbar
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/pagination/">
Pagination
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/popovers/">
Popovers
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/progress/">
Progress
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/scrollspy/">
Scrollspy
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/tooltips/">
Tooltips
</a>
</li>
</ul>
</div>
<div class="bd-toc-item ">
<a class="bd-toc-link" href="/bootstrap-material-design/docs/4.0/utilities/borders/">
Utilities
@ -1126,7 +1126,7 @@
<div class="bd-toc-item ">
<a class="bd-toc-link" href="/bootstrap-material-design/docs/4.0/extend/icons/">
<a class="bd-toc-link" href="/bootstrap-material-design/docs/4.0/extend/approach/">
Extend
</a>
@ -1137,6 +1137,19 @@
<li class="">
<a href="/bootstrap-material-design/docs/4.0/extend/approach/">
Approach
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/extend/icons/">
Icons
@ -1165,6 +1178,75 @@
</ul>
</div>
<div class="bd-toc-item ">
<a class="bd-toc-link" href="/bootstrap-material-design/docs/4.0/about/overview/">
About
</a>
<ul class="nav bd-sidenav">
<li class="">
<a href="/bootstrap-material-design/docs/4.0/about/overview/">
Overview
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/about/brand/">
Brand
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/about/license/">
License
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/about/translations/">
Translations
</a>
</li>
</ul>
</div>
</nav>
</div>
@ -1174,19 +1256,17 @@
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#overview">Overview</a></li>
<li class="toc-entry toc-h2"><a href="#example-enable-tooltips-everywhere">Example: Enable tooltips everywhere</a></li>
<li class="toc-entry toc-h2"><a href="#examples">Examples</a>
<ul>
<li class="toc-entry toc-h3"><a href="#static-demo">Static demo</a></li>
<li class="toc-entry toc-h3"><a href="#interactive-demo">Interactive demo</a></li>
</ul>
</li>
<li class="toc-entry toc-h2"><a href="#examples">Examples</a></li>
<li class="toc-entry toc-h2"><a href="#usage">Usage</a>
<ul>
<li class="toc-entry toc-h3"><a href="#markup">Markup</a>
<ul>
<li class="toc-entry toc-h4"><a href="#making-tooltips-work-for-keyboard-and-assistive-technology-users">Making tooltips work for keyboard and assistive technology users</a></li>
<ul>
<li class="toc-entry toc-h5"><a href="#making-tooltips-work-for-keyboard-and-assistive-technology-users">Making tooltips work for keyboard and assistive technology users</a></li>
</ul>
</ul>
</li>
<li class="toc-entry toc-h3"><a href="#disabled-elements">Disabled elements</a></li>
<li class="toc-entry toc-h3"><a href="#options">Options</a>
<ul>
<li class="toc-entry toc-h4"><a href="#data-attributes-for-individual-tooltips">Data attributes for individual tooltips</a></li>
@ -1223,8 +1303,8 @@
<p>Things to know when using the tooltip plugin:</p>
<ul>
<li>Tooltips rely on the 3rd party library <a href="https://popper.js.org">Popper.js</a> for positioning. You must include <a href="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.10.1/umd/popper.min.js">popper.min.js</a> before bootstrap.js in order for tooltips to work!</li>
<li>If building our JS from source, it <a href="/bootstrap-material-design/docs/getting-started/javascript/#util">requires <code class="highlighter-rouge">util.js</code></a>.</li>
<li>Tooltips rely on the 3rd party library <a href="https://popper.js.org/">Popper.js</a> for positioning. You must include <a href="https://unpkg.com/popper.js@1.12.6/dist/umd/popper.js">popper.min.js</a> before bootstrap.js or use <code class="highlighter-rouge">bootstrap.bundle.min.js</code> / <code class="highlighter-rouge">bootstrap.bundle.js</code> which contains Popper.js in order for tooltips to work!</li>
<li>If you’re building our JavaScript from source, it <a href="/bootstrap-material-design/docs/4.0/getting-started/javascript/#util">requires <code class="highlighter-rouge">util.js</code></a>.</li>
<li>Tooltips are opt-in for performance reasons, so <strong>you must initialize them yourself</strong>.</li>
<li>Tooltips with zero-length titles are never displayed.</li>
<li>Specify <code class="highlighter-rouge">container: 'body'</code> to avoid rendering problems in more complex components (like our input groups, button groups, etc).</li>
@ -1253,40 +1333,7 @@
</p>
</div>
<h3 id="static-demo">Static demo</h3>
<p>Four options are available: top, right, bottom, and left aligned.</p>
<div class="bd-example bd-example-tooltip-static">
<div class="tooltip bs-tooltip-top bs-tooltip-top-docs" role="tooltip">
<div class="arrow"></div>
<div class="tooltip-inner">
Tooltip on the top
</div>
</div>
<div class="tooltip bs-tooltip-right bs-tooltip-right-docs" role="tooltip">
<div class="arrow"></div>
<div class="tooltip-inner">
Tooltip on the right
</div>
</div>
<div class="tooltip bs-tooltip-bottom bs-tooltip-bottom-docs" role="tooltip">
<div class="arrow"></div>
<div class="tooltip-inner">
Tooltip on the bottom
</div>
</div>
<div class="tooltip bs-tooltip-left bs-tooltip-left-docs" role="tooltip">
<div class="arrow"></div>
<div class="tooltip-inner">
Tooltip on the left
</div>
</div>
</div>
<h3 id="interactive-demo">Interactive demo</h3>
<p>Hover over the buttons below to see their tooltips.</p>
<p>Hover over the buttons below to see the four tooltips directions: top, right, bottom, and left.</p>
<div class="bd-example tooltip-demo">
<div class="bd-example-tooltips">
@ -1330,9 +1377,11 @@
<p>The required markup for a tooltip is only a <code class="highlighter-rouge">data</code> attribute and <code class="highlighter-rouge">title</code> on the HTML element you wish to have a tooltip. The generated markup of a tooltip is rather simple, though it does require a position (by default, set to <code class="highlighter-rouge">top</code> by the plugin).</p>
<div class="bd-callout bd-callout-warning">
<h4 id="making-tooltips-work-for-keyboard-and-assistive-technology-users">Making tooltips work for keyboard and assistive technology users</h4>
<h5 id="making-tooltips-work-for-keyboard-and-assistive-technology-users">Making tooltips work for keyboard and assistive technology users</h5>
<p>You should only add tooltips to HTML elements that are traditionally keyboard-focusable and interactive (such as links or form controls). Although arbitrary HTML elements (such as <code class="highlighter-rouge">&lt;span&gt;</code>s) can be made focusable by adding the <code class="highlighter-rouge">tabindex="0"</code> attribute, this will add potentially annoying and confusing tab stops on non-interactive elements for keyboard users. In addition, most assistive technologies currently do not announce the tooltip in this situation.</p>
<p>Additionally, do not rely solely on <code class="highlighter-rouge">hover</code> as the trigger for your tooltip, as this will make your tooltips impossible to trigger for keyboard users.</p>
</div>
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="c">&lt;!-- HTML to write --&gt;</span>
@ -1346,11 +1395,27 @@
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre></figure>
<h3 id="disabled-elements">Disabled elements</h3>
<p>Elements with the <code class="highlighter-rouge">disabled</code> attribute aren’t interactive, meaning users cannot focus, hover, or click them to trigger a tooltip (or popover). As a workaround, you’ll want to trigger the tooltip from a wrapper <code class="highlighter-rouge">&lt;div&gt;</code> or <code class="highlighter-rouge">&lt;span&gt;</code>, ideally made keyboard-focusable using <code class="highlighter-rouge">tabindex="0"</code>, and override the <code class="highlighter-rouge">pointer-events</code> on the disabled element.</p>
<div class="tooltip-demo">
<div class="bd-example" data-example-id="">
<span class="d-inline-block" tabindex="0" data-toggle="tooltip" title="Disabled tooltip">
<button class="btn btn-primary" style="pointer-events: none;" type="button" disabled="">Disabled button</button>
</span>
</div><div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"d-inline-block"</span> <span class="na">tabindex=</span><span class="s">"0"</span> <span class="na">data-toggle=</span><span class="s">"tooltip"</span> <span class="na">title=</span><span class="s">"Disabled tooltip"</span><span class="nt">&gt;</span>
<span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span> <span class="na">style=</span><span class="s">"pointer-events: none;"</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">disabled</span><span class="nt">&gt;</span>Disabled button<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;/span&gt;</span></code></pre></div>
</div>
<h3 id="options">Options</h3>
<p>Options can be passed via data attributes or JavaScript. For data attributes, append the option name to <code class="highlighter-rouge">data-</code>, as in <code class="highlighter-rouge">data-animation=""</code>.</p>
<table class="table table-bordered table-striped table-responsive">
<table class="table table-bordered table-striped">
<thead>
<tr>
<th style="width: 100px;">Name</th>
@ -1405,7 +1470,7 @@
</tr>
<tr>
<td>selector</td>
<td>string</td>
<td>string | false</td>
<td>false</td>
<td>If a selector is provided, tooltip objects will be delegated to the specified targets. In practice, this is used to enable dynamic HTML content to have popovers added. See <a href="https://github.com/twbs/bootstrap/issues/4215">this</a> and <a href="https://jsbin.com/zopod/1/edit">an informative example</a>.</td>
</tr>
@ -1417,7 +1482,7 @@
<p>Base HTML to use when creating the tooltip.</p>
<p>The tooltip's <code>title</code> will be injected into the <code>.tooltip-inner</code>.</p>
<p><code>.arrow</code> will become the tooltip's arrow.</p>
<p>The outermost wrapper element should have the <code>.tooltip</code> class.</p>
<p>The outermost wrapper element should have the <code>.tooltip</code> class and <code>role="tooltip"</code>.</p>
</td>
</tr>
<tr>
@ -1433,7 +1498,11 @@
<td>trigger</td>
<td>string</td>
<td>'hover focus'</td>
<td>How tooltip is triggered - click | hover | focus | manual. You may pass multiple triggers; separate them with a space. `manual` cannot be combined with any other trigger.</td>
<td>
<p>How tooltip is triggered - click | hover | focus | manual. You may pass multiple triggers; separate them with a space.</p>
<p><code>'manual'</code> indicates that the tooltip will be triggered programmatically via the <code>.tooltip('show')</code>, <code>.tooltip('hide')</code> and <code>.tooltip('toggle')</code> methods; this value cannot be combined with any other trigger.</p>
<p><code>'hover'</code> on its own will result in tooltips that cannot be triggered via the keyboard, and should only be used if alternative methods for conveying the same information for keyboard users is present.</p>
</td>
</tr>
<tr>
<td>offset</td>
@ -1448,6 +1517,12 @@
<td>Allow to specify which position Popper will use on fallback. For more information refer to
Popper.js's <a href="https://popper.js.org/popper-documentation.html#modifiers..flip.behavior">behavior docs</a></td>
</tr>
<tr>
<td>boundary</td>
<td>string | element</td>
<td>'scrollParent'</td>
<td>Overflow constraint boundary of the tooltip. Accepts the values of <code>'viewport'</code>, <code>'window'</code>, <code>'scrollParent'</code>, or an HTMLElement reference (JavaScript only). For more information refer to Popper.js's <a href="https://popper.js.org/popper-documentation.html#modifiers..preventOverflow.boundariesElement">preventOverflow docs</a>.</td>
</tr>
</tbody>
</table>
@ -1521,7 +1596,7 @@
<h3 id="events">Events</h3>
<table class="table table-bordered table-striped table-responsive">
<table class="table table-bordered table-striped">
<thead>
<tr>
<th style="width: 150px;">Event Type</th>

668
docs/4.0/content/code/index.html
View File

@ -230,8 +230,8 @@
<li class="">
<a href="/bootstrap-material-design/docs/4.0/getting-started/options/">
Options
<a href="/bootstrap-material-design/docs/4.0/getting-started/theming/">
Theming
</a>
@ -450,296 +450,6 @@
<div class="bd-toc-item ">
<a class="bd-toc-link" href="/bootstrap-material-design/docs/4.0/components/alerts/">
Components
</a>
<ul class="nav bd-sidenav">
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/alerts/">
Alerts
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/badge/">
Badge
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/breadcrumb/">
Breadcrumb
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/buttons/">
Buttons
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/button-group/">
Button group
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/card/">
Card
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/carousel/">
Carousel
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/collapse/">
Collapse
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/dropdowns/">
Dropdowns
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/forms/">
Forms
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/input-group/">
Input group
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/jumbotron/">
Jumbotron
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/list-group/">
List group
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/modal/">
Modal
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/navs/">
Navs
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/navbar/">
Navbar
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/pagination/">
Pagination
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/popovers/">
Popovers
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/progress/">
Progress
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/scrollspy/">
Scrollspy
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/tooltips/">
Tooltips
</a>
</li>
</ul>
</div>
<div class="bd-toc-item ">
<a class="bd-toc-link" href="/bootstrap-material-design/docs/4.0/material-design/buttons/">
Material Design
@ -900,6 +610,296 @@
<div class="bd-toc-item ">
<a class="bd-toc-link" href="/bootstrap-material-design/docs/4.0/bootstrap-components/alerts/">
Bootstrap Components
</a>
<ul class="nav bd-sidenav">
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/alerts/">
Alerts
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/badge/">
Badge
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/breadcrumb/">
Breadcrumb
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/buttons/">
Buttons
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/button-group/">
Button group
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/card/">
Card
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/carousel/">
Carousel
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/collapse/">
Collapse
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/dropdowns/">
Dropdowns
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/forms/">
Forms
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/input-group/">
Input group
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/jumbotron/">
Jumbotron
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/list-group/">
List group
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/modal/">
Modal
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/navs/">
Navs
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/navbar/">
Navbar
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/pagination/">
Pagination
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/popovers/">
Popovers
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/progress/">
Progress
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/scrollspy/">
Scrollspy
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/tooltips/">
Tooltips
</a>
</li>
</ul>
</div>
<div class="bd-toc-item ">
<a class="bd-toc-link" href="/bootstrap-material-design/docs/4.0/utilities/borders/">
Utilities
@ -1126,7 +1126,7 @@
<div class="bd-toc-item ">
<a class="bd-toc-link" href="/bootstrap-material-design/docs/4.0/extend/icons/">
<a class="bd-toc-link" href="/bootstrap-material-design/docs/4.0/extend/approach/">
Extend
</a>
@ -1137,6 +1137,19 @@
<li class="">
<a href="/bootstrap-material-design/docs/4.0/extend/approach/">
Approach
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/extend/icons/">
Icons
@ -1165,6 +1178,75 @@
</ul>
</div>
<div class="bd-toc-item ">
<a class="bd-toc-link" href="/bootstrap-material-design/docs/4.0/about/overview/">
About
</a>
<ul class="nav bd-sidenav">
<li class="">
<a href="/bootstrap-material-design/docs/4.0/about/overview/">
Overview
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/about/brand/">
Brand
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/about/license/">
License
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/about/translations/">
Translations
</a>
</li>
</ul>
</div>
</nav>
</div>

668
docs/4.0/content/figures/index.html
View File

@ -230,8 +230,8 @@
<li class="">
<a href="/bootstrap-material-design/docs/4.0/getting-started/options/">
Options
<a href="/bootstrap-material-design/docs/4.0/getting-started/theming/">
Theming
</a>
@ -450,296 +450,6 @@
<div class="bd-toc-item ">
<a class="bd-toc-link" href="/bootstrap-material-design/docs/4.0/components/alerts/">
Components
</a>
<ul class="nav bd-sidenav">
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/alerts/">
Alerts
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/badge/">
Badge
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/breadcrumb/">
Breadcrumb
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/buttons/">
Buttons
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/button-group/">
Button group
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/card/">
Card
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/carousel/">
Carousel
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/collapse/">
Collapse
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/dropdowns/">
Dropdowns
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/forms/">
Forms
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/input-group/">
Input group
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/jumbotron/">
Jumbotron
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/list-group/">
List group
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/modal/">
Modal
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/navs/">
Navs
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/navbar/">
Navbar
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/pagination/">
Pagination
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/popovers/">
Popovers
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/progress/">
Progress
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/scrollspy/">
Scrollspy
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/tooltips/">
Tooltips
</a>
</li>
</ul>
</div>
<div class="bd-toc-item ">
<a class="bd-toc-link" href="/bootstrap-material-design/docs/4.0/material-design/buttons/">
Material Design
@ -900,6 +610,296 @@
<div class="bd-toc-item ">
<a class="bd-toc-link" href="/bootstrap-material-design/docs/4.0/bootstrap-components/alerts/">
Bootstrap Components
</a>
<ul class="nav bd-sidenav">
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/alerts/">
Alerts
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/badge/">
Badge
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/breadcrumb/">
Breadcrumb
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/buttons/">
Buttons
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/button-group/">
Button group
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/card/">
Card
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/carousel/">
Carousel
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/collapse/">
Collapse
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/dropdowns/">
Dropdowns
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/forms/">
Forms
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/input-group/">
Input group
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/jumbotron/">
Jumbotron
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/list-group/">
List group
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/modal/">
Modal
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/navs/">
Navs
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/navbar/">
Navbar
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/pagination/">
Pagination
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/popovers/">
Popovers
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/progress/">
Progress
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/scrollspy/">
Scrollspy
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/tooltips/">
Tooltips
</a>
</li>
</ul>
</div>
<div class="bd-toc-item ">
<a class="bd-toc-link" href="/bootstrap-material-design/docs/4.0/utilities/borders/">
Utilities
@ -1126,7 +1126,7 @@
<div class="bd-toc-item ">
<a class="bd-toc-link" href="/bootstrap-material-design/docs/4.0/extend/icons/">
<a class="bd-toc-link" href="/bootstrap-material-design/docs/4.0/extend/approach/">
Extend
</a>
@ -1137,6 +1137,19 @@
<li class="">
<a href="/bootstrap-material-design/docs/4.0/extend/approach/">
Approach
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/extend/icons/">
Icons
@ -1165,6 +1178,75 @@
</ul>
</div>
<div class="bd-toc-item ">
<a class="bd-toc-link" href="/bootstrap-material-design/docs/4.0/about/overview/">
About
</a>
<ul class="nav bd-sidenav">
<li class="">
<a href="/bootstrap-material-design/docs/4.0/about/overview/">
Overview
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/about/brand/">
Brand
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/about/license/">
License
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/about/translations/">
Translations
</a>
</li>
</ul>
</div>
</nav>
</div>

686
docs/4.0/content/images/index.html
View File

@ -230,8 +230,8 @@
<li class="">
<a href="/bootstrap-material-design/docs/4.0/getting-started/options/">
Options
<a href="/bootstrap-material-design/docs/4.0/getting-started/theming/">
Theming
</a>
@ -450,296 +450,6 @@
<div class="bd-toc-item ">
<a class="bd-toc-link" href="/bootstrap-material-design/docs/4.0/components/alerts/">
Components
</a>
<ul class="nav bd-sidenav">
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/alerts/">
Alerts
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/badge/">
Badge
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/breadcrumb/">
Breadcrumb
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/buttons/">
Buttons
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/button-group/">
Button group
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/card/">
Card
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/carousel/">
Carousel
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/collapse/">
Collapse
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/dropdowns/">
Dropdowns
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/forms/">
Forms
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/input-group/">
Input group
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/jumbotron/">
Jumbotron
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/list-group/">
List group
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/modal/">
Modal
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/navs/">
Navs
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/navbar/">
Navbar
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/pagination/">
Pagination
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/popovers/">
Popovers
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/progress/">
Progress
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/scrollspy/">
Scrollspy
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/tooltips/">
Tooltips
</a>
</li>
</ul>
</div>
<div class="bd-toc-item ">
<a class="bd-toc-link" href="/bootstrap-material-design/docs/4.0/material-design/buttons/">
Material Design
@ -900,6 +610,296 @@
<div class="bd-toc-item ">
<a class="bd-toc-link" href="/bootstrap-material-design/docs/4.0/bootstrap-components/alerts/">
Bootstrap Components
</a>
<ul class="nav bd-sidenav">
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/alerts/">
Alerts
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/badge/">
Badge
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/breadcrumb/">
Breadcrumb
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/buttons/">
Buttons
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/button-group/">
Button group
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/card/">
Card
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/carousel/">
Carousel
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/collapse/">
Collapse
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/dropdowns/">
Dropdowns
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/forms/">
Forms
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/input-group/">
Input group
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/jumbotron/">
Jumbotron
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/list-group/">
List group
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/modal/">
Modal
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/navs/">
Navs
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/navbar/">
Navbar
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/pagination/">
Pagination
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/popovers/">
Popovers
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/progress/">
Progress
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/scrollspy/">
Scrollspy
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/tooltips/">
Tooltips
</a>
</li>
</ul>
</div>
<div class="bd-toc-item ">
<a class="bd-toc-link" href="/bootstrap-material-design/docs/4.0/utilities/borders/">
Utilities
@ -1126,7 +1126,7 @@
<div class="bd-toc-item ">
<a class="bd-toc-link" href="/bootstrap-material-design/docs/4.0/extend/icons/">
<a class="bd-toc-link" href="/bootstrap-material-design/docs/4.0/extend/approach/">
Extend
</a>
@ -1137,6 +1137,19 @@
<li class="">
<a href="/bootstrap-material-design/docs/4.0/extend/approach/">
Approach
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/extend/icons/">
Icons
@ -1165,6 +1178,75 @@
</ul>
</div>
<div class="bd-toc-item ">
<a class="bd-toc-link" href="/bootstrap-material-design/docs/4.0/about/overview/">
About
</a>
<ul class="nav bd-sidenav">
<li class="">
<a href="/bootstrap-material-design/docs/4.0/about/overview/">
Overview
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/about/brand/">
Brand
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/about/license/">
License
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/about/translations/">
Translations
</a>
</li>
</ul>
</div>
</nav>
</div>
@ -1175,12 +1257,15 @@
<li class="toc-entry toc-h2"><a href="#responsive-images">Responsive images</a>
<ul>
<ul>
<li class="toc-entry toc-h4"><a href="#svg-images-and-ie-10">SVG images and IE 10</a></li>
<ul>
<li class="toc-entry toc-h5"><a href="#svg-images-and-ie-10">SVG images and IE 10</a></li>
</ul>
</ul>
</ul>
</li>
<li class="toc-entry toc-h2"><a href="#image-thumbnails">Image thumbnails</a></li>
<li class="toc-entry toc-h2"><a href="#aligning-images">Aligning images</a></li>
<li class="toc-entry toc-h2"><a href="#picture">Picture</a></li>
</ul>
</div>
@ -1201,7 +1286,7 @@
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;img</span> <span class="na">src=</span><span class="s">"..."</span> <span class="na">class=</span><span class="s">"img-fluid"</span> <span class="na">alt=</span><span class="s">"Responsive image"</span><span class="nt">&gt;</span></code></pre></figure>
<div class="bd-callout bd-callout-warning">
<h4 id="svg-images-and-ie-10">SVG images and IE 10</h4>
<h5 id="svg-images-and-ie-10">SVG images and IE 10</h5>
<p>In Internet Explorer 10, SVG images with <code class="highlighter-rouge">.img-fluid</code> are disproportionately sized. To fix this, add <code class="highlighter-rouge">width: 100% \9;</code> where necessary. This fix improperly sizes other image formats, so Bootstrap doesn’t apply it automatically.</p>
</div>
@ -1218,7 +1303,7 @@
<h2 id="aligning-images">Aligning images</h2>
<p>Align images with the <a href="/bootstrap-material-design/docs/4.0/utilities/utilities/float">helper float classes</a> or <a href="/bootstrap-material-design/docs/4.0/utilities/text/#text-alignment">text alignment classes</a>. <code class="highlighter-rouge">block</code>-level images can be centered using <a href="/bootstrap-material-design/docs/4.0/utilities/spacing/#horizontal-centering">the <code class="highlighter-rouge">.mx-auto</code> margin utility class</a>.</p>
<p>Align images with the <a href="/bootstrap-material-design/docs/4.0/utilities/float">helper float classes</a> or <a href="/bootstrap-material-design/docs/4.0/utilities/text/#text-alignment">text alignment classes</a>. <code class="highlighter-rouge">block</code>-level images can be centered using <a href="/bootstrap-material-design/docs/4.0/utilities/spacing/#horizontal-centering">the <code class="highlighter-rouge">.mx-auto</code> margin utility class</a>.</p>
<div class="bd-example bd-example-images">
<img data-src="holder.js/200x200" class="rounded float-left" alt="A generic square placeholder image with rounded corners" />
@ -1244,6 +1329,15 @@
<span class="nt">&lt;img</span> <span class="na">src=</span><span class="s">"..."</span> <span class="na">class=</span><span class="s">"rounded"</span> <span class="na">alt=</span><span class="s">"..."</span><span class="nt">&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre></figure>
<h2 id="picture">Picture</h2>
<p>If you are using the <code class="highlighter-rouge">&lt;picture&gt;</code> element to specify multiple <code class="highlighter-rouge">&lt;source&gt;</code> elements for a specific <code class="highlighter-rouge">&lt;img&gt;</code>, make sure to add the <code class="highlighter-rouge">.img-*</code> classes to the <code class="highlighter-rouge">&lt;img&gt;</code> and not to the <code class="highlighter-rouge">&lt;picture&gt;</code> tag.</p>
<figure class="highlight"><pre><code class="language-html" data-lang="html">​<span class="nt">&lt;picture&gt;</span>
<span class="nt">&lt;source</span> <span class="na">srcset=</span><span class="s">"..."</span> <span class="na">type=</span><span class="s">"image/svg+xml"</span><span class="nt">&gt;</span>
<span class="nt">&lt;img</span> <span class="na">src=</span><span class="s">"..."</span> <span class="na">class=</span><span class="s">"img-fluid img-thumbnail"</span> <span class="na">alt=</span><span class="s">"..."</span><span class="nt">&gt;</span>
<span class="nt">&lt;/picture&gt;</span></code></pre></figure>
</main>
</div>

750
docs/4.0/content/reboot/index.html
View File

@ -230,8 +230,8 @@
<li class="">
<a href="/bootstrap-material-design/docs/4.0/getting-started/options/">
Options
<a href="/bootstrap-material-design/docs/4.0/getting-started/theming/">
Theming
</a>
@ -450,296 +450,6 @@
<div class="bd-toc-item ">
<a class="bd-toc-link" href="/bootstrap-material-design/docs/4.0/components/alerts/">
Components
</a>
<ul class="nav bd-sidenav">
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/alerts/">
Alerts
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/badge/">
Badge
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/breadcrumb/">
Breadcrumb
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/buttons/">
Buttons
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/button-group/">
Button group
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/card/">
Card
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/carousel/">
Carousel
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/collapse/">
Collapse
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/dropdowns/">
Dropdowns
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/forms/">
Forms
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/input-group/">
Input group
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/jumbotron/">
Jumbotron
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/list-group/">
List group
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/modal/">
Modal
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/navs/">
Navs
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/navbar/">
Navbar
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/pagination/">
Pagination
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/popovers/">
Popovers
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/progress/">
Progress
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/scrollspy/">
Scrollspy
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/tooltips/">
Tooltips
</a>
</li>
</ul>
</div>
<div class="bd-toc-item ">
<a class="bd-toc-link" href="/bootstrap-material-design/docs/4.0/material-design/buttons/">
Material Design
@ -900,6 +610,296 @@
<div class="bd-toc-item ">
<a class="bd-toc-link" href="/bootstrap-material-design/docs/4.0/bootstrap-components/alerts/">
Bootstrap Components
</a>
<ul class="nav bd-sidenav">
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/alerts/">
Alerts
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/badge/">
Badge
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/breadcrumb/">
Breadcrumb
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/buttons/">
Buttons
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/button-group/">
Button group
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/card/">
Card
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/carousel/">
Carousel
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/collapse/">
Collapse
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/dropdowns/">
Dropdowns
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/forms/">
Forms
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/input-group/">
Input group
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/jumbotron/">
Jumbotron
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/list-group/">
List group
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/modal/">
Modal
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/navs/">
Navs
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/navbar/">
Navbar
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/pagination/">
Pagination
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/popovers/">
Popovers
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/progress/">
Progress
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/scrollspy/">
Scrollspy
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/tooltips/">
Tooltips
</a>
</li>
</ul>
</div>
<div class="bd-toc-item ">
<a class="bd-toc-link" href="/bootstrap-material-design/docs/4.0/utilities/borders/">
Utilities
@ -1126,7 +1126,7 @@
<div class="bd-toc-item ">
<a class="bd-toc-link" href="/bootstrap-material-design/docs/4.0/extend/icons/">
<a class="bd-toc-link" href="/bootstrap-material-design/docs/4.0/extend/approach/">
Extend
</a>
@ -1137,6 +1137,19 @@
<li class="">
<a href="/bootstrap-material-design/docs/4.0/extend/approach/">
Approach
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/extend/icons/">
Icons
@ -1165,6 +1178,75 @@
</ul>
</div>
<div class="bd-toc-item ">
<a class="bd-toc-link" href="/bootstrap-material-design/docs/4.0/about/overview/">
About
</a>
<ul class="nav bd-sidenav">
<li class="">
<a href="/bootstrap-material-design/docs/4.0/about/overview/">
Overview
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/about/brand/">
Brand
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/about/license/">
License
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/about/translations/">
Translations
</a>
</li>
</ul>
</div>
</nav>
</div>
@ -1185,16 +1267,18 @@
<li class="toc-entry toc-h3"><a href="#address">Address</a></li>
<li class="toc-entry toc-h3"><a href="#blockquote">Blockquote</a></li>
<li class="toc-entry toc-h3"><a href="#inline-elements">Inline elements</a></li>
<li class="toc-entry toc-h3"><a href="#summary">Summary</a></li>
</ul>
</li>
<li class="toc-entry toc-h2"><a href="#html5-hidden-attribute">HTML5 [hidden] attribute</a>
<ul>
<ul>
<li class="toc-entry toc-h4"><a href="#jquery-incompatibility">jQuery incompatibility</a></li>
<ul>
<li class="toc-entry toc-h5"><a href="#jquery-incompatibility">jQuery incompatibility</a></li>
</ul>
</ul>
</ul>
</li>
<li class="toc-entry toc-h2"><a href="#click-delay-optimization-for-touch">Click delay optimization for touch</a></li>
</ul>
</div>
@ -1222,7 +1306,7 @@
<p>The <code class="highlighter-rouge"><span class="nt">&lt;html&gt;</span></code> and <code class="highlighter-rouge">&lt;body&gt;</code> elements are updated to provide better page-wide defaults. More specifically:</p>
<ul>
<li>The <code class="highlighter-rouge">box-sizing</code> is globally set on every element—including <code class="highlighter-rouge">*:before</code> and <code class="highlighter-rouge">*:after</code>, to <code class="highlighter-rouge">border-box</code>. This ensures that the declared width of element is never exceeded due to padding or border.
<li>The <code class="highlighter-rouge">box-sizing</code> is globally set on every element—including <code class="highlighter-rouge">*::before</code> and <code class="highlighter-rouge">*::after</code>, to <code class="highlighter-rouge">border-box</code>. This ensures that the declared width of element is never exceeded due to padding or border.
<ul>
<li>No base <code class="highlighter-rouge">font-size</code> is declared on the <code class="highlighter-rouge"><span class="nt">&lt;html&gt;</span></code>, but <code class="highlighter-rouge">16px</code> is assumed (the browser default). <code class="highlighter-rouge">font-size: 1rem</code> is applied on the <code class="highlighter-rouge">&lt;body&gt;</code> for easy responsive type-scaling via media queries while respecting user preferences and ensuring a more accessible approach.</li>
</ul>
@ -1238,8 +1322,6 @@
<figure class="highlight"><pre><code class="language-sass" data-lang="sass"><span class="nv">$font-family-sans-serif</span><span class="p">:</span>
<span class="c1">// Safari for OS X and iOS (San Francisco)
</span> <span class="nt">-apple-system</span><span class="o">,</span>
<span class="c1">// Chrome &gt;= 56 for OS X (San Francisco), Windows, Linux and Android
</span> <span class="nt">system-ui</span><span class="o">,</span>
<span class="c1">// Chrome &lt; 56 for OS X (San Francisco)
</span> <span class="nt">BlinkMacSystemFont</span><span class="o">,</span>
<span class="c1">// Windows
@ -1247,7 +1329,9 @@
<span class="c1">// Android
</span> <span class="s2">"Roboto"</span><span class="o">,</span>
<span class="c1">// Basic web fallback
</span> <span class="s2">"Helvetica Neue"</span><span class="o">,</span> <span class="nt">Arial</span><span class="o">,</span> <span class="nt">sans-serif</span> <span class="o">!</span><span class="nt">default</span><span class="o">;</span></code></pre></figure>
</span> <span class="s2">"Helvetica Neue"</span><span class="o">,</span> <span class="nt">Arial</span><span class="o">,</span> <span class="nt">sans-serif</span><span class="o">,</span>
<span class="c1">// Emoji fonts
</span> <span class="s2">"Apple Color Emoji"</span><span class="o">,</span> <span class="s2">"Segoe UI Emoji"</span><span class="o">,</span> <span class="s2">"Segoe UI Symbol"</span> <span class="o">!</span><span class="nt">default</span><span class="o">;</span></code></pre></figure>
<p>This <code class="highlighter-rouge">font-family</code> is applied to the <code class="highlighter-rouge">&lt;body&gt;</code> and automatically inherited globally throughout Bootstrap. To switch the global <code class="highlighter-rouge">font-family</code>, update <code class="highlighter-rouge">$font-family-base</code> and recompile Bootstrap.</p>
@ -1314,6 +1398,7 @@
<div class="bd-example">
<ul>
<li>Lorem ipsum dolor sit amet</li>
<li>Consectetur adipiscing elit</li>
@ -1348,17 +1433,15 @@
<p>For simpler styling, clear hierarchy, and better spacing, description lists have updated <code class="highlighter-rouge">margin</code>s. <code class="highlighter-rouge">&lt;dd&gt;</code>s reset <code class="highlighter-rouge">margin-left</code> to <code class="highlighter-rouge">0</code> and add <code class="highlighter-rouge">margin-bottom: .5rem</code>. <code class="highlighter-rouge">&lt;dt&gt;</code>s are <strong>bolded</strong>.</p>
<div class="bd-example">
<dl>
<dt>Description lists</dt>
<dd>A description list is perfect for defining terms.</dd>
<dt>Euismod</dt>
<dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem.</dd>
<dd>Donec id elit non mi porta gravida at eget metus.</dd>
<dt>Malesuada porta</dt>
<dd>Etiam porta sem malesuada magna mollis euismod.</dd>
</dl>
<dl>
<dt>Description lists</dt>
<dd>A description list is perfect for defining terms.</dd>
<dt>Euismod</dt>
<dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem.</dd>
<dd>Donec id elit non mi porta gravida at eget metus.</dd>
<dt>Malesuada porta</dt>
<dd>Etiam porta sem malesuada magna mollis euismod.</dd>
</dl>
</div>
<h2 id="preformatted-text">Preformatted text</h2>
@ -1366,13 +1449,11 @@
<p>The <code class="highlighter-rouge">&lt;pre&gt;</code> element is reset to remove its <code class="highlighter-rouge">margin-top</code> and use <code class="highlighter-rouge">rem</code> units for its <code class="highlighter-rouge">margin-bottom</code>.</p>
<div class="bd-example">
<pre>
.example-element {
margin-bottom: 1rem;
}
</pre>
</div>
<h2 id="tables">Tables</h2>
@ -1483,8 +1564,13 @@
</p>
<p>
<label for="time">Example temporal</label>
<input type="datetime-local" id="time" />
<label for="date">Example date</label>
<input type="date" id="date" />
</p>
<p>
<label for="time">Example time</label>
<input type="time" id="time" />
</p>
<p>
@ -1545,34 +1631,36 @@
Nulla <abbr title="attribute">attr</abbr> vitae elit libero, a pharetra augue.
</div>
<h3 id="summary">Summary</h3>
<p>The default <code class="highlighter-rouge">cursor</code> on summary is <code class="highlighter-rouge">text</code>, so we reset that to <code class="highlighter-rouge">pointer</code> to convey that the element can be interacted with by clicking on it.</p>
<div class="bd-example">
<details>
<summary>Some details</summary>
<p>More info about the details.</p>
</details>
<details open="">
<summary>Even more details</summary>
<p>Here are even more details about the details.</p>
</details>
</div>
<h2 id="html5-hidden-attribute">HTML5 <code class="highlighter-rouge">[hidden]</code> attribute</h2>
<p>HTML5 adds <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/hidden">a new global attribute named <code class="highlighter-rouge">[hidden]</code></a>, which is styled as <code class="highlighter-rouge">display: none</code> by default. Borrowing an idea from <a href="https://purecss.io">PureCSS</a>, we improve upon this default by making <code class="highlighter-rouge">[hidden] { display: none !important; }</code> to help prevent its <code class="highlighter-rouge">display</code> from getting accidentally overridden. While <code class="highlighter-rouge">[hidden]</code> isn’t natively supported by IE10, the explicit declaration in our CSS gets around that problem.</p>
<p>HTML5 adds <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/hidden">a new global attribute named <code class="highlighter-rouge">[hidden]</code></a>, which is styled as <code class="highlighter-rouge">display: none</code> by default. Borrowing an idea from <a href="https://purecss.io/">PureCSS</a>, we improve upon this default by making <code class="highlighter-rouge">[hidden] { display: none !important; }</code> to help prevent its <code class="highlighter-rouge">display</code> from getting accidentally overridden. While <code class="highlighter-rouge">[hidden]</code> isn’t natively supported by IE10, the explicit declaration in our CSS gets around that problem.</p>
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">hidden</span><span class="nt">&gt;</span></code></pre></figure>
<div class="bd-callout bd-callout-warning">
<h4 id="jquery-incompatibility">jQuery incompatibility</h4>
<h5 id="jquery-incompatibility">jQuery incompatibility</h5>
<p><code class="highlighter-rouge">[hidden]</code> is not compatible with jQuery’s <code class="highlighter-rouge">$(...).hide()</code> and <code class="highlighter-rouge">$(...).show()</code> methods. This could potentially change in jQuery 3, but we’re not holding our breath. Therefore, we don’t currently especially endorse <code class="highlighter-rouge">[hidden]</code> over other techniques for managing the <code class="highlighter-rouge">display</code> of elements.</p>
<p><code class="highlighter-rouge">[hidden]</code> is not compatible with jQuery’s <code class="highlighter-rouge">$(...).hide()</code> and <code class="highlighter-rouge">$(...).show()</code> methods. Therefore, we don’t currently especially endorse <code class="highlighter-rouge">[hidden]</code> over other techniques for managing the <code class="highlighter-rouge">display</code> of elements.</p>
</div>
<p>To merely toggle the visibility of an element, meaning its <code class="highlighter-rouge">display</code> is not modified and the element can still affect the flow of the document, use <a href="/bootstrap-material-design/docs/4.0/utilities/visibility/">the <code class="highlighter-rouge">.invisible</code> class</a> instead.</p>
<h2 id="click-delay-optimization-for-touch">Click delay optimization for touch</h2>
<p>Traditionally, browsers on touchscreen devices have a delay of approximately 300ms between the end of a “tap” – the moment when a finger/stylus is lifted from screen – and the <a href="https://developer.mozilla.org/en-US/docs/Web/Events/click"><code class="highlighter-rouge">click</code> event</a> being fired. This delay is necessary for these browsers to correctly handle “double-tap to zoom” gestures without prematurely triggering actions or links after the first “tap”, but it can make your site feel slightly sluggish and unresponsive.</p>
<p>Most mobile browsers automatically optimize away this 300ms delay for sites that use the <code class="highlighter-rouge">width=device-width</code> property as part of their <a href="/bootstrap-material-design/docs/4.0/getting-started/introduction/#responsive-meta-tag">responsive meta tag</a> (as well as for sites that disable zooming, for instance with <code class="highlighter-rouge">user-scalable=no</code>, though this practice is strongly discouraged for accessibility and usability reasons). The biggest exceptions here are IE11 on Windows Phone 8.1, and iOS Safari (and any other iOS WebView-based browser) <a href="https://webkit.org/blog/5610/more-responsive-tapping-on-ios/">prior to iOS 9.3</a>.</p>
<p>On touch-enabled laptop/desktop devices, IE11 and Microsoft Edge are currently the only browsers with “double-tap to zoom” functionality. As the <a href="/bootstrap-material-design/docs/4.0/getting-started/introduction/#responsive-meta-tag">responsive meta tag</a> is ignored by all desktop browsers, using <code class="highlighter-rouge">width=device-width</code> will have no effect on the 300ms delay here.</p>
<p>To address this problem in IE11 and Microsoft Edge on desktop, as well as IE11 on Windows Phone 8.1, Bootstrap explicitly uses the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action"><code class="highlighter-rouge">touch-action:manipulation</code> CSS property</a> on all interactive elements (such as buttons and links). This property essentially disables double-tap functionality on those elements, eliminating the 300ms delay.</p>
<p>In the case of old iOS versions (prior to 9.3), the suggested approach is to use additional scripts such as <a href="https://github.com/ftlabs/fastclick">FastClick</a> to explicitly work around the delay.</p>
<p>For further details, see the compatibility table for <a href="https://patrickhlauke.github.io/touch/tests/results/#suppressing-300ms-delay">suppressing 300ms delay for touchscreen interactions</a>.</p>
</main>
</div>
</div>

1575
docs/4.0/content/tables/index.html
View File

File diff suppressed because it is too large Load Diff

680
docs/4.0/content/typography/index.html
View File

@ -230,8 +230,8 @@
<li class="">
<a href="/bootstrap-material-design/docs/4.0/getting-started/options/">
Options
<a href="/bootstrap-material-design/docs/4.0/getting-started/theming/">
Theming
</a>
@ -450,296 +450,6 @@
<div class="bd-toc-item ">
<a class="bd-toc-link" href="/bootstrap-material-design/docs/4.0/components/alerts/">
Components
</a>
<ul class="nav bd-sidenav">
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/alerts/">
Alerts
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/badge/">
Badge
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/breadcrumb/">
Breadcrumb
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/buttons/">
Buttons
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/button-group/">
Button group
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/card/">
Card
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/carousel/">
Carousel
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/collapse/">
Collapse
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/dropdowns/">
Dropdowns
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/forms/">
Forms
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/input-group/">
Input group
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/jumbotron/">
Jumbotron
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/list-group/">
List group
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/modal/">
Modal
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/navs/">
Navs
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/navbar/">
Navbar
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/pagination/">
Pagination
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/popovers/">
Popovers
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/progress/">
Progress
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/scrollspy/">
Scrollspy
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/components/tooltips/">
Tooltips
</a>
</li>
</ul>
</div>
<div class="bd-toc-item ">
<a class="bd-toc-link" href="/bootstrap-material-design/docs/4.0/material-design/buttons/">
Material Design
@ -900,6 +610,296 @@
<div class="bd-toc-item ">
<a class="bd-toc-link" href="/bootstrap-material-design/docs/4.0/bootstrap-components/alerts/">
Bootstrap Components
</a>
<ul class="nav bd-sidenav">
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/alerts/">
Alerts
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/badge/">
Badge
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/breadcrumb/">
Breadcrumb
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/buttons/">
Buttons
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/button-group/">
Button group
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/card/">
Card
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/carousel/">
Carousel
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/collapse/">
Collapse
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/dropdowns/">
Dropdowns
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/forms/">
Forms
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/input-group/">
Input group
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/jumbotron/">
Jumbotron
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/list-group/">
List group
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/modal/">
Modal
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/navs/">
Navs
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/navbar/">
Navbar
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/pagination/">
Pagination
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/popovers/">
Popovers
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/progress/">
Progress
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/scrollspy/">
Scrollspy
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/bootstrap-components/tooltips/">
Tooltips
</a>
</li>
</ul>
</div>
<div class="bd-toc-item ">
<a class="bd-toc-link" href="/bootstrap-material-design/docs/4.0/utilities/borders/">
Utilities
@ -1126,7 +1126,7 @@
<div class="bd-toc-item ">
<a class="bd-toc-link" href="/bootstrap-material-design/docs/4.0/extend/icons/">
<a class="bd-toc-link" href="/bootstrap-material-design/docs/4.0/extend/approach/">
Extend
</a>
@ -1137,6 +1137,19 @@
<li class="">
<a href="/bootstrap-material-design/docs/4.0/extend/approach/">
Approach
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/extend/icons/">
Icons
@ -1165,6 +1178,75 @@
</ul>
</div>
<div class="bd-toc-item ">
<a class="bd-toc-link" href="/bootstrap-material-design/docs/4.0/about/overview/">
About
</a>
<ul class="nav bd-sidenav">
<li class="">
<a href="/bootstrap-material-design/docs/4.0/about/overview/">
Overview
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/about/brand/">
Brand
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/about/license/">
License
</a>
</li>
<li class="">
<a href="/bootstrap-material-design/docs/4.0/about/translations/">
Translations
</a>
</li>
</ul>
</div>
</nav>
</div>
@ -1218,7 +1300,7 @@
<li>Use <code class="highlighter-rouge">$body-bg</code> to set a <code class="highlighter-rouge">background-color</code> on the <code class="highlighter-rouge">&lt;body&gt;</code> (<code class="highlighter-rouge">#fff</code> by default).</li>
</ul>
<p>These styles can be found within <code class="highlighter-rouge">_reboot.scss</code>, and the global variables are defined in <code class="highlighter-rouge">_variables.scss</code>.</p>
<p>These styles can be found within <code class="highlighter-rouge">_reboot.scss</code>, and the global variables are defined in <code class="highlighter-rouge">_variables.scss</code>. Make sure to set <code class="highlighter-rouge">$font-size-base</code> in <code class="highlighter-rouge">rem</code>.</p>
<h2 id="headings">Headings</h2>
@ -1387,7 +1469,7 @@
<h2 id="text-utilities">Text utilities</h2>
<p>Change text alignment, transform, style, weight, and color with our <a href="/bootstrap-material-design/docs/4.0/utilities/text/#text-alignment">text utilities</a>.</p>
<p>Change text alignment, transform, style, weight, and color with our <a href="/bootstrap-material-design/docs/4.0/utilities/text/">text utilities</a> and <a href="/bootstrap-material-design/docs/4.0/utilities/colors/">color utilities</a>.</p>
<h2 id="abbreviations">Abbreviations</h2>
@ -1578,24 +1660,24 @@
<p>Here’s an example of it in practice. Choose whatever <code class="highlighter-rouge">font-size</code>s and media queries you wish.</p>
<figure class="highlight"><pre><code class="language-scss" data-lang="scss"><span class="nt">html</span> <span class="p">{</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">14px</span><span class="p">;</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">1rem</span><span class="p">;</span>
<span class="p">}</span>
<span class="k">@include</span> <span class="nd">media-breakpoint-up</span><span class="p">(</span><span class="n">sm</span><span class="p">)</span> <span class="p">{</span>
<span class="nt">html</span> <span class="p">{</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">16px</span><span class="p">;</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">1</span><span class="mi">.2rem</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="k">@include</span> <span class="nd">media-breakpoint-up</span><span class="p">(</span><span class="n">md</span><span class="p">)</span> <span class="p">{</span>
<span class="nt">html</span> <span class="p">{</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">20px</span><span class="p">;</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">1</span><span class="mi">.4rem</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="k">@include</span> <span class="nd">media-breakpoint-up</span><span class="p">(</span><span class="n">lg</span><span class="p">)</span> <span class="p">{</span>
<span class="nt">html</span> <span class="p">{</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">28px</span><span class="p">;</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">1</span><span class="mi">.6rem</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">}</span></code></pre></figure>

43
docs/4.0/examples/album/album.css
View File

@ -1,17 +1,19 @@
body {
min-height: 75rem; /* Can be removed; just added for demo purposes */
}
.navbar {
margin-bottom: 0;
:root {
--jumbotron-padding-y: 3rem;
}
.jumbotron {
padding-top: 6rem;
padding-bottom: 6rem;
padding-top: var(--jumbotron-padding-y);
padding-bottom: var(--jumbotron-padding-y);
margin-bottom: 0;
background-color: #fff;
}
@media (min-width: 768px) {
.jumbotron {
padding-top: calc(var(--jumbotron-padding-y) * 2);
padding-bottom: calc(var(--jumbotron-padding-y) * 2);
}
}
.jumbotron p:last-child {
margin-bottom: 0;
@ -25,29 +27,6 @@ body {
max-width: 40rem;
}
.album {
min-height: 50rem; /* Can be removed; just added for demo purposes */
padding-top: 3rem;
padding-bottom: 3rem;
background-color: #f7f7f7;
}
.card {
float: left;
width: 33.333%;
padding: .75rem;
margin-bottom: 2rem;
border: 0;
}
.card > img {
margin-bottom: .75rem;
}
.card-text {
font-size: 85%;
}
footer {
padding-top: 3rem;
padding-bottom: 3rem;
@ -56,3 +35,5 @@ footer {
footer p {
margin-bottom: .25rem;
}
.box-shadow { box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05); }

268
docs/4.0/examples/album/index.html
View File

@ -1,4 +1,4 @@
<!DOCTYPE html>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
@ -10,7 +10,7 @@
<title>Album example for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link href="../../../../dist/css/bootstrap-material-design.min.css" rel="stylesheet">
<link href="../../../../dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="album.css" rel="stylesheet">
@ -18,90 +18,197 @@
<body>
<div class="collapse bg-dark" id="navbarHeader">
<div class="container">
<div class="row">
<div class="col-sm-8 py-4">
<h4 class="text-white">About</h4>
<p class="text-muted">Add some information about the album below, the author, or any other background context. Make it a few sentences long so folks can pick up some informative tidbits. Then, link them off to some social networking sites or contact information.</p>
</div>
<div class="col-sm-4 py-4">
<h4 class="text-white">Contact</h4>
<ul class="list-unstyled">
<li><a href="#" class="text-white">Follow on Twitter</a></li>
<li><a href="#" class="text-white">Like on Facebook</a></li>
<li><a href="#" class="text-white">Email me</a></li>
</ul>
<header>
<div class="collapse bg-dark" id="navbarHeader">
<div class="container">
<div class="row">
<div class="col-sm-8 col-md-7 py-4">
<h4 class="text-white">About</h4>
<p class="text-muted">Add some information about the album below, the author, or any other background context. Make it a few sentences long so folks can pick up some informative tidbits. Then, link them off to some social networking sites or contact information.</p>
</div>
<div class="col-sm-4 offset-md-1 py-4">
<h4 class="text-white">Contact</h4>
<ul class="list-unstyled">
<li><a href="#" class="text-white">Follow on Twitter</a></li>
<li><a href="#" class="text-white">Like on Facebook</a></li>
<li><a href="#" class="text-white">Email me</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="navbar navbar-dark bg-dark">
<div class="container d-flex justify-content-between">
<a href="#" class="navbar-brand">Album</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarHeader" aria-controls="navbarHeader" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar navbar-dark bg-dark box-shadow">
<div class="container d-flex justify-content-between">
<a href="#" class="navbar-brand d-flex align-items-center">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mr-2"><path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"></path><circle cx="12" cy="13" r="4"></circle></svg>
<strong>Album</strong>
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarHeader" aria-controls="navbarHeader" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</div>
</div>
</div>
</header>
<section class="jumbotron text-center">
<div class="container">
<h1 class="jumbotron-heading">Album example</h1>
<p class="lead text-muted">Something short and leading about the collection below—its contents, the creator, etc. Make it short and sweet, but not too short so folks don't simply skip over it entirely.</p>
<p>
<a href="#" class="btn btn-primary">Main call to action</a>
<a href="#" class="btn btn-secondary">Secondary action</a>
</p>
</div>
</section>
<main role="main">
<div class="album text-muted">
<div class="container">
<section class="jumbotron text-center">
<div class="container">
<h1 class="jumbotron-heading">Album example</h1>
<p class="lead text-muted">Something short and leading about the collection below—its contents, the creator, etc. Make it short and sweet, but not too short so folks don't simply skip over it entirely.</p>
<p>
<a href="#" class="btn btn-primary my-2">Main call to action</a>
<a href="#" class="btn btn-secondary my-2">Secondary action</a>
</p>
</div>
</section>
<div class="row">
<div class="card">
<img data-src="holder.js/100px280/thumb" alt="Card image cap">
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
<div class="card">
<img data-src="holder.js/100px280/thumb" alt="Card image cap">
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
<div class="card">
<img data-src="holder.js/100px280/thumb" alt="Card image cap">
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
<div class="album py-5 bg-light">
<div class="container">
<div class="card">
<img data-src="holder.js/100px280/thumb" alt="Card image cap">
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
<div class="card">
<img data-src="holder.js/100px280/thumb" alt="Card image cap">
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
<div class="card">
<img data-src="holder.js/100px280/thumb" alt="Card image cap">
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
<div class="row">
<div class="col-md-4">
<div class="card mb-4 box-shadow">
<img class="card-img-top" data-src="holder.js/100px225?theme=thumb&bg=55595c&fg=eceeef&text=Thumbnail" alt="Card image cap">
<div class="card-body">
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<div class="d-flex justify-content-between align-items-center">
<div class="btn-group">
<button type="button" class="btn btn-sm btn-outline-secondary">View</button>
<button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
</div>
<small class="text-muted">9 mins</small>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card mb-4 box-shadow">
<img class="card-img-top" data-src="holder.js/100px225?theme=thumb&bg=55595c&fg=eceeef&text=Thumbnail" alt="Card image cap">
<div class="card-body">
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<div class="d-flex justify-content-between align-items-center">
<div class="btn-group">
<button type="button" class="btn btn-sm btn-outline-secondary">View</button>
<button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
</div>
<small class="text-muted">9 mins</small>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card mb-4 box-shadow">
<img class="card-img-top" data-src="holder.js/100px225?theme=thumb&bg=55595c&fg=eceeef&text=Thumbnail" alt="Card image cap">
<div class="card-body">
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<div class="d-flex justify-content-between align-items-center">
<div class="btn-group">
<button type="button" class="btn btn-sm btn-outline-secondary">View</button>
<button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
</div>
<small class="text-muted">9 mins</small>
</div>
</div>
</div>
</div>
<div class="card">
<img data-src="holder.js/100px280/thumb" alt="Card image cap">
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
<div class="card">
<img data-src="holder.js/100px280/thumb" alt="Card image cap">
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
<div class="card">
<img data-src="holder.js/100px280/thumb" alt="Card image cap">
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<div class="col-md-4">
<div class="card mb-4 box-shadow">
<img class="card-img-top" data-src="holder.js/100px225?theme=thumb&bg=55595c&fg=eceeef&text=Thumbnail" alt="Card image cap">
<div class="card-body">
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<div class="d-flex justify-content-between align-items-center">
<div class="btn-group">
<button type="button" class="btn btn-sm btn-outline-secondary">View</button>
<button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
</div>
<small class="text-muted">9 mins</small>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card mb-4 box-shadow">
<img class="card-img-top" data-src="holder.js/100px225?theme=thumb&bg=55595c&fg=eceeef&text=Thumbnail" alt="Card image cap">
<div class="card-body">
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<div class="d-flex justify-content-between align-items-center">
<div class="btn-group">
<button type="button" class="btn btn-sm btn-outline-secondary">View</button>
<button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
</div>
<small class="text-muted">9 mins</small>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card mb-4 box-shadow">
<img class="card-img-top" data-src="holder.js/100px225?theme=thumb&bg=55595c&fg=eceeef&text=Thumbnail" alt="Card image cap">
<div class="card-body">
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<div class="d-flex justify-content-between align-items-center">
<div class="btn-group">
<button type="button" class="btn btn-sm btn-outline-secondary">View</button>
<button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
</div>
<small class="text-muted">9 mins</small>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card mb-4 box-shadow">
<img class="card-img-top" data-src="holder.js/100px225?theme=thumb&bg=55595c&fg=eceeef&text=Thumbnail" alt="Card image cap">
<div class="card-body">
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<div class="d-flex justify-content-between align-items-center">
<div class="btn-group">
<button type="button" class="btn btn-sm btn-outline-secondary">View</button>
<button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
</div>
<small class="text-muted">9 mins</small>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card mb-4 box-shadow">
<img class="card-img-top" data-src="holder.js/100px225?theme=thumb&bg=55595c&fg=eceeef&text=Thumbnail" alt="Card image cap">
<div class="card-body">
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<div class="d-flex justify-content-between align-items-center">
<div class="btn-group">
<button type="button" class="btn btn-sm btn-outline-secondary">View</button>
<button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
</div>
<small class="text-muted">9 mins</small>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card mb-4 box-shadow">
<img class="card-img-top" data-src="holder.js/100px225?theme=thumb&bg=55595c&fg=eceeef&text=Thumbnail" alt="Card image cap">
<div class="card-body">
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<div class="d-flex justify-content-between align-items-center">
<div class="btn-group">
<button type="button" class="btn btn-sm btn-outline-secondary">View</button>
<button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
</div>
<small class="text-muted">9 mins</small>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
<footer class="text-muted">
<div class="container">
@ -116,17 +223,10 @@
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="../../../../assets/js/vendor/jquery.min.js"><\/script>')</script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="../../../../assets/js/vendor/jquery-slim.min.js"><\/script>')</script>
<script src="../../../../assets/js/vendor/popper.min.js"></script>
<script src="../../../../dist/js/bootstrap.min.js"></script>
<script src="../../../../assets/js/vendor/holder.min.js"></script>
<script>
$(function () {
Holder.addTheme("thumb", { background: "#55595c", foreground: "#eceeef", text: "Thumbnail" });
});
</script>
<script src="../../../../dist/js/bootstrap-material-design.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="../../../../assets/js/ie10-viewport-bug-workaround.js"></script>
</body>
</html>

170
docs/4.0/examples/blog/blog.css
View File

@ -1,95 +1,87 @@
/*
* Globals
*/
/* stylelint-disable selector-list-comma-newline-after */
@media (min-width: 48em) {
html {
font-size: 18px;
.blog-header {
line-height: 1;
border-bottom: 1px solid #e5e5e5;
}
.blog-header-logo {
font-family: "Playfair Display", Georgia, "Times New Roman", serif;
font-size: 2.25rem;
}
.blog-header-logo:hover {
text-decoration: none;
}
h1, h2, h3, h4, h5, h6 {
font-family: "Playfair Display", Georgia, "Times New Roman", serif;
}
.display-4 {
font-size: 2.5rem;
}
@media (min-width: 768px) {
.display-4 {
font-size: 3rem;
}
}
body {
font-family: Georgia, "Times New Roman", Times, serif;
color: #555;
}
h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6 {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: normal;
color: #333;
}
/*
* Override Bootstrap's default container.
*/
.container {
max-width: 60rem;
}
/*
* Masthead for nav
*/
.blog-masthead {
margin-bottom: 3rem;
background-color: #428bca;
-webkit-box-shadow: inset 0 -.1rem .25rem rgba(0,0,0,.1);
box-shadow: inset 0 -.1rem .25rem rgba(0,0,0,.1);
}
/* Nav links */
.nav-link {
.nav-scroller {
position: relative;
padding: 1rem;
font-weight: 500;
color: #cdddeb;
}
.nav-link:hover,
.nav-link:focus {
color: #fff;
background-color: transparent;
z-index: 2;
height: 2.75rem;
overflow-y: hidden;
}
/* Active state gets a caret at the bottom */
.nav-link.active {
color: #fff;
}
.nav-link.active:after {
position: absolute;
bottom: 0;
left: 50%;
width: 0;
height: 0;
margin-left: -.3rem;
vertical-align: middle;
content: "";
border-right: .3rem solid transparent;
border-bottom: .3rem solid;
border-left: .3rem solid transparent;
.nav-scroller .nav {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
padding-bottom: 1rem;
margin-top: -1px;
overflow-x: auto;
text-align: center;
white-space: nowrap;
-webkit-overflow-scrolling: touch;
}
.nav-scroller .nav-link {
padding-top: .75rem;
padding-bottom: .75rem;
font-size: .875rem;
}
.card-img-right {
height: 100%;
border-radius: 0 3px 3px 0;
}
.flex-auto {
-ms-flex: 0 0 auto;
-webkit-box-flex: 0;
flex: 0 0 auto;
}
.h-250 { height: 250px; }
@media (min-width: 768px) {
.h-md-250 { height: 250px; }
}
.border-top { border-top: 1px solid #e5e5e5; }
.border-bottom { border-bottom: 1px solid #e5e5e5; }
.box-shadow { box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05); }
/*
* Blog name and description
*/
.blog-header {
padding-bottom: 1.25rem;
margin-bottom: 2rem;
border-bottom: .05rem solid #eee;
}
.blog-title {
margin-bottom: 0;
font-size: 2rem;
font-weight: normal;
font-weight: 400;
}
.blog-description {
font-size: 1.1rem;
@ -102,28 +94,6 @@ h6, .h6 {
}
}
/*
* Main column and sidebar layout
*/
/* Sidebar modules for boxing content */
.sidebar-module {
padding: 1rem;
/*margin: 0 -1rem 1rem;*/
}
.sidebar-module-inset {
padding: 1rem;
background-color: #f5f5f5;
border-radius: .25rem;
}
.sidebar-module-inset p:last-child,
.sidebar-module-inset ul:last-child,
.sidebar-module-inset ol:last-child {
margin-bottom: 0;
}
/* Pagination */
.blog-pagination {
margin-bottom: 4rem;
@ -132,11 +102,9 @@ h6, .h6 {
border-radius: 2rem;
}
/*
* Blog posts
*/
.blog-post {
margin-bottom: 4rem;
}
@ -149,11 +117,9 @@ h6, .h6 {
color: #999;
}
/*
* Footer
*/
.blog-footer {
padding: 2.5rem 0;
color: #999;

139
docs/4.0/examples/blog/index.html
View File

@ -1,4 +1,4 @@
<!DOCTYPE html>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
@ -10,38 +10,96 @@
<title>Blog Template for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link href="../../../../dist/css/bootstrap-material-design.min.css" rel="stylesheet">
<link href="../../../../dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="https://fonts.googleapis.com/css?family=Playfair+Display:700,900" rel="stylesheet">
<link href="blog.css" rel="stylesheet">
</head>
<body>
<div class="blog-masthead">
<div class="container">
<nav class="nav">
<a class="nav-link active" href="#">Home</a>
<a class="nav-link" href="#">New features</a>
<a class="nav-link" href="#">Press</a>
<a class="nav-link" href="#">New hires</a>
<a class="nav-link" href="#">About</a>
<div class="container">
<header class="blog-header py-3">
<div class="row flex-nowrap justify-content-between align-items-center">
<div class="col-4 pt-1">
<a class="text-muted" href="#">Subscribe</a>
</div>
<div class="col-4 text-center">
<a class="blog-header-logo text-dark" href="#">Large</a>
</div>
<div class="col-4 d-flex justify-content-end align-items-center">
<a class="text-muted" href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mx-3"><circle cx="10.5" cy="10.5" r="7.5"></circle><line x1="21" y1="21" x2="15.8" y2="15.8"></line></svg>
</a>
<a class="btn btn-sm btn-outline-secondary" href="#">Sign up</a>
</div>
</div>
</header>
<div class="nav-scroller py-1 mb-2">
<nav class="nav d-flex justify-content-between">
<a class="p-2 text-muted" href="#">World</a>
<a class="p-2 text-muted" href="#">U.S.</a>
<a class="p-2 text-muted" href="#">Technology</a>
<a class="p-2 text-muted" href="#">Design</a>
<a class="p-2 text-muted" href="#">Culture</a>
<a class="p-2 text-muted" href="#">Business</a>
<a class="p-2 text-muted" href="#">Politics</a>
<a class="p-2 text-muted" href="#">Opinion</a>
<a class="p-2 text-muted" href="#">Science</a>
<a class="p-2 text-muted" href="#">Health</a>
<a class="p-2 text-muted" href="#">Style</a>
<a class="p-2 text-muted" href="#">Travel</a>
</nav>
</div>
</div>
<div class="blog-header">
<div class="container">
<h1 class="blog-title">The Bootstrap Blog</h1>
<p class="lead blog-description">An example blog template built with Bootstrap.</p>
<div class="jumbotron p-3 p-md-5 text-white rounded bg-dark">
<div class="col-md-6 px-0">
<h1 class="display-4 font-italic">Title of a longer featured blog post</h1>
<p class="lead my-3">Multiple lines of text that form the lede, informing new readers quickly and efficiently about what's most interesting in this post's contents.</p>
<p class="lead mb-0"><a href="#" class="text-white font-weight-bold">Continue reading...</a></p>
</div>
</div>
<div class="row mb-2">
<div class="col-md-6">
<div class="card flex-md-row mb-4 box-shadow h-md-250">
<div class="card-body d-flex flex-column align-items-start">
<strong class="d-inline-block mb-2 text-primary">World</strong>
<h3 class="mb-0">
<a class="text-dark" href="#">Featured post</a>
</h3>
<div class="mb-1 text-muted">Nov 12</div>
<p class="card-text mb-auto">This is a wider card with supporting text below as a natural lead-in to additional content.</p>
<a href="#">Continue reading</a>
</div>
<img class="card-img-right flex-auto d-none d-md-block" data-src="holder.js/200x250?theme=thumb" alt="Card image cap">
</div>
</div>
<div class="col-md-6">
<div class="card flex-md-row mb-4 box-shadow h-md-250">
<div class="card-body d-flex flex-column align-items-start">
<strong class="d-inline-block mb-2 text-success">Design</strong>
<h3 class="mb-0">
<a class="text-dark" href="#">Post title</a>
</h3>
<div class="mb-1 text-muted">Nov 11</div>
<p class="card-text mb-auto">This is a wider card with supporting text below as a natural lead-in to additional content.</p>
<a href="#">Continue reading</a>
</div>
<img class="card-img-right flex-auto d-none d-md-block" data-src="holder.js/200x250?theme=thumb" alt="Card image cap">
</div>
</div>
</div>
</div>
<div class="container">
<main role="main" class="container">
<div class="row">
<div class="col-sm-8 blog-main">
<div class="col-md-8 blog-main">
<h3 class="pb-3 mb-4 font-italic border-bottom">
From the Firehose
</h3>
<div class="blog-post">
<h2 class="blog-post-title">Sample blog post</h2>
@ -109,14 +167,15 @@
</div><!-- /.blog-main -->
<div class="col-sm-3 offset-sm-1 blog-sidebar">
<div class="sidebar-module sidebar-module-inset">
<h4>About</h4>
<p>Etiam porta <em>sem malesuada magna</em> mollis euismod. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur.</p>
<aside class="col-md-4 blog-sidebar">
<div class="p-3 mb-3 bg-light rounded">
<h4 class="font-italic">About</h4>
<p class="mb-0">Etiam porta <em>sem malesuada magna</em> mollis euismod. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur.</p>
</div>
<div class="sidebar-module">
<h4>Archives</h4>
<ol class="list-unstyled">
<div class="p-3">
<h4 class="font-italic">Archives</h4>
<ol class="list-unstyled mb-0">
<li><a href="#">March 2014</a></li>
<li><a href="#">February 2014</a></li>
<li><a href="#">January 2014</a></li>
@ -131,36 +190,42 @@
<li><a href="#">April 2013</a></li>
</ol>
</div>
<div class="sidebar-module">
<h4>Elsewhere</h4>
<div class="p-3">
<h4 class="font-italic">Elsewhere</h4>
<ol class="list-unstyled">
<li><a href="#">GitHub</a></li>
<li><a href="#">Twitter</a></li>
<li><a href="#">Facebook</a></li>
</ol>
</div>
</div><!-- /.blog-sidebar -->
</aside><!-- /.blog-sidebar -->
</div><!-- /.row -->
</div><!-- /.container -->
</main><!-- /.container -->
<footer class="blog-footer">
<p>Blog template built for <a href="https://getbootstrap.com">Bootstrap</a> by <a href="https://twitter.com/mdo">@mdo</a>.</p>
<p>Blog template built for <a href="https://getbootstrap.com/">Bootstrap</a> by <a href="https://twitter.com/mdo">@mdo</a>.</p>
<p>
<a href="#">Back to top</a>
</p>
</footer>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="../../../../assets/js/vendor/jquery.min.js"><\/script>')</script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="../../../../assets/js/vendor/jquery-slim.min.js"><\/script>')</script>
<script src="../../../../assets/js/vendor/popper.min.js"></script>
<script src="../../../../dist/js/bootstrap-material-design.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="../../../../assets/js/ie10-viewport-bug-workaround.js"></script>
<script src="../../../../dist/js/bootstrap.min.js"></script>
<script src="../../../../assets/js/vendor/holder.min.js"></script>
<script>
Holder.addTheme('thumb', {
bg: '#55595c',
fg: '#eceeef',
text: 'Thumbnail'
});
</script>
</body>
</html>

4
docs/4.0/examples/carousel/carousel.css
View File

@ -18,8 +18,8 @@ body {
}
/* Since positioning the image, we need to help out the caption */
.carousel-caption {
z-index: 10;
bottom: 3rem;
z-index: 10;
}
/* Declare heights because of positioning of img element */
@ -45,7 +45,7 @@ body {
text-align: center;
}
.marketing h2 {
font-weight: normal;
font-weight: 400;
}
.marketing .col-lg-4 p {
margin-right: .75rem;

284
docs/4.0/examples/carousel/index.html
View File

@ -1,4 +1,4 @@
<!DOCTYPE html>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
@ -10,177 +10,179 @@
<title>Carousel Template for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link href="../../../../dist/css/bootstrap-material-design.min.css" rel="stylesheet">
<link href="../../../../dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="carousel.css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
<a class="navbar-brand" href="#">Carousel</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<form class="form-inline mt-2 mt-md-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<header>
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
<a class="navbar-brand" href="#">Carousel</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<form class="form-inline mt-2 mt-md-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
</header>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="first-slide" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="First slide">
<div class="container">
<div class="carousel-caption d-none d-md-block text-left">
<h1>Example headline.</h1>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Sign up today</a></p>
<main role="main">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="first-slide" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="First slide">
<div class="container">
<div class="carousel-caption text-left">
<h1>Example headline.</h1>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Sign up today</a></p>
</div>
</div>
</div>
<div class="carousel-item">
<img class="second-slide" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Second slide">
<div class="container">
<div class="carousel-caption">
<h1>Another example headline.</h1>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Learn more</a></p>
</div>
</div>
</div>
<div class="carousel-item">
<img class="third-slide" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Third slide">
<div class="container">
<div class="carousel-caption text-right">
<h1>One more for good measure.</h1>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Browse gallery</a></p>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<img class="second-slide" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Second slide">
<div class="container">
<div class="carousel-caption d-none d-md-block">
<h1>Another example headline.</h1>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Learn more</a></p>
</div>
<a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<!-- Marketing messaging and featurettes
================================================== -->
<!-- Wrap the rest of the page in another container to center all the content. -->
<div class="container marketing">
<!-- Three columns of text below the carousel -->
<div class="row">
<div class="col-lg-4">
<img class="rounded-circle" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Generic placeholder image" width="140" height="140">
<h2>Heading</h2>
<p>Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna.</p>
<p><a class="btn btn-secondary" href="#" role="button">View details &raquo;</a></p>
</div><!-- /.col-lg-4 -->
<div class="col-lg-4">
<img class="rounded-circle" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Generic placeholder image" width="140" height="140">
<h2>Heading</h2>
<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh.</p>
<p><a class="btn btn-secondary" href="#" role="button">View details &raquo;</a></p>
</div><!-- /.col-lg-4 -->
<div class="col-lg-4">
<img class="rounded-circle" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Generic placeholder image" width="140" height="140">
<h2>Heading</h2>
<p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
<p><a class="btn btn-secondary" href="#" role="button">View details &raquo;</a></p>
</div><!-- /.col-lg-4 -->
</div><!-- /.row -->
<!-- START THE FEATURETTES -->
<hr class="featurette-divider">
<div class="row featurette">
<div class="col-md-7">
<h2 class="featurette-heading">First featurette heading. <span class="text-muted">It'll blow your mind.</span></h2>
<p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p>
</div>
<div class="col-md-5">
<img class="featurette-image img-fluid mx-auto" data-src="holder.js/500x500/auto" alt="Generic placeholder image">
</div>
</div>
<div class="carousel-item">
<img class="third-slide" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Third slide">
<div class="container">
<div class="carousel-caption d-none d-md-block text-right">
<h1>One more for good measure.</h1>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Browse gallery</a></p>
</div>
<hr class="featurette-divider">
<div class="row featurette">
<div class="col-md-7 order-md-2">
<h2 class="featurette-heading">Oh yeah, it's that good. <span class="text-muted">See for yourself.</span></h2>
<p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p>
</div>
<div class="col-md-5 order-md-1">
<img class="featurette-image img-fluid mx-auto" data-src="holder.js/500x500/auto" alt="Generic placeholder image">
</div>
</div>
</div>
<a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<hr class="featurette-divider">
<!-- Marketing messaging and featurettes
================================================== -->
<!-- Wrap the rest of the page in another container to center all the content. -->
<div class="container marketing">
<!-- Three columns of text below the carousel -->
<div class="row">
<div class="col-lg-4">
<img class="rounded-circle" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Generic placeholder image" width="140" height="140">
<h2>Heading</h2>
<p>Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna.</p>
<p><a class="btn btn-secondary" href="#" role="button">View details &raquo;</a></p>
</div><!-- /.col-lg-4 -->
<div class="col-lg-4">
<img class="rounded-circle" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Generic placeholder image" width="140" height="140">
<h2>Heading</h2>
<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh.</p>
<p><a class="btn btn-secondary" href="#" role="button">View details &raquo;</a></p>
</div><!-- /.col-lg-4 -->
<div class="col-lg-4">
<img class="rounded-circle" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Generic placeholder image" width="140" height="140">
<h2>Heading</h2>
<p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
<p><a class="btn btn-secondary" href="#" role="button">View details &raquo;</a></p>
</div><!-- /.col-lg-4 -->
</div><!-- /.row -->
<!-- START THE FEATURETTES -->
<hr class="featurette-divider">
<div class="row featurette">
<div class="col-md-7">
<h2 class="featurette-heading">First featurette heading. <span class="text-muted">It'll blow your mind.</span></h2>
<p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p>
<div class="row featurette">
<div class="col-md-7">
<h2 class="featurette-heading">And lastly, this one. <span class="text-muted">Checkmate.</span></h2>
<p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p>
</div>
<div class="col-md-5">
<img class="featurette-image img-fluid mx-auto" data-src="holder.js/500x500/auto" alt="Generic placeholder image">
</div>
</div>
<div class="col-md-5">
<img class="featurette-image img-fluid mx-auto" data-src="holder.js/500x500/auto" alt="Generic placeholder image">
</div>
</div>
<hr class="featurette-divider">
<hr class="featurette-divider">
<div class="row featurette">
<div class="col-md-7 order-md-2">
<h2 class="featurette-heading">Oh yeah, it's that good. <span class="text-muted">See for yourself.</span></h2>
<p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p>
</div>
<div class="col-md-5 order-md-1">
<img class="featurette-image img-fluid mx-auto" data-src="holder.js/500x500/auto" alt="Generic placeholder image">
</div>
</div>
<!-- /END THE FEATURETTES -->
<hr class="featurette-divider">
<div class="row featurette">
<div class="col-md-7">
<h2 class="featurette-heading">And lastly, this one. <span class="text-muted">Checkmate.</span></h2>
<p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p>
</div>
<div class="col-md-5">
<img class="featurette-image img-fluid mx-auto" data-src="holder.js/500x500/auto" alt="Generic placeholder image">
</div>
</div>
<hr class="featurette-divider">
<!-- /END THE FEATURETTES -->
</div><!-- /.container -->
<!-- FOOTER -->
<footer>
<footer class="container">
<p class="float-right"><a href="#">Back to top</a></p>
<p>&copy; 2017 Company, Inc. &middot; <a href="#">Privacy</a> &middot; <a href="#">Terms</a></p>
<p>&copy; 2017-2018 Company, Inc. &middot; <a href="#">Privacy</a> &middot; <a href="#">Terms</a></p>
</footer>
</div><!-- /.container -->
</main>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="../../../../assets/js/vendor/jquery.min.js"><\/script>')</script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="../../../../assets/js/vendor/jquery-slim.min.js"><\/script>')</script>
<script src="../../../../assets/js/vendor/popper.min.js"></script>
<script src="../../../../dist/js/bootstrap-material-design.min.js"></script>
<script src="../../../../dist/js/bootstrap.min.js"></script>
<!-- Just to make our placeholder images work. Don't actually copy the next line! -->
<script src="../../../../assets/js/vendor/holder.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="../../../../assets/js/ie10-viewport-bug-workaround.js"></script>
</body>
</html>

11
docs/4.0/examples/checkout/form-validation.css Executable file
View File

@ -0,0 +1,11 @@
.container {
max-width: 960px;
}
.border-top { border-top: 1px solid #e5e5e5; }
.border-bottom { border-bottom: 1px solid #e5e5e5; }
.border-top-gray { border-top-color: #adb5bd; }
.box-shadow { box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05); }
.lh-condensed { line-height: 1.25; }

268
docs/4.0/examples/checkout/index.html Executable file
View File

@ -0,0 +1,268 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../../../favicon.ico">
<title>Checkout example for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link href="../../../../dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="form-validation.css" rel="stylesheet">
</head>
<body class="bg-light">
<div class="container">
<div class="py-5 text-center">
<img class="d-block mx-auto mb-4" src="https://getbootstrap.com/assets/brand/bootstrap-solid.svg" alt="" width="72" height="72">
<h2>Checkout form</h2>
<p class="lead">Below is an example form built entirely with Bootstrap's form controls. Each required form group has a validation state that can be triggered by attempting to submit the form without completing it.</p>
</div>
<div class="row">
<div class="col-md-4 order-md-2 mb-4">
<h4 class="d-flex justify-content-between align-items-center mb-3">
<span class="text-muted">Your cart</span>
<span class="badge badge-secondary badge-pill">3</span>
</h4>
<ul class="list-group mb-3">
<li class="list-group-item d-flex justify-content-between lh-condensed">
<div>
<h6 class="my-0">Product name</h6>
<small class="text-muted">Brief description</small>
</div>
<span class="text-muted">$12</span>
</li>
<li class="list-group-item d-flex justify-content-between lh-condensed">
<div>
<h6 class="my-0">Second product</h6>
<small class="text-muted">Brief description</small>
</div>
<span class="text-muted">$8</span>
</li>
<li class="list-group-item d-flex justify-content-between lh-condensed">
<div>
<h6 class="my-0">Third item</h6>
<small class="text-muted">Brief description</small>
</div>
<span class="text-muted">$5</span>
</li>
<li class="list-group-item d-flex justify-content-between bg-light">
<div class="text-success">
<h6 class="my-0">Promo code</h6>
<small>EXAMPLECODE</small>
</div>
<span class="text-success">-$5</span>
</li>
<li class="list-group-item d-flex justify-content-between">
<span>Total (USD)</span>
<strong>$20</strong>
</li>
</ul>
<form class="card p-2">
<div class="input-group">
<input type="text" class="form-control" placeholder="Promo code">
<div class="input-group-append">
<button type="submit" class="btn btn-secondary">Redeem</button>
</div>
</div>
</form>
</div>
<div class="col-md-8 order-md-1">
<h4 class="mb-3">Billing address</h4>
<form class="needs-validation" novalidate>
<div class="row">
<div class="col-md-6 mb-3">
<label for="firstName">First name</label>
<input type="text" class="form-control" id="firstName" placeholder="" value="" required>
<div class="invalid-feedback">
Valid first name is required.
</div>
</div>
<div class="col-md-6 mb-3">
<label for="lastName">Last name</label>
<input type="text" class="form-control" id="lastName" placeholder="" value="" required>
<div class="invalid-feedback">
Valid last name is required.
</div>
</div>
</div>
<div class="mb-3">
<label for="username">Username</label>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">@</span>
</div>
<input type="text" class="form-control" id="username" placeholder="Username" required>
<div class="invalid-feedback" style="width: 100%;">
Your username is required.
</div>
</div>
</div>
<div class="mb-3">
<label for="email">Email <span class="text-muted">(Optional)</span></label>
<input type="email" class="form-control" id="email" placeholder="you@example.com">
<div class="invalid-feedback">
Please enter a valid email address for shipping updates.
</div>
</div>
<div class="mb-3">
<label for="address">Address</label>
<input type="text" class="form-control" id="address" placeholder="1234 Main St" required>
<div class="invalid-feedback">
Please enter your shipping address.
</div>
</div>
<div class="mb-3">
<label for="address2">Address 2 <span class="text-muted">(Optional)</span></label>
<input type="text" class="form-control" id="address2" placeholder="Apartment or suite">
</div>
<div class="row">
<div class="col-md-5 mb-3">
<label for="country">Country</label>
<select class="custom-select d-block w-100" id="country" required>
<option value="">Choose...</option>
<option>United States</option>
</select>
<div class="invalid-feedback">
Please select a valid country.
</div>
</div>
<div class="col-md-4 mb-3">
<label for="state">State</label>
<select class="custom-select d-block w-100" id="state" required>
<option value="">Choose...</option>
<option>California</option>
</select>
<div class="invalid-feedback">
Please provide a valid state.
</div>
</div>
<div class="col-md-3 mb-3">
<label for="zip">Zip</label>
<input type="text" class="form-control" id="zip" placeholder="" required>
<div class="invalid-feedback">
Zip code required.
</div>
</div>
</div>
<hr class="mb-4">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="same-address">
<label class="custom-control-label" for="same-address">Shipping address is the same as my billing address</label>
</div>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="save-info">
<label class="custom-control-label" for="save-info">Save this information for next time</label>
</div>
<hr class="mb-4">
<h4 class="mb-3">Payment</h4>
<div class="d-block my-3">
<div class="custom-control custom-radio">
<input id="credit" name="paymentMethod" type="radio" class="custom-control-input" checked required>
<label class="custom-control-label" for="credit">Credit card</label>
</div>
<div class="custom-control custom-radio">
<input id="debit" name="paymentMethod" type="radio" class="custom-control-input" required>
<label class="custom-control-label" for="debit">Debit card</label>
</div>
<div class="custom-control custom-radio">
<input id="paypal" name="paymentMethod" type="radio" class="custom-control-input" required>
<label class="custom-control-label" for="paypal">PayPal</label>
</div>
</div>
<div class="row">
<div class="col-md-6 mb-3">
<label for="cc-name">Name on card</label>
<input type="text" class="form-control" id="cc-name" placeholder="" required>
<small class="text-muted">Full name as displayed on card</small>
<div class="invalid-feedback">
Name on card is required
</div>
</div>
<div class="col-md-6 mb-3">
<label for="cc-number">Credit card number</label>
<input type="text" class="form-control" id="cc-number" placeholder="" required>
<div class="invalid-feedback">
Credit card number is required
</div>
</div>
</div>
<div class="row">
<div class="col-md-3 mb-3">
<label for="cc-expiration">Expiration</label>
<input type="text" class="form-control" id="cc-expiration" placeholder="" required>
<div class="invalid-feedback">
Expiration date required
</div>
</div>
<div class="col-md-3 mb-3">
<label for="cc-expiration">CVV</label>
<input type="text" class="form-control" id="cc-cvv" placeholder="" required>
<div class="invalid-feedback">
Security code required
</div>
</div>
</div>
<hr class="mb-4">
<button class="btn btn-primary btn-lg btn-block" type="submit">Continue to checkout</button>
</form>
</div>
</div>
<footer class="my-5 pt-5 text-muted text-center text-small">
<p class="mb-1">&copy; 2017-2018 Company Name</p>
<ul class="list-inline">
<li class="list-inline-item"><a href="#">Privacy</a></li>
<li class="list-inline-item"><a href="#">Terms</a></li>
<li class="list-inline-item"><a href="#">Support</a></li>
</ul>
</footer>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="../../../../assets/js/vendor/jquery-slim.min.js"><\/script>')</script>
<script src="../../../../assets/js/vendor/popper.min.js"></script>
<script src="../../../../dist/js/bootstrap.min.js"></script>
<script src="../../../../assets/js/vendor/holder.min.js"></script>
<script>
// Example starter JavaScript for disabling form submissions if there are invalid fields
(function() {
'use strict';
window.addEventListener('load', function() {
// Fetch all the forms we want to apply custom Bootstrap validation styles to
var forms = document.getElementsByClassName('needs-validation');
// Loop over them and prevent submission
var validation = Array.prototype.filter.call(forms, function(form) {
form.addEventListener('submit', function(event) {
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
form.classList.add('was-validated');
}, false);
});
}, false);
})();
</script>
</body>
</html>

80
docs/4.0/examples/cover/cover.css
View File

@ -29,40 +29,27 @@ body {
height: 100%;
background-color: #333;
}
body {
display: -ms-flexbox;
display: -webkit-box;
display: flex;
-ms-flex-pack: center;
-webkit-box-pack: center;
justify-content: center;
color: #fff;
text-align: center;
text-shadow: 0 .05rem .1rem rgba(0,0,0,.5);
text-shadow: 0 .05rem .1rem rgba(0, 0, 0, .5);
box-shadow: inset 0 0 5rem rgba(0, 0, 0, .5);
}
/* Extra markup and styles for table-esque vertical and horizontal centering */
.site-wrapper {
display: table;
width: 100%;
height: 100%; /* For at least Firefox */
min-height: 100%;
-webkit-box-shadow: inset 0 0 5rem rgba(0,0,0,.5);
box-shadow: inset 0 0 5rem rgba(0,0,0,.5);
}
.site-wrapper-inner {
display: table-cell;
vertical-align: top;
}
.cover-container {
margin-right: auto;
margin-left: auto;
}
/* Padding for spacing */
.inner {
padding: 2rem;
max-width: 42em;
}
/*
* Header
*/
.masthead {
margin-bottom: 2rem;
}
@ -73,15 +60,15 @@ body {
.nav-masthead .nav-link {
padding: .25rem 0;
font-weight: bold;
color: rgba(255,255,255,.5);
font-weight: 700;
color: rgba(255, 255, 255, .5);
background-color: transparent;
border-bottom: .25rem solid transparent;
}
.nav-masthead .nav-link:hover,
.nav-masthead .nav-link:focus {
border-bottom-color: rgba(255,255,255,.25);
border-bottom-color: rgba(255, 255, 255, .25);
}
.nav-masthead .nav-link + .nav-link {
@ -106,55 +93,18 @@ body {
/*
* Cover
*/
.cover {
padding: 0 1.5rem;
}
.cover .btn-lg {
padding: .75rem 1.25rem;
font-weight: bold;
font-weight: 700;
}
/*
* Footer
*/
.mastfoot {
color: rgba(255,255,255,.5);
}
/*
* Affix and center
*/
@media (min-width: 40em) {
/* Pull out the header and footer */
.masthead {
position: fixed;
top: 0;
}
.mastfoot {
position: fixed;
bottom: 0;
}
/* Start the vertical centering */
.site-wrapper-inner {
vertical-align: middle;
}
/* Handle the widths */
.masthead,
.mastfoot,
.cover-container {
width: 100%; /* Must be percentage or pixels for horizontal alignment */
}
}
@media (min-width: 62em) {
.masthead,
.mastfoot,
.cover-container {
width: 42rem;
}
color: rgba(255, 255, 255, .5);
}

69
docs/4.0/examples/cover/index.html
View File

@ -1,4 +1,4 @@
<!DOCTYPE html>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
@ -10,59 +10,48 @@
<title>Cover Template for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link href="../../../../dist/css/bootstrap-material-design.min.css" rel="stylesheet">
<link href="../../../../dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="cover.css" rel="stylesheet">
</head>
<body>
<div class="site-wrapper">
<div class="site-wrapper-inner">
<div class="cover-container">
<div class="masthead clearfix">
<div class="inner">
<h3 class="masthead-brand">Cover</h3>
<nav class="nav nav-masthead">
<a class="nav-link active" href="#">Home</a>
<a class="nav-link" href="#">Features</a>
<a class="nav-link" href="#">Contact</a>
</nav>
</div>
</div>
<div class="inner cover">
<h1 class="cover-heading">Cover your page.</h1>
<p class="lead">Cover is a one-page template for building simple and beautiful home pages. Download, edit the text, and add your own fullscreen background photo to make it your own.</p>
<p class="lead">
<a href="#" class="btn btn-lg btn-secondary">Learn more</a>
</p>
</div>
<div class="mastfoot">
<div class="inner">
<p>Cover template for <a href="https://getbootstrap.com">Bootstrap</a>, by <a href="https://twitter.com/mdo">@mdo</a>.</p>
</div>
</div>
<body class="text-center">
<div class="cover-container d-flex h-100 p-3 mx-auto flex-column">
<header class="masthead mb-auto">
<div class="inner">
<h3 class="masthead-brand">Cover</h3>
<nav class="nav nav-masthead justify-content-center">
<a class="nav-link active" href="#">Home</a>
<a class="nav-link" href="#">Features</a>
<a class="nav-link" href="#">Contact</a>
</nav>
</div>
</header>
</div>
<main role="main" class="inner cover">
<h1 class="cover-heading">Cover your page.</h1>
<p class="lead">Cover is a one-page template for building simple and beautiful home pages. Download, edit the text, and add your own fullscreen background photo to make it your own.</p>
<p class="lead">
<a href="#" class="btn btn-lg btn-secondary">Learn more</a>
</p>
</main>
<footer class="mastfoot mt-auto">
<div class="inner">
<p>Cover template for <a href="https://getbootstrap.com/">Bootstrap</a>, by <a href="https://twitter.com/mdo">@mdo</a>.</p>
</div>
</footer>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="../../../../assets/js/vendor/jquery.min.js"><\/script>')</script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="../../../../assets/js/vendor/jquery-slim.min.js"><\/script>')</script>
<script src="../../../../assets/js/vendor/popper.min.js"></script>
<script src="../../../../dist/js/bootstrap-material-design.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="../../../../assets/js/ie10-viewport-bug-workaround.js"></script>
<script src="../../../../dist/js/bootstrap.min.js"></script>
</body>
</html>

111
docs/4.0/examples/dashboard/dashboard.css
View File

@ -1,20 +1,11 @@
/*
* Base structure
*/
/* Move down content because we have a fixed navbar that is 3.5rem tall */
body {
padding-top: 3.5rem;
font-size: .875rem;
}
/*
* Typography
*/
h1 {
margin-bottom: 20px;
padding-bottom: 9px;
border-bottom: 1px solid #eee;
.feather {
width: 16px;
height: 16px;
vertical-align: text-bottom;
}
/*
@ -23,48 +14,80 @@ h1 {
.sidebar {
position: fixed;
top: 51px;
top: 0;
bottom: 0;
left: 0;
z-index: 1000;
padding: 20px;
z-index: 100; /* Behind the navbar */
padding: 0;
box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1);
}
.sidebar-sticky {
position: -webkit-sticky;
position: sticky;
top: 48px; /* Height of navbar */
height: calc(100vh - 48px);
padding-top: .5rem;
overflow-x: hidden;
overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
border-right: 1px solid #eee;
}
/* Sidebar navigation */
.sidebar {
padding-left: 0;
padding-right: 0;
}
.sidebar .nav {
margin-bottom: 20px;
}
.sidebar .nav-item {
width: 100%;
}
.sidebar .nav-item + .nav-item {
margin-left: 0;
}
.sidebar .nav-link {
border-radius: 0;
font-weight: 500;
color: #333;
}
.sidebar .nav-link .feather {
margin-right: 4px;
color: #999;
}
.sidebar .nav-link.active {
color: #007bff;
}
.sidebar .nav-link:hover .feather,
.sidebar .nav-link.active .feather {
color: inherit;
}
.sidebar-heading {
font-size: .75rem;
text-transform: uppercase;
}
/*
* Dashboard
* Navbar
*/
/* Placeholders */
.placeholders {
padding-bottom: 3rem;
.navbar-brand {
padding-top: .75rem;
padding-bottom: .75rem;
font-size: 1rem;
background-color: rgba(0, 0, 0, .25);
box-shadow: inset -1px 0 0 rgba(0, 0, 0, .25);
}
.placeholder img {
padding-top: 1.5rem;
padding-bottom: 1.5rem;
.navbar .form-control {
padding: .75rem 1rem;
border-width: 0;
border-radius: 0;
}
.form-control-dark {
color: #fff;
background-color: rgba(255, 255, 255, .1);
border-color: rgba(255, 255, 255, .1);
}
.form-control-dark:focus {
border-color: transparent;
box-shadow: 0 0 0 3px rgba(255, 255, 255, .25);
}
/*
* Utilities
*/
.border-top { border-top: 1px solid #e5e5e5; }
.border-bottom { border-bottom: 1px solid #e5e5e5; }

239
docs/4.0/examples/dashboard/index.html
View File

@ -1,4 +1,4 @@
<!DOCTYPE html>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
@ -10,116 +10,121 @@
<title>Dashboard Template for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link href="../../../../dist/css/bootstrap-material-design.min.css" rel="stylesheet">
<link href="../../../../dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="dashboard.css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
<a class="navbar-brand" href="#">Dashboard</a>
<button class="navbar-toggler d-lg-none" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Settings</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Help</a>
</li>
</ul>
<form class="form-inline mt-2 mt-md-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
<nav class="navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0">
<a class="navbar-brand col-sm-3 col-md-2 mr-0" href="#">Company name</a>
<input class="form-control form-control-dark w-100" type="text" placeholder="Search" aria-label="Search">
<ul class="navbar-nav px-3">
<li class="nav-item text-nowrap">
<a class="nav-link" href="#">Sign out</a>
</li>
</ul>
</nav>
<div class="container-fluid">
<div class="row">
<nav class="col-sm-3 col-md-2 d-none d-sm-block bg-light sidebar">
<ul class="nav nav-pills flex-column">
<li class="nav-item">
<a class="nav-link active" href="#">Overview <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Reports</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Analytics</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Export</a>
</li>
</ul>
<nav class="col-md-2 d-none d-md-block bg-light sidebar">
<div class="sidebar-sticky">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link active" href="#">
<span data-feather="home"></span>
Dashboard <span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<span data-feather="file"></span>
Orders
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<span data-feather="shopping-cart"></span>
Products
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<span data-feather="users"></span>
Customers
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<span data-feather="bar-chart-2"></span>
Reports
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<span data-feather="layers"></span>
Integrations
</a>
</li>
</ul>
<ul class="nav nav-pills flex-column">
<li class="nav-item">
<a class="nav-link" href="#">Nav item</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Nav item again</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">One more nav</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Another nav item</a>
</li>
</ul>
<ul class="nav nav-pills flex-column">
<li class="nav-item">
<a class="nav-link" href="#">Nav item again</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">One more nav</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Another nav item</a>
</li>
</ul>
<h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-muted">
<span>Saved reports</span>
<a class="d-flex align-items-center text-muted" href="#">
<span data-feather="plus-circle"></span>
</a>
</h6>
<ul class="nav flex-column mb-2">
<li class="nav-item">
<a class="nav-link" href="#">
<span data-feather="file-text"></span>
Current month
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<span data-feather="file-text"></span>
Last quarter
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<span data-feather="file-text"></span>
Social engagement
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<span data-feather="file-text"></span>
Year-end sale
</a>
</li>
</ul>
</div>
</nav>
<main class="col-sm-9 ml-sm-auto col-md-10 pt-3" role="main">
<h1>Dashboard</h1>
<main role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4">
<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pb-2 mb-3 border-bottom">
<h1 class="h2">Dashboard</h1>
<div class="btn-toolbar mb-2 mb-md-0">
<div class="btn-group mr-2">
<button class="btn btn-sm btn-outline-secondary">Share</button>
<button class="btn btn-sm btn-outline-secondary">Export</button>
</div>
<button class="btn btn-sm btn-outline-secondary dropdown-toggle">
<span data-feather="calendar"></span>
This week
</button>
</div>
</div>
<section class="row text-center placeholders">
<div class="col-6 col-sm-3 placeholder">
<img src="data:image/gif;base64,R0lGODlhAQABAIABAAJ12AAAACwAAAAAAQABAAACAkQBADs=" width="200" height="200" class="img-fluid rounded-circle" alt="Generic placeholder thumbnail">
<h4>Label</h4>
<div class="text-muted">Something else</div>
</div>
<div class="col-6 col-sm-3 placeholder">
<img src="data:image/gif;base64,R0lGODlhAQABAIABAADcgwAAACwAAAAAAQABAAACAkQBADs=" width="200" height="200" class="img-fluid rounded-circle" alt="Generic placeholder thumbnail">
<h4>Label</h4>
<span class="text-muted">Something else</span>
</div>
<div class="col-6 col-sm-3 placeholder">
<img src="data:image/gif;base64,R0lGODlhAQABAIABAAJ12AAAACwAAAAAAQABAAACAkQBADs=" width="200" height="200" class="img-fluid rounded-circle" alt="Generic placeholder thumbnail">
<h4>Label</h4>
<span class="text-muted">Something else</span>
</div>
<div class="col-6 col-sm-3 placeholder">
<img src="data:image/gif;base64,R0lGODlhAQABAIABAADcgwAAACwAAAAAAQABAAACAkQBADs=" width="200" height="200" class="img-fluid rounded-circle" alt="Generic placeholder thumbnail">
<h4>Label</h4>
<span class="text-muted">Something else</span>
</div>
</section>
<canvas class="my-4" id="myChart" width="900" height="380"></canvas>
<h2>Section title</h2>
<div class="table-responsive">
<table class="table table-striped">
<table class="table table-striped table-sm">
<thead>
<tr>
<th>#</th>
@ -252,11 +257,47 @@
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="../../../../assets/js/vendor/jquery.min.js"><\/script>')</script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="../../../../assets/js/vendor/jquery-slim.min.js"><\/script>')</script>
<script src="../../../../assets/js/vendor/popper.min.js"></script>
<script src="../../../../dist/js/bootstrap-material-design.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="../../../../assets/js/ie10-viewport-bug-workaround.js"></script>
<script src="../../../../dist/js/bootstrap.min.js"></script>
<!-- Icons -->
<script src="https://unpkg.com/feather-icons/dist/feather.min.js"></script>
<script>
feather.replace()
</script>
<!-- Graphs -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.min.js"></script>
<script>
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
datasets: [{
data: [15339, 21345, 18483, 24003, 23489, 24092, 12034],
lineTension: 0,
backgroundColor: 'transparent',
borderColor: '#007bff',
borderWidth: 4,
pointBackgroundColor: '#007bff'
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: false
}
}]
},
legend: {
display: false,
}
}
});
</script>
</body>
</html>

87
docs/4.0/examples/floating-labels/floating-labels.css Executable file
View File

@ -0,0 +1,87 @@
:root {
--input-padding-x: .75rem;
--input-padding-y: .75rem;
}
html,
body {
height: 100%;
}
body {
display: -ms-flexbox;
display: -webkit-box;
display: flex;
-ms-flex-align: center;
-ms-flex-pack: center;
-webkit-box-align: center;
align-items: center;
-webkit-box-pack: center;
justify-content: center;
padding-top: 40px;
padding-bottom: 40px;
background-color: #f5f5f5;
}
.form-signin {
width: 100%;
max-width: 420px;
padding: 15px;
margin: 0 auto;
}
.form-label-group {
position: relative;
margin-bottom: 1rem;
}
.form-label-group > input,
.form-label-group > label {
padding: var(--input-padding-y) var(--input-padding-x);
}
.form-label-group > label {
position: absolute;
top: 0;
left: 0;
display: block;
width: 100%;
margin-bottom: 0; /* Override default `<label>` margin */
line-height: 1.5;
color: #495057;
border: 1px solid transparent;
border-radius: .25rem;
transition: all .1s ease-in-out;
}
.form-label-group input::-webkit-input-placeholder {
color: transparent;
}
.form-label-group input:-ms-input-placeholder {
color: transparent;
}
.form-label-group input::-ms-input-placeholder {
color: transparent;
}
.form-label-group input::-moz-placeholder {
color: transparent;
}
.form-label-group input::placeholder {
color: transparent;
}
.form-label-group input:not(:placeholder-shown) {
padding-top: calc(var(--input-padding-y) + var(--input-padding-y) * (2 / 3));
padding-bottom: calc(var(--input-padding-y) / 3);
}
.form-label-group input:not(:placeholder-shown) ~ label {
padding-top: calc(var(--input-padding-y) / 3);
padding-bottom: calc(var(--input-padding-y) / 3);
font-size: 12px;
color: #777;
}

46
docs/4.0/examples/floating-labels/index.html Executable file
View File

@ -0,0 +1,46 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../../../favicon.ico">
<title>Floating labels example for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link href="../../../../dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="floating-labels.css" rel="stylesheet">
</head>
<body>
<form class="form-signin">
<div class="text-center mb-4">
<img class="mb-4" src="https://getbootstrap.com/assets/brand/bootstrap-solid.svg" alt="" width="72" height="72">
<h1 class="h3 mb-3 font-weight-normal">Floating labels</h1>
<p>Build form controls with floating labels via the <code>:placeholder-shown</code> pseudo-element. <a href="https://caniuse.com/#feat=css-placeholder-shown">Works in latest Chrome, Safari, and Firefox.</a></p>
</div>
<div class="form-label-group">
<input type="email" id="inputEmail" class="form-control" placeholder="Email address" required autofocus>
<label for="inputEmail">Email address</label>
</div>
<div class="form-label-group">
<input type="password" id="inputPassword" class="form-control" placeholder="Password" required>
<label for="inputPassword">Password</label>
</div>
<div class="checkbox mb-3">
<label>
<input type="checkbox" value="remember-me"> Remember me
</label>
</div>
<button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
<p class="mt-5 mb-3 text-muted text-center">&copy; 2017-2018</p>
</form>
</body>
</html>

4
docs/4.0/examples/grid/grid.css
View File

@ -17,8 +17,8 @@ h3 {
[class*="col-"] {
padding-top: 1rem;
padding-bottom: 1rem;
background-color: rgba(86,61,124,.15);
border: 1px solid rgba(86,61,124,.2);
background-color: rgba(86, 61, 124, .15);
border: 1px solid rgba(86, 61, 124, .2);
}
hr {

10
docs/4.0/examples/grid/index.html
View File

@ -1,4 +1,4 @@
<!DOCTYPE html>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
@ -10,7 +10,7 @@
<title>Grid Template for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link href="../../../../dist/css/bootstrap-material-design.min.css" rel="stylesheet">
<link href="../../../../dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="grid.css" rel="stylesheet">
@ -131,11 +131,5 @@
</div>
</div> <!-- /container -->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="../../../../assets/js/ie10-viewport-bug-workaround.js"></script>
</body>
</html>

367
docs/4.0/examples/index.html
View File

@ -1,368 +1 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>
Examples &middot; Bootstrap Material Design
</title>
<!-- Twitter -->
<meta name="twitter:site" content="@FezVrasta">
<meta name="twitter:creator" content="@FezVrasta">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="Examples">
<meta name="twitter:description" content="Quickly get a project started with any of our examples ranging from using parts of the framework to custom components and layouts.">
<meta name="twitter:image" content="https://fezvrasta.github.io/assets/brand/bootstrap-social-logo.png">
<!-- Facebook -->
<meta property="og:url" content="https://fezvrasta.github.io/docs/4.0/examples/">
<meta property="og:title" content="Examples">
<meta property="og:description" content="Quickly get a project started with any of our examples ranging from using parts of the framework to custom components and layouts.">
<meta property="og:type" content="website">
<meta property="og:image" content="http://fezvrasta.github.io/assets/brand/bootstrap-social.png">
<meta property="og:image:secure_url" content="https://fezvrasta.github.io/assets/brand/bootstrap-social.png">
<meta property="og:image:type" content="image/png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<!-- Meta -->
<meta name="description" content="The most popular HTML, CSS, and JS Material Design library in the world.">
<meta name="author" content="Federico Zivolo and Bootstrap contributors">
<!-- Bootstrap core CSS -->
<link href="/bootstrap-material-design/dist/css/bootstrap-material-design.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" rel="stylesheet" >
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Documentation extras -->
<link href="/bootstrap-material-design/assets/css/docs.min.css" rel="stylesheet">
<!-- Favicons -->
<link rel="apple-touch-icon" href="/bootstrap-material-design/apple-touch-icon.png">
<link rel="icon" href="/bootstrap-material-design/favicon.ico">
</head>
<body class="bd-docs" data-spy="scroll" data-target=".bd-sidenav-active">
<a id="skippy" class="sr-only sr-only-focusable" href="#content">
<div class="container">
<span class="skiplink-text">Skip to main content</span>
</div>
</a>
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
<a class="navbar-brand mr-0 mr-md-2" href="/bootstrap-material-design/" aria-label="Bootstrap">
<svg class="d-block" width="36" height="36" viewbox="0 0 612 612" xmlns="http://www.w3.org/2000/svg" focusable="false"><title>Bootstrap</title><path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/><path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/></svg>
</a>
<div class="navbar-nav-scroll">
<ul class="navbar-nav bd-navbar-nav flex-row">
<li class="nav-item">
<a class="nav-link " href="/bootstrap-material-design/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Bootstrap');">Home</a>
</li>
<li class="nav-item">
<a class="nav-link " href="/bootstrap-material-design/docs/4.0/getting-started/introduction/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Docs');">Documentation</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="/bootstrap-material-design/docs/4.0/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
<li class="nav-item partner creativetim">
<a class="nav-link" href="https://www.creative-tim.com/product/material-dashboard-pro?affiliate_id=87385" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Material Dashboard Pro');" target="_blank" rel="noopener">Material Dashboard</a>
</li>
<li class="nav-item partner creativetim">
<a class="nav-link" href="https://www.creative-tim.com/product/material-kit-pro?affiliate_id=87385" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Material Kit Pro');" target="_blank" rel="noopener">Material Kit</a>
</li>
<li class="nav-item partner mdbootstrap">
<a class="nav-link" href="https://mdbootstrap.com/product/material-design-for-bootstrap-pro/?utm_source=7e4bff&utm_id=7e4bff" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Material Design for Boostrap PRO');"
target="_blank" rel="noopener">Material Design for Bootstrap PRO</a>
</li>
</ul>
</div>
<ul class="navbar-nav flex-row ml-md-auto d-none d-md-flex">
<li class="nav-item dropdown">
<a class="nav-item nav-link dropdown-toggle mr-md-2" href="#" id="bd-versions" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
v4.0
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="bd-versions">
<a class="dropdown-item active" href="/bootstrap-material-design/docs/4.0/">Latest (4.x)</a>
<a class="dropdown-item" href="https://cdn.rawgit.com/FezVrasta/bootstrap-material-design/gh-pages-v3/index.html">v3.x</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link p-2" href="https://github.com/FezVrasta/bootstrap-material-design" target="_blank" rel="noopener" aria-label="GitHub">
<svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 499.36" focusable="false"><title>GitHub</title><path d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z" fill="currentColor" fill-rule="evenodd"/></svg>
</a>
</li>
<li class="nav-item">
<a class="nav-link p-2" href="https://twitter.com/FezVrasta" target="_blank" rel="noopener" aria-label="Twitter">
<svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 416.32" focusable="false"><title>Twitter</title><path d="M160.83 416.32c193.2 0 298.92-160.22 298.92-298.92 0-4.51 0-9-.2-13.52A214 214 0 0 0 512 49.38a212.93 212.93 0 0 1-60.44 16.6 105.7 105.7 0 0 0 46.3-58.19 209 209 0 0 1-66.79 25.37 105.09 105.09 0 0 0-181.73 71.91 116.12 116.12 0 0 0 2.66 24c-87.28-4.3-164.73-46.3-216.56-109.82A105.48 105.48 0 0 0 68 159.6a106.27 106.27 0 0 1-47.53-13.11v1.43a105.28 105.28 0 0 0 84.21 103.06 105.67 105.67 0 0 1-47.33 1.84 105.06 105.06 0 0 0 98.14 72.94A210.72 210.72 0 0 1 25 370.84a202.17 202.17 0 0 1-25-1.43 298.85 298.85 0 0 0 160.83 46.92" fill="currentColor"/></svg>
</a>
</li>
<li class="nav-item">
<a class="nav-link p-2" href="https://spectrum.chat/bootstrap-md" target="_blank" rel="noopener" aria-label="Spectrum">
<svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 512" focusable="false"><title>Spectrum</title>
<path fill="currentColor" fill-rule="evenodd" d="M256,51.2C21.5,51.2,0,83.4,0,222.2c0,94.2,9.7,139.3,89.1,158.7l0,0v58.4c0.5,12.4,11,22.1,23.5,21.6c4-0.2,8-1.4,11.4-3.6l98.8-63.5H256c234.5,0,256-32.3,256-171.5S490.5,51.2,256,51.2z M144.9,265.2c-17.8-0.6-31.8-15.5-31.2-33.3c0.6-17.8,15.5-31.8,33.3-31.2c17.4,0.6,31.2,14.8,31.2,32.2C177.9,251,163,265.5,144.9,265.2C144.9,265.2,144.9,265.2,144.9,265.2zM256,265.2c-17.8-0.6-31.8-15.5-31.2-33.3c0.6-17.8,15.5-31.8,33.3-31.2c17.4,0.6,31.2,14.8,31.2,32.2C289,251,274.1,265.5,256,265.2C256,265.2,256,265.2,256,265.2z M367.1,265.2c-17.8-0.6-31.8-15.5-31.2-33.3c0.6-17.8,15.5-31.8,33.3-31.2c17.4,0.6,31.2,14.8,31.2,32.2C400.1,251,385.2,265.5,367.1,265.2C367.1,265.2,367.1,265.2,367.1,265.2z" />
</svg>
</a>
</li>
</ul>
<a class="btn btn-bd-yellow d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/FezVrasta/bootstrap-material-design/releases">Download</a>
</header>
<div class="container my-5">
<main class="bd-content" role="main">
<h1 class="bd-title" id="content">Examples</h1>
<p class="bd-lead">Quickly get a project started with any of our examples ranging from using parts of the framework to custom components and layouts.</p>
<script async type="text/javascript" src="https://cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=fezvrastagithubiobootstrapmateri" id="_carbonads_js"></script>
<p><a href="https://github.com/FezVrasta/bootstrap-material-design/releases">Download the Bootstrap source code</a> to snag these examples.</p>
<h2 id="framework">Framework</h2>
<p>Examples that focus on implementing uses of built-in components provided by Bootstrap.</p>
<div class="row bd-examples">
<div class="col-6 col-md-4">
<a href="/bootstrap-material-design/docs/4.0/examples/starter-template/">
<img class="img-thumbnail" src="/bootstrap-material-design/docs/4.0/examples/screenshots/starter-template.jpg" alt="" />
<h4>Starter template</h4>
</a>
<p>Nothing but the basics: compiled CSS and JavaScript.</p>
</div>
<div class="col-6 col-md-4">
<a href="/bootstrap-material-design/docs/4.0/examples/grid/">
<img class="img-thumbnail" src="/bootstrap-material-design/docs/4.0/examples/screenshots/grid.jpg" alt="" />
<h4>Grids</h4>
</a>
<p>Multiple examples of grid layouts with all four tiers, nesting, and more.</p>
</div>
<div class="clearfix hidden-md-up"></div>
<div class="col-6 col-md-4">
<a href="/bootstrap-material-design/docs/4.0/examples/jumbotron/">
<img class="img-thumbnail" src="/bootstrap-material-design/docs/4.0/examples/screenshots/jumbotron.jpg" alt="" />
<h4>Jumbotron</h4>
</a>
<p>Build around the jumbotron with a navbar and some basic grid columns.</p>
</div>
<div class="col-6 col-md-4">
<a href="/bootstrap-material-design/docs/4.0/examples/narrow-jumbotron/">
<img class="img-thumbnail" src="/bootstrap-material-design/docs/4.0/examples/screenshots/jumbotron-narrow.jpg" alt="" />
<h4>Narrow jumbotron</h4>
</a>
<p>Build a more custom page by narrowing the default container and jumbotron.</p>
</div>
</div>
<h2 id="navbars">Navbars</h2>
<p>Taking the default navbar component and showing how it can be moved, placed, and extended.</p>
<div class="row bd-examples">
<div class="col-6 col-md-4">
<a href="/bootstrap-material-design/docs/4.0/examples/navbars/">
<img class="img-thumbnail" src="/bootstrap-material-design/docs/4.0/examples/screenshots/navbar.jpg" alt="" />
<h4>Navbar</h4>
</a>
<p>Super basic template that includes the navbar along with some additional content.</p>
</div>
<div class="col-6 col-md-4">
<a href="/bootstrap-material-design/docs/4.0/examples/navbar-top/">
<img class="img-thumbnail" src="/bootstrap-material-design/docs/4.0/examples/screenshots/navbar-static.jpg" alt="" />
<h4>Static top navbar</h4>
</a>
<p>Super basic template with a static top navbar along with some additional content.</p>
</div>
<div class="clearfix hidden-md-up"></div>
<div class="col-6 col-md-4">
<a href="/bootstrap-material-design/docs/4.0/examples/navbar-top-fixed/">
<img class="img-thumbnail" src="/bootstrap-material-design/docs/4.0/examples/screenshots/navbar-fixed.jpg" alt="" />
<h4>Fixed navbar</h4>
</a>
<p>Super basic template with a fixed top navbar along with some additional content.</p>
</div>
</div>
<h2 id="custom-components">Custom components</h2>
<p>Brand new components and templates to help folks quickly get started with Bootstrap and demonstrate best practices for adding onto the framework.</p>
<div class="row bd-examples">
<div class="col-6 col-md-4">
<a href="/bootstrap-material-design/docs/4.0/examples/album/">
<img class="img-thumbnail" src="/bootstrap-material-design/docs/4.0/examples/screenshots/album.jpg" alt="" />
<h4>Album</h4>
</a>
<p>Simple one-page template for photo galleries, portfolios, and more.</p>
</div>
<div class="col-6 col-md-4">
<a href="/bootstrap-material-design/docs/4.0/examples/cover/">
<img class="img-thumbnail" src="/bootstrap-material-design/docs/4.0/examples/screenshots/cover.jpg" alt="" />
<h4>Cover</h4>
</a>
<p>A one-page template for building simple and beautiful home pages.</p>
</div>
<div class="clearfix hidden-md-up"></div>
<div class="col-6 col-md-4">
<a href="/bootstrap-material-design/docs/4.0/examples/carousel/">
<img class="img-thumbnail" src="/bootstrap-material-design/docs/4.0/examples/screenshots/carousel.jpg" alt="" />
<h4>Carousel</h4>
</a>
<p>Customize the navbar and carousel, then add some new components.</p>
</div>
<div class="col-6 col-md-4">
<a href="/bootstrap-material-design/docs/4.0/examples/blog/">
<img class="img-thumbnail" src="/bootstrap-material-design/docs/4.0/examples/screenshots/blog.jpg" alt="" />
<h4>Blog</h4>
</a>
<p>Simple two-column blog layout with custom navigation, header, and type.</p>
</div>
<div class="clearfix hidden-md-up"></div>
<div class="col-6 col-md-4">
<a href="/bootstrap-material-design/docs/4.0/examples/dashboard/">
<img class="img-thumbnail" src="/bootstrap-material-design/docs/4.0/examples/screenshots/dashboard.jpg" alt="" />
<h4>Dashboard</h4>
</a>
<p>Basic admin dashboard shell with fixed sidebar and navbar.</p>
</div>
<div class="col-6 col-md-4">
<a href="/bootstrap-material-design/docs/4.0/examples/signin/">
<img class="img-thumbnail" src="/bootstrap-material-design/docs/4.0/examples/screenshots/sign-in.jpg" alt="" />
<h4>Sign-in page</h4>
</a>
<p>Custom form layout and design for a simple sign in form.</p>
</div>
<div class="clearfix hidden-md-up"></div>
<div class="col-6 col-md-4">
<a href="/bootstrap-material-design/docs/4.0/examples/justified-nav/">
<img class="img-thumbnail" src="/bootstrap-material-design/docs/4.0/examples/screenshots/justified-nav.jpg" alt="" />
<h4>Justified nav</h4>
</a>
<p>Create a custom navbar with justified links. Heads up! Not too Safari friendly.</p>
</div>
<div class="col-6 col-md-4">
<a href="/bootstrap-material-design/docs/4.0/examples/sticky-footer/">
<img class="img-thumbnail" src="/bootstrap-material-design/docs/4.0/examples/screenshots/sticky-footer.jpg" alt="" />
<h4>Sticky footer</h4>
</a>
<p>Attach a footer to the bottom of the viewport when the content is shorter than it.</p>
</div>
<div class="clearfix hidden-md-up"></div>
<div class="col-6 col-md-4">
<a href="/bootstrap-material-design/docs/4.0/examples/sticky-footer-navbar/">
<img class="img-thumbnail" src="/bootstrap-material-design/docs/4.0/examples/screenshots/sticky-footer-navbar.jpg" alt="" />
<h4>Sticky footer w/ navbar</h4>
</a>
<p>Attach a footer to the bottom of the viewport with a fixed top navbar.</p>
</div>
</div>
<h2 id="experiments">Experiments</h2>
<p>Examples that focus on future-friendly features or techniques.</p>
<div class="row bd-examples">
<div class="col-6 col-md-4">
<a href="/bootstrap-material-design/docs/4.0/examples/offcanvas/">
<img class="img-thumbnail" src="/bootstrap-material-design/docs/4.0/examples/screenshots/offcanvas.jpg" alt="" />
<h4>Offcanvas</h4>
</a>
<p>Build a toggleable off-canvas navigation menu for use with Bootstrap.</p>
</div>
</div>
</main>
</div>
<footer class="bd-footer text-muted">
<div class="container-fluid p-3 p-md-5">
<ul class="bd-footer-links">
<li><a href="https://github.com/FezVrasta/bootstrap-material-design">GitHub</a></li>
<li><a href="/bootstrap-material-design/examples/">Examples</a></li>
<li><a href="/bootstrap-material-design/about/">About</a></li>
</ul>
<p>Designed and built by <a href="https://twitter.com/FezVrasta" target="_blank" rel="noopener">@FezVrasta</a> with the help of <a href="https://github.com/FezVrasta/bootstrap-material-design/graphs/contributors">our contributors</a>.</p>
<p>Currently v4.0.0-beta.4. Code licensed <a rel="license noopener" href="https://github.com/twbs/bootstrap/blob/master/LICENSE" target="_blank">MIT</a>, docs <a rel="license noopener" href="https://creativecommons.org/licenses/by/3.0/" target="_blank">CC BY 3.0</a>.</p>
</div>
</footer>
<script src="/bootstrap-material-design/assets/js/vendor/split.min.js">
</script>
<script>
Split.setup({
creativetim: function () {document.body.classList.add('creativetim')},
mdbootstrap: function () {document.body.classList.add('mdbootstrap')},
});
(function (i, s, o, g, r, a, m) {
i['GoogleAnalyticsObject'] = r; i[r] = i[r] || function () {
(i[r].q = i[r].q || []).push(arguments)
}, i[r].l = 1 * new Date(); a = s.createElement(o),
m = s.getElementsByTagName(o)[0]; a.async = 1; a.src = g; m.parentNode.insertBefore(a, m)
})(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga');
ga('create', 'UA-80431047-1', 'auto');
ga('send', 'pageview');
</script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="/bootstrap-material-design/assets/js/vendor/jquery-slim.min.js"><\/script>')</script>
<script src="/bootstrap-material-design/assets/js/vendor/popper.min.js"></script>
<script src="https://cdn.rawgit.com/FezVrasta/snackbarjs/1.1.0/dist/snackbar.min.js" crossorigin="anonymous"></script>
<script src="/bootstrap-material-design/dist/js/bootstrap-material-design.js"></script>
<script src="/bootstrap-material-design/assets/js/vendor/anchor.min.js"></script>
<script src="/bootstrap-material-design/assets/js/vendor/clipboard.min.js"></script>
<script src="/bootstrap-material-design/assets/js/vendor/holder.min.js"></script>
<script src="/bootstrap-material-design/assets/js/src/application.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="/bootstrap-material-design/assets/js/ie10-viewport-bug-workaround.js"></script>
<script src="/bootstrap-material-design/assets/js/ie-emulation-modes-warning.js"></script>
<script>
Holder.addTheme('gray', {
bg: '#777',
fg: 'rgba(255,255,255,.75)',
font: 'Helvetica',
fontweight: 'normal'
})
</script>
</body>
</html>

78
docs/4.0/examples/jumbotron/index.html
View File

@ -1,4 +1,4 @@
<!DOCTYPE html>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
@ -10,7 +10,7 @@
<title>Jumbotron Template for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link href="../../../../dist/css/bootstrap-material-design.min.css" rel="stylesheet">
<link href="../../../../dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="jumbotron.css" rel="stylesheet">
@ -51,51 +51,53 @@
</div>
</nav>
<!-- Main jumbotron for a primary marketing message or call to action -->
<div class="jumbotron">
<main role="main">
<!-- Main jumbotron for a primary marketing message or call to action -->
<div class="jumbotron">
<div class="container">
<h1 class="display-3">Hello, world!</h1>
<p>This is a template for a simple marketing or informational website. It includes a large callout called a jumbotron and three supporting pieces of content. Use it as a starting point to create something more unique.</p>
<p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more &raquo;</a></p>
</div>
</div>
<div class="container">
<h1 class="display-3">Hello, world!</h1>
<p>This is a template for a simple marketing or informational website. It includes a large callout called a jumbotron and three supporting pieces of content. Use it as a starting point to create something more unique.</p>
<p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more &raquo;</a></p>
</div>
</div>
<div class="container">
<!-- Example row of columns -->
<div class="row">
<div class="col-md-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-secondary" href="#" role="button">View details &raquo;</a></p>
<!-- Example row of columns -->
<div class="row">
<div class="col-md-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-secondary" href="#" role="button">View details &raquo;</a></p>
</div>
<div class="col-md-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-secondary" href="#" role="button">View details &raquo;</a></p>
</div>
<div class="col-md-4">
<h2>Heading</h2>
<p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
<p><a class="btn btn-secondary" href="#" role="button">View details &raquo;</a></p>
</div>
</div>
<div class="col-md-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-secondary" href="#" role="button">View details &raquo;</a></p>
</div>
<div class="col-md-4">
<h2>Heading</h2>
<p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
<p><a class="btn btn-secondary" href="#" role="button">View details &raquo;</a></p>
</div>
</div>
<hr>
<hr>
<footer>
<p>&copy; Company 2017</p>
</footer>
</div> <!-- /container -->
</div> <!-- /container -->
</main>
<footer class="container">
<p>&copy; Company 2017-2018</p>
</footer>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="../../../../assets/js/vendor/jquery.min.js"><\/script>')</script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="../../../../assets/js/vendor/jquery-slim.min.js"><\/script>')</script>
<script src="../../../../assets/js/vendor/popper.min.js"></script>
<script src="../../../../dist/js/bootstrap-material-design.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="../../../../assets/js/ie10-viewport-bug-workaround.js"></script>
<script src="../../../../dist/js/bootstrap.min.js"></script>
</body>
</html>

104
docs/4.0/examples/justified-nav/index.html
View File

@ -1,104 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../../../favicon.ico">
<title>Justified Nav Template for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link href="../../../../dist/css/bootstrap-material-design.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="justified-nav.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="masthead">
<h3 class="text-muted">Project name</h3>
<nav class="navbar navbar-expand-md navbar-light bg-light rounded mb-3">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav text-md-center nav-justified w-100">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Projects</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Downloads</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="http://example.com" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu" aria-labelledby="dropdown01">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
</div>
</nav>
</div>
<!-- Jumbotron -->
<div class="jumbotron">
<h1>Marketing stuff!</h1>
<p class="lead">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet.</p>
<p><a class="btn btn-lg btn-success" href="#" role="button">Get started today</a></p>
</div>
<!-- Example row of columns -->
<div class="row">
<div class="col-lg-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-primary" href="#" role="button">View details &raquo;</a></p>
</div>
<div class="col-lg-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-primary" href="#" role="button">View details &raquo;</a></p>
</div>
<div class="col-lg-4">
<h2>Heading</h2>
<p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa.</p>
<p><a class="btn btn-primary" href="#" role="button">View details &raquo;</a></p>
</div>
</div>
<!-- Site footer -->
<footer class="footer">
<p>&copy; Company 2017</p>
</footer>
</div> <!-- /container -->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="../../../../assets/js/vendor/jquery.min.js"><\/script>')</script>
<script src="../../../../assets/js/vendor/popper.min.js"></script>
<script src="../../../../dist/js/bootstrap-material-design.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="../../../../assets/js/ie10-viewport-bug-workaround.js"></script>
</body>
</html>

55
docs/4.0/examples/justified-nav/justified-nav.css
View File

@ -1,55 +0,0 @@
body {
padding-top: 20px;
}
.footer {
padding-top: 40px;
padding-bottom: 40px;
margin-top: 40px;
border-top: 1px solid #eee;
}
/* Main marketing message and sign up button */
.jumbotron {
text-align: center;
background-color: transparent;
}
.jumbotron .btn {
padding: 14px 24px;
font-size: 21px;
}
.navbar {
background-image: -webkit-gradient(linear, left top, left bottom, from(#f7f7f7),to(#eee));
background-image: -webkit-linear-gradient(top, #f7f7f7 0%,#eee 100%);
background-image: -o-linear-gradient(top, #f7f7f7 0%,#eee 100%);
background-image: linear-gradient(to bottom, #f7f7f7 0%,#eee 100%);
border: 1px solid #e5e5e5;
}
@media (min-width: 768px) {
.navbar-nav {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
.navbar-nav .nav-item {
-webkit-box-flex: 1;
-webkit-flex: 1 0 auto;
-ms-flex: 1 0 auto;
flex: 1 0 auto;
}
}
/* Responsive: Portrait tablets and up */
@media screen and (min-width: 768px) {
/* Remove the padding we set earlier */
.masthead,
.marketing,
.footer {
padding-right: 0;
padding-left: 0;
}
}

81
docs/4.0/examples/narrow-jumbotron/index.html
View File

@ -1,81 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../../../favicon.ico">
<title>Narrow Jumbotron Template for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link href="../../../../dist/css/bootstrap-material-design.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="narrow-jumbotron.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="header clearfix">
<nav>
<ul class="nav nav-pills float-right">
<li class="nav-item">
<a class="nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</nav>
<h3 class="text-muted">Project name</h3>
</div>
<div class="jumbotron">
<h1 class="display-3">Jumbotron heading</h1>
<p class="lead">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
<p><a class="btn btn-lg btn-success" href="#" role="button">Sign up today</a></p>
</div>
<div class="row marketing">
<div class="col-lg-6">
<h4>Subheading</h4>
<p>Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis interdum.</p>
<h4>Subheading</h4>
<p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras mattis consectetur purus sit amet fermentum.</p>
<h4>Subheading</h4>
<p>Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
</div>
<div class="col-lg-6">
<h4>Subheading</h4>
<p>Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis interdum.</p>
<h4>Subheading</h4>
<p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras mattis consectetur purus sit amet fermentum.</p>
<h4>Subheading</h4>
<p>Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
</div>
</div>
<footer class="footer">
<p>&copy; Company 2017</p>
</footer>
</div> <!-- /container -->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="../../../../assets/js/ie10-viewport-bug-workaround.js"></script>
</body>
</html>

79
docs/4.0/examples/narrow-jumbotron/narrow-jumbotron.css
View File

@ -1,79 +0,0 @@
/* Space out content a bit */
body {
padding-top: 1.5rem;
padding-bottom: 1.5rem;
}
/* Everything but the jumbotron gets side spacing for mobile first views */
.header,
.marketing,
.footer {
padding-right: 1rem;
padding-left: 1rem;
}
/* Custom page header */
.header {
padding-bottom: 1rem;
border-bottom: .05rem solid #e5e5e5;
}
/* Make the masthead heading the same height as the navigation */
.header h3 {
margin-top: 0;
margin-bottom: 0;
line-height: 3rem;
}
/* Custom page footer */
.footer {
padding-top: 1.5rem;
color: #777;
border-top: .05rem solid #e5e5e5;
}
/* Customize container */
@media (min-width: 48em) {
.container {
max-width: 46rem;
}
}
.container-narrow > hr {
margin: 2rem 0;
}
/* Main marketing message and sign up button */
.jumbotron {
text-align: center;
border-bottom: .05rem solid #e5e5e5;
}
.jumbotron .btn {
padding: .75rem 1.5rem;
font-size: 1.5rem;
}
/* Supporting marketing content */
.marketing {
margin: 3rem 0;
}
.marketing p + h4 {
margin-top: 1.5rem;
}
/* Responsive: Portrait tablets and up */
@media screen and (min-width: 48em) {
/* Remove the padding we set earlier */
.header,
.marketing,
.footer {
padding-right: 0;
padding-left: 0;
}
/* Space out the masthead */
.header {
margin-bottom: 2rem;
}
/* Remove the bottom border on the jumbotron for visual effect */
.jumbotron {
border-bottom: 0;
}
}

60
docs/4.0/examples/navbar-bottom/index.html Executable file
View File

@ -0,0 +1,60 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../../../favicon.ico">
<title>Bottom navbar example for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link href="../../../../dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="jumbotron mt-3">
<h1>Bottom Navbar example</h1>
<p class="lead">This example is a quick exercise to illustrate how the bottom navbar works.</p>
<a class="btn btn-lg btn-primary" href="../../components/navbar/" role="button">View navbar docs &raquo;</a>
</div>
</div>
<nav class="navbar fixed-bottom navbar-expand-sm navbar-dark bg-dark">
<a class="navbar-brand" href="#">Bottom navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
<li class="nav-item dropup">
<a class="nav-link dropdown-toggle" href="https://getbootstrap.com" id="dropdown10" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropup</a>
<div class="dropdown-menu" aria-labelledby="dropdown10">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
</div>
</nav>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="../../../../assets/js/vendor/jquery-slim.min.js"><\/script>')</script>
<script src="../../../../assets/js/vendor/popper.min.js"></script>
<script src="../../../../dist/js/bootstrap.min.js"></script>
</body>
</html>

17
docs/4.0/examples/navbar-top-fixed/index.html → docs/4.0/examples/navbar-fixed/index.html
View File

@ -1,4 +1,4 @@
<!DOCTYPE html>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
@ -10,7 +10,7 @@
<title>Fixed top navbar example for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link href="../../../../dist/css/bootstrap-material-design.min.css" rel="stylesheet">
<link href="../../../../dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="navbar-top-fixed.css" rel="stylesheet">
@ -42,23 +42,20 @@
</div>
</nav>
<div class="container">
<main role="main" class="container">
<div class="jumbotron">
<h1>Navbar example</h1>
<p class="lead">This example is a quick exercise to illustrate how fixed to top navbar works. As you scroll, it will remain fixed to the top of your browser's viewport.</p>
<a class="btn btn-lg btn-primary" href="../../components/navbar/" role="button">View navbar docs &raquo;</a>
</div>
</div>
</main>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="../../../../assets/js/vendor/jquery.min.js"><\/script>')</script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="../../../../assets/js/vendor/jquery-slim.min.js"><\/script>')</script>
<script src="../../../../assets/js/vendor/popper.min.js"></script>
<script src="../../../../dist/js/bootstrap-material-design.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="../../../../assets/js/ie10-viewport-bug-workaround.js"></script>
<script src="../../../../dist/js/bootstrap.min.js"></script>
</body>
</html>

0
docs/4.0/examples/navbar-top-fixed/navbar-top-fixed.css → docs/4.0/examples/navbar-fixed/navbar-top-fixed.css
View File

17
docs/4.0/examples/navbar-top/index.html → docs/4.0/examples/navbar-static/index.html
View File

@ -1,4 +1,4 @@
<!DOCTYPE html>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
@ -10,7 +10,7 @@
<title>Top navbar example for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link href="../../../../dist/css/bootstrap-material-design.min.css" rel="stylesheet">
<link href="../../../../dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="navbar-top.css" rel="stylesheet">
@ -42,23 +42,20 @@
</div>
</nav>
<div class="container">
<main role="main" class="container">
<div class="jumbotron">
<h1>Navbar example</h1>
<p class="lead">This example is a quick exercise to illustrate how the top-aligned navbar works. As you scroll, this navbar remains in its original position and moves with the rest of the page.</p>
<a class="btn btn-lg btn-primary" href="../../components/navbar/" role="button">View navbar docs &raquo;</a>
</div>
</div>
</main>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="../../../../assets/js/vendor/jquery.min.js"><\/script>')</script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="../../../../assets/js/vendor/jquery-slim.min.js"><\/script>')</script>
<script src="../../../../assets/js/vendor/popper.min.js"></script>
<script src="../../../../dist/js/bootstrap-material-design.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="../../../../assets/js/ie10-viewport-bug-workaround.js"></script>
<script src="../../../../dist/js/bootstrap.min.js"></script>
</body>
</html>

0
docs/4.0/examples/navbar-top/navbar-top.css → docs/4.0/examples/navbar-static/navbar-top.css
View File

33
docs/4.0/examples/navbars/index.html
View File

@ -1,4 +1,4 @@
<!DOCTYPE html>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
@ -10,7 +10,7 @@
<title>Navbar Template for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link href="../../../../dist/css/bootstrap-material-design.min.css" rel="stylesheet">
<link href="../../../../dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="navbar.css" rel="stylesheet">
@ -322,27 +322,26 @@
</div>
</nav>
<div class="jumbotron">
<div class="col-sm-8 mx-auto">
<h1>Navbar examples</h1>
<p>This example is a quick exercise to illustrate how the navbar and its contents work. Some navbars extend the width of the viewport, others are confined within a <code>.container</code>. For positioning of navbars, checkout the <a href="../navbar-top/">top</a> and <a href="../navbar-top-fixed/">fixed top</a> examples.</p>
<p>At the smallest breakpoint, the collapse plugin is used to hide the links and show a menu button to toggle the collapsed content.</p>
<p>
<a class="btn btn-primary" href="../../components/navbar/" role="button">View navbar docs &raquo;</a>
</p>
<main role="main">
<div class="jumbotron">
<div class="col-sm-8 mx-auto">
<h1>Navbar examples</h1>
<p>This example is a quick exercise to illustrate how the navbar and its contents work. Some navbars extend the width of the viewport, others are confined within a <code>.container</code>. For positioning of navbars, checkout the <a href="../navbar-top/">top</a> and <a href="../navbar-top-fixed/">fixed top</a> examples.</p>
<p>At the smallest breakpoint, the collapse plugin is used to hide the links and show a menu button to toggle the collapsed content.</p>
<p>
<a class="btn btn-primary" href="../../components/navbar/" role="button">View navbar docs &raquo;</a>
</p>
</div>
</div>
</div>
</main>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="../../../../assets/js/vendor/jquery.min.js"><\/script>')</script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="../../../../assets/js/vendor/jquery-slim.min.js"><\/script>')</script>
<script src="../../../../assets/js/vendor/popper.min.js"></script>
<script src="../../../../dist/js/bootstrap-material-design.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="../../../../assets/js/ie10-viewport-bug-workaround.js"></script>
<script src="../../../../dist/js/bootstrap.min.js"></script>
</body>
</html>

1
docs/4.0/examples/navbars/navbar.css
View File

@ -1,5 +1,4 @@
body {
/*padding-top: 20px;*/
padding-bottom: 20px;
}

185
docs/4.0/examples/offcanvas/index.html
View File

@ -1,4 +1,4 @@
<!DOCTYPE html>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
@ -7,36 +7,39 @@
<meta name="author" content="">
<link rel="icon" href="../../../../favicon.ico">
<title>Off Canvas Template for Bootstrap</title>
<title>Offcanvas template for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link href="../../../../dist/css/bootstrap-material-design.min.css" rel="stylesheet">
<link href="../../../../dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="offcanvas.css" rel="stylesheet">
</head>
<body>
<body class="bg-light">
<nav class="navbar navbar-expand-md fixed-top navbar-dark bg-dark">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
<a class="navbar-brand" href="#">Offcanvas navbar</a>
<button class="navbar-toggler p-0 border-0" type="button" data-toggle="offcanvas">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
<div class="navbar-collapse offcanvas-collapse" id="navbarsExampleDefault">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
<a class="nav-link" href="#">Dashboard <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
<a class="nav-link" href="#">Notifications</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
<a class="nav-link" href="#">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Switch account</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="http://example.com" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<a class="nav-link dropdown-toggle" href="http://example.com" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Settings</a>
<div class="dropdown-menu" aria-labelledby="dropdown01">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
@ -51,86 +54,106 @@
</div>
</nav>
<div class="container">
<div class="nav-scroller bg-white box-shadow">
<nav class="nav nav-underline">
<a class="nav-link active" href="#">Dashboard</a>
<a class="nav-link" href="#">
Friends
<span class="badge badge-pill bg-light align-text-bottom">27</span>
</a>
<a class="nav-link" href="#">Explore</a>
<a class="nav-link" href="#">Suggestions</a>
<a class="nav-link" href="#">Link</a>
<a class="nav-link" href="#">Link</a>
<a class="nav-link" href="#">Link</a>
<a class="nav-link" href="#">Link</a>
<a class="nav-link" href="#">Link</a>
</nav>
</div>
<div class="row row-offcanvas row-offcanvas-right">
<main role="main" class="container">
<div class="d-flex align-items-center p-3 my-3 text-white-50 bg-purple rounded box-shadow">
<img class="mr-3" src="https://getbootstrap.com/assets/brand/bootstrap-outline.svg" alt="" width="48" height="48">
<div class="lh-100">
<h6 class="mb-0 text-white lh-100">Bootstrap</h6>
<small>Since 2011</small>
</div>
</div>
<div class="col-12 col-md-9">
<p class="float-right d-md-none">
<button type="button" class="btn btn-primary btn-sm" data-toggle="offcanvas">Toggle nav</button>
<div class="my-3 p-3 bg-white rounded box-shadow">
<h6 class="border-bottom border-gray pb-2 mb-0">Recent updates</h6>
<div class="media text-muted pt-3">
<img data-src="holder.js/32x32?theme=thumb&bg=007bff&fg=007bff&size=1" alt="" class="mr-2 rounded">
<p class="media-body pb-3 mb-0 small lh-125 border-bottom border-gray">
<strong class="d-block text-gray-dark">@username</strong>
Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
</p>
<div class="jumbotron">
<h1>Hello, world!</h1>
<p>This is an example to show the potential of an offcanvas layout pattern in Bootstrap. Try some responsive-range viewport sizes to see it in action.</p>
</div>
<div class="media text-muted pt-3">
<img data-src="holder.js/32x32?theme=thumb&bg=e83e8c&fg=e83e8c&size=1" alt="" class="mr-2 rounded">
<p class="media-body pb-3 mb-0 small lh-125 border-bottom border-gray">
<strong class="d-block text-gray-dark">@username</strong>
Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
</p>
</div>
<div class="media text-muted pt-3">
<img data-src="holder.js/32x32?theme=thumb&bg=6f42c1&fg=6f42c1&size=1" alt="" class="mr-2 rounded">
<p class="media-body pb-3 mb-0 small lh-125 border-bottom border-gray">
<strong class="d-block text-gray-dark">@username</strong>
Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
</p>
</div>
<small class="d-block text-right mt-3">
<a href="#">All updates</a>
</small>
</div>
<div class="my-3 p-3 bg-white rounded box-shadow">
<h6 class="border-bottom border-gray pb-2 mb-0">Suggestions</h6>
<div class="media text-muted pt-3">
<img data-src="holder.js/32x32?theme=thumb&bg=007bff&fg=007bff&size=1" alt="" class="mr-2 rounded">
<div class="media-body pb-3 mb-0 small lh-125 border-bottom border-gray">
<div class="d-flex justify-content-between align-items-center w-100">
<strong class="text-gray-dark">Full Name</strong>
<a href="#">Follow</a>
</div>
<span class="d-block">@username</span>
</div>
<div class="row">
<div class="col-6 col-lg-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-secondary" href="#" role="button">View details &raquo;</a></p>
</div><!--/span-->
<div class="col-6 col-lg-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-secondary" href="#" role="button">View details &raquo;</a></p>
</div><!--/span-->
<div class="col-6 col-lg-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-secondary" href="#" role="button">View details &raquo;</a></p>
</div><!--/span-->
<div class="col-6 col-lg-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-secondary" href="#" role="button">View details &raquo;</a></p>
</div><!--/span-->
<div class="col-6 col-lg-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-secondary" href="#" role="button">View details &raquo;</a></p>
</div><!--/span-->
<div class="col-6 col-lg-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-secondary" href="#" role="button">View details &raquo;</a></p>
</div><!--/span-->
</div><!--/row-->
</div><!--/span-->
<div class="col-6 col-md-3 sidebar-offcanvas" id="sidebar">
<div class="list-group">
<a href="#" class="list-group-item active">Link</a>
<a href="#" class="list-group-item">Link</a>
<a href="#" class="list-group-item">Link</a>
<a href="#" class="list-group-item">Link</a>
<a href="#" class="list-group-item">Link</a>
<a href="#" class="list-group-item">Link</a>
<a href="#" class="list-group-item">Link</a>
<a href="#" class="list-group-item">Link</a>
<a href="#" class="list-group-item">Link</a>
<a href="#" class="list-group-item">Link</a>
</div>
<div class="media text-muted pt-3">
<img data-src="holder.js/32x32?theme=thumb&bg=007bff&fg=007bff&size=1" alt="" class="mr-2 rounded">
<div class="media-body pb-3 mb-0 small lh-125 border-bottom border-gray">
<div class="d-flex justify-content-between align-items-center w-100">
<strong class="text-gray-dark">Full Name</strong>
<a href="#">Follow</a>
</div>
<span class="d-block">@username</span>
</div>
</div><!--/span-->
</div><!--/row-->
<hr>
<footer>
<p>&copy; Company 2017</p>
</footer>
</div><!--/.container-->
</div>
<div class="media text-muted pt-3">
<img data-src="holder.js/32x32?theme=thumb&bg=007bff&fg=007bff&size=1" alt="" class="mr-2 rounded">
<div class="media-body pb-3 mb-0 small lh-125 border-bottom border-gray">
<div class="d-flex justify-content-between align-items-center w-100">
<strong class="text-gray-dark">Full Name</strong>
<a href="#">Follow</a>
</div>
<span class="d-block">@username</span>
</div>
</div>
<small class="d-block text-right mt-3">
<a href="#">All suggestions</a>
</small>
</div>
</main>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="../../../../assets/js/vendor/jquery.min.js"><\/script>')</script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="../../../../assets/js/vendor/jquery-slim.min.js"><\/script>')</script>
<script src="../../../../assets/js/vendor/popper.min.js"></script>
<script src="../../../../dist/js/bootstrap-material-design.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="../../../../assets/js/ie10-viewport-bug-workaround.js"></script>
<script src="../../../../dist/js/bootstrap.min.js"></script>
<script src="../../../../assets/js/vendor/holder.min.js"></script>
<script src="offcanvas.js"></script>
</body>
</html>

129
docs/4.0/examples/offcanvas/offcanvas.css
View File

@ -1,69 +1,80 @@
/*
* Style tweaks
* --------------------------------------------------
*/
html,
body {
overflow-x: hidden; /* Prevent scroll on narrow devices */
}
body {
padding-top: 70px;
}
footer {
padding: 30px 0;
padding-top: 56px;
}
/*
* Off Canvas
* --------------------------------------------------
*/
@media screen and (max-width: 767px) {
.row-offcanvas {
position: relative;
-webkit-transition: all .25s ease-out;
-o-transition: all .25s ease-out;
transition: all .25s ease-out;
@media (max-width: 767.98px) {
.offcanvas-collapse {
position: fixed;
top: 56px; /* Height of navbar */
bottom: 0;
width: 100%;
padding-right: 1rem;
padding-left: 1rem;
overflow-y: auto;
background-color: var(--gray-dark);
transition: -webkit-transform .3s ease-in-out;
transition: transform .3s ease-in-out;
transition: transform .3s ease-in-out, -webkit-transform .3s ease-in-out;
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
.row-offcanvas-right {
right: 0;
}
.row-offcanvas-left {
left: 0;
}
.row-offcanvas-right
.sidebar-offcanvas {
right: -100%; /* 12 columns */
}
.row-offcanvas-right.active
.sidebar-offcanvas {
right: -50%; /* 6 columns */
}
.row-offcanvas-left
.sidebar-offcanvas {
left: -100%; /* 12 columns */
}
.row-offcanvas-left.active
.sidebar-offcanvas {
left: -50%; /* 6 columns */
}
.row-offcanvas-right.active {
right: 50%; /* 6 columns */
}
.row-offcanvas-left.active {
left: 50%; /* 6 columns */
}
.sidebar-offcanvas {
position: absolute;
top: 0;
width: 50%; /* 6 columns */
.offcanvas-collapse.open {
-webkit-transform: translateX(-1rem);
transform: translateX(-1rem); /* Account for horizontal padding on navbar */
}
}
.nav-scroller {
position: relative;
z-index: 2;
height: 2.75rem;
overflow-y: hidden;
}
.nav-scroller .nav {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
padding-bottom: 1rem;
margin-top: -1px;
overflow-x: auto;
color: rgba(255, 255, 255, .75);
text-align: center;
white-space: nowrap;
-webkit-overflow-scrolling: touch;
}
.nav-underline .nav-link {
padding-top: .75rem;
padding-bottom: .75rem;
font-size: .875rem;
color: var(--secondary);
}
.nav-underline .nav-link:hover {
color: var(--blue);
}
.nav-underline .active {
font-weight: 500;
color: var(--gray-dark);
}
.text-white-50 { color: rgba(255, 255, 255, .5); }
.bg-purple { background-color: var(--purple); }
.border-bottom { border-bottom: 1px solid #e5e5e5; }
.box-shadow { box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05); }
.lh-100 { line-height: 1; }
.lh-125 { line-height: 1.25; }
.lh-150 { line-height: 1.5; }

12
docs/4.0/examples/offcanvas/offcanvas.js
View File

@ -1,5 +1,7 @@
$(document).ready(function () {
$('[data-toggle="offcanvas"]').click(function () {
$('.row-offcanvas').toggleClass('active')
});
});
$(function () {
'use strict'
$('[data-toggle="offcanvas"]').on('click', function () {
$('.offcanvas-collapse').toggleClass('open')
})
})

142
docs/4.0/examples/pricing/index.html Executable file
View File

@ -0,0 +1,142 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../../../favicon.ico">
<title>Pricing example for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link href="../../../../dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="pricing.css" rel="stylesheet">
</head>
<body>
<div class="d-flex flex-column flex-md-row align-items-center p-3 px-md-4 mb-3 bg-white border-bottom box-shadow">
<h5 class="my-0 mr-md-auto font-weight-normal">Company name</h5>
<nav class="my-2 my-md-0 mr-md-3">
<a class="p-2 text-dark" href="#">Features</a>
<a class="p-2 text-dark" href="#">Enterprise</a>
<a class="p-2 text-dark" href="#">Support</a>
<a class="p-2 text-dark" href="#">Pricing</a>
</nav>
<a class="btn btn-outline-primary" href="#">Sign up</a>
</div>
<div class="pricing-header px-3 py-3 pt-md-5 pb-md-4 mx-auto text-center">
<h1 class="display-4">Pricing</h1>
<p class="lead">Quickly build an effective pricing table for your potential customers with this Bootstrap example. It's built with default Bootstrap components and utilities with little customization.</p>
</div>
<div class="container">
<div class="card-deck mb-3 text-center">
<div class="card mb-4 box-shadow">
<div class="card-header">
<h4 class="my-0 font-weight-normal">Free</h4>
</div>
<div class="card-body">
<h1 class="card-title pricing-card-title">$0 <small class="text-muted">/ mo</small></h1>
<ul class="list-unstyled mt-3 mb-4">
<li>10 users included</li>
<li>2 GB of storage</li>
<li>Email support</li>
<li>Help center access</li>
</ul>
<button type="button" class="btn btn-lg btn-block btn-outline-primary">Sign up for free</button>
</div>
</div>
<div class="card mb-4 box-shadow">
<div class="card-header">
<h4 class="my-0 font-weight-normal">Pro</h4>
</div>
<div class="card-body">
<h1 class="card-title pricing-card-title">$15 <small class="text-muted">/ mo</small></h1>
<ul class="list-unstyled mt-3 mb-4">
<li>20 users included</li>
<li>10 GB of storage</li>
<li>Priority email support</li>
<li>Help center access</li>
</ul>
<button type="button" class="btn btn-lg btn-block btn-primary">Get started</button>
</div>
</div>
<div class="card mb-4 box-shadow">
<div class="card-header">
<h4 class="my-0 font-weight-normal">Enterprise</h4>
</div>
<div class="card-body">
<h1 class="card-title pricing-card-title">$29 <small class="text-muted">/ mo</small></h1>
<ul class="list-unstyled mt-3 mb-4">
<li>30 users included</li>
<li>15 GB of storage</li>
<li>Phone and email support</li>
<li>Help center access</li>
</ul>
<button type="button" class="btn btn-lg btn-block btn-primary">Contact us</button>
</div>
</div>
</div>
<footer class="pt-4 my-md-5 pt-md-5 border-top">
<div class="row">
<div class="col-12 col-md">
<img class="mb-2" src="https://getbootstrap.com/assets/brand/bootstrap-solid.svg" alt="" width="24" height="24">
<small class="d-block mb-3 text-muted">&copy; 2017-2018</small>
</div>
<div class="col-6 col-md">
<h5>Features</h5>
<ul class="list-unstyled text-small">
<li><a class="text-muted" href="#">Cool stuff</a></li>
<li><a class="text-muted" href="#">Random feature</a></li>
<li><a class="text-muted" href="#">Team feature</a></li>
<li><a class="text-muted" href="#">Stuff for developers</a></li>
<li><a class="text-muted" href="#">Another one</a></li>
<li><a class="text-muted" href="#">Last time</a></li>
</ul>
</div>
<div class="col-6 col-md">
<h5>Resources</h5>
<ul class="list-unstyled text-small">
<li><a class="text-muted" href="#">Resource</a></li>
<li><a class="text-muted" href="#">Resource name</a></li>
<li><a class="text-muted" href="#">Another resource</a></li>
<li><a class="text-muted" href="#">Final resource</a></li>
</ul>
</div>
<div class="col-6 col-md">
<h5>About</h5>
<ul class="list-unstyled text-small">
<li><a class="text-muted" href="#">Team</a></li>
<li><a class="text-muted" href="#">Locations</a></li>
<li><a class="text-muted" href="#">Privacy</a></li>
<li><a class="text-muted" href="#">Terms</a></li>
</ul>
</div>
</div>
</footer>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="../../../../assets/js/vendor/jquery-slim.min.js"><\/script>')</script>
<script src="../../../../assets/js/vendor/popper.min.js"></script>
<script src="../../../../dist/js/bootstrap.min.js"></script>
<script src="../../../../assets/js/vendor/holder.min.js"></script>
<script>
Holder.addTheme('thumb', {
bg: '#55595c',
fg: '#eceeef',
text: 'Thumbnail'
});
</script>
</body>
</html>

25
docs/4.0/examples/pricing/pricing.css Executable file
View File

@ -0,0 +1,25 @@
html {
font-size: 14px;
}
@media (min-width: 768px) {
html {
font-size: 16px;
}
}
.container {
max-width: 960px;
}
.pricing-header {
max-width: 700px;
}
.card-deck .card {
min-width: 220px;
}
.border-top { border-top: 1px solid #e5e5e5; }
.border-bottom { border-bottom: 1px solid #e5e5e5; }
.box-shadow { box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05); }

178
docs/4.0/examples/product/index.html Executable file
View File

@ -0,0 +1,178 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../../../favicon.ico">
<title>Product example for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link href="../../../../dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="product.css" rel="stylesheet">
</head>
<body>
<nav class="site-header sticky-top py-1">
<div class="container d-flex flex-column flex-md-row justify-content-between">
<a class="py-2" href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="d-block mx-auto"><circle cx="12" cy="12" r="10"></circle><line x1="14.31" y1="8" x2="20.05" y2="17.94"></line><line x1="9.69" y1="8" x2="21.17" y2="8"></line><line x1="7.38" y1="12" x2="13.12" y2="2.06"></line><line x1="9.69" y1="16" x2="3.95" y2="6.06"></line><line x1="14.31" y1="16" x2="2.83" y2="16"></line><line x1="16.62" y1="12" x2="10.88" y2="21.94"></line></svg>
</a>
<a class="py-2 d-none d-md-inline-block" href="#">Tour</a>
<a class="py-2 d-none d-md-inline-block" href="#">Product</a>
<a class="py-2 d-none d-md-inline-block" href="#">Features</a>
<a class="py-2 d-none d-md-inline-block" href="#">Enterprise</a>
<a class="py-2 d-none d-md-inline-block" href="#">Support</a>
<a class="py-2 d-none d-md-inline-block" href="#">Pricing</a>
<a class="py-2 d-none d-md-inline-block" href="#">Cart</a>
</div>
</nav>
<div class="position-relative overflow-hidden p-3 p-md-5 m-md-3 text-center bg-light">
<div class="col-md-5 p-lg-5 mx-auto my-5">
<h1 class="display-4 font-weight-normal">Punny headline</h1>
<p class="lead font-weight-normal">And an even wittier subheading to boot. Jumpstart your marketing efforts with this example based on Apple's marketing pages.</p>
<a class="btn btn-outline-secondary" href="#">Coming soon</a>
</div>
<div class="product-device box-shadow d-none d-md-block"></div>
<div class="product-device product-device-2 box-shadow d-none d-md-block"></div>
</div>
<div class="d-md-flex flex-md-equal w-100 my-md-3 pl-md-3">
<div class="bg-dark mr-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center text-white overflow-hidden">
<div class="my-3 py-3">
<h2 class="display-5">Another headline</h2>
<p class="lead">And an even wittier subheading.</p>
</div>
<div class="bg-light box-shadow mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"></div>
</div>
<div class="bg-light mr-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center overflow-hidden">
<div class="my-3 p-3">
<h2 class="display-5">Another headline</h2>
<p class="lead">And an even wittier subheading.</p>
</div>
<div class="bg-dark box-shadow mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"></div>
</div>
</div>
<div class="d-md-flex flex-md-equal w-100 my-md-3 pl-md-3">
<div class="bg-light mr-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center overflow-hidden">
<div class="my-3 p-3">
<h2 class="display-5">Another headline</h2>
<p class="lead">And an even wittier subheading.</p>
</div>
<div class="bg-dark box-shadow mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"></div>
</div>
<div class="bg-primary mr-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center text-white overflow-hidden">
<div class="my-3 py-3">
<h2 class="display-5">Another headline</h2>
<p class="lead">And an even wittier subheading.</p>
</div>
<div class="bg-light box-shadow mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"></div>
</div>
</div>
<div class="d-md-flex flex-md-equal w-100 my-md-3 pl-md-3">
<div class="bg-light mr-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center overflow-hidden">
<div class="my-3 p-3">
<h2 class="display-5">Another headline</h2>
<p class="lead">And an even wittier subheading.</p>
</div>
<div class="bg-white box-shadow mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"></div>
</div>
<div class="bg-light mr-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center overflow-hidden">
<div class="my-3 py-3">
<h2 class="display-5">Another headline</h2>
<p class="lead">And an even wittier subheading.</p>
</div>
<div class="bg-white box-shadow mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"></div>
</div>
</div>
<div class="d-md-flex flex-md-equal w-100 my-md-3 pl-md-3">
<div class="bg-light mr-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center overflow-hidden">
<div class="my-3 p-3">
<h2 class="display-5">Another headline</h2>
<p class="lead">And an even wittier subheading.</p>
</div>
<div class="bg-white box-shadow mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"></div>
</div>
<div class="bg-light mr-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center overflow-hidden">
<div class="my-3 py-3">
<h2 class="display-5">Another headline</h2>
<p class="lead">And an even wittier subheading.</p>
</div>
<div class="bg-white box-shadow mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"></div>
</div>
</div>
<footer class="container py-5">
<div class="row">
<div class="col-12 col-md">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="d-block mb-2"><circle cx="12" cy="12" r="10"></circle><line x1="14.31" y1="8" x2="20.05" y2="17.94"></line><line x1="9.69" y1="8" x2="21.17" y2="8"></line><line x1="7.38" y1="12" x2="13.12" y2="2.06"></line><line x1="9.69" y1="16" x2="3.95" y2="6.06"></line><line x1="14.31" y1="16" x2="2.83" y2="16"></line><line x1="16.62" y1="12" x2="10.88" y2="21.94"></line></svg>
<small class="d-block mb-3 text-muted">&copy; 2017-2018</small>
</div>
<div class="col-6 col-md">
<h5>Features</h5>
<ul class="list-unstyled text-small">
<li><a class="text-muted" href="#">Cool stuff</a></li>
<li><a class="text-muted" href="#">Random feature</a></li>
<li><a class="text-muted" href="#">Team feature</a></li>
<li><a class="text-muted" href="#">Stuff for developers</a></li>
<li><a class="text-muted" href="#">Another one</a></li>
<li><a class="text-muted" href="#">Last time</a></li>
</ul>
</div>
<div class="col-6 col-md">
<h5>Resources</h5>
<ul class="list-unstyled text-small">
<li><a class="text-muted" href="#">Resource</a></li>
<li><a class="text-muted" href="#">Resource name</a></li>
<li><a class="text-muted" href="#">Another resource</a></li>
<li><a class="text-muted" href="#">Final resource</a></li>
</ul>
</div>
<div class="col-6 col-md">
<h5>Resources</h5>
<ul class="list-unstyled text-small">
<li><a class="text-muted" href="#">Business</a></li>
<li><a class="text-muted" href="#">Education</a></li>
<li><a class="text-muted" href="#">Government</a></li>
<li><a class="text-muted" href="#">Gaming</a></li>
</ul>
</div>
<div class="col-6 col-md">
<h5>About</h5>
<ul class="list-unstyled text-small">
<li><a class="text-muted" href="#">Team</a></li>
<li><a class="text-muted" href="#">Locations</a></li>
<li><a class="text-muted" href="#">Privacy</a></li>
<li><a class="text-muted" href="#">Terms</a></li>
</ul>
</div>
</div>
</footer>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="../../../../assets/js/vendor/jquery-slim.min.js"><\/script>')</script>
<script src="../../../../assets/js/vendor/popper.min.js"></script>
<script src="../../../../dist/js/bootstrap.min.js"></script>
<script src="../../../../assets/js/vendor/holder.min.js"></script>
<script>
Holder.addTheme('thumb', {
bg: '#55595c',
fg: '#eceeef',
text: 'Thumbnail'
});
</script>
</body>
</html>

81
docs/4.0/examples/product/product.css Executable file
View File

@ -0,0 +1,81 @@
.container {
max-width: 960px;
}
/*
* Custom translucent site header
*/
.site-header {
background-color: rgba(0, 0, 0, .85);
-webkit-backdrop-filter: saturate(180%) blur(20px);
backdrop-filter: saturate(180%) blur(20px);
}
.site-header a {
color: #999;
transition: ease-in-out color .15s;
}
.site-header a:hover {
color: #fff;
text-decoration: none;
}
/*
* Dummy devices (replace them with your own or something else entirely!)
*/
.product-device {
position: absolute;
right: 10%;
bottom: -30%;
width: 300px;
height: 540px;
background-color: #333;
border-radius: 21px;
-webkit-transform: rotate(30deg);
transform: rotate(30deg);
}
.product-device::before {
position: absolute;
top: 10%;
right: 10px;
bottom: 10%;
left: 10px;
content: "";
background-color: rgba(255, 255, 255, .1);
border-radius: 5px;
}
.product-device-2 {
top: -25%;
right: auto;
bottom: 0;
left: 5%;
background-color: #e5e5e5;
}
/*
* Extra utilities
*/
.border-top { border-top: 1px solid #e5e5e5; }
.border-bottom { border-bottom: 1px solid #e5e5e5; }
.box-shadow { box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05); }
.flex-equal > * {
-ms-flex: 1;
-webkit-box-flex: 1;
flex: 1;
}
@media (min-width: 768px) {
.flex-md-equal > * {
-ms-flex: 1;
-webkit-box-flex: 1;
flex: 1;
}
}
.overflow-hidden { overflow: hidden; }

BIN
docs/4.0/examples/screenshots/album.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 63 KiB

BIN
docs/4.0/examples/screenshots/album.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 26 KiB

BIN
docs/4.0/examples/screenshots/blog.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 119 KiB

BIN
docs/4.0/examples/screenshots/blog.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 36 KiB

BIN
docs/4.0/examples/screenshots/carousel.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 80 KiB

BIN
docs/4.0/examples/screenshots/carousel.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 31 KiB

BIN
docs/4.0/examples/screenshots/checkout.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 28 KiB

BIN
docs/4.0/examples/screenshots/cover.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 36 KiB

BIN
docs/4.0/examples/screenshots/cover.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 18 KiB

BIN
docs/4.0/examples/screenshots/dashboard.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 103 KiB

BIN
docs/4.0/examples/screenshots/dashboard.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 26 KiB

BIN
docs/4.0/examples/screenshots/equal-height-columns.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 126 KiB

BIN
docs/4.0/examples/screenshots/floating-labels.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 11 KiB

BIN
docs/4.0/examples/screenshots/grid.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 98 KiB

BIN
docs/4.0/examples/screenshots/grid.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 33 KiB

BIN
docs/4.0/examples/screenshots/jumbotron-narrow.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 67 KiB

BIN
docs/4.0/examples/screenshots/jumbotron.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 99 KiB

BIN
docs/4.0/examples/screenshots/jumbotron.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 38 KiB

BIN
docs/4.0/examples/screenshots/justified-nav.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 77 KiB

BIN
docs/4.0/examples/screenshots/navbar-bottom.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 11 KiB

BIN
docs/4.0/examples/screenshots/navbar-fixed.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 37 KiB

BIN
docs/4.0/examples/screenshots/navbar-fixed.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 13 KiB

BIN
docs/4.0/examples/screenshots/navbar-static.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 39 KiB

Some files were not shown because too many files have changed in this diff Show More