mirror of
https://github.com/tenrok/bootstrap.git
synced 2026-06-08 17:22:31 +03:00
4.0.0 stable
This commit is contained in:
Mark Otto
@@ -5,13 +5,13 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="Documentation and examples for Bootstrap’s logo and brand usage guidelines.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Jekyll v3.6.2">
|
||||
<meta name="generator" content="Jekyll v3.7.0">
|
||||
|
||||
<title>Brand guidelines · Bootstrap</title>
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
|
||||
<link href="/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
|
||||
|
||||
|
||||
<!-- Documentation extras -->
|
||||
@@ -125,7 +125,7 @@
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0-beta.3.zip">Download</a>
|
||||
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0.zip">Download</a>
|
||||
</header>
|
||||
|
||||
|
||||
@@ -337,11 +337,14 @@
|
||||
Visibility
|
||||
</a></li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.0/extend/icons/">
|
||||
<a class="bd-toc-link" href="/docs/4.0/extend/approach/">
|
||||
Extend
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.0/extend/approach/">
|
||||
Approach
|
||||
</a></li><li>
|
||||
<a href="/docs/4.0/extend/icons/">
|
||||
Icons
|
||||
</a></li></ul>
|
||||
@@ -467,34 +470,6 @@
|
||||
<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-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/docs.min.js"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
|
||||
<script>
|
||||
docsearch({
|
||||
apiKey: '48cb48b22351bc71ea5f12f4d1ede198',
|
||||
indexName: 'bootstrap-v4',
|
||||
inputSelector: '#search-input',
|
||||
handleSelected: function (input, event, suggestion) {
|
||||
var url = suggestion.url;
|
||||
url = suggestion.isLvl1 ? url.split('#')[0]: url;
|
||||
// If it's a title we remove the anchor so it does not jump.
|
||||
window.location.href = url;
|
||||
},
|
||||
transformData: function (hits) {
|
||||
return hits.map(function (hit) {
|
||||
hit.url = hit.url.replace('https://v4-alpha.getbootstrap.com', '/docs/4.0');
|
||||
return hit;
|
||||
});
|
||||
},
|
||||
debug: false // Set debug to true if you want to inspect the dropdown
|
||||
});
|
||||
</script><script>
|
||||
Holder.addTheme('gray', {
|
||||
bg: '#777',
|
||||
fg: 'rgba(255,255,255,.75)',
|
||||
font: 'Helvetica',
|
||||
fontweight: 'normal'
|
||||
});
|
||||
</script>
|
||||
|
||||
<script src="/assets/js/vendor/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script><script src="/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/assets/js/docs.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -5,13 +5,13 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="Commonly asked questions about Bootstrap’s open source license.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Jekyll v3.6.2">
|
||||
<meta name="generator" content="Jekyll v3.7.0">
|
||||
|
||||
<title>License FAQs · Bootstrap</title>
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
|
||||
<link href="/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
|
||||
|
||||
|
||||
<!-- Documentation extras -->
|
||||
@@ -125,7 +125,7 @@
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0-beta.3.zip">Download</a>
|
||||
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0.zip">Download</a>
|
||||
</header>
|
||||
|
||||
|
||||
@@ -337,11 +337,14 @@
|
||||
Visibility
|
||||
</a></li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.0/extend/icons/">
|
||||
<a class="bd-toc-link" href="/docs/4.0/extend/approach/">
|
||||
Extend
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.0/extend/approach/">
|
||||
Approach
|
||||
</a></li><li>
|
||||
<a href="/docs/4.0/extend/icons/">
|
||||
Icons
|
||||
</a></li></ul>
|
||||
@@ -380,7 +383,7 @@
|
||||
<p class="bd-lead">Commonly asked questions about Bootstrap’s open source license.</p>
|
||||
<script async src="https://cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=getbootstrapcom" 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>
|
||||
|
||||
@@ -414,7 +417,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/twbs/bootstrap/blob/v4.0.0-beta.3/LICENSE">in the project repository</a> for more information.</p>
|
||||
<p>The full Bootstrap license is located <a href="https://github.com/twbs/bootstrap/blob/v4.0.0/LICENSE">in the project repository</a> for more information.</p>
|
||||
|
||||
</main>
|
||||
</div>
|
||||
@@ -423,34 +426,6 @@
|
||||
<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-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/docs.min.js"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
|
||||
<script>
|
||||
docsearch({
|
||||
apiKey: '48cb48b22351bc71ea5f12f4d1ede198',
|
||||
indexName: 'bootstrap-v4',
|
||||
inputSelector: '#search-input',
|
||||
handleSelected: function (input, event, suggestion) {
|
||||
var url = suggestion.url;
|
||||
url = suggestion.isLvl1 ? url.split('#')[0]: url;
|
||||
// If it's a title we remove the anchor so it does not jump.
|
||||
window.location.href = url;
|
||||
},
|
||||
transformData: function (hits) {
|
||||
return hits.map(function (hit) {
|
||||
hit.url = hit.url.replace('https://v4-alpha.getbootstrap.com', '/docs/4.0');
|
||||
return hit;
|
||||
});
|
||||
},
|
||||
debug: false // Set debug to true if you want to inspect the dropdown
|
||||
});
|
||||
</script><script>
|
||||
Holder.addTheme('gray', {
|
||||
bg: '#777',
|
||||
fg: 'rgba(255,255,255,.75)',
|
||||
font: 'Helvetica',
|
||||
fontweight: 'normal'
|
||||
});
|
||||
</script>
|
||||
|
||||
<script src="/assets/js/vendor/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script><script src="/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/assets/js/docs.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -5,13 +5,13 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="Learn more about the team maintaining Bootstrap, how and why the project started, and how to get involved.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Jekyll v3.6.2">
|
||||
<meta name="generator" content="Jekyll v3.7.0">
|
||||
|
||||
<title>About · Bootstrap</title>
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
|
||||
<link href="/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
|
||||
|
||||
|
||||
<!-- Documentation extras -->
|
||||
@@ -125,7 +125,7 @@
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0-beta.3.zip">Download</a>
|
||||
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0.zip">Download</a>
|
||||
</header>
|
||||
|
||||
|
||||
@@ -337,11 +337,14 @@
|
||||
Visibility
|
||||
</a></li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.0/extend/icons/">
|
||||
<a class="bd-toc-link" href="/docs/4.0/extend/approach/">
|
||||
Extend
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.0/extend/approach/">
|
||||
Approach
|
||||
</a></li><li>
|
||||
<a href="/docs/4.0/extend/icons/">
|
||||
Icons
|
||||
</a></li></ul>
|
||||
@@ -396,7 +399,7 @@
|
||||
|
||||
<h2 id="get-involved">Get involved</h2>
|
||||
|
||||
<p>Get involved with Bootstrap development by <a href="https://github.com/twbs/bootstrap/issues/new">opening an issue</a> or submitting a pull request. Read our <a href="https://github.com/twbs/bootstrap/blob/v4.0.0-beta.3/.github/CONTRIBUTING.md">contributing guidelines</a> for information on how we develop.</p>
|
||||
<p>Get involved with Bootstrap development by <a href="https://github.com/twbs/bootstrap/issues/new">opening an issue</a> or submitting a pull request. Read our <a href="https://github.com/twbs/bootstrap/blob/v4.0.0/.github/CONTRIBUTING.md">contributing guidelines</a> for information on how we develop.</p>
|
||||
|
||||
</main>
|
||||
</div>
|
||||
@@ -405,34 +408,6 @@
|
||||
<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-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/docs.min.js"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
|
||||
<script>
|
||||
docsearch({
|
||||
apiKey: '48cb48b22351bc71ea5f12f4d1ede198',
|
||||
indexName: 'bootstrap-v4',
|
||||
inputSelector: '#search-input',
|
||||
handleSelected: function (input, event, suggestion) {
|
||||
var url = suggestion.url;
|
||||
url = suggestion.isLvl1 ? url.split('#')[0]: url;
|
||||
// If it's a title we remove the anchor so it does not jump.
|
||||
window.location.href = url;
|
||||
},
|
||||
transformData: function (hits) {
|
||||
return hits.map(function (hit) {
|
||||
hit.url = hit.url.replace('https://v4-alpha.getbootstrap.com', '/docs/4.0');
|
||||
return hit;
|
||||
});
|
||||
},
|
||||
debug: false // Set debug to true if you want to inspect the dropdown
|
||||
});
|
||||
</script><script>
|
||||
Holder.addTheme('gray', {
|
||||
bg: '#777',
|
||||
fg: 'rgba(255,255,255,.75)',
|
||||
font: 'Helvetica',
|
||||
fontweight: 'normal'
|
||||
});
|
||||
</script>
|
||||
|
||||
<script src="/assets/js/vendor/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script><script src="/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/assets/js/docs.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -5,13 +5,13 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="Links to community-translated Bootstrap documentation sites.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Jekyll v3.6.2">
|
||||
<meta name="generator" content="Jekyll v3.7.0">
|
||||
|
||||
<title>Translations · Bootstrap</title>
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
|
||||
<link href="/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
|
||||
|
||||
|
||||
<!-- Documentation extras -->
|
||||
@@ -125,7 +125,7 @@
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0-beta.3.zip">Download</a>
|
||||
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0.zip">Download</a>
|
||||
</header>
|
||||
|
||||
|
||||
@@ -337,11 +337,14 @@
|
||||
Visibility
|
||||
</a></li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.0/extend/icons/">
|
||||
<a class="bd-toc-link" href="/docs/4.0/extend/approach/">
|
||||
Extend
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.0/extend/approach/">
|
||||
Approach
|
||||
</a></li><li>
|
||||
<a href="/docs/4.0/extend/icons/">
|
||||
Icons
|
||||
</a></li></ul>
|
||||
@@ -405,34 +408,6 @@
|
||||
<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-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/docs.min.js"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
|
||||
<script>
|
||||
docsearch({
|
||||
apiKey: '48cb48b22351bc71ea5f12f4d1ede198',
|
||||
indexName: 'bootstrap-v4',
|
||||
inputSelector: '#search-input',
|
||||
handleSelected: function (input, event, suggestion) {
|
||||
var url = suggestion.url;
|
||||
url = suggestion.isLvl1 ? url.split('#')[0]: url;
|
||||
// If it's a title we remove the anchor so it does not jump.
|
||||
window.location.href = url;
|
||||
},
|
||||
transformData: function (hits) {
|
||||
return hits.map(function (hit) {
|
||||
hit.url = hit.url.replace('https://v4-alpha.getbootstrap.com', '/docs/4.0');
|
||||
return hit;
|
||||
});
|
||||
},
|
||||
debug: false // Set debug to true if you want to inspect the dropdown
|
||||
});
|
||||
</script><script>
|
||||
Holder.addTheme('gray', {
|
||||
bg: '#777',
|
||||
fg: 'rgba(255,255,255,.75)',
|
||||
font: 'Helvetica',
|
||||
fontweight: 'normal'
|
||||
});
|
||||
</script>
|
||||
|
||||
<script src="/assets/js/vendor/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script><script src="/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/assets/js/docs.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -5,13 +5,13 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="The most popular HTML, CSS, and JS library in the world.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Jekyll v3.6.2">
|
||||
<meta name="generator" content="Jekyll v3.7.0">
|
||||
|
||||
<title>Wall of browser bugs · Bootstrap</title>
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
|
||||
<link href="/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
|
||||
|
||||
|
||||
<!-- Documentation extras -->
|
||||
@@ -125,7 +125,7 @@
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0-beta.3.zip">Download</a>
|
||||
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0.zip">Download</a>
|
||||
</header>
|
||||
|
||||
|
||||
@@ -337,11 +337,14 @@
|
||||
Visibility
|
||||
</a></li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.0/extend/icons/">
|
||||
<a class="bd-toc-link" href="/docs/4.0/extend/approach/">
|
||||
Extend
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.0/extend/approach/">
|
||||
Approach
|
||||
</a></li><li>
|
||||
<a href="/docs/4.0/extend/icons/">
|
||||
Icons
|
||||
</a></li></ul>
|
||||
@@ -679,6 +682,17 @@
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>Chrome
|
||||
</td>
|
||||
<td><p>Significant performance hit for dynamic SVGs with text depending on the number of fonts in <code class="highlighter-rouge">font-family</code>.</p>
|
||||
</td>
|
||||
<td><a href="https://bugs.chromium.org/p/chromium/issues/detail?id=781344">Chromium issue #781344</a>
|
||||
</td>
|
||||
<td><a href="https://github.com/twbs/bootstrap/issues/24673">#24673</a>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>Safari
|
||||
</td>
|
||||
@@ -701,6 +715,17 @@
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>Safari
|
||||
</td>
|
||||
<td><p>CSS <code class="highlighter-rouge">min-width</code> and <code class="highlighter-rouge">max-width</code> media features should not round fractional pixel</p>
|
||||
</td>
|
||||
<td><a href="https://bugs.webkit.org/show_bug.cgi?id=178261">WebKit bug #178261</a>
|
||||
</td>
|
||||
<td><a href="https://github.com/twbs/bootstrap/issues/25166">#25166</a>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>Safari (OS X)
|
||||
</td>
|
||||
@@ -919,17 +944,6 @@
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>Edge
|
||||
</td>
|
||||
<td><p>Implement <a href="http://html5please.com/#position:sticky">sticky positioning</a> from CSS Positioned Layout Level 3</p>
|
||||
</td>
|
||||
<td><a href="https://wpdev.uservoice.com/forums/257854-microsoft-edge-developer/suggestions/6263621">Edge UserVoice idea #6263621</a>
|
||||
</td>
|
||||
<td><a href="https://github.com/twbs/bootstrap/issues/17021">#17021</a>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>Edge
|
||||
</td>
|
||||
@@ -1072,34 +1086,6 @@
|
||||
<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-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/docs.min.js"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
|
||||
<script>
|
||||
docsearch({
|
||||
apiKey: '48cb48b22351bc71ea5f12f4d1ede198',
|
||||
indexName: 'bootstrap-v4',
|
||||
inputSelector: '#search-input',
|
||||
handleSelected: function (input, event, suggestion) {
|
||||
var url = suggestion.url;
|
||||
url = suggestion.isLvl1 ? url.split('#')[0]: url;
|
||||
// If it's a title we remove the anchor so it does not jump.
|
||||
window.location.href = url;
|
||||
},
|
||||
transformData: function (hits) {
|
||||
return hits.map(function (hit) {
|
||||
hit.url = hit.url.replace('https://v4-alpha.getbootstrap.com', '/docs/4.0');
|
||||
return hit;
|
||||
});
|
||||
},
|
||||
debug: false // Set debug to true if you want to inspect the dropdown
|
||||
});
|
||||
</script><script>
|
||||
Holder.addTheme('gray', {
|
||||
bg: '#777',
|
||||
fg: 'rgba(255,255,255,.75)',
|
||||
font: 'Helvetica',
|
||||
fontweight: 'normal'
|
||||
});
|
||||
</script>
|
||||
|
||||
<script src="/assets/js/vendor/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script><script src="/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/assets/js/docs.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -5,13 +5,13 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Jekyll v3.6.2">
|
||||
<meta name="generator" content="Jekyll v3.7.0">
|
||||
|
||||
<title>Alerts · Bootstrap</title>
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
|
||||
<link href="/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
|
||||
|
||||
|
||||
<!-- Documentation extras -->
|
||||
@@ -125,7 +125,7 @@
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0-beta.3.zip">Download</a>
|
||||
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0.zip">Download</a>
|
||||
</header>
|
||||
|
||||
|
||||
@@ -337,11 +337,14 @@
|
||||
Visibility
|
||||
</a></li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.0/extend/icons/">
|
||||
<a class="bd-toc-link" href="/docs/4.0/extend/approach/">
|
||||
Extend
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.0/extend/approach/">
|
||||
Approach
|
||||
</a></li><li>
|
||||
<a href="/docs/4.0/extend/icons/">
|
||||
Icons
|
||||
</a></li></ul>
|
||||
@@ -645,34 +648,6 @@
|
||||
<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-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/docs.min.js"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
|
||||
<script>
|
||||
docsearch({
|
||||
apiKey: '48cb48b22351bc71ea5f12f4d1ede198',
|
||||
indexName: 'bootstrap-v4',
|
||||
inputSelector: '#search-input',
|
||||
handleSelected: function (input, event, suggestion) {
|
||||
var url = suggestion.url;
|
||||
url = suggestion.isLvl1 ? url.split('#')[0]: url;
|
||||
// If it's a title we remove the anchor so it does not jump.
|
||||
window.location.href = url;
|
||||
},
|
||||
transformData: function (hits) {
|
||||
return hits.map(function (hit) {
|
||||
hit.url = hit.url.replace('https://v4-alpha.getbootstrap.com', '/docs/4.0');
|
||||
return hit;
|
||||
});
|
||||
},
|
||||
debug: false // Set debug to true if you want to inspect the dropdown
|
||||
});
|
||||
</script><script>
|
||||
Holder.addTheme('gray', {
|
||||
bg: '#777',
|
||||
fg: 'rgba(255,255,255,.75)',
|
||||
font: 'Helvetica',
|
||||
fontweight: 'normal'
|
||||
});
|
||||
</script>
|
||||
|
||||
<script src="/assets/js/vendor/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script><script src="/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/assets/js/docs.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -5,13 +5,13 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="Documentation and examples for badges, our small count and labeling component.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Jekyll v3.6.2">
|
||||
<meta name="generator" content="Jekyll v3.7.0">
|
||||
|
||||
<title>Badges · Bootstrap</title>
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
|
||||
<link href="/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
|
||||
|
||||
|
||||
<!-- Documentation extras -->
|
||||
@@ -125,7 +125,7 @@
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0-beta.3.zip">Download</a>
|
||||
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0.zip">Download</a>
|
||||
</header>
|
||||
|
||||
|
||||
@@ -337,11 +337,14 @@
|
||||
Visibility
|
||||
</a></li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.0/extend/icons/">
|
||||
<a class="bd-toc-link" href="/docs/4.0/extend/approach/">
|
||||
Extend
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.0/extend/approach/">
|
||||
Approach
|
||||
</a></li><li>
|
||||
<a href="/docs/4.0/extend/icons/">
|
||||
Icons
|
||||
</a></li></ul>
|
||||
@@ -518,34 +521,6 @@
|
||||
<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-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/docs.min.js"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
|
||||
<script>
|
||||
docsearch({
|
||||
apiKey: '48cb48b22351bc71ea5f12f4d1ede198',
|
||||
indexName: 'bootstrap-v4',
|
||||
inputSelector: '#search-input',
|
||||
handleSelected: function (input, event, suggestion) {
|
||||
var url = suggestion.url;
|
||||
url = suggestion.isLvl1 ? url.split('#')[0]: url;
|
||||
// If it's a title we remove the anchor so it does not jump.
|
||||
window.location.href = url;
|
||||
},
|
||||
transformData: function (hits) {
|
||||
return hits.map(function (hit) {
|
||||
hit.url = hit.url.replace('https://v4-alpha.getbootstrap.com', '/docs/4.0');
|
||||
return hit;
|
||||
});
|
||||
},
|
||||
debug: false // Set debug to true if you want to inspect the dropdown
|
||||
});
|
||||
</script><script>
|
||||
Holder.addTheme('gray', {
|
||||
bg: '#777',
|
||||
fg: 'rgba(255,255,255,.75)',
|
||||
font: 'Helvetica',
|
||||
fontweight: 'normal'
|
||||
});
|
||||
</script>
|
||||
|
||||
<script src="/assets/js/vendor/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script><script src="/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/assets/js/docs.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -5,13 +5,13 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="Indicate the current page’s location within a navigational hierarchy that automatically adds separators via CSS.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Jekyll v3.6.2">
|
||||
<meta name="generator" content="Jekyll v3.7.0">
|
||||
|
||||
<title>Breadcrumb · Bootstrap</title>
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
|
||||
<link href="/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
|
||||
|
||||
|
||||
<!-- Documentation extras -->
|
||||
@@ -125,7 +125,7 @@
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0-beta.3.zip">Download</a>
|
||||
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0.zip">Download</a>
|
||||
</header>
|
||||
|
||||
|
||||
@@ -337,11 +337,14 @@
|
||||
Visibility
|
||||
</a></li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.0/extend/icons/">
|
||||
<a class="bd-toc-link" href="/docs/4.0/extend/approach/">
|
||||
Extend
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.0/extend/approach/">
|
||||
Approach
|
||||
</a></li><li>
|
||||
<a href="/docs/4.0/extend/icons/">
|
||||
Icons
|
||||
</a></li></ul>
|
||||
@@ -440,34 +443,6 @@
|
||||
<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-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/docs.min.js"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
|
||||
<script>
|
||||
docsearch({
|
||||
apiKey: '48cb48b22351bc71ea5f12f4d1ede198',
|
||||
indexName: 'bootstrap-v4',
|
||||
inputSelector: '#search-input',
|
||||
handleSelected: function (input, event, suggestion) {
|
||||
var url = suggestion.url;
|
||||
url = suggestion.isLvl1 ? url.split('#')[0]: url;
|
||||
// If it's a title we remove the anchor so it does not jump.
|
||||
window.location.href = url;
|
||||
},
|
||||
transformData: function (hits) {
|
||||
return hits.map(function (hit) {
|
||||
hit.url = hit.url.replace('https://v4-alpha.getbootstrap.com', '/docs/4.0');
|
||||
return hit;
|
||||
});
|
||||
},
|
||||
debug: false // Set debug to true if you want to inspect the dropdown
|
||||
});
|
||||
</script><script>
|
||||
Holder.addTheme('gray', {
|
||||
bg: '#777',
|
||||
fg: 'rgba(255,255,255,.75)',
|
||||
font: 'Helvetica',
|
||||
fontweight: 'normal'
|
||||
});
|
||||
</script>
|
||||
|
||||
<script src="/assets/js/vendor/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script><script src="/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/assets/js/docs.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -5,13 +5,13 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="Group a series of buttons together on a single line with the button group, and super-power them with JavaScript.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Jekyll v3.6.2">
|
||||
<meta name="generator" content="Jekyll v3.7.0">
|
||||
|
||||
<title>Button group · Bootstrap</title>
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
|
||||
<link href="/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
|
||||
|
||||
|
||||
<!-- Documentation extras -->
|
||||
@@ -125,7 +125,7 @@
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0-beta.3.zip">Download</a>
|
||||
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0.zip">Download</a>
|
||||
</header>
|
||||
|
||||
|
||||
@@ -337,11 +337,14 @@
|
||||
Visibility
|
||||
</a></li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.0/extend/icons/">
|
||||
<a class="bd-toc-link" href="/docs/4.0/extend/approach/">
|
||||
Extend
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.0/extend/approach/">
|
||||
Approach
|
||||
</a></li><li>
|
||||
<a href="/docs/4.0/extend/icons/">
|
||||
Icons
|
||||
</a></li></ul>
|
||||
@@ -652,34 +655,6 @@
|
||||
<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-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/docs.min.js"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
|
||||
<script>
|
||||
docsearch({
|
||||
apiKey: '48cb48b22351bc71ea5f12f4d1ede198',
|
||||
indexName: 'bootstrap-v4',
|
||||
inputSelector: '#search-input',
|
||||
handleSelected: function (input, event, suggestion) {
|
||||
var url = suggestion.url;
|
||||
url = suggestion.isLvl1 ? url.split('#')[0]: url;
|
||||
// If it's a title we remove the anchor so it does not jump.
|
||||
window.location.href = url;
|
||||
},
|
||||
transformData: function (hits) {
|
||||
return hits.map(function (hit) {
|
||||
hit.url = hit.url.replace('https://v4-alpha.getbootstrap.com', '/docs/4.0');
|
||||
return hit;
|
||||
});
|
||||
},
|
||||
debug: false // Set debug to true if you want to inspect the dropdown
|
||||
});
|
||||
</script><script>
|
||||
Holder.addTheme('gray', {
|
||||
bg: '#777',
|
||||
fg: 'rgba(255,255,255,.75)',
|
||||
font: 'Helvetica',
|
||||
fontweight: 'normal'
|
||||
});
|
||||
</script>
|
||||
|
||||
<script src="/assets/js/vendor/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script><script src="/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/assets/js/docs.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -5,13 +5,13 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="Use Bootstrap’s custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Jekyll v3.6.2">
|
||||
<meta name="generator" content="Jekyll v3.7.0">
|
||||
|
||||
<title>Buttons · Bootstrap</title>
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
|
||||
<link href="/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
|
||||
|
||||
|
||||
<!-- Documentation extras -->
|
||||
@@ -125,7 +125,7 @@
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0-beta.3.zip">Download</a>
|
||||
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0.zip">Download</a>
|
||||
</header>
|
||||
|
||||
|
||||
@@ -337,11 +337,14 @@
|
||||
Visibility
|
||||
</a></li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.0/extend/icons/">
|
||||
<a class="bd-toc-link" href="/docs/4.0/extend/approach/">
|
||||
Extend
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.0/extend/approach/">
|
||||
Approach
|
||||
</a></li><li>
|
||||
<a href="/docs/4.0/extend/icons/">
|
||||
Icons
|
||||
</a></li></ul>
|
||||
@@ -562,34 +565,22 @@
|
||||
|
||||
<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"><label></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"><input></code>s within your buttons.</p>
|
||||
<p>Bootstrap’s <code class="highlighter-rouge">.button</code> styles can be applied to other elements, such as <code class="highlighter-rouge"><label></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"><input></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"><input type="reset"></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"><label></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"><label></code>.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="btn-group btn-group-toggle" data-toggle="buttons">
|
||||
<div class="btn-group-toggle" data-toggle="buttons">
|
||||
<label class="btn btn-secondary active">
|
||||
<input type="checkbox" checked="" autocomplete="off" /> Active
|
||||
</label>
|
||||
<label class="btn btn-secondary">
|
||||
<input type="checkbox" autocomplete="off" /> Check
|
||||
</label>
|
||||
<label class="btn btn-secondary">
|
||||
<input type="checkbox" autocomplete="off" /> Check
|
||||
<input type="checkbox" checked="" autocomplete="off" /> Checked
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><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">></span>
|
||||
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><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">></span>
|
||||
<span class="nt"><label</span> <span class="na">class=</span><span class="s">"btn btn-secondary active"</span><span class="nt">></span>
|
||||
<span class="nt"><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">></span> Active
|
||||
<span class="nt"></label></span>
|
||||
<span class="nt"><label</span> <span class="na">class=</span><span class="s">"btn btn-secondary"</span><span class="nt">></span>
|
||||
<span class="nt"><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">></span> Check
|
||||
<span class="nt"></label></span>
|
||||
<span class="nt"><label</span> <span class="na">class=</span><span class="s">"btn btn-secondary"</span><span class="nt">></span>
|
||||
<span class="nt"><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">></span> Check
|
||||
<span class="nt"><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">></span> Checked
|
||||
<span class="nt"></label></span>
|
||||
<span class="nt"></div></span></code></pre></div>
|
||||
|
||||
@@ -646,34 +637,6 @@
|
||||
<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-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/docs.min.js"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
|
||||
<script>
|
||||
docsearch({
|
||||
apiKey: '48cb48b22351bc71ea5f12f4d1ede198',
|
||||
indexName: 'bootstrap-v4',
|
||||
inputSelector: '#search-input',
|
||||
handleSelected: function (input, event, suggestion) {
|
||||
var url = suggestion.url;
|
||||
url = suggestion.isLvl1 ? url.split('#')[0]: url;
|
||||
// If it's a title we remove the anchor so it does not jump.
|
||||
window.location.href = url;
|
||||
},
|
||||
transformData: function (hits) {
|
||||
return hits.map(function (hit) {
|
||||
hit.url = hit.url.replace('https://v4-alpha.getbootstrap.com', '/docs/4.0');
|
||||
return hit;
|
||||
});
|
||||
},
|
||||
debug: false // Set debug to true if you want to inspect the dropdown
|
||||
});
|
||||
</script><script>
|
||||
Holder.addTheme('gray', {
|
||||
bg: '#777',
|
||||
fg: 'rgba(255,255,255,.75)',
|
||||
font: 'Helvetica',
|
||||
fontweight: 'normal'
|
||||
});
|
||||
</script>
|
||||
|
||||
<script src="/assets/js/vendor/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script><script src="/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/assets/js/docs.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -5,13 +5,13 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="Bootstrap’s cards provide a flexible and extensible content container with multiple variants and options.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Jekyll v3.6.2">
|
||||
<meta name="generator" content="Jekyll v3.7.0">
|
||||
|
||||
<title>Cards · Bootstrap</title>
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
|
||||
<link href="/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
|
||||
|
||||
|
||||
<!-- Documentation extras -->
|
||||
@@ -125,7 +125,7 @@
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0-beta.3.zip">Download</a>
|
||||
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0.zip">Download</a>
|
||||
</header>
|
||||
|
||||
|
||||
@@ -337,11 +337,14 @@
|
||||
Visibility
|
||||
</a></li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.0/extend/icons/">
|
||||
<a class="bd-toc-link" href="/docs/4.0/extend/approach/">
|
||||
Extend
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.0/extend/approach/">
|
||||
Approach
|
||||
</a></li><li>
|
||||
<a href="/docs/4.0/extend/icons/">
|
||||
Icons
|
||||
</a></li></ul>
|
||||
@@ -1712,34 +1715,6 @@
|
||||
<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-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/docs.min.js"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
|
||||
<script>
|
||||
docsearch({
|
||||
apiKey: '48cb48b22351bc71ea5f12f4d1ede198',
|
||||
indexName: 'bootstrap-v4',
|
||||
inputSelector: '#search-input',
|
||||
handleSelected: function (input, event, suggestion) {
|
||||
var url = suggestion.url;
|
||||
url = suggestion.isLvl1 ? url.split('#')[0]: url;
|
||||
// If it's a title we remove the anchor so it does not jump.
|
||||
window.location.href = url;
|
||||
},
|
||||
transformData: function (hits) {
|
||||
return hits.map(function (hit) {
|
||||
hit.url = hit.url.replace('https://v4-alpha.getbootstrap.com', '/docs/4.0');
|
||||
return hit;
|
||||
});
|
||||
},
|
||||
debug: false // Set debug to true if you want to inspect the dropdown
|
||||
});
|
||||
</script><script>
|
||||
Holder.addTheme('gray', {
|
||||
bg: '#777',
|
||||
fg: 'rgba(255,255,255,.75)',
|
||||
font: 'Helvetica',
|
||||
fontweight: 'normal'
|
||||
});
|
||||
</script>
|
||||
|
||||
<script src="/assets/js/vendor/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script><script src="/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/assets/js/docs.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -5,13 +5,13 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="A slideshow component for cycling through elements—images or slides of text—like a carousel.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Jekyll v3.6.2">
|
||||
<meta name="generator" content="Jekyll v3.7.0">
|
||||
|
||||
<title>Carousel · Bootstrap</title>
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
|
||||
<link href="/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
|
||||
|
||||
|
||||
<!-- Documentation extras -->
|
||||
@@ -125,7 +125,7 @@
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0-beta.3.zip">Download</a>
|
||||
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0.zip">Download</a>
|
||||
</header>
|
||||
|
||||
|
||||
@@ -337,11 +337,14 @@
|
||||
Visibility
|
||||
</a></li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.0/extend/icons/">
|
||||
<a class="bd-toc-link" href="/docs/4.0/extend/approach/">
|
||||
Extend
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.0/extend/approach/">
|
||||
Approach
|
||||
</a></li><li>
|
||||
<a href="/docs/4.0/extend/icons/">
|
||||
Icons
|
||||
</a></li></ul>
|
||||
@@ -778,34 +781,6 @@
|
||||
<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-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/docs.min.js"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
|
||||
<script>
|
||||
docsearch({
|
||||
apiKey: '48cb48b22351bc71ea5f12f4d1ede198',
|
||||
indexName: 'bootstrap-v4',
|
||||
inputSelector: '#search-input',
|
||||
handleSelected: function (input, event, suggestion) {
|
||||
var url = suggestion.url;
|
||||
url = suggestion.isLvl1 ? url.split('#')[0]: url;
|
||||
// If it's a title we remove the anchor so it does not jump.
|
||||
window.location.href = url;
|
||||
},
|
||||
transformData: function (hits) {
|
||||
return hits.map(function (hit) {
|
||||
hit.url = hit.url.replace('https://v4-alpha.getbootstrap.com', '/docs/4.0');
|
||||
return hit;
|
||||
});
|
||||
},
|
||||
debug: false // Set debug to true if you want to inspect the dropdown
|
||||
});
|
||||
</script><script>
|
||||
Holder.addTheme('gray', {
|
||||
bg: '#777',
|
||||
fg: 'rgba(255,255,255,.75)',
|
||||
font: 'Helvetica',
|
||||
fontweight: 'normal'
|
||||
});
|
||||
</script>
|
||||
|
||||
<script src="/assets/js/vendor/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script><script src="/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/assets/js/docs.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -5,13 +5,13 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="Toggle the visibility of content across your project with a few classes and our JavaScript plugins.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Jekyll v3.6.2">
|
||||
<meta name="generator" content="Jekyll v3.7.0">
|
||||
|
||||
<title>Collapse · Bootstrap</title>
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
|
||||
<link href="/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
|
||||
|
||||
|
||||
<!-- Documentation extras -->
|
||||
@@ -125,7 +125,7 @@
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0-beta.3.zip">Download</a>
|
||||
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0.zip">Download</a>
|
||||
</header>
|
||||
|
||||
|
||||
@@ -337,11 +337,14 @@
|
||||
Visibility
|
||||
</a></li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.0/extend/icons/">
|
||||
<a class="bd-toc-link" href="/docs/4.0/extend/approach/">
|
||||
Extend
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.0/extend/approach/">
|
||||
Approach
|
||||
</a></li><li>
|
||||
<a href="/docs/4.0/extend/icons/">
|
||||
Icons
|
||||
</a></li></ul>
|
||||
@@ -503,45 +506,45 @@ Multiple <code class="highlighter-rouge"><button></code> or <code class="h
|
||||
<p>Using the <a href="/docs/4.0/components/card/">card</a> component, you can extend the default collapse behavior to create an accordion.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<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" role="button" 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" role="button" 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" role="button" 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>
|
||||
@@ -549,45 +552,45 @@ Multiple <code class="highlighter-rouge"><button></code> or <code class="h
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><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">></span>
|
||||
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">id=</span><span class="s">"accordion"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card"</span><span class="nt">></span>
|
||||
<span class="nt"><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">></span>
|
||||
<span class="nt"><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">></span>
|
||||
<span class="nt"><h5</span> <span class="na">class=</span><span class="s">"mb-0"</span><span class="nt">></span>
|
||||
<span class="nt"><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">role=</span><span class="s">"button"</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">></span>
|
||||
<span class="nt"><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">></span>
|
||||
Collapsible Group Item #1
|
||||
<span class="nt"></a></span>
|
||||
<span class="nt"></button></span>
|
||||
<span class="nt"></h5></span>
|
||||
<span class="nt"></div></span>
|
||||
|
||||
<span class="nt"><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">></span>
|
||||
<span class="nt"><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">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">></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"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card"</span><span class="nt">></span>
|
||||
<span class="nt"><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">></span>
|
||||
<span class="nt"><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">></span>
|
||||
<span class="nt"><h5</span> <span class="na">class=</span><span class="s">"mb-0"</span><span class="nt">></span>
|
||||
<span class="nt"><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">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">"collapseTwo"</span><span class="nt">></span>
|
||||
<span class="nt"><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">></span>
|
||||
Collapsible Group Item #2
|
||||
<span class="nt"></a></span>
|
||||
<span class="nt"></button></span>
|
||||
<span class="nt"></h5></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><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">></span>
|
||||
<span class="nt"><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">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">></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"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card"</span><span class="nt">></span>
|
||||
<span class="nt"><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">></span>
|
||||
<span class="nt"><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">></span>
|
||||
<span class="nt"><h5</span> <span class="na">class=</span><span class="s">"mb-0"</span><span class="nt">></span>
|
||||
<span class="nt"><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">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">"collapseThree"</span><span class="nt">></span>
|
||||
<span class="nt"><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">></span>
|
||||
Collapsible Group Item #3
|
||||
<span class="nt"></a></span>
|
||||
<span class="nt"></button></span>
|
||||
<span class="nt"></h5></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><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">></span>
|
||||
<span class="nt"><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">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">></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"></div></span>
|
||||
@@ -595,60 +598,13 @@ Multiple <code class="highlighter-rouge"><button></code> or <code class="h
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></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">
|
||||
<div id="exampleAccordion" data-children=".item">
|
||||
<div class="item">
|
||||
<a data-toggle="collapse" data-parent="#exampleAccordion" href="#exampleAccordion1" role="button" 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" role="button" 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"><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">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"item"</span><span class="nt">></span>
|
||||
<span class="nt"><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">role=</span><span class="s">"button"</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">></span>
|
||||
Toggle item
|
||||
<span class="nt"></a></span>
|
||||
<span class="nt"><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">></span>
|
||||
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"mb-3"</span><span class="nt">></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"></p></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"item"</span><span class="nt">></span>
|
||||
<span class="nt"><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">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">"exampleAccordion2"</span><span class="nt">></span>
|
||||
Toggle item 2
|
||||
<span class="nt"></a></span>
|
||||
<span class="nt"><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">></span>
|
||||
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"mb-3"</span><span class="nt">></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"></p></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></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). If the control element’s HTML element is not a button (e.g., an <code class="highlighter-rouge"><a></code> or <code class="highlighter-rouge"><div></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>
|
||||
|
||||
@@ -780,34 +736,6 @@ Multiple <code class="highlighter-rouge"><button></code> or <code class="h
|
||||
<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-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/docs.min.js"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
|
||||
<script>
|
||||
docsearch({
|
||||
apiKey: '48cb48b22351bc71ea5f12f4d1ede198',
|
||||
indexName: 'bootstrap-v4',
|
||||
inputSelector: '#search-input',
|
||||
handleSelected: function (input, event, suggestion) {
|
||||
var url = suggestion.url;
|
||||
url = suggestion.isLvl1 ? url.split('#')[0]: url;
|
||||
// If it's a title we remove the anchor so it does not jump.
|
||||
window.location.href = url;
|
||||
},
|
||||
transformData: function (hits) {
|
||||
return hits.map(function (hit) {
|
||||
hit.url = hit.url.replace('https://v4-alpha.getbootstrap.com', '/docs/4.0');
|
||||
return hit;
|
||||
});
|
||||
},
|
||||
debug: false // Set debug to true if you want to inspect the dropdown
|
||||
});
|
||||
</script><script>
|
||||
Holder.addTheme('gray', {
|
||||
bg: '#777',
|
||||
fg: 'rgba(255,255,255,.75)',
|
||||
font: 'Helvetica',
|
||||
fontweight: 'normal'
|
||||
});
|
||||
</script>
|
||||
|
||||
<script src="/assets/js/vendor/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script><script src="/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/assets/js/docs.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -5,13 +5,13 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="Toggle contextual overlays for displaying lists of links and more with the Bootstrap dropdown plugin.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Jekyll v3.6.2">
|
||||
<meta name="generator" content="Jekyll v3.7.0">
|
||||
|
||||
<title>Dropdowns · Bootstrap</title>
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
|
||||
<link href="/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
|
||||
|
||||
|
||||
<!-- Documentation extras -->
|
||||
@@ -125,7 +125,7 @@
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0-beta.3.zip">Download</a>
|
||||
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0.zip">Download</a>
|
||||
</header>
|
||||
|
||||
|
||||
@@ -337,11 +337,14 @@
|
||||
Visibility
|
||||
</a></li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.0/extend/icons/">
|
||||
<a class="bd-toc-link" href="/docs/4.0/extend/approach/">
|
||||
Extend
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.0/extend/approach/">
|
||||
Approach
|
||||
</a></li><li>
|
||||
<a href="/docs/4.0/extend/icons/">
|
||||
Icons
|
||||
</a></li></ul>
|
||||
@@ -393,6 +396,7 @@
|
||||
<li class="toc-entry toc-h2"><a href="#menu-headers">Menu headers</a></li>
|
||||
<li class="toc-entry toc-h2"><a href="#menu-dividers">Menu dividers</a></li>
|
||||
<li class="toc-entry toc-h2"><a href="#menu-forms">Menu forms</a></li>
|
||||
<li class="toc-entry toc-h2"><a href="#active-menu-items">Active menu items</a></li>
|
||||
<li class="toc-entry toc-h2"><a href="#disabled-menu-items">Disabled menu items</a></li>
|
||||
<li class="toc-entry toc-h2"><a href="#usage">Usage</a>
|
||||
<ul>
|
||||
@@ -740,7 +744,7 @@
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"btn-group"</span><span class="nt">></span>
|
||||
<span class="nt"><button</span> <span class="na">class=</span><span class="s">"btn btn-secondary btn-lg"</span> <span class="na">type=</span><span class="s">"button"</span><span class="nt">></span>
|
||||
Large button
|
||||
Large split button
|
||||
<span class="nt"></button></span>
|
||||
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-lg btn-secondary dropdown-toggle dropdown-toggle-split"</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">></span>
|
||||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"sr-only"</span><span class="nt">></span>Toggle Dropdown<span class="nt"></span></span>
|
||||
@@ -761,7 +765,7 @@
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"btn-group"</span><span class="nt">></span>
|
||||
<span class="nt"><button</span> <span class="na">class=</span><span class="s">"btn btn-secondary btn-sm"</span> <span class="na">type=</span><span class="s">"button"</span><span class="nt">></span>
|
||||
Small button
|
||||
Small split button
|
||||
<span class="nt"></button></span>
|
||||
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-sm btn-secondary dropdown-toggle dropdown-toggle-split"</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">></span>
|
||||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"sr-only"</span><span class="nt">></span>Toggle Dropdown<span class="nt"></span></span>
|
||||
@@ -821,7 +825,7 @@
|
||||
<span class="nt"><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">></span>
|
||||
Split dropup
|
||||
<span class="nt"></button></span>
|
||||
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-secondary dropdown-toggle"</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">></span>
|
||||
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-secondary dropdown-toggle dropdown-toggle-split"</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">></span>
|
||||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"sr-only"</span><span class="nt">></span>Toggle Dropdown<span class="nt"></span></span>
|
||||
<span class="nt"></button></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"dropdown-menu"</span><span class="nt">></span>
|
||||
@@ -866,9 +870,8 @@
|
||||
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="c"><!-- Default dropright button --></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"btn-group dropright"</span><span class="nt">></span>
|
||||
<span class="nt"><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">></span>Dropright<span class="nt"></button></span>
|
||||
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-secondary dropdown-toggle"</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">></span>
|
||||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"sr-only"</span><span class="nt">></span>Toggle Dropright<span class="nt"></span></span>
|
||||
Dropright
|
||||
<span class="nt"></button></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"dropdown-menu"</span><span class="nt">></span>
|
||||
<span class="c"><!-- Dropdown menu links --></span>
|
||||
@@ -880,7 +883,7 @@
|
||||
<span class="nt"><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">></span>
|
||||
Split dropright
|
||||
<span class="nt"></button></span>
|
||||
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-secondary dropdown-toggle"</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">></span>
|
||||
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-secondary dropdown-toggle dropdown-toggle-split"</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">></span>
|
||||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"sr-only"</span><span class="nt">></span>Toggle Dropright<span class="nt"></span></span>
|
||||
<span class="nt"></button></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"dropdown-menu"</span><span class="nt">></span>
|
||||
@@ -1134,6 +1137,23 @@
|
||||
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"submit"</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span><span class="nt">></span>Sign in<span class="nt"></button></span>
|
||||
<span class="nt"></form></span></code></pre></div>
|
||||
|
||||
<h2 id="active-menu-items">Active menu items</h2>
|
||||
|
||||
<p>Add <code class="highlighter-rouge">.active</code> to items in the dropdown to <strong>style them as active</strong>.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="dropdown-menu">
|
||||
<a class="dropdown-item" href="#">Regular link</a>
|
||||
<a class="dropdown-item active" href="#">Active link</a>
|
||||
<a class="dropdown-item" href="#">Another link</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"dropdown-menu"</span><span class="nt">></span>
|
||||
<span class="nt"><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">></span>Regular link<span class="nt"></a></span>
|
||||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"dropdown-item active"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Active link<span class="nt"></a></span>
|
||||
<span class="nt"><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">></span>Another link<span class="nt"></a></span>
|
||||
<span class="nt"></div></span></code></pre></div>
|
||||
|
||||
<h2 id="disabled-menu-items">Disabled menu items</h2>
|
||||
|
||||
<p>Add <code class="highlighter-rouge">.disabled</code> to items in the dropdown to <strong>style them as disabled</strong>.</p>
|
||||
@@ -1289,34 +1309,6 @@
|
||||
<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-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/docs.min.js"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
|
||||
<script>
|
||||
docsearch({
|
||||
apiKey: '48cb48b22351bc71ea5f12f4d1ede198',
|
||||
indexName: 'bootstrap-v4',
|
||||
inputSelector: '#search-input',
|
||||
handleSelected: function (input, event, suggestion) {
|
||||
var url = suggestion.url;
|
||||
url = suggestion.isLvl1 ? url.split('#')[0]: url;
|
||||
// If it's a title we remove the anchor so it does not jump.
|
||||
window.location.href = url;
|
||||
},
|
||||
transformData: function (hits) {
|
||||
return hits.map(function (hit) {
|
||||
hit.url = hit.url.replace('https://v4-alpha.getbootstrap.com', '/docs/4.0');
|
||||
return hit;
|
||||
});
|
||||
},
|
||||
debug: false // Set debug to true if you want to inspect the dropdown
|
||||
});
|
||||
</script><script>
|
||||
Holder.addTheme('gray', {
|
||||
bg: '#777',
|
||||
fg: 'rgba(255,255,255,.75)',
|
||||
font: 'Helvetica',
|
||||
fontweight: 'normal'
|
||||
});
|
||||
</script>
|
||||
|
||||
<script src="/assets/js/vendor/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script><script src="/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/assets/js/docs.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -5,13 +5,13 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="Examples and usage guidelines for form control styles, layout options, and custom components for creating a wide variety of forms.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Jekyll v3.6.2">
|
||||
<meta name="generator" content="Jekyll v3.7.0">
|
||||
|
||||
<title>Forms · Bootstrap</title>
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
|
||||
<link href="/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
|
||||
|
||||
|
||||
<!-- Documentation extras -->
|
||||
@@ -125,7 +125,7 @@
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0-beta.3.zip">Download</a>
|
||||
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0.zip">Download</a>
|
||||
</header>
|
||||
|
||||
|
||||
@@ -337,11 +337,14 @@
|
||||
Visibility
|
||||
</a></li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.0/extend/icons/">
|
||||
<a class="bd-toc-link" href="/docs/4.0/extend/approach/">
|
||||
Extend
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.0/extend/approach/">
|
||||
Approach
|
||||
</a></li><li>
|
||||
<a href="/docs/4.0/extend/icons/">
|
||||
Icons
|
||||
</a></li></ul>
|
||||
@@ -418,6 +421,7 @@
|
||||
<li class="toc-entry toc-h3"><a href="#browser-defaults">Browser defaults</a></li>
|
||||
<li class="toc-entry toc-h3"><a href="#server-side">Server side</a></li>
|
||||
<li class="toc-entry toc-h3"><a href="#supported-elements">Supported elements</a></li>
|
||||
<li class="toc-entry toc-h3"><a href="#tooltips">Tooltips</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="toc-entry toc-h2"><a href="#custom-forms">Custom forms</a>
|
||||
@@ -1617,7 +1621,7 @@
|
||||
<li>Bootstrap scopes the <code class="highlighter-rouge">:invalid</code> and <code class="highlighter-rouge">:valid</code> styles to parent <code class="highlighter-rouge">.was-validated</code> class, usually applied to the <code class="highlighter-rouge"><form></code>. Otherwise, any required field without a value shows up as invalid on page load. This way, you may choose when to activate them (typically after form submission is attempted).</li>
|
||||
<li>As a fallback, <code class="highlighter-rouge">.is-invalid</code> and <code class="highlighter-rouge">.is-valid</code> classes may be used instead of the pseudo-classes for <a href="#server-side">server side validation</a>. They do not require a <code class="highlighter-rouge">.was-validated</code> parent class.</li>
|
||||
<li>Due to constraints in how CSS works, we cannot (at present) apply styles to a <code class="highlighter-rouge"><label></code> that comes before a form control in the DOM without the help of custom JavaScript.</li>
|
||||
<li>All modern browsers support the <a href="https://www.w3.org/TR/html5/forms.html#the-constraint-validation-api">constraint validation API</a>, a series of JavaScript methods for validating form controls.</li>
|
||||
<li>All modern browsers support the <a href="https://www.w3.org/TR/html5/sec-forms.html#the-constraint-validation-api">constraint validation API</a>, a series of JavaScript methods for validating form controls.</li>
|
||||
<li>Feedback messages may utilize the <a href="#browser-defaults">browser defaults</a> (different for each browser, and unstylable via CSS) or our custom feedback styles with additional HTML and CSS.</li>
|
||||
<li>You may provide custom validity messages with <code class="highlighter-rouge">setCustomValidity</code> in JavaScript.</li>
|
||||
</ul>
|
||||
@@ -1631,15 +1635,21 @@
|
||||
<p>When attempting to submit, you’ll see the <code class="highlighter-rouge">:invalid</code> and <code class="highlighter-rouge">:valid</code> styles applied to your form controls.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<form id="needs-validation" novalidate="">
|
||||
<form class="needs-validation" novalidate="">
|
||||
<div class="form-row">
|
||||
<div class="col-md-4 mb-3">
|
||||
<label for="validationCustom01">First name</label>
|
||||
<input type="text" class="form-control" id="validationCustom01" placeholder="First name" value="Mark" required="" />
|
||||
<div class="valid-feedback">
|
||||
Looks good!
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4 mb-3">
|
||||
<label for="validationCustom02">Last name</label>
|
||||
<input type="text" class="form-control" id="validationCustom02" placeholder="Last name" value="Otto" required="" />
|
||||
<div class="valid-feedback">
|
||||
Looks good!
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4 mb-3">
|
||||
<label for="validationCustomUsername">Username</label>
|
||||
@@ -1677,6 +1687,17 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox" value="" id="invalidCheck" required="" />
|
||||
<label class="form-check-label" for="invalidCheck">
|
||||
Agree to terms and conditions
|
||||
</label>
|
||||
<div class="invalid-feedback">
|
||||
You must agree before submitting.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button class="btn btn-primary" type="submit">Submit form</button>
|
||||
</form>
|
||||
|
||||
@@ -1684,29 +1705,38 @@
|
||||
// Example starter JavaScript for disabling form submissions if there are invalid fields
|
||||
(function() {
|
||||
'use strict';
|
||||
|
||||
window.addEventListener('load', function() {
|
||||
var form = document.getElementById('needs-validation');
|
||||
form.addEventListener('submit', function(event) {
|
||||
if (form.checkValidity() === false) {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
}
|
||||
form.classList.add('was-validated');
|
||||
}, false);
|
||||
// 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>
|
||||
</div>
|
||||
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><form</span> <span class="na">id=</span><span class="s">"needs-validation"</span> <span class="na">novalidate</span><span class="nt">></span>
|
||||
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><form</span> <span class="na">class=</span><span class="s">"needs-validation"</span> <span class="na">novalidate</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-row"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-md-4 mb-3"</span><span class="nt">></span>
|
||||
<span class="nt"><label</span> <span class="na">for=</span><span class="s">"validationCustom01"</span><span class="nt">></span>First name<span class="nt"></label></span>
|
||||
<span class="nt"><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">"validationCustom01"</span> <span class="na">placeholder=</span><span class="s">"First name"</span> <span class="na">value=</span><span class="s">"Mark"</span> <span class="na">required</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"valid-feedback"</span><span class="nt">></span>
|
||||
Looks good!
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-md-4 mb-3"</span><span class="nt">></span>
|
||||
<span class="nt"><label</span> <span class="na">for=</span><span class="s">"validationCustom02"</span><span class="nt">></span>Last name<span class="nt"></label></span>
|
||||
<span class="nt"><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">"validationCustom02"</span> <span class="na">placeholder=</span><span class="s">"Last name"</span> <span class="na">value=</span><span class="s">"Otto"</span> <span class="na">required</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"valid-feedback"</span><span class="nt">></span>
|
||||
Looks good!
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-md-4 mb-3"</span><span class="nt">></span>
|
||||
<span class="nt"><label</span> <span class="na">for=</span><span class="s">"validationCustomUsername"</span><span class="nt">></span>Username<span class="nt"></label></span>
|
||||
@@ -1744,6 +1774,17 @@
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-group"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-check"</span><span class="nt">></span>
|
||||
<span class="nt"><input</span> <span class="na">class=</span><span class="s">"form-check-input"</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">value=</span><span class="s">""</span> <span class="na">id=</span><span class="s">"invalidCheck"</span> <span class="na">required</span><span class="nt">></span>
|
||||
<span class="nt"><label</span> <span class="na">class=</span><span class="s">"form-check-label"</span> <span class="na">for=</span><span class="s">"invalidCheck"</span><span class="nt">></span>
|
||||
Agree to terms and conditions
|
||||
<span class="nt"></label></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"invalid-feedback"</span><span class="nt">></span>
|
||||
You must agree before submitting.
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><button</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span> <span class="na">type=</span><span class="s">"submit"</span><span class="nt">></span>Submit form<span class="nt"></button></span>
|
||||
<span class="nt"></form></span>
|
||||
|
||||
@@ -1751,16 +1792,19 @@
|
||||
<span class="c1">// Example starter JavaScript for disabling form submissions if there are invalid fields</span>
|
||||
<span class="p">(</span><span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="s1">'use strict'</span><span class="p">;</span>
|
||||
|
||||
<span class="nb">window</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="s1">'load'</span><span class="p">,</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="kd">var</span> <span class="nx">form</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">'needs-validation'</span><span class="p">);</span>
|
||||
<span class="nx">form</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="s1">'submit'</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">event</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="k">if</span> <span class="p">(</span><span class="nx">form</span><span class="p">.</span><span class="nx">checkValidity</span><span class="p">()</span> <span class="o">===</span> <span class="kc">false</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="nx">event</span><span class="p">.</span><span class="nx">preventDefault</span><span class="p">();</span>
|
||||
<span class="nx">event</span><span class="p">.</span><span class="nx">stopPropagation</span><span class="p">();</span>
|
||||
<span class="p">}</span>
|
||||
<span class="nx">form</span><span class="p">.</span><span class="nx">classList</span><span class="p">.</span><span class="nx">add</span><span class="p">(</span><span class="s1">'was-validated'</span><span class="p">);</span>
|
||||
<span class="p">},</span> <span class="kc">false</span><span class="p">);</span>
|
||||
<span class="c1">// Fetch all the forms we want to apply custom Bootstrap validation styles to</span>
|
||||
<span class="kd">var</span> <span class="nx">forms</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementsByClassName</span><span class="p">(</span><span class="s1">'needs-validation'</span><span class="p">);</span>
|
||||
<span class="c1">// Loop over them and prevent submission</span>
|
||||
<span class="kd">var</span> <span class="nx">validation</span> <span class="o">=</span> <span class="nb">Array</span><span class="p">.</span><span class="nx">prototype</span><span class="p">.</span><span class="nx">filter</span><span class="p">.</span><span class="nx">call</span><span class="p">(</span><span class="nx">forms</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">form</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="nx">form</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="s1">'submit'</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">event</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="k">if</span> <span class="p">(</span><span class="nx">form</span><span class="p">.</span><span class="nx">checkValidity</span><span class="p">()</span> <span class="o">===</span> <span class="kc">false</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="nx">event</span><span class="p">.</span><span class="nx">preventDefault</span><span class="p">();</span>
|
||||
<span class="nx">event</span><span class="p">.</span><span class="nx">stopPropagation</span><span class="p">();</span>
|
||||
<span class="p">}</span>
|
||||
<span class="nx">form</span><span class="p">.</span><span class="nx">classList</span><span class="p">.</span><span class="nx">add</span><span class="p">(</span><span class="s1">'was-validated'</span><span class="p">);</span>
|
||||
<span class="p">},</span> <span class="kc">false</span><span class="p">);</span>
|
||||
<span class="p">});</span>
|
||||
<span class="p">},</span> <span class="kc">false</span><span class="p">);</span>
|
||||
<span class="p">})();</span>
|
||||
<span class="nt"></script></span></code></pre></div>
|
||||
@@ -1806,6 +1850,14 @@
|
||||
<input type="text" class="form-control" id="validationDefault05" placeholder="Zip" required="" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox" value="" id="invalidCheck2" required="" />
|
||||
<label class="form-check-label" for="invalidCheck2">
|
||||
Agree to terms and conditions
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<button class="btn btn-primary" type="submit">Submit form</button>
|
||||
</form>
|
||||
</div>
|
||||
@@ -1843,6 +1895,14 @@
|
||||
<span class="nt"><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">"validationDefault05"</span> <span class="na">placeholder=</span><span class="s">"Zip"</span> <span class="na">required</span><span class="nt">></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-group"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-check"</span><span class="nt">></span>
|
||||
<span class="nt"><input</span> <span class="na">class=</span><span class="s">"form-check-input"</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">value=</span><span class="s">""</span> <span class="na">id=</span><span class="s">"invalidCheck2"</span> <span class="na">required</span><span class="nt">></span>
|
||||
<span class="nt"><label</span> <span class="na">class=</span><span class="s">"form-check-label"</span> <span class="na">for=</span><span class="s">"invalidCheck2"</span><span class="nt">></span>
|
||||
Agree to terms and conditions
|
||||
<span class="nt"></label></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><button</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span> <span class="na">type=</span><span class="s">"submit"</span><span class="nt">></span>Submit form<span class="nt"></button></span>
|
||||
<span class="nt"></form></span></code></pre></div>
|
||||
|
||||
@@ -1856,10 +1916,16 @@
|
||||
<div class="col-md-4 mb-3">
|
||||
<label for="validationServer01">First name</label>
|
||||
<input type="text" class="form-control is-valid" id="validationServer01" placeholder="First name" value="Mark" required="" />
|
||||
<div class="valid-feedback">
|
||||
Looks good!
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4 mb-3">
|
||||
<label for="validationServer02">Last name</label>
|
||||
<input type="text" class="form-control is-valid" id="validationServer02" placeholder="Last name" value="Otto" required="" />
|
||||
<div class="valid-feedback">
|
||||
Looks good!
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4 mb-3">
|
||||
<label for="validationServerUsername">Username</label>
|
||||
@@ -1897,7 +1963,17 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<div class="form-check">
|
||||
<input class="form-check-input is-invalid" type="checkbox" value="" id="invalidCheck3" required="" />
|
||||
<label class="form-check-label" for="invalidCheck3">
|
||||
Agree to terms and conditions
|
||||
</label>
|
||||
<div class="invalid-feedback">
|
||||
You must agree before submitting.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button class="btn btn-primary" type="submit">Submit form</button>
|
||||
</form>
|
||||
</div>
|
||||
@@ -1906,10 +1982,16 @@
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-md-4 mb-3"</span><span class="nt">></span>
|
||||
<span class="nt"><label</span> <span class="na">for=</span><span class="s">"validationServer01"</span><span class="nt">></span>First name<span class="nt"></label></span>
|
||||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control is-valid"</span> <span class="na">id=</span><span class="s">"validationServer01"</span> <span class="na">placeholder=</span><span class="s">"First name"</span> <span class="na">value=</span><span class="s">"Mark"</span> <span class="na">required</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"valid-feedback"</span><span class="nt">></span>
|
||||
Looks good!
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-md-4 mb-3"</span><span class="nt">></span>
|
||||
<span class="nt"><label</span> <span class="na">for=</span><span class="s">"validationServer02"</span><span class="nt">></span>Last name<span class="nt"></label></span>
|
||||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control is-valid"</span> <span class="na">id=</span><span class="s">"validationServer02"</span> <span class="na">placeholder=</span><span class="s">"Last name"</span> <span class="na">value=</span><span class="s">"Otto"</span> <span class="na">required</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"valid-feedback"</span><span class="nt">></span>
|
||||
Looks good!
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-md-4 mb-3"</span><span class="nt">></span>
|
||||
<span class="nt"><label</span> <span class="na">for=</span><span class="s">"validationServerUsername"</span><span class="nt">></span>Username<span class="nt"></label></span>
|
||||
@@ -1947,7 +2029,17 @@
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-group"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-check"</span><span class="nt">></span>
|
||||
<span class="nt"><input</span> <span class="na">class=</span><span class="s">"form-check-input is-invalid"</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">value=</span><span class="s">""</span> <span class="na">id=</span><span class="s">"invalidCheck3"</span> <span class="na">required</span><span class="nt">></span>
|
||||
<span class="nt"><label</span> <span class="na">class=</span><span class="s">"form-check-label"</span> <span class="na">for=</span><span class="s">"invalidCheck3"</span><span class="nt">></span>
|
||||
Agree to terms and conditions
|
||||
<span class="nt"></label></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"invalid-feedback"</span><span class="nt">></span>
|
||||
You must agree before submitting.
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><button</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span> <span class="na">type=</span><span class="s">"submit"</span><span class="nt">></span>Submit form<span class="nt"></button></span>
|
||||
<span class="nt"></form></span></code></pre></div>
|
||||
|
||||
@@ -1986,7 +2078,7 @@
|
||||
<div class="custom-file">
|
||||
<input type="file" class="custom-file-input" id="validatedCustomFile" required="" />
|
||||
<label class="custom-file-label" for="validatedCustomFile">Choose file...</label>
|
||||
<div class="invalid-feedback">Example invalid custom file feedback</div>
|
||||
<div class="invalid-feedback">Example invalid custom file feedback</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
@@ -2020,10 +2112,125 @@
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"custom-file"</span><span class="nt">></span>
|
||||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"file"</span> <span class="na">class=</span><span class="s">"custom-file-input"</span> <span class="na">id=</span><span class="s">"validatedCustomFile"</span> <span class="na">required</span><span class="nt">></span>
|
||||
<span class="nt"><label</span> <span class="na">class=</span><span class="s">"custom-file-label"</span> <span class="na">for=</span><span class="s">"validatedCustomFile"</span><span class="nt">></span>Choose file...<span class="nt"></label></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"invalid-feedback"</span><span class="nt">></span>Example invalid custom file feedback<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"invalid-feedback"</span><span class="nt">></span>Example invalid custom file feedback<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></form></span></code></pre></div>
|
||||
|
||||
<h3 id="tooltips">Tooltips</h3>
|
||||
|
||||
<p>If your form layout allows it, you can swap the <code class="highlighter-rouge">.{valid|invalid}-feedback</code> classes for <code class="highlighter-rouge">.{valid|invalid}-tooltip</code> classes to display validation feedback in a styled tooltip. Be sure to have a parent with <code class="highlighter-rouge">position: relative</code> on it for tooltip positioning. In the example below, our column classes have this already, but your project may require an alternative setup.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<form class="needs-validation" novalidate="">
|
||||
<div class="form-row">
|
||||
<div class="col-md-4 mb-3">
|
||||
<label for="validationTooltip01">First name</label>
|
||||
<input type="text" class="form-control" id="validationTooltip01" placeholder="First name" value="Mark" required="" />
|
||||
<div class="valid-tooltip">
|
||||
Looks good!
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4 mb-3">
|
||||
<label for="validationTooltip02">Last name</label>
|
||||
<input type="text" class="form-control" id="validationTooltip02" placeholder="Last name" value="Otto" required="" />
|
||||
<div class="valid-tooltip">
|
||||
Looks good!
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4 mb-3">
|
||||
<label for="validationTooltipUsername">Username</label>
|
||||
<div class="input-group">
|
||||
<div class="input-group-prepend">
|
||||
<span class="input-group-text" id="validationTooltipUsernamePrepend">@</span>
|
||||
</div>
|
||||
<input type="text" class="form-control" id="validationTooltipUsername" placeholder="Username" aria-describedby="validationTooltipUsernamePrepend" required="" />
|
||||
<div class="invalid-tooltip">
|
||||
Please choose a unique and valid username.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="col-md-6 mb-3">
|
||||
<label for="validationTooltip03">City</label>
|
||||
<input type="text" class="form-control" id="validationTooltip03" placeholder="City" required="" />
|
||||
<div class="invalid-tooltip">
|
||||
Please provide a valid city.
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3 mb-3">
|
||||
<label for="validationTooltip04">State</label>
|
||||
<input type="text" class="form-control" id="validationTooltip04" placeholder="State" required="" />
|
||||
<div class="invalid-tooltip">
|
||||
Please provide a valid state.
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3 mb-3">
|
||||
<label for="validationTooltip05">Zip</label>
|
||||
<input type="text" class="form-control" id="validationTooltip05" placeholder="Zip" required="" />
|
||||
<div class="invalid-tooltip">
|
||||
Please provide a valid zip.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button class="btn btn-primary" type="submit">Submit form</button>
|
||||
</form>
|
||||
</div>
|
||||
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><form</span> <span class="na">class=</span><span class="s">"needs-validation"</span> <span class="na">novalidate</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-row"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-md-4 mb-3"</span><span class="nt">></span>
|
||||
<span class="nt"><label</span> <span class="na">for=</span><span class="s">"validationTooltip01"</span><span class="nt">></span>First name<span class="nt"></label></span>
|
||||
<span class="nt"><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">"validationTooltip01"</span> <span class="na">placeholder=</span><span class="s">"First name"</span> <span class="na">value=</span><span class="s">"Mark"</span> <span class="na">required</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"valid-tooltip"</span><span class="nt">></span>
|
||||
Looks good!
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-md-4 mb-3"</span><span class="nt">></span>
|
||||
<span class="nt"><label</span> <span class="na">for=</span><span class="s">"validationTooltip02"</span><span class="nt">></span>Last name<span class="nt"></label></span>
|
||||
<span class="nt"><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">"validationTooltip02"</span> <span class="na">placeholder=</span><span class="s">"Last name"</span> <span class="na">value=</span><span class="s">"Otto"</span> <span class="na">required</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"valid-tooltip"</span><span class="nt">></span>
|
||||
Looks good!
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-md-4 mb-3"</span><span class="nt">></span>
|
||||
<span class="nt"><label</span> <span class="na">for=</span><span class="s">"validationTooltipUsername"</span><span class="nt">></span>Username<span class="nt"></label></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"input-group"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"input-group-prepend"</span><span class="nt">></span>
|
||||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"input-group-text"</span> <span class="na">id=</span><span class="s">"validationTooltipUsernamePrepend"</span><span class="nt">></span>@<span class="nt"></span></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><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">"validationTooltipUsername"</span> <span class="na">placeholder=</span><span class="s">"Username"</span> <span class="na">aria-describedby=</span><span class="s">"validationTooltipUsernamePrepend"</span> <span class="na">required</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"invalid-tooltip"</span><span class="nt">></span>
|
||||
Please choose a unique and valid username.
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-row"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-md-6 mb-3"</span><span class="nt">></span>
|
||||
<span class="nt"><label</span> <span class="na">for=</span><span class="s">"validationTooltip03"</span><span class="nt">></span>City<span class="nt"></label></span>
|
||||
<span class="nt"><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">"validationTooltip03"</span> <span class="na">placeholder=</span><span class="s">"City"</span> <span class="na">required</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"invalid-tooltip"</span><span class="nt">></span>
|
||||
Please provide a valid city.
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-md-3 mb-3"</span><span class="nt">></span>
|
||||
<span class="nt"><label</span> <span class="na">for=</span><span class="s">"validationTooltip04"</span><span class="nt">></span>State<span class="nt"></label></span>
|
||||
<span class="nt"><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">"validationTooltip04"</span> <span class="na">placeholder=</span><span class="s">"State"</span> <span class="na">required</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"invalid-tooltip"</span><span class="nt">></span>
|
||||
Please provide a valid state.
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-md-3 mb-3"</span><span class="nt">></span>
|
||||
<span class="nt"><label</span> <span class="na">for=</span><span class="s">"validationTooltip05"</span><span class="nt">></span>Zip<span class="nt"></label></span>
|
||||
<span class="nt"><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">"validationTooltip05"</span> <span class="na">placeholder=</span><span class="s">"Zip"</span> <span class="na">required</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"invalid-tooltip"</span><span class="nt">></span>
|
||||
Please provide a valid zip.
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><button</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span> <span class="na">type=</span><span class="s">"submit"</span><span class="nt">></span>Submit form<span class="nt"></button></span>
|
||||
<span class="nt"></form></span></code></pre></div>
|
||||
|
||||
<h2 id="custom-forms">Custom forms</h2>
|
||||
|
||||
<p>For even more customization and cross browser consistency, use our completely custom form elements to replace the browser defaults. They’re built on top of semantic and accessible markup, so they’re solid replacements for any default form control.</p>
|
||||
@@ -2234,20 +2441,27 @@
|
||||
|
||||
<h4 id="translating-or-customizing-the-strings">Translating or customizing the strings</h4>
|
||||
|
||||
<p>The <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:lang"><code class="highlighter-rouge">:lang()</code> pseudo-class</a> is used to allow for easy translation of the “Browse” and “Choose file…” text into other languages. Simply override or add entries to the <code class="highlighter-rouge">$custom-file-text</code> SCSS variable with the relevant <a href="https://en.wikipedia.org/wiki/IETF_language_tag">language tag</a> and localized strings. The English strings can be customized the same way. For example, here’s how one might add a Spanish translation (Spanish’s language code is <code class="highlighter-rouge">es</code>):</p>
|
||||
<p>The <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:lang"><code class="highlighter-rouge">:lang()</code> pseudo-class</a> is used to allow for translation of the “Browse” text into other languages. Override or add entries to the <code class="highlighter-rouge">$custom-file-text</code> Sass variable with the relevant <a href="https://en.wikipedia.org/wiki/IETF_language_tag">language tag</a> and localized strings. The English strings can be customized the same way. For example, here’s how one might add a Spanish translation (Spanish’s language code is <code class="highlighter-rouge">es</code>):</p>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-scss" data-lang="scss"><span class="nv">$custom-file-text</span><span class="p">:</span> <span class="p">(</span>
|
||||
<span class="n">placeholder</span><span class="o">:</span> <span class="p">(</span>
|
||||
<span class="n">en</span><span class="o">:</span> <span class="s2">"Choose file..."</span><span class="o">,</span>
|
||||
<span class="n">es</span><span class="o">:</span> <span class="s2">"Seleccionar archivo..."</span>
|
||||
<span class="p">)</span><span class="o">,</span>
|
||||
<span class="n">button-label</span><span class="o">:</span> <span class="p">(</span>
|
||||
<span class="n">en</span><span class="o">:</span> <span class="s2">"Browse"</span><span class="o">,</span>
|
||||
<span class="n">es</span><span class="o">:</span> <span class="s2">"Navegar"</span>
|
||||
<span class="p">)</span>
|
||||
<span class="n">en</span><span class="o">:</span> <span class="s2">"Browse"</span><span class="o">,</span>
|
||||
<span class="n">es</span><span class="o">:</span> <span class="s2">"Elegir"</span>
|
||||
<span class="p">);</span></code></pre></figure>
|
||||
|
||||
<p>You’ll need to set the language of your document (or subtree thereof) correctly in order for the correct text to be shown. This can be done using <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang">the <code class="highlighter-rouge">lang</code> attribute</a> or the <a href="https://www.w3.org/Protocols/rfc2616/rfc2616-sec14.html#sec14.12"><code class="highlighter-rouge">Content-Language</code> HTTP header</a>, among other methods.</p>
|
||||
<p>Here’s <code class="highlighter-rouge">lang(es)</code> in action on the custom file input for a Spanish translation:</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="custom-file">
|
||||
<input type="file" class="custom-file-input" id="customFileLang" lang="es" />
|
||||
<label class="custom-file-label" for="customFileLang">Seleccionar Archivo</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"custom-file"</span><span class="nt">></span>
|
||||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"file"</span> <span class="na">class=</span><span class="s">"custom-file-input"</span> <span class="na">id=</span><span class="s">"customFileLang"</span> <span class="na">lang=</span><span class="s">"es"</span><span class="nt">></span>
|
||||
<span class="nt"><label</span> <span class="na">class=</span><span class="s">"custom-file-label"</span> <span class="na">for=</span><span class="s">"customFileLang"</span><span class="nt">></span>Seleccionar Archivo<span class="nt"></label></span>
|
||||
<span class="nt"></div></span></code></pre></div>
|
||||
|
||||
<p>You’ll need to set the language of your document (or subtree thereof) correctly in order for the correct text to be shown. This can be done using <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang">the <code class="highlighter-rouge">lang</code> attribute</a> on the <code class="highlighter-rouge"><span class="nt"><html></span></code> element or the <a href="https://www.w3.org/Protocols/rfc2616/rfc2616-sec14.html#sec14.12"><code class="highlighter-rouge">Content-Language</code> HTTP header</a>, among other methods.</p>
|
||||
|
||||
</main>
|
||||
</div>
|
||||
@@ -2256,34 +2470,6 @@
|
||||
<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-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/docs.min.js"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
|
||||
<script>
|
||||
docsearch({
|
||||
apiKey: '48cb48b22351bc71ea5f12f4d1ede198',
|
||||
indexName: 'bootstrap-v4',
|
||||
inputSelector: '#search-input',
|
||||
handleSelected: function (input, event, suggestion) {
|
||||
var url = suggestion.url;
|
||||
url = suggestion.isLvl1 ? url.split('#')[0]: url;
|
||||
// If it's a title we remove the anchor so it does not jump.
|
||||
window.location.href = url;
|
||||
},
|
||||
transformData: function (hits) {
|
||||
return hits.map(function (hit) {
|
||||
hit.url = hit.url.replace('https://v4-alpha.getbootstrap.com', '/docs/4.0');
|
||||
return hit;
|
||||
});
|
||||
},
|
||||
debug: false // Set debug to true if you want to inspect the dropdown
|
||||
});
|
||||
</script><script>
|
||||
Holder.addTheme('gray', {
|
||||
bg: '#777',
|
||||
fg: 'rgba(255,255,255,.75)',
|
||||
font: 'Helvetica',
|
||||
fontweight: 'normal'
|
||||
});
|
||||
</script>
|
||||
|
||||
<script src="/assets/js/vendor/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script><script src="/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/assets/js/docs.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -5,13 +5,13 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="Easily extend form controls by adding text, buttons, or button groups on either side of textual inputs, custom selects, and custom file inputs.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Jekyll v3.6.2">
|
||||
<meta name="generator" content="Jekyll v3.7.0">
|
||||
|
||||
<title>Input group · Bootstrap</title>
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
|
||||
<link href="/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
|
||||
|
||||
|
||||
<!-- Documentation extras -->
|
||||
@@ -125,7 +125,7 @@
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0-beta.3.zip">Download</a>
|
||||
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0.zip">Download</a>
|
||||
</header>
|
||||
|
||||
|
||||
@@ -337,11 +337,14 @@
|
||||
Visibility
|
||||
</a></li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.0/extend/icons/">
|
||||
<a class="bd-toc-link" href="/docs/4.0/extend/approach/">
|
||||
Extend
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.0/extend/approach/">
|
||||
Approach
|
||||
</a></li><li>
|
||||
<a href="/docs/4.0/extend/icons/">
|
||||
Icons
|
||||
</a></li></ul>
|
||||
@@ -436,6 +439,13 @@
|
||||
<span class="input-group-text">.00</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="input-group">
|
||||
<div class="input-group-prepend">
|
||||
<span class="input-group-text">With textarea</span>
|
||||
</div>
|
||||
<textarea class="form-control" aria-label="With textarea"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"input-group mb-3"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"input-group-prepend"</span><span class="nt">></span>
|
||||
@@ -467,6 +477,13 @@
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"input-group-append"</span><span class="nt">></span>
|
||||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"input-group-text"</span><span class="nt">></span>.00<span class="nt"></span></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"input-group"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"input-group-prepend"</span><span class="nt">></span>
|
||||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"input-group-text"</span><span class="nt">></span>With textarea<span class="nt"></span></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><textarea</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">aria-label=</span><span class="s">"With textarea"</span><span class="nt">></textarea></span>
|
||||
<span class="nt"></div></span></code></pre></div>
|
||||
|
||||
<h2 id="sizing">Sizing</h2>
|
||||
@@ -920,17 +937,17 @@
|
||||
<div class="input-group-prepend">
|
||||
<span class="input-group-text">Upload</span>
|
||||
</div>
|
||||
<label class="custom-file">
|
||||
<input type="file" id="inputGroupFile01" class="custom-file-input" required="" />
|
||||
<span class="custom-file-control"></span>
|
||||
</label>
|
||||
<div class="custom-file">
|
||||
<input type="file" class="custom-file-input" id="inputGroupFile01" />
|
||||
<label class="custom-file-label" for="inputGroupFile01">Choose file</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="input-group mb-3">
|
||||
<label class="custom-file">
|
||||
<input type="file" id="inputGroupFile02" class="custom-file-input" required="" />
|
||||
<span class="custom-file-control"></span>
|
||||
</label>
|
||||
<div class="custom-file">
|
||||
<input type="file" class="custom-file-input" id="inputGroupFile02" />
|
||||
<label class="custom-file-label" for="inputGroupFile02">Choose file</label>
|
||||
</div>
|
||||
<div class="input-group-append">
|
||||
<span class="input-group-text">Upload</span>
|
||||
</div>
|
||||
@@ -940,17 +957,17 @@
|
||||
<div class="input-group-prepend">
|
||||
<button class="btn btn-outline-secondary" type="button">Button</button>
|
||||
</div>
|
||||
<label class="custom-file">
|
||||
<input type="file" id="inputGroupFile03" class="custom-file-input" required="" />
|
||||
<span class="custom-file-control"></span>
|
||||
</label>
|
||||
<div class="custom-file">
|
||||
<input type="file" class="custom-file-input" id="inputGroupFile03" />
|
||||
<label class="custom-file-label" for="inputGroupFile03">Choose file</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="input-group">
|
||||
<label class="custom-file">
|
||||
<input type="file" id="inputGroupFile04" class="custom-file-input" required="" />
|
||||
<span class="custom-file-control"></span>
|
||||
</label>
|
||||
<div class="custom-file">
|
||||
<input type="file" class="custom-file-input" id="inputGroupFile04" />
|
||||
<label class="custom-file-label" for="inputGroupFile04">Choose file</label>
|
||||
</div>
|
||||
<div class="input-group-append">
|
||||
<button class="btn btn-outline-secondary" type="button">Button</button>
|
||||
</div>
|
||||
@@ -960,17 +977,17 @@
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"input-group-prepend"</span><span class="nt">></span>
|
||||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"input-group-text"</span><span class="nt">></span>Upload<span class="nt"></span></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><label</span> <span class="na">class=</span><span class="s">"custom-file"</span><span class="nt">></span>
|
||||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"file"</span> <span class="na">id=</span><span class="s">"inputGroupFile01"</span> <span class="na">class=</span><span class="s">"custom-file-input"</span> <span class="na">required</span><span class="nt">></span>
|
||||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"custom-file-control"</span><span class="nt">></span></span>
|
||||
<span class="nt"></label></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"custom-file"</span><span class="nt">></span>
|
||||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"file"</span> <span class="na">class=</span><span class="s">"custom-file-input"</span> <span class="na">id=</span><span class="s">"inputGroupFile01"</span><span class="nt">></span>
|
||||
<span class="nt"><label</span> <span class="na">class=</span><span class="s">"custom-file-label"</span> <span class="na">for=</span><span class="s">"inputGroupFile01"</span><span class="nt">></span>Choose file<span class="nt"></label></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"input-group mb-3"</span><span class="nt">></span>
|
||||
<span class="nt"><label</span> <span class="na">class=</span><span class="s">"custom-file"</span><span class="nt">></span>
|
||||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"file"</span> <span class="na">id=</span><span class="s">"inputGroupFile02"</span> <span class="na">class=</span><span class="s">"custom-file-input"</span> <span class="na">required</span><span class="nt">></span>
|
||||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"custom-file-control"</span><span class="nt">></span></span>
|
||||
<span class="nt"></label></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"custom-file"</span><span class="nt">></span>
|
||||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"file"</span> <span class="na">class=</span><span class="s">"custom-file-input"</span> <span class="na">id=</span><span class="s">"inputGroupFile02"</span><span class="nt">></span>
|
||||
<span class="nt"><label</span> <span class="na">class=</span><span class="s">"custom-file-label"</span> <span class="na">for=</span><span class="s">"inputGroupFile02"</span><span class="nt">></span>Choose file<span class="nt"></label></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"input-group-append"</span><span class="nt">></span>
|
||||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"input-group-text"</span> <span class="na">id=</span><span class="s">""</span><span class="nt">></span>Upload<span class="nt"></span></span>
|
||||
<span class="nt"></div></span>
|
||||
@@ -980,17 +997,17 @@
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"input-group-prepend"</span><span class="nt">></span>
|
||||
<span class="nt"><button</span> <span class="na">class=</span><span class="s">"btn btn-outline-secondary"</span> <span class="na">type=</span><span class="s">"button"</span><span class="nt">></span>Button<span class="nt"></button></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><label</span> <span class="na">class=</span><span class="s">"custom-file"</span><span class="nt">></span>
|
||||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"file"</span> <span class="na">id=</span><span class="s">"inputGroupFile03"</span> <span class="na">class=</span><span class="s">"custom-file-input"</span> <span class="na">required</span><span class="nt">></span>
|
||||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"custom-file-control"</span><span class="nt">></span></span>
|
||||
<span class="nt"></label></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"custom-file"</span><span class="nt">></span>
|
||||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"file"</span> <span class="na">class=</span><span class="s">"custom-file-input"</span> <span class="na">id=</span><span class="s">"inputGroupFile03"</span><span class="nt">></span>
|
||||
<span class="nt"><label</span> <span class="na">class=</span><span class="s">"custom-file-label"</span> <span class="na">for=</span><span class="s">"inputGroupFile03"</span><span class="nt">></span>Choose file<span class="nt"></label></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"input-group"</span><span class="nt">></span>
|
||||
<span class="nt"><label</span> <span class="na">class=</span><span class="s">"custom-file"</span><span class="nt">></span>
|
||||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"file"</span> <span class="na">id=</span><span class="s">"inputGroupFile04"</span> <span class="na">class=</span><span class="s">"custom-file-input"</span> <span class="na">required</span><span class="nt">></span>
|
||||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"custom-file-control"</span><span class="nt">></span></span>
|
||||
<span class="nt"></label></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"custom-file"</span><span class="nt">></span>
|
||||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"file"</span> <span class="na">class=</span><span class="s">"custom-file-input"</span> <span class="na">id=</span><span class="s">"inputGroupFile04"</span><span class="nt">></span>
|
||||
<span class="nt"><label</span> <span class="na">class=</span><span class="s">"custom-file-label"</span> <span class="na">for=</span><span class="s">"inputGroupFile04"</span><span class="nt">></span>Choose file<span class="nt"></label></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"input-group-append"</span><span class="nt">></span>
|
||||
<span class="nt"><button</span> <span class="na">class=</span><span class="s">"btn btn-outline-secondary"</span> <span class="na">type=</span><span class="s">"button"</span><span class="nt">></span>Button<span class="nt"></button></span>
|
||||
<span class="nt"></div></span>
|
||||
@@ -1009,34 +1026,6 @@
|
||||
<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-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/docs.min.js"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
|
||||
<script>
|
||||
docsearch({
|
||||
apiKey: '48cb48b22351bc71ea5f12f4d1ede198',
|
||||
indexName: 'bootstrap-v4',
|
||||
inputSelector: '#search-input',
|
||||
handleSelected: function (input, event, suggestion) {
|
||||
var url = suggestion.url;
|
||||
url = suggestion.isLvl1 ? url.split('#')[0]: url;
|
||||
// If it's a title we remove the anchor so it does not jump.
|
||||
window.location.href = url;
|
||||
},
|
||||
transformData: function (hits) {
|
||||
return hits.map(function (hit) {
|
||||
hit.url = hit.url.replace('https://v4-alpha.getbootstrap.com', '/docs/4.0');
|
||||
return hit;
|
||||
});
|
||||
},
|
||||
debug: false // Set debug to true if you want to inspect the dropdown
|
||||
});
|
||||
</script><script>
|
||||
Holder.addTheme('gray', {
|
||||
bg: '#777',
|
||||
fg: 'rgba(255,255,255,.75)',
|
||||
font: 'Helvetica',
|
||||
fontweight: 'normal'
|
||||
});
|
||||
</script>
|
||||
|
||||
<script src="/assets/js/vendor/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script><script src="/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/assets/js/docs.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -5,13 +5,13 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="Lightweight, flexible component for showcasing hero unit style content.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Jekyll v3.6.2">
|
||||
<meta name="generator" content="Jekyll v3.7.0">
|
||||
|
||||
<title>Jumbotron · Bootstrap</title>
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
|
||||
<link href="/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
|
||||
|
||||
|
||||
<!-- Documentation extras -->
|
||||
@@ -125,7 +125,7 @@
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0-beta.3.zip">Download</a>
|
||||
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0.zip">Download</a>
|
||||
</header>
|
||||
|
||||
|
||||
@@ -337,11 +337,14 @@
|
||||
Visibility
|
||||
</a></li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.0/extend/icons/">
|
||||
<a class="bd-toc-link" href="/docs/4.0/extend/approach/">
|
||||
Extend
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.0/extend/approach/">
|
||||
Approach
|
||||
</a></li><li>
|
||||
<a href="/docs/4.0/extend/icons/">
|
||||
Icons
|
||||
</a></li></ul>
|
||||
@@ -428,34 +431,6 @@
|
||||
<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-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/docs.min.js"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
|
||||
<script>
|
||||
docsearch({
|
||||
apiKey: '48cb48b22351bc71ea5f12f4d1ede198',
|
||||
indexName: 'bootstrap-v4',
|
||||
inputSelector: '#search-input',
|
||||
handleSelected: function (input, event, suggestion) {
|
||||
var url = suggestion.url;
|
||||
url = suggestion.isLvl1 ? url.split('#')[0]: url;
|
||||
// If it's a title we remove the anchor so it does not jump.
|
||||
window.location.href = url;
|
||||
},
|
||||
transformData: function (hits) {
|
||||
return hits.map(function (hit) {
|
||||
hit.url = hit.url.replace('https://v4-alpha.getbootstrap.com', '/docs/4.0');
|
||||
return hit;
|
||||
});
|
||||
},
|
||||
debug: false // Set debug to true if you want to inspect the dropdown
|
||||
});
|
||||
</script><script>
|
||||
Holder.addTheme('gray', {
|
||||
bg: '#777',
|
||||
fg: 'rgba(255,255,255,.75)',
|
||||
font: 'Helvetica',
|
||||
fontweight: 'normal'
|
||||
});
|
||||
</script>
|
||||
|
||||
<script src="/assets/js/vendor/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script><script src="/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/assets/js/docs.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -5,13 +5,13 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="List groups are a flexible and powerful component for displaying a series of content. Modify and extend them to support just about any content within.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Jekyll v3.6.2">
|
||||
<meta name="generator" content="Jekyll v3.7.0">
|
||||
|
||||
<title>List group · Bootstrap</title>
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
|
||||
<link href="/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
|
||||
|
||||
|
||||
<!-- Documentation extras -->
|
||||
@@ -125,7 +125,7 @@
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0-beta.3.zip">Download</a>
|
||||
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0.zip">Download</a>
|
||||
</header>
|
||||
|
||||
|
||||
@@ -337,11 +337,14 @@
|
||||
Visibility
|
||||
</a></li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.0/extend/icons/">
|
||||
<a class="bd-toc-link" href="/docs/4.0/extend/approach/">
|
||||
Extend
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.0/extend/approach/">
|
||||
Approach
|
||||
</a></li><li>
|
||||
<a href="/docs/4.0/extend/icons/">
|
||||
Icons
|
||||
</a></li></ul>
|
||||
@@ -380,6 +383,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></li>
|
||||
<li class="toc-entry toc-h2"><a href="#with-badges">With badges</a></li>
|
||||
<li class="toc-entry toc-h2"><a href="#custom-content">Custom content</a></li>
|
||||
@@ -519,6 +523,27 @@
|
||||
<span class="nt"><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">></span>Vestibulum at eros<span class="nt"></button></span>
|
||||
<span class="nt"></div></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">
|
||||
<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"><ul</span> <span class="na">class=</span><span class="s">"list-group list-group-flush"</span><span class="nt">></span>
|
||||
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"list-group-item"</span><span class="nt">></span>Cras justo odio<span class="nt"></li></span>
|
||||
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"list-group-item"</span><span class="nt">></span>Dapibus ac facilisis in<span class="nt"></li></span>
|
||||
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"list-group-item"</span><span class="nt">></span>Morbi leo risus<span class="nt"></li></span>
|
||||
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"list-group-item"</span><span class="nt">></span>Porta ac consectetur ac<span class="nt"></li></span>
|
||||
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"list-group-item"</span><span class="nt">></span>Vestibulum at eros<span class="nt"></li></span>
|
||||
<span class="nt"></ul></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>
|
||||
@@ -871,34 +896,6 @@
|
||||
<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-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/docs.min.js"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
|
||||
<script>
|
||||
docsearch({
|
||||
apiKey: '48cb48b22351bc71ea5f12f4d1ede198',
|
||||
indexName: 'bootstrap-v4',
|
||||
inputSelector: '#search-input',
|
||||
handleSelected: function (input, event, suggestion) {
|
||||
var url = suggestion.url;
|
||||
url = suggestion.isLvl1 ? url.split('#')[0]: url;
|
||||
// If it's a title we remove the anchor so it does not jump.
|
||||
window.location.href = url;
|
||||
},
|
||||
transformData: function (hits) {
|
||||
return hits.map(function (hit) {
|
||||
hit.url = hit.url.replace('https://v4-alpha.getbootstrap.com', '/docs/4.0');
|
||||
return hit;
|
||||
});
|
||||
},
|
||||
debug: false // Set debug to true if you want to inspect the dropdown
|
||||
});
|
||||
</script><script>
|
||||
Holder.addTheme('gray', {
|
||||
bg: '#777',
|
||||
fg: 'rgba(255,255,255,.75)',
|
||||
font: 'Helvetica',
|
||||
fontweight: 'normal'
|
||||
});
|
||||
</script>
|
||||
|
||||
<script src="/assets/js/vendor/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script><script src="/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/assets/js/docs.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -5,13 +5,13 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="Use Bootstrap’s JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Jekyll v3.6.2">
|
||||
<meta name="generator" content="Jekyll v3.7.0">
|
||||
|
||||
<title>Modal · Bootstrap</title>
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
|
||||
<link href="/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
|
||||
|
||||
|
||||
<!-- Documentation extras -->
|
||||
@@ -125,7 +125,7 @@
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0-beta.3.zip">Download</a>
|
||||
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0.zip">Download</a>
|
||||
</header>
|
||||
|
||||
|
||||
@@ -337,11 +337,14 @@
|
||||
Visibility
|
||||
</a></li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.0/extend/icons/">
|
||||
<a class="bd-toc-link" href="/docs/4.0/extend/approach/">
|
||||
Extend
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.0/extend/approach/">
|
||||
Approach
|
||||
</a></li><li>
|
||||
<a href="/docs/4.0/extend/icons/">
|
||||
Icons
|
||||
</a></li></ul>
|
||||
@@ -659,7 +662,7 @@
|
||||
|
||||
<span class="c"><!-- Modal --></span>
|
||||
<span class="nt"><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">></span>
|
||||
<span class="nt"><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">></span>
|
||||
<span class="nt"><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">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"modal-content"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"modal-header"</span><span class="nt">></span>
|
||||
<span class="nt"><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">></span>Modal title<span class="nt"></h5></span>
|
||||
@@ -1115,34 +1118,6 @@
|
||||
<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-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/docs.min.js"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
|
||||
<script>
|
||||
docsearch({
|
||||
apiKey: '48cb48b22351bc71ea5f12f4d1ede198',
|
||||
indexName: 'bootstrap-v4',
|
||||
inputSelector: '#search-input',
|
||||
handleSelected: function (input, event, suggestion) {
|
||||
var url = suggestion.url;
|
||||
url = suggestion.isLvl1 ? url.split('#')[0]: url;
|
||||
// If it's a title we remove the anchor so it does not jump.
|
||||
window.location.href = url;
|
||||
},
|
||||
transformData: function (hits) {
|
||||
return hits.map(function (hit) {
|
||||
hit.url = hit.url.replace('https://v4-alpha.getbootstrap.com', '/docs/4.0');
|
||||
return hit;
|
||||
});
|
||||
},
|
||||
debug: false // Set debug to true if you want to inspect the dropdown
|
||||
});
|
||||
</script><script>
|
||||
Holder.addTheme('gray', {
|
||||
bg: '#777',
|
||||
fg: 'rgba(255,255,255,.75)',
|
||||
font: 'Helvetica',
|
||||
fontweight: 'normal'
|
||||
});
|
||||
</script>
|
||||
|
||||
<script src="/assets/js/vendor/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script><script src="/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/assets/js/docs.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -5,13 +5,13 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="Documentation and examples for Bootstrap’s powerful, responsive navigation header, the navbar. Includes support for branding, navigation, and more, including support for our collapse plugin.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Jekyll v3.6.2">
|
||||
<meta name="generator" content="Jekyll v3.7.0">
|
||||
|
||||
<title>Navbar · Bootstrap</title>
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
|
||||
<link href="/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
|
||||
|
||||
|
||||
<!-- Documentation extras -->
|
||||
@@ -125,7 +125,7 @@
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0-beta.3.zip">Download</a>
|
||||
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0.zip">Download</a>
|
||||
</header>
|
||||
|
||||
|
||||
@@ -337,11 +337,14 @@
|
||||
Visibility
|
||||
</a></li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.0/extend/icons/">
|
||||
<a class="bd-toc-link" href="/docs/4.0/extend/approach/">
|
||||
Extend
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.0/extend/approach/">
|
||||
Approach
|
||||
</a></li><li>
|
||||
<a href="/docs/4.0/extend/icons/">
|
||||
Icons
|
||||
</a></li></ul>
|
||||
@@ -789,14 +792,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"><nav</span> <span class="na">class=</span><span class="s">"navbar navbar-light bg-light"</span><span class="nt">></span>
|
||||
<span class="nt"><form</span> <span class="na">class=</span><span class="s">"form-inline"</span><span class="nt">></span>
|
||||
<span class="nt"><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">></span>Main button<span class="nt"></button></span>
|
||||
<span class="nt"><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">></span>Smaller button<span class="nt"></button></span>
|
||||
<span class="nt"><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">></span>Smaller button<span class="nt"></button></span>
|
||||
<span class="nt"></form></span>
|
||||
<span class="nt"></nav></span></code></pre></div>
|
||||
|
||||
@@ -1250,34 +1253,6 @@
|
||||
<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-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/docs.min.js"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
|
||||
<script>
|
||||
docsearch({
|
||||
apiKey: '48cb48b22351bc71ea5f12f4d1ede198',
|
||||
indexName: 'bootstrap-v4',
|
||||
inputSelector: '#search-input',
|
||||
handleSelected: function (input, event, suggestion) {
|
||||
var url = suggestion.url;
|
||||
url = suggestion.isLvl1 ? url.split('#')[0]: url;
|
||||
// If it's a title we remove the anchor so it does not jump.
|
||||
window.location.href = url;
|
||||
},
|
||||
transformData: function (hits) {
|
||||
return hits.map(function (hit) {
|
||||
hit.url = hit.url.replace('https://v4-alpha.getbootstrap.com', '/docs/4.0');
|
||||
return hit;
|
||||
});
|
||||
},
|
||||
debug: false // Set debug to true if you want to inspect the dropdown
|
||||
});
|
||||
</script><script>
|
||||
Holder.addTheme('gray', {
|
||||
bg: '#777',
|
||||
fg: 'rgba(255,255,255,.75)',
|
||||
font: 'Helvetica',
|
||||
fontweight: 'normal'
|
||||
});
|
||||
</script>
|
||||
|
||||
<script src="/assets/js/vendor/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script><script src="/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/assets/js/docs.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -5,13 +5,13 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="Documentation and examples for how to use Bootstrap’s included navigation components.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Jekyll v3.6.2">
|
||||
<meta name="generator" content="Jekyll v3.7.0">
|
||||
|
||||
<title>Navs · Bootstrap</title>
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
|
||||
<link href="/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
|
||||
|
||||
|
||||
<!-- Documentation extras -->
|
||||
@@ -125,7 +125,7 @@
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0-beta.3.zip">Download</a>
|
||||
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0.zip">Download</a>
|
||||
</header>
|
||||
|
||||
|
||||
@@ -337,11 +337,14 @@
|
||||
Visibility
|
||||
</a></li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.0/extend/icons/">
|
||||
<a class="bd-toc-link" href="/docs/4.0/extend/approach/">
|
||||
Extend
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.0/extend/approach/">
|
||||
Approach
|
||||
</a></li><li>
|
||||
<a href="/docs/4.0/extend/icons/">
|
||||
Icons
|
||||
</a></li></ul>
|
||||
@@ -1218,34 +1221,6 @@
|
||||
<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-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/docs.min.js"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
|
||||
<script>
|
||||
docsearch({
|
||||
apiKey: '48cb48b22351bc71ea5f12f4d1ede198',
|
||||
indexName: 'bootstrap-v4',
|
||||
inputSelector: '#search-input',
|
||||
handleSelected: function (input, event, suggestion) {
|
||||
var url = suggestion.url;
|
||||
url = suggestion.isLvl1 ? url.split('#')[0]: url;
|
||||
// If it's a title we remove the anchor so it does not jump.
|
||||
window.location.href = url;
|
||||
},
|
||||
transformData: function (hits) {
|
||||
return hits.map(function (hit) {
|
||||
hit.url = hit.url.replace('https://v4-alpha.getbootstrap.com', '/docs/4.0');
|
||||
return hit;
|
||||
});
|
||||
},
|
||||
debug: false // Set debug to true if you want to inspect the dropdown
|
||||
});
|
||||
</script><script>
|
||||
Holder.addTheme('gray', {
|
||||
bg: '#777',
|
||||
fg: 'rgba(255,255,255,.75)',
|
||||
font: 'Helvetica',
|
||||
fontweight: 'normal'
|
||||
});
|
||||
</script>
|
||||
|
||||
<script src="/assets/js/vendor/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script><script src="/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/assets/js/docs.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -5,13 +5,13 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="Documentation and examples for showing pagination to indicate a series of related content exists across multiple pages.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Jekyll v3.6.2">
|
||||
<meta name="generator" content="Jekyll v3.7.0">
|
||||
|
||||
<title>Pagination · Bootstrap</title>
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
|
||||
<link href="/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
|
||||
|
||||
|
||||
<!-- Documentation extras -->
|
||||
@@ -125,7 +125,7 @@
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0-beta.3.zip">Download</a>
|
||||
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0.zip">Download</a>
|
||||
</header>
|
||||
|
||||
|
||||
@@ -337,11 +337,14 @@
|
||||
Visibility
|
||||
</a></li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.0/extend/icons/">
|
||||
<a class="bd-toc-link" href="/docs/4.0/extend/approach/">
|
||||
Extend
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.0/extend/approach/">
|
||||
Approach
|
||||
</a></li><li>
|
||||
<a href="/docs/4.0/extend/icons/">
|
||||
Icons
|
||||
</a></li></ul>
|
||||
@@ -658,34 +661,6 @@
|
||||
<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-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/docs.min.js"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
|
||||
<script>
|
||||
docsearch({
|
||||
apiKey: '48cb48b22351bc71ea5f12f4d1ede198',
|
||||
indexName: 'bootstrap-v4',
|
||||
inputSelector: '#search-input',
|
||||
handleSelected: function (input, event, suggestion) {
|
||||
var url = suggestion.url;
|
||||
url = suggestion.isLvl1 ? url.split('#')[0]: url;
|
||||
// If it's a title we remove the anchor so it does not jump.
|
||||
window.location.href = url;
|
||||
},
|
||||
transformData: function (hits) {
|
||||
return hits.map(function (hit) {
|
||||
hit.url = hit.url.replace('https://v4-alpha.getbootstrap.com', '/docs/4.0');
|
||||
return hit;
|
||||
});
|
||||
},
|
||||
debug: false // Set debug to true if you want to inspect the dropdown
|
||||
});
|
||||
</script><script>
|
||||
Holder.addTheme('gray', {
|
||||
bg: '#777',
|
||||
fg: 'rgba(255,255,255,.75)',
|
||||
font: 'Helvetica',
|
||||
fontweight: 'normal'
|
||||
});
|
||||
</script>
|
||||
|
||||
<script src="/assets/js/vendor/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script><script src="/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/assets/js/docs.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -5,13 +5,13 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="Documentation and examples for adding Bootstrap popovers, like those found in iOS, to any element on your site.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Jekyll v3.6.2">
|
||||
<meta name="generator" content="Jekyll v3.7.0">
|
||||
|
||||
<title>Popovers · Bootstrap</title>
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
|
||||
<link href="/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
|
||||
|
||||
|
||||
<!-- Documentation extras -->
|
||||
@@ -125,7 +125,7 @@
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0-beta.3.zip">Download</a>
|
||||
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0.zip">Download</a>
|
||||
</header>
|
||||
|
||||
|
||||
@@ -337,11 +337,14 @@
|
||||
Visibility
|
||||
</a></li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.0/extend/icons/">
|
||||
<a class="bd-toc-link" href="/docs/4.0/extend/approach/">
|
||||
Extend
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.0/extend/approach/">
|
||||
Approach
|
||||
</a></li><li>
|
||||
<a href="/docs/4.0/extend/icons/">
|
||||
Icons
|
||||
</a></li></ul>
|
||||
@@ -387,6 +390,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>
|
||||
@@ -523,6 +527,21 @@ sagittis lacus vel augue laoreet rutrum faucibus."</span><span class="nt">></
|
||||
<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"><div></code> or <code class="highlighter-rouge"><span></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">
|
||||
<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"><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">></span>
|
||||
<span class="nt"><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">></span>Disabled button<span class="nt"></button></span>
|
||||
<span class="nt"></span></span></code></pre></div>
|
||||
|
||||
<h2 id="usage">Usage</h2>
|
||||
|
||||
<p>Enable popovers via JavaScript:</p>
|
||||
@@ -759,34 +778,6 @@ sagittis lacus vel augue laoreet rutrum faucibus."</span><span class="nt">></
|
||||
<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-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/docs.min.js"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
|
||||
<script>
|
||||
docsearch({
|
||||
apiKey: '48cb48b22351bc71ea5f12f4d1ede198',
|
||||
indexName: 'bootstrap-v4',
|
||||
inputSelector: '#search-input',
|
||||
handleSelected: function (input, event, suggestion) {
|
||||
var url = suggestion.url;
|
||||
url = suggestion.isLvl1 ? url.split('#')[0]: url;
|
||||
// If it's a title we remove the anchor so it does not jump.
|
||||
window.location.href = url;
|
||||
},
|
||||
transformData: function (hits) {
|
||||
return hits.map(function (hit) {
|
||||
hit.url = hit.url.replace('https://v4-alpha.getbootstrap.com', '/docs/4.0');
|
||||
return hit;
|
||||
});
|
||||
},
|
||||
debug: false // Set debug to true if you want to inspect the dropdown
|
||||
});
|
||||
</script><script>
|
||||
Holder.addTheme('gray', {
|
||||
bg: '#777',
|
||||
fg: 'rgba(255,255,255,.75)',
|
||||
font: 'Helvetica',
|
||||
fontweight: 'normal'
|
||||
});
|
||||
</script>
|
||||
|
||||
<script src="/assets/js/vendor/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script><script src="/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/assets/js/docs.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -5,13 +5,13 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="Documentation and examples for using Bootstrap custom progress bars featuring support for stacked bars, animated backgrounds, and text labels.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Jekyll v3.6.2">
|
||||
<meta name="generator" content="Jekyll v3.7.0">
|
||||
|
||||
<title>Progress · Bootstrap</title>
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
|
||||
<link href="/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
|
||||
|
||||
|
||||
<!-- Documentation extras -->
|
||||
@@ -125,7 +125,7 @@
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0-beta.3.zip">Download</a>
|
||||
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0.zip">Download</a>
|
||||
</header>
|
||||
|
||||
|
||||
@@ -337,11 +337,14 @@
|
||||
Visibility
|
||||
</a></li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.0/extend/icons/">
|
||||
<a class="bd-toc-link" href="/docs/4.0/extend/approach/">
|
||||
Extend
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.0/extend/approach/">
|
||||
Approach
|
||||
</a></li><li>
|
||||
<a href="/docs/4.0/extend/icons/">
|
||||
Icons
|
||||
</a></li></ul>
|
||||
@@ -570,8 +573,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>
|
||||
@@ -593,34 +594,6 @@
|
||||
<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-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/docs.min.js"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
|
||||
<script>
|
||||
docsearch({
|
||||
apiKey: '48cb48b22351bc71ea5f12f4d1ede198',
|
||||
indexName: 'bootstrap-v4',
|
||||
inputSelector: '#search-input',
|
||||
handleSelected: function (input, event, suggestion) {
|
||||
var url = suggestion.url;
|
||||
url = suggestion.isLvl1 ? url.split('#')[0]: url;
|
||||
// If it's a title we remove the anchor so it does not jump.
|
||||
window.location.href = url;
|
||||
},
|
||||
transformData: function (hits) {
|
||||
return hits.map(function (hit) {
|
||||
hit.url = hit.url.replace('https://v4-alpha.getbootstrap.com', '/docs/4.0');
|
||||
return hit;
|
||||
});
|
||||
},
|
||||
debug: false // Set debug to true if you want to inspect the dropdown
|
||||
});
|
||||
</script><script>
|
||||
Holder.addTheme('gray', {
|
||||
bg: '#777',
|
||||
fg: 'rgba(255,255,255,.75)',
|
||||
font: 'Helvetica',
|
||||
fontweight: 'normal'
|
||||
});
|
||||
</script>
|
||||
|
||||
<script src="/assets/js/vendor/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script><script src="/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/assets/js/docs.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -5,13 +5,13 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="Automatically update Bootstrap navigation or list group components based on scroll position to indicate which link is currently active in the viewport.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Jekyll v3.6.2">
|
||||
<meta name="generator" content="Jekyll v3.7.0">
|
||||
|
||||
<title>Scrollspy · Bootstrap</title>
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
|
||||
<link href="/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
|
||||
|
||||
|
||||
<!-- Documentation extras -->
|
||||
@@ -125,7 +125,7 @@
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0-beta.3.zip">Download</a>
|
||||
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0.zip">Download</a>
|
||||
</header>
|
||||
|
||||
|
||||
@@ -337,11 +337,14 @@
|
||||
Visibility
|
||||
</a></li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.0/extend/icons/">
|
||||
<a class="bd-toc-link" href="/docs/4.0/extend/approach/">
|
||||
Extend
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.0/extend/approach/">
|
||||
Approach
|
||||
</a></li><li>
|
||||
<a href="/docs/4.0/extend/icons/">
|
||||
Icons
|
||||
</a></li></ul>
|
||||
@@ -746,34 +749,6 @@
|
||||
<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-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/docs.min.js"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
|
||||
<script>
|
||||
docsearch({
|
||||
apiKey: '48cb48b22351bc71ea5f12f4d1ede198',
|
||||
indexName: 'bootstrap-v4',
|
||||
inputSelector: '#search-input',
|
||||
handleSelected: function (input, event, suggestion) {
|
||||
var url = suggestion.url;
|
||||
url = suggestion.isLvl1 ? url.split('#')[0]: url;
|
||||
// If it's a title we remove the anchor so it does not jump.
|
||||
window.location.href = url;
|
||||
},
|
||||
transformData: function (hits) {
|
||||
return hits.map(function (hit) {
|
||||
hit.url = hit.url.replace('https://v4-alpha.getbootstrap.com', '/docs/4.0');
|
||||
return hit;
|
||||
});
|
||||
},
|
||||
debug: false // Set debug to true if you want to inspect the dropdown
|
||||
});
|
||||
</script><script>
|
||||
Holder.addTheme('gray', {
|
||||
bg: '#777',
|
||||
fg: 'rgba(255,255,255,.75)',
|
||||
font: 'Helvetica',
|
||||
fontweight: 'normal'
|
||||
});
|
||||
</script>
|
||||
|
||||
<script src="/assets/js/vendor/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script><script src="/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/assets/js/docs.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -5,13 +5,13 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="Documentation and examples for adding custom Bootstrap tooltips with CSS and JavaScript using CSS3 for animations and data-attributes for local title storage.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Jekyll v3.6.2">
|
||||
<meta name="generator" content="Jekyll v3.7.0">
|
||||
|
||||
<title>Tooltips · Bootstrap</title>
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
|
||||
<link href="/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
|
||||
|
||||
|
||||
<!-- Documentation extras -->
|
||||
@@ -125,7 +125,7 @@
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0-beta.3.zip">Download</a>
|
||||
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0.zip">Download</a>
|
||||
</header>
|
||||
|
||||
|
||||
@@ -337,11 +337,14 @@
|
||||
Visibility
|
||||
</a></li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.0/extend/icons/">
|
||||
<a class="bd-toc-link" href="/docs/4.0/extend/approach/">
|
||||
Extend
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.0/extend/approach/">
|
||||
Approach
|
||||
</a></li><li>
|
||||
<a href="/docs/4.0/extend/icons/">
|
||||
Icons
|
||||
</a></li></ul>
|
||||
@@ -382,6 +385,7 @@
|
||||
<li class="toc-entry toc-h2"><a href="#usage">Usage</a>
|
||||
<ul>
|
||||
<li class="toc-entry toc-h3"><a href="#markup">Markup</a></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>
|
||||
@@ -495,6 +499,8 @@
|
||||
<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"><span></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"><!-- HTML to write --></span>
|
||||
@@ -508,6 +514,22 @@
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></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"><div></code> or <code class="highlighter-rouge"><span></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">
|
||||
<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"><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">></span>
|
||||
<span class="nt"><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">></span>Disabled button<span class="nt"></button></span>
|
||||
<span class="nt"></span></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>
|
||||
@@ -579,7 +601,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>
|
||||
@@ -595,7 +617,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>
|
||||
@@ -732,34 +758,6 @@
|
||||
<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-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/docs.min.js"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
|
||||
<script>
|
||||
docsearch({
|
||||
apiKey: '48cb48b22351bc71ea5f12f4d1ede198',
|
||||
indexName: 'bootstrap-v4',
|
||||
inputSelector: '#search-input',
|
||||
handleSelected: function (input, event, suggestion) {
|
||||
var url = suggestion.url;
|
||||
url = suggestion.isLvl1 ? url.split('#')[0]: url;
|
||||
// If it's a title we remove the anchor so it does not jump.
|
||||
window.location.href = url;
|
||||
},
|
||||
transformData: function (hits) {
|
||||
return hits.map(function (hit) {
|
||||
hit.url = hit.url.replace('https://v4-alpha.getbootstrap.com', '/docs/4.0');
|
||||
return hit;
|
||||
});
|
||||
},
|
||||
debug: false // Set debug to true if you want to inspect the dropdown
|
||||
});
|
||||
</script><script>
|
||||
Holder.addTheme('gray', {
|
||||
bg: '#777',
|
||||
fg: 'rgba(255,255,255,.75)',
|
||||
font: 'Helvetica',
|
||||
fontweight: 'normal'
|
||||
});
|
||||
</script>
|
||||
|
||||
<script src="/assets/js/vendor/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script><script src="/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/assets/js/docs.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -5,13 +5,13 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="Documentation and examples for displaying inline and multiline blocks of code with Bootstrap.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Jekyll v3.6.2">
|
||||
<meta name="generator" content="Jekyll v3.7.0">
|
||||
|
||||
<title>Code · Bootstrap</title>
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
|
||||
<link href="/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
|
||||
|
||||
|
||||
<!-- Documentation extras -->
|
||||
@@ -125,7 +125,7 @@
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0-beta.3.zip">Download</a>
|
||||
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0.zip">Download</a>
|
||||
</header>
|
||||
|
||||
|
||||
@@ -337,11 +337,14 @@
|
||||
Visibility
|
||||
</a></li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.0/extend/icons/">
|
||||
<a class="bd-toc-link" href="/docs/4.0/extend/approach/">
|
||||
Extend
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.0/extend/approach/">
|
||||
Approach
|
||||
</a></li><li>
|
||||
<a href="/docs/4.0/extend/icons/">
|
||||
Icons
|
||||
</a></li></ul>
|
||||
@@ -449,34 +452,6 @@ To edit settings, press <span class="nt"><kbd><kbd></span>ctrl<span
|
||||
<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-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/docs.min.js"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
|
||||
<script>
|
||||
docsearch({
|
||||
apiKey: '48cb48b22351bc71ea5f12f4d1ede198',
|
||||
indexName: 'bootstrap-v4',
|
||||
inputSelector: '#search-input',
|
||||
handleSelected: function (input, event, suggestion) {
|
||||
var url = suggestion.url;
|
||||
url = suggestion.isLvl1 ? url.split('#')[0]: url;
|
||||
// If it's a title we remove the anchor so it does not jump.
|
||||
window.location.href = url;
|
||||
},
|
||||
transformData: function (hits) {
|
||||
return hits.map(function (hit) {
|
||||
hit.url = hit.url.replace('https://v4-alpha.getbootstrap.com', '/docs/4.0');
|
||||
return hit;
|
||||
});
|
||||
},
|
||||
debug: false // Set debug to true if you want to inspect the dropdown
|
||||
});
|
||||
</script><script>
|
||||
Holder.addTheme('gray', {
|
||||
bg: '#777',
|
||||
fg: 'rgba(255,255,255,.75)',
|
||||
font: 'Helvetica',
|
||||
fontweight: 'normal'
|
||||
});
|
||||
</script>
|
||||
|
||||
<script src="/assets/js/vendor/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script><script src="/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/assets/js/docs.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -5,13 +5,13 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="Documentation and examples for displaying related images and text with the figure component in Bootstrap.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Jekyll v3.6.2">
|
||||
<meta name="generator" content="Jekyll v3.7.0">
|
||||
|
||||
<title>Figures · Bootstrap</title>
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
|
||||
<link href="/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
|
||||
|
||||
|
||||
<!-- Documentation extras -->
|
||||
@@ -125,7 +125,7 @@
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0-beta.3.zip">Download</a>
|
||||
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0.zip">Download</a>
|
||||
</header>
|
||||
|
||||
|
||||
@@ -337,11 +337,14 @@
|
||||
Visibility
|
||||
</a></li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.0/extend/icons/">
|
||||
<a class="bd-toc-link" href="/docs/4.0/extend/approach/">
|
||||
Extend
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.0/extend/approach/">
|
||||
Approach
|
||||
</a></li><li>
|
||||
<a href="/docs/4.0/extend/icons/">
|
||||
Icons
|
||||
</a></li></ul>
|
||||
@@ -416,34 +419,6 @@
|
||||
<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-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/docs.min.js"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
|
||||
<script>
|
||||
docsearch({
|
||||
apiKey: '48cb48b22351bc71ea5f12f4d1ede198',
|
||||
indexName: 'bootstrap-v4',
|
||||
inputSelector: '#search-input',
|
||||
handleSelected: function (input, event, suggestion) {
|
||||
var url = suggestion.url;
|
||||
url = suggestion.isLvl1 ? url.split('#')[0]: url;
|
||||
// If it's a title we remove the anchor so it does not jump.
|
||||
window.location.href = url;
|
||||
},
|
||||
transformData: function (hits) {
|
||||
return hits.map(function (hit) {
|
||||
hit.url = hit.url.replace('https://v4-alpha.getbootstrap.com', '/docs/4.0');
|
||||
return hit;
|
||||
});
|
||||
},
|
||||
debug: false // Set debug to true if you want to inspect the dropdown
|
||||
});
|
||||
</script><script>
|
||||
Holder.addTheme('gray', {
|
||||
bg: '#777',
|
||||
fg: 'rgba(255,255,255,.75)',
|
||||
font: 'Helvetica',
|
||||
fontweight: 'normal'
|
||||
});
|
||||
</script>
|
||||
|
||||
<script src="/assets/js/vendor/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script><script src="/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/assets/js/docs.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -5,13 +5,13 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="Documentation and examples for opting images into responsive behavior (so they never become larger than their parent elements) and add lightweight styles to them—all via classes.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Jekyll v3.6.2">
|
||||
<meta name="generator" content="Jekyll v3.7.0">
|
||||
|
||||
<title>Images · Bootstrap</title>
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
|
||||
<link href="/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
|
||||
|
||||
|
||||
<!-- Documentation extras -->
|
||||
@@ -125,7 +125,7 @@
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0-beta.3.zip">Download</a>
|
||||
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0.zip">Download</a>
|
||||
</header>
|
||||
|
||||
|
||||
@@ -337,11 +337,14 @@
|
||||
Visibility
|
||||
</a></li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.0/extend/icons/">
|
||||
<a class="bd-toc-link" href="/docs/4.0/extend/approach/">
|
||||
Extend
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.0/extend/approach/">
|
||||
Approach
|
||||
</a></li><li>
|
||||
<a href="/docs/4.0/extend/icons/">
|
||||
Icons
|
||||
</a></li></ul>
|
||||
@@ -460,34 +463,6 @@
|
||||
<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-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/docs.min.js"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
|
||||
<script>
|
||||
docsearch({
|
||||
apiKey: '48cb48b22351bc71ea5f12f4d1ede198',
|
||||
indexName: 'bootstrap-v4',
|
||||
inputSelector: '#search-input',
|
||||
handleSelected: function (input, event, suggestion) {
|
||||
var url = suggestion.url;
|
||||
url = suggestion.isLvl1 ? url.split('#')[0]: url;
|
||||
// If it's a title we remove the anchor so it does not jump.
|
||||
window.location.href = url;
|
||||
},
|
||||
transformData: function (hits) {
|
||||
return hits.map(function (hit) {
|
||||
hit.url = hit.url.replace('https://v4-alpha.getbootstrap.com', '/docs/4.0');
|
||||
return hit;
|
||||
});
|
||||
},
|
||||
debug: false // Set debug to true if you want to inspect the dropdown
|
||||
});
|
||||
</script><script>
|
||||
Holder.addTheme('gray', {
|
||||
bg: '#777',
|
||||
fg: 'rgba(255,255,255,.75)',
|
||||
font: 'Helvetica',
|
||||
fontweight: 'normal'
|
||||
});
|
||||
</script>
|
||||
|
||||
<script src="/assets/js/vendor/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script><script src="/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/assets/js/docs.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -5,13 +5,13 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="Reboot, a collection of element-specific CSS changes in a single file, kickstart Bootstrap to provide an elegant, consistent, and simple baseline to build upon.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Jekyll v3.6.2">
|
||||
<meta name="generator" content="Jekyll v3.7.0">
|
||||
|
||||
<title>Reboot · Bootstrap</title>
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
|
||||
<link href="/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
|
||||
|
||||
|
||||
<!-- Documentation extras -->
|
||||
@@ -125,7 +125,7 @@
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0-beta.3.zip">Download</a>
|
||||
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0.zip">Download</a>
|
||||
</header>
|
||||
|
||||
|
||||
@@ -337,11 +337,14 @@
|
||||
Visibility
|
||||
</a></li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.0/extend/icons/">
|
||||
<a class="bd-toc-link" href="/docs/4.0/extend/approach/">
|
||||
Extend
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.0/extend/approach/">
|
||||
Approach
|
||||
</a></li><li>
|
||||
<a href="/docs/4.0/extend/icons/">
|
||||
Icons
|
||||
</a></li></ul>
|
||||
@@ -393,7 +396,6 @@
|
||||
</ul>
|
||||
</li>
|
||||
<li class="toc-entry toc-h2"><a href="#html5-hidden-attribute">HTML5 [hidden] attribute</a></li>
|
||||
<li class="toc-entry toc-h2"><a href="#click-delay-optimization-for-touch">Click delay optimization for touch</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -435,18 +437,18 @@
|
||||
<p>The default web fonts (Helvetica Neue, Helvetica, and Arial) have been dropped in Bootstrap 4 and replaced with a “native font stack” for optimum text rendering on every device and OS. Read more about <a href="https://www.smashingmagazine.com/2015/11/using-system-ui-fonts-practical-guide/">native font stacks in this <em>Smashing Magazine</em> article</a>.</p>
|
||||
|
||||
<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 < 56 for OS X (San Francisco)
|
||||
</span> <span class="nt">BlinkMacSystemFont</span><span class="o">,</span>
|
||||
<span class="c1">// Windows
|
||||
</span> <span class="s2">"Segoe UI"</span><span class="o">,</span>
|
||||
<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="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>
|
||||
<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 < 56 for OS X (San Francisco)</span>
|
||||
<span class="nt">BlinkMacSystemFont</span><span class="o">,</span>
|
||||
<span class="c1">// Windows</span>
|
||||
<span class="s2">"Segoe UI"</span><span class="o">,</span>
|
||||
<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="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"><body></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>
|
||||
|
||||
@@ -779,20 +781,6 @@
|
||||
|
||||
<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="/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="/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="/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>
|
||||
@@ -800,34 +788,6 @@
|
||||
<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-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/docs.min.js"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
|
||||
<script>
|
||||
docsearch({
|
||||
apiKey: '48cb48b22351bc71ea5f12f4d1ede198',
|
||||
indexName: 'bootstrap-v4',
|
||||
inputSelector: '#search-input',
|
||||
handleSelected: function (input, event, suggestion) {
|
||||
var url = suggestion.url;
|
||||
url = suggestion.isLvl1 ? url.split('#')[0]: url;
|
||||
// If it's a title we remove the anchor so it does not jump.
|
||||
window.location.href = url;
|
||||
},
|
||||
transformData: function (hits) {
|
||||
return hits.map(function (hit) {
|
||||
hit.url = hit.url.replace('https://v4-alpha.getbootstrap.com', '/docs/4.0');
|
||||
return hit;
|
||||
});
|
||||
},
|
||||
debug: false // Set debug to true if you want to inspect the dropdown
|
||||
});
|
||||
</script><script>
|
||||
Holder.addTheme('gray', {
|
||||
bg: '#777',
|
||||
fg: 'rgba(255,255,255,.75)',
|
||||
font: 'Helvetica',
|
||||
fontweight: 'normal'
|
||||
});
|
||||
</script>
|
||||
|
||||
<script src="/assets/js/vendor/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script><script src="/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/assets/js/docs.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -5,13 +5,13 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="Documentation and examples for opt-in styling of tables (given their prevalent use in JavaScript plugins) with Bootstrap.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Jekyll v3.6.2">
|
||||
<meta name="generator" content="Jekyll v3.7.0">
|
||||
|
||||
<title>Tables · Bootstrap</title>
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
|
||||
<link href="/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
|
||||
|
||||
|
||||
<!-- Documentation extras -->
|
||||
@@ -125,7 +125,7 @@
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0-beta.3.zip">Download</a>
|
||||
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0.zip">Download</a>
|
||||
</header>
|
||||
|
||||
|
||||
@@ -337,11 +337,14 @@
|
||||
Visibility
|
||||
</a></li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.0/extend/icons/">
|
||||
<a class="bd-toc-link" href="/docs/4.0/extend/approach/">
|
||||
Extend
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.0/extend/approach/">
|
||||
Approach
|
||||
</a></li><li>
|
||||
<a href="/docs/4.0/extend/icons/">
|
||||
Icons
|
||||
</a></li></ul>
|
||||
@@ -1349,7 +1352,7 @@
|
||||
<p>Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the <code class="highlighter-rouge">.sr-only</code> class.</p>
|
||||
</div>
|
||||
|
||||
<p>Create responsive tables by wrapping any <code class="highlighter-rouge">.table</code> with <code class="highlighter-rouge">.table-responsive{-sm|-md|-lg|-xl}</code>, making the table scroll horizontally at each <code class="highlighter-rouge">max-width</code> breakpoint of 575.99px, 767.99px, 991.99px, and 1119.99px, respectively.</p>
|
||||
<p>Create responsive tables by wrapping any <code class="highlighter-rouge">.table</code> with <code class="highlighter-rouge">.table-responsive{-sm|-md|-lg|-xl}</code>, making the table scroll horizontally at each <code class="highlighter-rouge">max-width</code> breakpoint of up to (but not including) 576px, 768px, 992px, and 1120px, respectively.</p>
|
||||
|
||||
<div class="bd-callout bd-callout-info">
|
||||
<p>Note that since browsers do not currently support <a href="https://www.w3.org/TR/mediaqueries-4/#range-context">range context queries</a>, we work around the limitations of <a href="https://www.w3.org/TR/mediaqueries-4/#mq-min-max"><code class="highlighter-rouge">min-</code> and <code class="highlighter-rouge">max-</code> prefixes</a> and viewports with fractional widths (which can occur under certain conditions on high-dpi devices, for instance) by using values with higher precision for these comparisons.</p>
|
||||
@@ -1707,34 +1710,6 @@
|
||||
<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-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/docs.min.js"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
|
||||
<script>
|
||||
docsearch({
|
||||
apiKey: '48cb48b22351bc71ea5f12f4d1ede198',
|
||||
indexName: 'bootstrap-v4',
|
||||
inputSelector: '#search-input',
|
||||
handleSelected: function (input, event, suggestion) {
|
||||
var url = suggestion.url;
|
||||
url = suggestion.isLvl1 ? url.split('#')[0]: url;
|
||||
// If it's a title we remove the anchor so it does not jump.
|
||||
window.location.href = url;
|
||||
},
|
||||
transformData: function (hits) {
|
||||
return hits.map(function (hit) {
|
||||
hit.url = hit.url.replace('https://v4-alpha.getbootstrap.com', '/docs/4.0');
|
||||
return hit;
|
||||
});
|
||||
},
|
||||
debug: false // Set debug to true if you want to inspect the dropdown
|
||||
});
|
||||
</script><script>
|
||||
Holder.addTheme('gray', {
|
||||
bg: '#777',
|
||||
fg: 'rgba(255,255,255,.75)',
|
||||
font: 'Helvetica',
|
||||
fontweight: 'normal'
|
||||
});
|
||||
</script>
|
||||
|
||||
<script src="/assets/js/vendor/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script><script src="/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/assets/js/docs.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -5,13 +5,13 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="Documentation and examples for Bootstrap typography, including global settings, headings, body text, lists, and more.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Jekyll v3.6.2">
|
||||
<meta name="generator" content="Jekyll v3.7.0">
|
||||
|
||||
<title>Typography · Bootstrap</title>
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
|
||||
<link href="/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
|
||||
|
||||
|
||||
<!-- Documentation extras -->
|
||||
@@ -125,7 +125,7 @@
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0-beta.3.zip">Download</a>
|
||||
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0.zip">Download</a>
|
||||
</header>
|
||||
|
||||
|
||||
@@ -337,11 +337,14 @@
|
||||
Visibility
|
||||
</a></li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.0/extend/icons/">
|
||||
<a class="bd-toc-link" href="/docs/4.0/extend/approach/">
|
||||
Extend
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.0/extend/approach/">
|
||||
Approach
|
||||
</a></li><li>
|
||||
<a href="/docs/4.0/extend/icons/">
|
||||
Icons
|
||||
</a></li></ul>
|
||||
@@ -811,34 +814,6 @@
|
||||
<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-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/docs.min.js"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
|
||||
<script>
|
||||
docsearch({
|
||||
apiKey: '48cb48b22351bc71ea5f12f4d1ede198',
|
||||
indexName: 'bootstrap-v4',
|
||||
inputSelector: '#search-input',
|
||||
handleSelected: function (input, event, suggestion) {
|
||||
var url = suggestion.url;
|
||||
url = suggestion.isLvl1 ? url.split('#')[0]: url;
|
||||
// If it's a title we remove the anchor so it does not jump.
|
||||
window.location.href = url;
|
||||
},
|
||||
transformData: function (hits) {
|
||||
return hits.map(function (hit) {
|
||||
hit.url = hit.url.replace('https://v4-alpha.getbootstrap.com', '/docs/4.0');
|
||||
return hit;
|
||||
});
|
||||
},
|
||||
debug: false // Set debug to true if you want to inspect the dropdown
|
||||
});
|
||||
</script><script>
|
||||
Holder.addTheme('gray', {
|
||||
bg: '#777',
|
||||
fg: 'rgba(255,255,255,.75)',
|
||||
font: 'Helvetica',
|
||||
fontweight: 'normal'
|
||||
});
|
||||
</script>
|
||||
|
||||
<script src="/assets/js/vendor/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script><script src="/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/assets/js/docs.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -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); }
|
||||
|
||||
@@ -22,11 +22,11 @@
|
||||
<div class="collapse bg-dark" id="navbarHeader">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-sm-8 py-4">
|
||||
<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 py-4">
|
||||
<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>
|
||||
@@ -37,9 +37,12 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="navbar navbar-dark bg-dark">
|
||||
<div class="navbar navbar-dark bg-dark box-shadow">
|
||||
<div class="container d-flex justify-content-between">
|
||||
<a href="#" class="navbar-brand">Album</a>
|
||||
<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>
|
||||
@@ -54,56 +57,154 @@
|
||||
<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>
|
||||
<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="album text-muted">
|
||||
<div class="album py-5 bg-light">
|
||||
<div class="container">
|
||||
|
||||
<div class="row">
|
||||
<div class="card">
|
||||
<img data-src="holder.js/100px280?theme=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="card">
|
||||
<img data-src="holder.js/100px280?theme=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="card">
|
||||
<img data-src="holder.js/100px280?theme=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="card">
|
||||
<img data-src="holder.js/100px280?theme=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="card">
|
||||
<img data-src="holder.js/100px280?theme=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="card">
|
||||
<img data-src="holder.js/100px280?theme=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="card">
|
||||
<img data-src="holder.js/100px280?theme=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="card">
|
||||
<img data-src="holder.js/100px280?theme=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="card">
|
||||
<img data-src="holder.js/100px280?theme=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>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -127,12 +228,5 @@
|
||||
<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>
|
||||
|
||||
@@ -1,89 +1,83 @@
|
||||
/*
|
||||
* Globals
|
||||
*/
|
||||
@media (min-width: 48em) {
|
||||
html {
|
||||
font-size: 18px;
|
||||
/* stylelint-disable selector-list-comma-newline-after */
|
||||
|
||||
.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: 400;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
/*
|
||||
* Override Bootstrap's default container.
|
||||
*/
|
||||
.container {
|
||||
max-width: 60rem;
|
||||
}
|
||||
|
||||
/*
|
||||
* Masthead for nav
|
||||
*/
|
||||
.blog-masthead {
|
||||
margin-bottom: 3rem;
|
||||
background-color: #428bca;
|
||||
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-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-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-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;
|
||||
@@ -100,25 +94,6 @@ h6,
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* Main column and sidebar layout
|
||||
*/
|
||||
|
||||
/* Sidebar modules for boxing content */
|
||||
.sidebar-module {
|
||||
padding: 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;
|
||||
|
||||
@@ -13,37 +13,93 @@
|
||||
<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>
|
||||
|
||||
<header>
|
||||
<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>
|
||||
</nav>
|
||||
<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 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="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="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>
|
||||
</header>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
@@ -111,14 +167,15 @@
|
||||
|
||||
</div><!-- /.blog-main -->
|
||||
|
||||
<aside class="col-sm-3 ml-sm-auto 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>
|
||||
@@ -133,8 +190,9 @@
|
||||
<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>
|
||||
@@ -161,5 +219,13 @@
|
||||
<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>
|
||||
|
||||
@@ -171,7 +171,7 @@
|
||||
<!-- FOOTER -->
|
||||
<footer class="container">
|
||||
<p class="float-right"><a href="#">Back to top</a></p>
|
||||
<p>© 2017 Company, Inc. · <a href="#">Privacy</a> · <a href="#">Terms</a></p>
|
||||
<p>© 2017-2018 Company, Inc. · <a href="#">Privacy</a> · <a href="#">Terms</a></p>
|
||||
</footer>
|
||||
</main>
|
||||
|
||||
|
||||
@@ -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; }
|
||||
@@ -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">© 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.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-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>
|
||||
@@ -23,37 +23,27 @@ a:hover {
|
||||
/*
|
||||
* Base structure
|
||||
*/
|
||||
|
||||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
background-color: #333;
|
||||
}
|
||||
body {
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
text-shadow: 0 .05rem .1rem 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%;
|
||||
body {
|
||||
display: -ms-flexbox;
|
||||
display: -webkit-box;
|
||||
display: flex;
|
||||
-ms-flex-pack: center;
|
||||
-webkit-box-pack: center;
|
||||
justify-content: center;
|
||||
color: #fff;
|
||||
text-shadow: 0 .05rem .1rem 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;
|
||||
.cover-container {
|
||||
max-width: 42em;
|
||||
}
|
||||
|
||||
|
||||
@@ -118,39 +108,3 @@ body {
|
||||
.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;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -16,45 +16,36 @@
|
||||
<link href="cover.css" rel="stylesheet">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div class="site-wrapper">
|
||||
|
||||
<div class="site-wrapper-inner">
|
||||
|
||||
<div class="cover-container">
|
||||
|
||||
<header 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>
|
||||
</header>
|
||||
|
||||
<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">
|
||||
<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>
|
||||
<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 -->
|
||||
|
||||
@@ -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 {
|
||||
padding-bottom: 9px;
|
||||
margin-bottom: 20px;
|
||||
border-bottom: 1px solid #eee;
|
||||
.feather {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
vertical-align: text-bottom;
|
||||
}
|
||||
|
||||
/*
|
||||
@@ -23,42 +14,80 @@ h1 {
|
||||
|
||||
.sidebar {
|
||||
position: fixed;
|
||||
top: 51px;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 1000;
|
||||
padding: 20px 0;
|
||||
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 .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; }
|
||||
|
||||
@@ -17,111 +17,114 @@
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header>
|
||||
<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>
|
||||
</header>
|
||||
<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 role="main" class="col-sm-9 ml-sm-auto col-md-10 pt-3">
|
||||
<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>
|
||||
@@ -258,5 +261,43 @@
|
||||
<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>
|
||||
|
||||
<!-- 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>
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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">© 2017-2018</p>
|
||||
</form>
|
||||
</body>
|
||||
</html>
|
||||
+228
-180
@@ -5,13 +5,13 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="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="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Jekyll v3.6.2">
|
||||
<meta name="generator" content="Jekyll v3.7.0">
|
||||
|
||||
<title>Examples · Bootstrap</title>
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
|
||||
<link href="/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
|
||||
|
||||
|
||||
<!-- Documentation extras -->
|
||||
@@ -123,188 +123,244 @@
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0-beta.3.zip">Download</a>
|
||||
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0.zip">Download</a>
|
||||
</header>
|
||||
|
||||
|
||||
|
||||
<div class="container my-5">
|
||||
<main class="bd-content" role="main">
|
||||
<h1 class="bd-title" id="content">Examples</h1>
|
||||
<main id="content" role="main">
|
||||
<header class="d-flex flex-column flex-md-row align-items-md-center p-5 bg-light">
|
||||
<div class="pt-md-3 pb-md-4">
|
||||
<h1 class="bd-title mt-0">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 src="https://cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=getbootstrapcom" id="_carbonads_js"></script>
|
||||
|
||||
<p><a href="https://github.com/twbs/bootstrap/archive/v4.0.0-beta.3.zip">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="/docs/4.0/examples/starter-template/">
|
||||
<img class="img-thumbnail" src="/docs/4.0/examples/screenshots/starter-template.png" alt="" width="800" height="600" />
|
||||
<h4>Starter template</h4>
|
||||
</a>
|
||||
<p>Nothing but the basics: compiled CSS and JavaScript.</p>
|
||||
<a href="https://github.com/twbs/bootstrap/archive/v4.0.0.zip" class="btn btn-lg btn-bd-primary" onclick="ga('send', 'event', 'Examples', 'Hero', 'Download');">Download source code</a>
|
||||
</div>
|
||||
<div class="col-6 col-md-4">
|
||||
<a href="/docs/4.0/examples/grid/">
|
||||
<img class="img-thumbnail" src="/docs/4.0/examples/screenshots/grid.png" alt="" width="800" height="600" />
|
||||
<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>
|
||||
<script async src="https://cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=getbootstrapcom" id="_carbonads_js"></script>
|
||||
|
||||
<div class="col-6 col-md-4">
|
||||
<a href="/docs/4.0/examples/jumbotron/">
|
||||
<img class="img-thumbnail" src="/docs/4.0/examples/screenshots/jumbotron.png" alt="" width="800" height="600" />
|
||||
<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="/docs/4.0/examples/narrow-jumbotron/">
|
||||
<img class="img-thumbnail" src="/docs/4.0/examples/screenshots/jumbotron-narrow.png" alt="" width="800" height="600" />
|
||||
<h4>Narrow jumbotron</h4>
|
||||
</a>
|
||||
<p>Build a more custom page by narrowing the default container and jumbotron.</p>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<h2 id="navbars">Navbars</h2>
|
||||
<main class="bd-content p-5" role="main">
|
||||
|
||||
<h2>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">
|
||||
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
|
||||
<a href="/docs/4.0/examples/album/">
|
||||
<img class="img-thumbnail mb-3" src="/docs/4.0/examples/screenshots/album.png" alt="Album screenshot" width="960" height="600">
|
||||
<h5 class="mb-1">Album</h5>
|
||||
</a>
|
||||
<p class="text-muted">Simple one-page template for photo galleries, portfolios, and more.</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
|
||||
<a href="/docs/4.0/examples/pricing/">
|
||||
<img class="img-thumbnail mb-3" src="/docs/4.0/examples/screenshots/pricing.png" alt="Pricing screenshot" width="960" height="600">
|
||||
<h5 class="mb-1">Pricing</h5>
|
||||
</a>
|
||||
<p class="text-muted">Example pricing page built with Cards and featuring a custom header and footer.</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
|
||||
<a href="/docs/4.0/examples/checkout/">
|
||||
<img class="img-thumbnail mb-3" src="/docs/4.0/examples/screenshots/checkout.png" alt="Checkout screenshot" width="960" height="600">
|
||||
<h5 class="mb-1">Checkout</h5>
|
||||
</a>
|
||||
<p class="text-muted">Custom checkout form showing our form components and their validation features.</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
|
||||
<a href="/docs/4.0/examples/product/">
|
||||
<img class="img-thumbnail mb-3" src="/docs/4.0/examples/screenshots/product.png" alt="Product screenshot" width="960" height="600">
|
||||
<h5 class="mb-1">Product</h5>
|
||||
</a>
|
||||
<p class="text-muted">Lean product-focused marketing page with extensive grid and image work.</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
|
||||
<a href="/docs/4.0/examples/cover/">
|
||||
<img class="img-thumbnail mb-3" src="/docs/4.0/examples/screenshots/cover.png" alt="Cover screenshot" width="960" height="600">
|
||||
<h5 class="mb-1">Cover</h5>
|
||||
</a>
|
||||
<p class="text-muted">A one-page template for building simple and beautiful home pages.</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
|
||||
<a href="/docs/4.0/examples/carousel/">
|
||||
<img class="img-thumbnail mb-3" src="/docs/4.0/examples/screenshots/carousel.png" alt="Carousel screenshot" width="960" height="600">
|
||||
<h5 class="mb-1">Carousel</h5>
|
||||
</a>
|
||||
<p class="text-muted">Customize the navbar and carousel, then add some new components.</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
|
||||
<a href="/docs/4.0/examples/blog/">
|
||||
<img class="img-thumbnail mb-3" src="/docs/4.0/examples/screenshots/blog.png" alt="Blog screenshot" width="960" height="600">
|
||||
<h5 class="mb-1">Blog</h5>
|
||||
</a>
|
||||
<p class="text-muted">Magazine like blog template with header, navigation, featured content.</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
|
||||
<a href="/docs/4.0/examples/dashboard/">
|
||||
<img class="img-thumbnail mb-3" src="/docs/4.0/examples/screenshots/dashboard.png" alt="Dashboard screenshot" width="960" height="600">
|
||||
<h5 class="mb-1">Dashboard</h5>
|
||||
</a>
|
||||
<p class="text-muted">Basic admin dashboard shell with fixed sidebar and navbar.</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
|
||||
<a href="/docs/4.0/examples/sign-in/">
|
||||
<img class="img-thumbnail mb-3" src="/docs/4.0/examples/screenshots/sign-in.png" alt="Sign-in screenshot" width="960" height="600">
|
||||
<h5 class="mb-1">Sign-in</h5>
|
||||
</a>
|
||||
<p class="text-muted">Custom form layout and design for a simple sign in form.</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
|
||||
<a href="/docs/4.0/examples/sticky-footer/">
|
||||
<img class="img-thumbnail mb-3" src="/docs/4.0/examples/screenshots/sticky-footer.png" alt="Sticky footer screenshot" width="960" height="600">
|
||||
<h5 class="mb-1">Sticky footer</h5>
|
||||
</a>
|
||||
<p class="text-muted">Attach a footer to the bottom of the viewport when page content is short.</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
|
||||
<a href="/docs/4.0/examples/sticky-footer-navbar/">
|
||||
<img class="img-thumbnail mb-3" src="/docs/4.0/examples/screenshots/sticky-footer-navbar.png" alt="Sticky footer navbar screenshot" width="960" height="600">
|
||||
<h5 class="mb-1">Sticky footer navbar</h5>
|
||||
</a>
|
||||
<p class="text-muted">Attach a footer to the bottom of the viewport with a fixed top navbar.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<p>Taking the default navbar component and showing how it can be moved, placed, and extended.</p>
|
||||
<h2>Framework</h2>
|
||||
<p>Examples that focus on implementing uses of built-in components provided by Bootstrap.</p>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
|
||||
<a href="/docs/4.0/examples/starter-template/">
|
||||
<img class="img-thumbnail mb-3" src="/docs/4.0/examples/screenshots/starter-template.png" alt="Starter template screenshot" width="960" height="600">
|
||||
<h5 class="mb-1">Starter template</h5>
|
||||
</a>
|
||||
<p class="text-muted">Nothing but the basics: compiled CSS and JavaScript.</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
|
||||
<a href="/docs/4.0/examples/grid/">
|
||||
<img class="img-thumbnail mb-3" src="/docs/4.0/examples/screenshots/grid.png" alt="Grid screenshot" width="960" height="600">
|
||||
<h5 class="mb-1">Grid</h5>
|
||||
</a>
|
||||
<p class="text-muted">Multiple examples of grid layouts with all four tiers, nesting, and more.</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
|
||||
<a href="/docs/4.0/examples/jumbotron/">
|
||||
<img class="img-thumbnail mb-3" src="/docs/4.0/examples/screenshots/jumbotron.png" alt="Jumbotron screenshot" width="960" height="600">
|
||||
<h5 class="mb-1">Jumbotron</h5>
|
||||
</a>
|
||||
<p class="text-muted">Build around the jumbotron with a navbar and some basic grid columns.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="row bd-examples">
|
||||
<div class="col-6 col-md-4">
|
||||
<a href="/docs/4.0/examples/navbars/">
|
||||
<img class="img-thumbnail" src="/docs/4.0/examples/screenshots/navbar.png" alt="" width="800" height="600" />
|
||||
<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="/docs/4.0/examples/navbar-top/">
|
||||
<img class="img-thumbnail" src="/docs/4.0/examples/screenshots/navbar-static.png" alt="" width="800" height="600" />
|
||||
<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>
|
||||
<h2>Navbars</h2>
|
||||
<p>Taking the default navbar component and showing how it can be moved, placed, and extended.</p>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
|
||||
<a href="/docs/4.0/examples/navbars/">
|
||||
<img class="img-thumbnail mb-3" src="/docs/4.0/examples/screenshots/navbars.png" alt="Navbars screenshot" width="960" height="600">
|
||||
<h5 class="mb-1">Navbars</h5>
|
||||
</a>
|
||||
<p class="text-muted">Demonstration of all responsive and container options for the navbar.</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
|
||||
<a href="/docs/4.0/examples/navbar-static/">
|
||||
<img class="img-thumbnail mb-3" src="/docs/4.0/examples/screenshots/navbar-static.png" alt="Navbar static screenshot" width="960" height="600">
|
||||
<h5 class="mb-1">Navbar static</h5>
|
||||
</a>
|
||||
<p class="text-muted">Single navbar example of a static top navbar along with some additional content.</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
|
||||
<a href="/docs/4.0/examples/navbar-fixed/">
|
||||
<img class="img-thumbnail mb-3" src="/docs/4.0/examples/screenshots/navbar-fixed.png" alt="Navbar fixed screenshot" width="960" height="600">
|
||||
<h5 class="mb-1">Navbar fixed</h5>
|
||||
</a>
|
||||
<p class="text-muted">Single navbar example with a fixed top navbar along with some additional content.</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
|
||||
<a href="/docs/4.0/examples/navbar-bottom/">
|
||||
<img class="img-thumbnail mb-3" src="/docs/4.0/examples/screenshots/navbar-bottom.png" alt="Navbar bottom screenshot" width="960" height="600">
|
||||
<h5 class="mb-1">Navbar bottom</h5>
|
||||
</a>
|
||||
<p class="text-muted">Single navbar example with a bottom navbar along with some additional content.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="col-6 col-md-4">
|
||||
<a href="/docs/4.0/examples/navbar-top-fixed/">
|
||||
<img class="img-thumbnail" src="/docs/4.0/examples/screenshots/navbar-fixed.png" alt="" width="800" height="600" />
|
||||
<h4>Fixed navbar</h4>
|
||||
</a>
|
||||
<p>Super basic template with a fixed top navbar along with some additional content.</p>
|
||||
</div>
|
||||
<div class="col-6 col-md-4">
|
||||
<a href="/docs/4.0/examples/navbar-bottom/">
|
||||
<img class="img-thumbnail" src="/docs/4.0/examples/screenshots/navbar-bottom.png" alt="" />
|
||||
<h4>Bottom navbar</h4>
|
||||
</a>
|
||||
<p>Super basic template with a bottom navbar along with some additional content.</p>
|
||||
</div>
|
||||
</div>
|
||||
<h2>Experiments</h2>
|
||||
<p>Examples that focus on future-friendly features or techniques.</p>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
|
||||
<a href="/docs/4.0/examples/floating-labels/">
|
||||
<img class="img-thumbnail mb-3" src="/docs/4.0/examples/screenshots/floating-labels.png" alt="Floating labels screenshot" width="960" height="600">
|
||||
<h5 class="mb-1">Floating labels</h5>
|
||||
</a>
|
||||
<p class="text-muted">Beautifully simple forms with floating labels over your inputs.</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
|
||||
<a href="/docs/4.0/examples/offcanvas/">
|
||||
<img class="img-thumbnail mb-3" src="/docs/4.0/examples/screenshots/offcanvas.png" alt="Offcanvas screenshot" width="960" height="600">
|
||||
<h5 class="mb-1">Offcanvas</h5>
|
||||
</a>
|
||||
<p class="text-muted">Turn your expandable navbar into a sliding offcanvas menu.</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="/docs/4.0/examples/album/">
|
||||
<img class="img-thumbnail" src="/docs/4.0/examples/screenshots/album.png" alt="" width="800" height="600" />
|
||||
<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="/docs/4.0/examples/cover/">
|
||||
<img class="img-thumbnail" src="/docs/4.0/examples/screenshots/cover.png" alt="" width="800" height="600" />
|
||||
<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="/docs/4.0/examples/carousel/">
|
||||
<img class="img-thumbnail" src="/docs/4.0/examples/screenshots/carousel.png" alt="" width="800" height="600" />
|
||||
<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="/docs/4.0/examples/blog/">
|
||||
<img class="img-thumbnail" src="/docs/4.0/examples/screenshots/blog.png" alt="" width="800" height="600" />
|
||||
<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="/docs/4.0/examples/dashboard/">
|
||||
<img class="img-thumbnail" src="/docs/4.0/examples/screenshots/dashboard.png" alt="" width="800" height="600" />
|
||||
<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="/docs/4.0/examples/signin/">
|
||||
<img class="img-thumbnail" src="/docs/4.0/examples/screenshots/sign-in.png" alt="" width="800" height="600" />
|
||||
<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="/docs/4.0/examples/justified-nav/">
|
||||
<img class="img-thumbnail" src="/docs/4.0/examples/screenshots/justified-nav.png" alt="" width="800" height="600" />
|
||||
<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="/docs/4.0/examples/sticky-footer/">
|
||||
<img class="img-thumbnail" src="/docs/4.0/examples/screenshots/sticky-footer.png" alt="" width="800" height="600" />
|
||||
<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="/docs/4.0/examples/sticky-footer-navbar/">
|
||||
<img class="img-thumbnail" src="/docs/4.0/examples/screenshots/sticky-footer-navbar.png" alt="" width="800" height="600" />
|
||||
<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="/docs/4.0/examples/offcanvas/">
|
||||
<img class="img-thumbnail" src="/docs/4.0/examples/screenshots/offcanvas.png" alt="" width="800" height="600" />
|
||||
<h4>Offcanvas</h4>
|
||||
</a>
|
||||
<p>Build a toggleable off-canvas navigation menu for use with Bootstrap.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</main>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
</main>
|
||||
|
||||
|
||||
<footer class="bd-footer text-muted">
|
||||
@@ -316,21 +372,13 @@
|
||||
<li><a href="/docs/4.0/about/overview/">About</a></li>
|
||||
</ul>
|
||||
<p>Designed and built with all the love in the world by <a href="https://twitter.com/mdo" target="_blank" rel="noopener">@mdo</a> and <a href="https://twitter.com/fat" target="_blank" rel="noopener">@fat</a>. Maintained by the <a href="https://github.com/orgs/twbs/people">core team</a> with the help of <a href="https://github.com/twbs/bootstrap/graphs/contributors">our contributors</a>.</p>
|
||||
<p>Currently v4.0.0-beta.3. Code licensed <a href="https://github.com/twbs/bootstrap/blob/master/LICENSE" target="_blank" rel="license noopener">MIT</a>, docs <a href="https://creativecommons.org/licenses/by/3.0/" target="_blank" rel="license noopener">CC BY 3.0</a>.</p>
|
||||
<p>Currently v4.0.0. Code licensed <a href="https://github.com/twbs/bootstrap/blob/master/LICENSE" target="_blank" rel="license noopener">MIT</a>, docs <a href="https://creativecommons.org/licenses/by/3.0/" target="_blank" rel="license noopener">CC BY 3.0</a>.</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<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-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/docs.min.js"></script><script>
|
||||
Holder.addTheme('gray', {
|
||||
bg: '#777',
|
||||
fg: 'rgba(255,255,255,.75)',
|
||||
font: 'Helvetica',
|
||||
fontweight: 'normal'
|
||||
});
|
||||
</script>
|
||||
|
||||
<script src="/assets/js/vendor/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script><script src="/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script><script src="/assets/js/docs.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -89,7 +89,7 @@
|
||||
</main>
|
||||
|
||||
<footer class="container">
|
||||
<p>© Company 2017</p>
|
||||
<p>© Company 2017-2018</p>
|
||||
</footer>
|
||||
|
||||
<!-- Bootstrap core JavaScript
|
||||
|
||||
@@ -0,0 +1,61 @@
|
||||
<!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>Fixed top navbar example for Bootstrap</title>
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="../../../../dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
|
||||
<!-- Custom styles for this template -->
|
||||
<link href="navbar-top-fixed.css" rel="stylesheet">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
|
||||
<a class="navbar-brand" href="#">Fixed 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>
|
||||
</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>
|
||||
|
||||
<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 »</a>
|
||||
</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-slim.min.js"><\/script>')</script>
|
||||
<script src="../../../../assets/js/vendor/popper.min.js"></script>
|
||||
<script src="../../../../dist/js/bootstrap.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,5 @@
|
||||
/* Show it is fixed to the top */
|
||||
body {
|
||||
min-height: 75rem;
|
||||
padding-top: 4.5rem;
|
||||
}
|
||||
@@ -0,0 +1,61 @@
|
||||
<!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>Top navbar example for Bootstrap</title>
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="../../../../dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
|
||||
<!-- Custom styles for this template -->
|
||||
<link href="navbar-top.css" rel="stylesheet">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<nav class="navbar navbar-expand-md navbar-dark bg-dark mb-4">
|
||||
<a class="navbar-brand" href="#">Top 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>
|
||||
</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>
|
||||
|
||||
<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 »</a>
|
||||
</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-slim.min.js"><\/script>')</script>
|
||||
<script src="../../../../assets/js/vendor/popper.min.js"></script>
|
||||
<script src="../../../../dist/js/bootstrap.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,4 @@
|
||||
/* Show it's not fixed to the top */
|
||||
body {
|
||||
min-height: 75rem;
|
||||
}
|
||||
@@ -7,7 +7,7 @@
|
||||
<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.min.css" rel="stylesheet">
|
||||
@@ -16,27 +16,30 @@
|
||||
<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,75 +54,97 @@
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<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>
|
||||
|
||||
<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="row row-offcanvas row-offcanvas-right">
|
||||
|
||||
<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 »</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 »</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 »</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 »</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 »</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 »</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>
|
||||
|
||||
</main><!--/.container-->
|
||||
|
||||
<footer>
|
||||
<p>© Company 2017</p>
|
||||
</footer>
|
||||
</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
|
||||
================================================== -->
|
||||
@@ -128,6 +153,7 @@
|
||||
<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 src="offcanvas.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -1,63 +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: 767.99px) {
|
||||
.row-offcanvas {
|
||||
position: relative;
|
||||
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; }
|
||||
|
||||
@@ -2,6 +2,6 @@ $(function () {
|
||||
'use strict'
|
||||
|
||||
$('[data-toggle="offcanvas"]').on('click', function () {
|
||||
$('.row-offcanvas').toggleClass('active')
|
||||
$('.offcanvas-collapse').toggleClass('open')
|
||||
})
|
||||
})
|
||||
|
||||
@@ -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">© 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.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-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>
|
||||
@@ -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); }
|
||||
@@ -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">© 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.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-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>
|
||||
@@ -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; }
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 13 KiB After Width: | Height: | Size: 26 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 48 KiB After Width: | Height: | Size: 36 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 23 KiB After Width: | Height: | Size: 31 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 28 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 14 KiB After Width: | Height: | Size: 18 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 23 KiB After Width: | Height: | Size: 26 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 26 KiB After Width: | Height: | Size: 33 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 20 KiB After Width: | Height: | Size: 38 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 8.3 KiB After Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 10 KiB After Width: | Height: | Size: 13 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 11 KiB After Width: | Height: | Size: 14 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 26 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 31 KiB After Width: | Height: | Size: 23 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 28 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 27 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.1 KiB After Width: | Height: | Size: 5.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 8.0 KiB After Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 16 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 7.2 KiB After Width: | Height: | Size: 9.4 KiB |
@@ -0,0 +1,36 @@
|
||||
<!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>Signin Template for Bootstrap</title>
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="../../../../dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
|
||||
<!-- Custom styles for this template -->
|
||||
<link href="signin.css" rel="stylesheet">
|
||||
</head>
|
||||
|
||||
<body class="text-center">
|
||||
<form class="form-signin">
|
||||
<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">Please sign in</h1>
|
||||
<label for="inputEmail" class="sr-only">Email address</label>
|
||||
<input type="email" id="inputEmail" class="form-control" placeholder="Email address" required autofocus>
|
||||
<label for="inputPassword" class="sr-only">Password</label>
|
||||
<input type="password" id="inputPassword" class="form-control" placeholder="Password" required>
|
||||
<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">© 2017-2018</p>
|
||||
</form>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,49 @@
|
||||
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: 330px;
|
||||
padding: 15px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.form-signin .checkbox {
|
||||
font-weight: 400;
|
||||
}
|
||||
.form-signin .form-control {
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
height: auto;
|
||||
padding: 10px;
|
||||
font-size: 16px;
|
||||
}
|
||||
.form-signin .form-control:focus {
|
||||
z-index: 2;
|
||||
}
|
||||
.form-signin input[type="email"] {
|
||||
margin-bottom: -1px;
|
||||
border-bottom-right-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
.form-signin input[type="password"] {
|
||||
margin-bottom: 10px;
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
}
|
||||
@@ -47,9 +47,7 @@
|
||||
|
||||
<!-- Begin page content -->
|
||||
<main role="main" class="container">
|
||||
<div class="mt-3">
|
||||
<h1>Sticky footer with fixed navbar</h1>
|
||||
</div>
|
||||
<h1 class="mt-5">Sticky footer with fixed navbar</h1>
|
||||
<p class="lead">Pin a fixed-height footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS. A fixed navbar has been added with <code>padding-top: 60px;</code> on the <code>body > .container</code>.</p>
|
||||
<p>Back to <a href="../sticky-footer">the default sticky footer</a> minus the navbar.</p>
|
||||
</main>
|
||||
|
||||
@@ -20,9 +20,7 @@
|
||||
|
||||
<!-- Begin page content -->
|
||||
<main role="main" class="container">
|
||||
<div class="mt-1">
|
||||
<h1>Sticky footer</h1>
|
||||
</div>
|
||||
<h1 class="mt-5">Sticky footer</h1>
|
||||
<p class="lead">Pin a fixed-height footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS.</p>
|
||||
<p>Use <a href="../sticky-footer-navbar">the sticky footer with a fixed navbar</a> if need be, too.</p>
|
||||
</main>
|
||||
|
||||
@@ -3,15 +3,15 @@
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="The most popular HTML, CSS, and JS library in the world.">
|
||||
<meta name="description" content="Learn about the guiding principles, strategies, and techniques used to build and maintain Bootstrap so you can more easily customize and extend it yourself.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Jekyll v3.6.2">
|
||||
<meta name="generator" content="Jekyll v3.7.0">
|
||||
|
||||
<title>Approach · Bootstrap</title>
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
|
||||
<link href="/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
|
||||
|
||||
|
||||
<!-- Documentation extras -->
|
||||
@@ -36,13 +36,13 @@
|
||||
<meta name="twitter:site" content="@getbootstrap">
|
||||
<meta name="twitter:creator" content="@getbootstrap">
|
||||
<meta name="twitter:title" content="Approach">
|
||||
<meta name="twitter:description" content="The most popular HTML, CSS, and JS library in the world.">
|
||||
<meta name="twitter:description" content="Learn about the guiding principles, strategies, and techniques used to build and maintain Bootstrap so you can more easily customize and extend it yourself.">
|
||||
<meta name="twitter:image" content="https://getbootstrap.com/assets/brand/bootstrap-social-logo.png">
|
||||
|
||||
<!-- Facebook -->
|
||||
<meta property="og:url" content="https://getbootstrap.com/docs/4.0/extend/approach/">
|
||||
<meta property="og:title" content="Approach">
|
||||
<meta property="og:description" content="The most popular HTML, CSS, and JS library in the world.">
|
||||
<meta property="og:description" content="Learn about the guiding principles, strategies, and techniques used to build and maintain Bootstrap so you can more easily customize and extend it yourself.">
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:image" content="http://getbootstrap.com/assets/brand/bootstrap-social.png">
|
||||
<meta property="og:image:secure_url" content="https://getbootstrap.com/assets/brand/bootstrap-social.png">
|
||||
@@ -125,7 +125,7 @@
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0-beta.3.zip">Download</a>
|
||||
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0.zip">Download</a>
|
||||
</header>
|
||||
|
||||
|
||||
@@ -336,12 +336,15 @@
|
||||
<a href="/docs/4.0/utilities/visibility/">
|
||||
Visibility
|
||||
</a></li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.0/extend/icons/">
|
||||
</div><div class="bd-toc-item active">
|
||||
<a class="bd-toc-link" href="/docs/4.0/extend/approach/">
|
||||
Extend
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<ul class="nav bd-sidenav"><li class="active bd-sidenav-active">
|
||||
<a href="/docs/4.0/extend/approach/">
|
||||
Approach
|
||||
</a></li><li>
|
||||
<a href="/docs/4.0/extend/icons/">
|
||||
Icons
|
||||
</a></li></ul>
|
||||
@@ -377,10 +380,82 @@
|
||||
|
||||
<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">Approach</h1>
|
||||
<p class="bd-lead"></p>
|
||||
<p class="bd-lead">Learn about the guiding principles, strategies, and techniques used to build and maintain Bootstrap so you can more easily customize and extend it yourself.</p>
|
||||
<script async src="https://cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=getbootstrapcom" id="_carbonads_js"></script>
|
||||
|
||||
|
||||
<p>While the getting started pages provide an introductory tour of the project and what it offers, this document focuses on <em>why</em> we do the things we do in Bootstrap. It explains our philosophy to building on the web so that others can learn from us, contribute with us, and help us improve.</p>
|
||||
|
||||
<p>See something that doesn’t sound right, or perhaps could be done better? <a href="https://github.com/twbs/bootstrap/issues/new">Open an issue</a>—we’d love to discuss it with you.</p>
|
||||
|
||||
<h2 id="summary">Summary</h2>
|
||||
|
||||
<p>We’ll dive into each of these more throughout, but at a high level, here’s what guides our approach.</p>
|
||||
|
||||
<ul>
|
||||
<li>Components should be responsive and mobile-first</li>
|
||||
<li>Components should be built with a base class and extended via modifier classes</li>
|
||||
<li>Component states should obey a common z-index scale</li>
|
||||
<li>Whenever possible, prefer a HTML and CSS implementation over JavaScript</li>
|
||||
<li>Whenever possible, use utilities over custom styles</li>
|
||||
<li>Whenever possible, avoid enforcing strict HTML requirements (children selectors)</li>
|
||||
</ul>
|
||||
|
||||
<h2 id="responsive">Responsive</h2>
|
||||
|
||||
<p>Bootstrap’s responsive styles are built to be responsive, an approach that’s often referred to as <em>mobile-first</em>. We use this term in our docs and largely agree with it, but at times it can be too broad. While not every component <em>must</em> be entirely responsive in Bootstrap, this responsive approach is about reducing CSS overrides by pushing you to add styles as the viewport becomes larger.</p>
|
||||
|
||||
<p>Across Bootstrap, you’ll see this most clearly in our media queries. In most cases, we use <code class="highlighter-rouge">min-width</code> queries that begin to apply at a specific breakpoint and carry up through the higher breakpoints. For example, a <code class="highlighter-rouge">.d-none</code> applies from <code class="highlighter-rouge">min-width: 0</code> to infinity. On the other hand, a <code class="highlighter-rouge">.d-md-none</code> applies from the medium breakpoint and up.</p>
|
||||
|
||||
<p>At times we’ll use <code class="highlighter-rouge">max-width</code> when a component’s inherent complexity requires it. At times, these overrides are functionally and mentally clearer to implement and support than rewriting core functionality from our components. We strive to limit this approach, but will use it from time to time.</p>
|
||||
|
||||
<h2 id="classes">Classes</h2>
|
||||
|
||||
<p>Aside from our Reboot, a cross-browser normalization stylesheet, all our styles aim to use classes as selectors. This means steering clear of type selectors (e.g., <code class="highlighter-rouge">input[type="text"]</code>) and extraneous parent classes (e.g., <code class="highlighter-rouge">.parent .child</code>) that make styles too specific to easily override.</p>
|
||||
|
||||
<p>As such, components should be built with a base class that houses common, not-to-be overridden property-value pairs. For example, <code class="highlighter-rouge">.btn</code> and <code class="highlighter-rouge">.btn-primary</code>. We use <code class="highlighter-rouge">.btn</code> for all the common styles like <code class="highlighter-rouge">display</code>, <code class="highlighter-rouge">padding</code>, and <code class="highlighter-rouge">border-width</code>. We then use modifiers like <code class="highlighter-rouge">.btn-primary</code> to add the color, background-color, border-color, etc.</p>
|
||||
|
||||
<p>Modifier classes should only be used when there are multiple properties or values to be changed across multiple variants. Modifiers are not always necessary, so be sure you’re actually saving lines of code and preventing unnecessary overrides when creating them. Good examples of modifiers are our theme color classes and size variants.</p>
|
||||
|
||||
<h2 id="z-index-scales">z-index scales</h2>
|
||||
|
||||
<p>There are two <code class="highlighter-rouge">z-index</code> scales in Bootstrap—elements within a component and overlay components.</p>
|
||||
|
||||
<h3 id="component-elements">Component elements</h3>
|
||||
|
||||
<ul>
|
||||
<li>Some components in Bootstrap are built with overlapping elements to prevent double borders without modifying the <code class="highlighter-rouge">border</code> property. For example, button groups, input groups, and pagination.</li>
|
||||
<li>These components share a standard <code class="highlighter-rouge">z-index</code> scale of <code class="highlighter-rouge">0</code> through <code class="highlighter-rouge">3</code>.</li>
|
||||
<li><code class="highlighter-rouge">0</code> is default (initial), <code class="highlighter-rouge">1</code> is <code class="highlighter-rouge">:hover</code>, <code class="highlighter-rouge">2</code> is <code class="highlighter-rouge">:active</code>/<code class="highlighter-rouge">.active</code>, and , <code class="highlighter-rouge">3</code> is <code class="highlighter-rouge">:focus</code>.</li>
|
||||
<li>This approach matches our expectations of highest user priority. If an element is focused, it’s in view and at the user’s attention. Active elements are second highest because they indicate state. Hover is third highest because it indicates user intent, but nearly <em>anything</em> can be hovered.</li>
|
||||
</ul>
|
||||
|
||||
<h3 id="overlay-components">Overlay components</h3>
|
||||
|
||||
<p>Bootstrap includes several components that function as an overlay of some kind. This includes, in order of highest <code class="highlighter-rouge">z-index</code>, dropdowns, fixed and sticky navbars, modals, tooltips, and popovers. These components have their own <code class="highlighter-rouge">z-index</code> scale that begins at <code class="highlighter-rouge">1000</code>. This starting number is random and serves as a small buffer between our styles and your project’s custom styles.</p>
|
||||
|
||||
<p>Each overlay component increases it’s <code class="highlighter-rouge">z-index</code> value slightly in such a way that common UI principles allow user focused or hovered elements to remain in view at all times. For example, a modal is document blocking (e.g., you cannot take any other action save for the modal’s action), so we put that above our navbars.</p>
|
||||
|
||||
<p>Learn more about this in our <a href="/docs/4.0/layout/overview/#z-index"><code class="highlighter-rouge">z-index</code> layout page</a>.</p>
|
||||
|
||||
<h2 id="html-and-css-over-js">HTML and CSS over JS</h2>
|
||||
|
||||
<p>Whenever possible, we prefer to write HTML and CSS over JavaScript. In general, HTML and CSS are more prolific and accessible to more people of all different experience levels. HTML and CSS are also faster in your browser than JavaScript, and your browser general provides a great deal of functionality for you.</p>
|
||||
|
||||
<p>This principle is our first-class JavaScript API is <code class="highlighter-rouge">data</code> attributes. You don’t need to write nearly any JavaScript to use our JavaScript plugins; instead, write HTML. Read more about this in <a href="">our JavaScript overview page</a>.</p>
|
||||
|
||||
<p>Lastly, our styles build on the fundamental behaviors of common web elements. Whenever possible, we prefer to use what the browser provides. For example, you can put a <code class="highlighter-rouge">.btn</code> class on nearly any element, but most elements don’t provide any semantic value or browser functionality. So instead, we use <code class="highlighter-rouge"><button></code>s and <code class="highlighter-rouge"><a></code>s.</p>
|
||||
|
||||
<p>The same goes for more complex components. While we <em>could</em> write our own form validation plugin to add classes to a parent element based on an input’s state, thereby allowing us to style the text say red, we prefer using the <code class="highlighter-rouge">:valid</code>/<code class="highlighter-rouge">:invalid</code> pseudo-elements every browser provides us.</p>
|
||||
|
||||
<h2 id="utilities">Utilities</h2>
|
||||
|
||||
<p>Utility classes—formerly helpers in Bootstrap 3—are a powerful ally in combatting CSS bloat and poor page performance. A utility class is typically a single, immutable property-value pairing expressed as a class (e.g., <code class="highlighter-rouge">.d-block</code> represents <code class="highlighter-rouge">display: block;</code>). Their primary appeal is speed of use while writing HTML and limiting the amount of custom CSS you have to write.</p>
|
||||
|
||||
<p>Specifically regarding custom CSS, utilities can help combat increasing file size by reducing your most commonly repeated property-value pairs into single classes. This can have a dramatic effect at scale in your projects.</p>
|
||||
|
||||
<h2 id="flexible-html">Flexible HTML</h2>
|
||||
|
||||
<p>While not always possible, we strive to avoid being overly dogmatic in our HTML requirements for components. Thus, we focus on single classes in our CSS selectors and try to avoid immediate children selectors (<code class="highlighter-rouge">~</code>). This gives you more flexibility in your implementation and helps keep our CSS simpler and less specific.</p>
|
||||
|
||||
</main>
|
||||
</div>
|
||||
@@ -389,34 +464,6 @@
|
||||
<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-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/docs.min.js"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
|
||||
<script>
|
||||
docsearch({
|
||||
apiKey: '48cb48b22351bc71ea5f12f4d1ede198',
|
||||
indexName: 'bootstrap-v4',
|
||||
inputSelector: '#search-input',
|
||||
handleSelected: function (input, event, suggestion) {
|
||||
var url = suggestion.url;
|
||||
url = suggestion.isLvl1 ? url.split('#')[0]: url;
|
||||
// If it's a title we remove the anchor so it does not jump.
|
||||
window.location.href = url;
|
||||
},
|
||||
transformData: function (hits) {
|
||||
return hits.map(function (hit) {
|
||||
hit.url = hit.url.replace('https://v4-alpha.getbootstrap.com', '/docs/4.0');
|
||||
return hit;
|
||||
});
|
||||
},
|
||||
debug: false // Set debug to true if you want to inspect the dropdown
|
||||
});
|
||||
</script><script>
|
||||
Holder.addTheme('gray', {
|
||||
bg: '#777',
|
||||
fg: 'rgba(255,255,255,.75)',
|
||||
font: 'Helvetica',
|
||||
fontweight: 'normal'
|
||||
});
|
||||
</script>
|
||||
|
||||
<script src="/assets/js/vendor/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script><script src="/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/assets/js/docs.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -5,13 +5,13 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="Guidance and suggestions for using external icon libraries with Bootstrap.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Jekyll v3.6.2">
|
||||
<meta name="generator" content="Jekyll v3.7.0">
|
||||
|
||||
<title>Icons · Bootstrap</title>
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
|
||||
<link href="/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
|
||||
|
||||
|
||||
<!-- Documentation extras -->
|
||||
@@ -125,7 +125,7 @@
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0-beta.3.zip">Download</a>
|
||||
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0.zip">Download</a>
|
||||
</header>
|
||||
|
||||
|
||||
@@ -337,11 +337,14 @@
|
||||
Visibility
|
||||
</a></li></ul>
|
||||
</div><div class="bd-toc-item active">
|
||||
<a class="bd-toc-link" href="/docs/4.0/extend/icons/">
|
||||
<a class="bd-toc-link" href="/docs/4.0/extend/approach/">
|
||||
Extend
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li class="active bd-sidenav-active">
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.0/extend/approach/">
|
||||
Approach
|
||||
</a></li><li class="active bd-sidenav-active">
|
||||
<a href="/docs/4.0/extend/icons/">
|
||||
Icons
|
||||
</a></li></ul>
|
||||
@@ -389,7 +392,6 @@
|
||||
<ul>
|
||||
<li><a href="https://useiconic.com/open/">Iconic</a></li>
|
||||
<li><a href="https://octicons.github.com/">Octicons</a></li>
|
||||
<li><a href="http://www.entypo.com/">Entypo</a></li>
|
||||
</ul>
|
||||
|
||||
<h2 id="more-options">More options</h2>
|
||||
@@ -413,34 +415,6 @@
|
||||
<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-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/docs.min.js"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
|
||||
<script>
|
||||
docsearch({
|
||||
apiKey: '48cb48b22351bc71ea5f12f4d1ede198',
|
||||
indexName: 'bootstrap-v4',
|
||||
inputSelector: '#search-input',
|
||||
handleSelected: function (input, event, suggestion) {
|
||||
var url = suggestion.url;
|
||||
url = suggestion.isLvl1 ? url.split('#')[0]: url;
|
||||
// If it's a title we remove the anchor so it does not jump.
|
||||
window.location.href = url;
|
||||
},
|
||||
transformData: function (hits) {
|
||||
return hits.map(function (hit) {
|
||||
hit.url = hit.url.replace('https://v4-alpha.getbootstrap.com', '/docs/4.0');
|
||||
return hit;
|
||||
});
|
||||
},
|
||||
debug: false // Set debug to true if you want to inspect the dropdown
|
||||
});
|
||||
</script><script>
|
||||
Holder.addTheme('gray', {
|
||||
bg: '#777',
|
||||
fg: 'rgba(255,255,255,.75)',
|
||||
font: 'Helvetica',
|
||||
fontweight: 'normal'
|
||||
});
|
||||
</script>
|
||||
|
||||
<script src="/assets/js/vendor/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script><script src="/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/assets/js/docs.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -5,13 +5,13 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="The most popular HTML, CSS, and JS library in the world.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Jekyll v3.6.2">
|
||||
<meta name="generator" content="Jekyll v3.7.0">
|
||||
|
||||
<title>Extend · Bootstrap</title>
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
|
||||
<link href="/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
|
||||
|
||||
|
||||
<!-- Documentation extras -->
|
||||
@@ -125,7 +125,7 @@
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0-beta.3.zip">Download</a>
|
||||
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0.zip">Download</a>
|
||||
</header>
|
||||
|
||||
|
||||
@@ -337,11 +337,14 @@
|
||||
Visibility
|
||||
</a></li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.0/extend/icons/">
|
||||
<a class="bd-toc-link" href="/docs/4.0/extend/approach/">
|
||||
Extend
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.0/extend/approach/">
|
||||
Approach
|
||||
</a></li><li>
|
||||
<a href="/docs/4.0/extend/icons/">
|
||||
Icons
|
||||
</a></li></ul>
|
||||
@@ -389,34 +392,6 @@
|
||||
<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-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/docs.min.js"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
|
||||
<script>
|
||||
docsearch({
|
||||
apiKey: '48cb48b22351bc71ea5f12f4d1ede198',
|
||||
indexName: 'bootstrap-v4',
|
||||
inputSelector: '#search-input',
|
||||
handleSelected: function (input, event, suggestion) {
|
||||
var url = suggestion.url;
|
||||
url = suggestion.isLvl1 ? url.split('#')[0]: url;
|
||||
// If it's a title we remove the anchor so it does not jump.
|
||||
window.location.href = url;
|
||||
},
|
||||
transformData: function (hits) {
|
||||
return hits.map(function (hit) {
|
||||
hit.url = hit.url.replace('https://v4-alpha.getbootstrap.com', '/docs/4.0');
|
||||
return hit;
|
||||
});
|
||||
},
|
||||
debug: false // Set debug to true if you want to inspect the dropdown
|
||||
});
|
||||
</script><script>
|
||||
Holder.addTheme('gray', {
|
||||
bg: '#777',
|
||||
fg: 'rgba(255,255,255,.75)',
|
||||
font: 'Helvetica',
|
||||
fontweight: 'normal'
|
||||
});
|
||||
</script>
|
||||
|
||||
<script src="/assets/js/vendor/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script><script src="/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/assets/js/docs.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -5,13 +5,13 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="A brief overview of Bootstrap’s features and limitations for the creation of accessible content.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Jekyll v3.6.2">
|
||||
<meta name="generator" content="Jekyll v3.7.0">
|
||||
|
||||
<title>Accessibility · Bootstrap</title>
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
|
||||
<link href="/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
|
||||
|
||||
|
||||
<!-- Documentation extras -->
|
||||
@@ -125,7 +125,7 @@
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0-beta.3.zip">Download</a>
|
||||
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0.zip">Download</a>
|
||||
</header>
|
||||
|
||||
|
||||
@@ -337,11 +337,14 @@
|
||||
Visibility
|
||||
</a></li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.0/extend/icons/">
|
||||
<a class="bd-toc-link" href="/docs/4.0/extend/approach/">
|
||||
Extend
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.0/extend/approach/">
|
||||
Approach
|
||||
</a></li><li>
|
||||
<a href="/docs/4.0/extend/icons/">
|
||||
Icons
|
||||
</a></li></ul>
|
||||
@@ -445,34 +448,6 @@
|
||||
<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-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/docs.min.js"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
|
||||
<script>
|
||||
docsearch({
|
||||
apiKey: '48cb48b22351bc71ea5f12f4d1ede198',
|
||||
indexName: 'bootstrap-v4',
|
||||
inputSelector: '#search-input',
|
||||
handleSelected: function (input, event, suggestion) {
|
||||
var url = suggestion.url;
|
||||
url = suggestion.isLvl1 ? url.split('#')[0]: url;
|
||||
// If it's a title we remove the anchor so it does not jump.
|
||||
window.location.href = url;
|
||||
},
|
||||
transformData: function (hits) {
|
||||
return hits.map(function (hit) {
|
||||
hit.url = hit.url.replace('https://v4-alpha.getbootstrap.com', '/docs/4.0');
|
||||
return hit;
|
||||
});
|
||||
},
|
||||
debug: false // Set debug to true if you want to inspect the dropdown
|
||||
});
|
||||
</script><script>
|
||||
Holder.addTheme('gray', {
|
||||
bg: '#777',
|
||||
fg: 'rgba(255,255,255,.75)',
|
||||
font: 'Helvetica',
|
||||
fontweight: 'normal'
|
||||
});
|
||||
</script>
|
||||
|
||||
<script src="/assets/js/vendor/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script><script src="/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/assets/js/docs.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -5,13 +5,13 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="Learn about some of the best practices we’ve gathered from years of working on and using Bootstrap.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Jekyll v3.6.2">
|
||||
<meta name="generator" content="Jekyll v3.7.0">
|
||||
|
||||
<title>Best practices · Bootstrap</title>
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
|
||||
<link href="/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
|
||||
|
||||
|
||||
<!-- Documentation extras -->
|
||||
@@ -125,7 +125,7 @@
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0-beta.3.zip">Download</a>
|
||||
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0.zip">Download</a>
|
||||
</header>
|
||||
|
||||
|
||||
@@ -337,11 +337,14 @@
|
||||
Visibility
|
||||
</a></li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.0/extend/icons/">
|
||||
<a class="bd-toc-link" href="/docs/4.0/extend/approach/">
|
||||
Extend
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.0/extend/approach/">
|
||||
Approach
|
||||
</a></li><li>
|
||||
<a href="/docs/4.0/extend/icons/">
|
||||
Icons
|
||||
</a></li></ul>
|
||||
@@ -403,34 +406,6 @@
|
||||
<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-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/docs.min.js"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
|
||||
<script>
|
||||
docsearch({
|
||||
apiKey: '48cb48b22351bc71ea5f12f4d1ede198',
|
||||
indexName: 'bootstrap-v4',
|
||||
inputSelector: '#search-input',
|
||||
handleSelected: function (input, event, suggestion) {
|
||||
var url = suggestion.url;
|
||||
url = suggestion.isLvl1 ? url.split('#')[0]: url;
|
||||
// If it's a title we remove the anchor so it does not jump.
|
||||
window.location.href = url;
|
||||
},
|
||||
transformData: function (hits) {
|
||||
return hits.map(function (hit) {
|
||||
hit.url = hit.url.replace('https://v4-alpha.getbootstrap.com', '/docs/4.0');
|
||||
return hit;
|
||||
});
|
||||
},
|
||||
debug: false // Set debug to true if you want to inspect the dropdown
|
||||
});
|
||||
</script><script>
|
||||
Holder.addTheme('gray', {
|
||||
bg: '#777',
|
||||
fg: 'rgba(255,255,255,.75)',
|
||||
font: 'Helvetica',
|
||||
fontweight: 'normal'
|
||||
});
|
||||
</script>
|
||||
|
||||
<script src="/assets/js/vendor/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script><script src="/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/assets/js/docs.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -5,13 +5,13 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="Learn about the browsers and devices, from modern to old, that are supported by Bootstrap, including known quirks and bugs for each.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Jekyll v3.6.2">
|
||||
<meta name="generator" content="Jekyll v3.7.0">
|
||||
|
||||
<title>Browsers and devices · Bootstrap</title>
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
|
||||
<link href="/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
|
||||
|
||||
|
||||
<!-- Documentation extras -->
|
||||
@@ -125,7 +125,7 @@
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0-beta.3.zip">Download</a>
|
||||
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0.zip">Download</a>
|
||||
</header>
|
||||
|
||||
|
||||
@@ -337,11 +337,14 @@
|
||||
Visibility
|
||||
</a></li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.0/extend/icons/">
|
||||
<a class="bd-toc-link" href="/docs/4.0/extend/approach/">
|
||||
Extend
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.0/extend/approach/">
|
||||
Approach
|
||||
</a></li><li>
|
||||
<a href="/docs/4.0/extend/icons/">
|
||||
Icons
|
||||
</a></li></ul>
|
||||
@@ -391,7 +394,7 @@
|
||||
</ul>
|
||||
</li>
|
||||
<li class="toc-entry toc-h2"><a href="#browser-zooming">Browser zooming</a></li>
|
||||
<li class="toc-entry toc-h2"><a href="#sticky-hoverfocus-on-mobile">Sticky :hover/:focus on mobile</a></li>
|
||||
<li class="toc-entry toc-h2"><a href="#sticky-hoverfocus-on-ios">Sticky :hover/:focus on iOS</a></li>
|
||||
<li class="toc-entry toc-h2"><a href="#printing">Printing</a></li>
|
||||
<li class="toc-entry toc-h2"><a href="#android-stock-browser">Android stock browser</a>
|
||||
<ul>
|
||||
@@ -525,11 +528,11 @@
|
||||
|
||||
<p>Page zooming inevitably presents rendering artifacts in some components, both in Bootstrap and the rest of the web. Depending on the issue, we may be able to fix it (search first and then open an issue if need be). However, we tend to ignore these as they often have no direct solution other than hacky workarounds.</p>
|
||||
|
||||
<h2 id="sticky-hoverfocus-on-mobile">Sticky <code class="highlighter-rouge">:hover</code>/<code class="highlighter-rouge">:focus</code> on mobile</h2>
|
||||
<h2 id="sticky-hoverfocus-on-ios">Sticky <code class="highlighter-rouge">:hover</code>/<code class="highlighter-rouge">:focus</code> on iOS</h2>
|
||||
|
||||
<p>Even though real hovering isn’t possible on most touchscreens, most mobile browsers emulate hovering support and make <code class="highlighter-rouge">:hover</code> “sticky”. In other words, <code class="highlighter-rouge">:hover</code> styles start applying after tapping an element and only stop applying after the user taps some other element. On mobile-first sites, this behavior is normally undesirable.</p>
|
||||
<p>While <code class="highlighter-rouge">:hover</code> isn’t possible on most touch devices, iOS emulates this behavior, resulting in “sticky” hover styles that persist after tapping one element. These hover styles are only removed when users tap another element. This behavior is considered largely undesirable and appears to not be an issue on Android or Windows devices.</p>
|
||||
|
||||
<p>Bootstrap includes a workaround for this, although it is disabled by default. By setting <code class="highlighter-rouge">$enable-hover-media-query</code> to <code class="highlighter-rouge">true</code> when compiling from Sass, Bootstrap will use <a href="https://github.com/twbs/mq4-hover-shim">mq4-hover-shim</a> to disable <code class="highlighter-rouge">:hover</code> styles in browsers that emulate hovering, thus preventing sticky <code class="highlighter-rouge">:hover</code> styles. There are some caveats to this workaround; see the shim’s documentation for details.</p>
|
||||
<p>Throughout our v4 alpha and beta releases, we included incomplete and commented out code for opting into a media query shim that would disable hover styles in touch device browsers that emulate hovering. This work was never fully completed or enabled, but to avoid complete breakage, we’ve opted to deprecate <a href="https://github.com/twbs/mq4-hover-shim">this shim</a> and keep the mixins as shortcuts for the pseudo-classes.</p>
|
||||
|
||||
<h2 id="printing">Printing</h2>
|
||||
|
||||
@@ -578,34 +581,6 @@
|
||||
<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-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/docs.min.js"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
|
||||
<script>
|
||||
docsearch({
|
||||
apiKey: '48cb48b22351bc71ea5f12f4d1ede198',
|
||||
indexName: 'bootstrap-v4',
|
||||
inputSelector: '#search-input',
|
||||
handleSelected: function (input, event, suggestion) {
|
||||
var url = suggestion.url;
|
||||
url = suggestion.isLvl1 ? url.split('#')[0]: url;
|
||||
// If it's a title we remove the anchor so it does not jump.
|
||||
window.location.href = url;
|
||||
},
|
||||
transformData: function (hits) {
|
||||
return hits.map(function (hit) {
|
||||
hit.url = hit.url.replace('https://v4-alpha.getbootstrap.com', '/docs/4.0');
|
||||
return hit;
|
||||
});
|
||||
},
|
||||
debug: false // Set debug to true if you want to inspect the dropdown
|
||||
});
|
||||
</script><script>
|
||||
Holder.addTheme('gray', {
|
||||
bg: '#777',
|
||||
fg: 'rgba(255,255,255,.75)',
|
||||
font: 'Helvetica',
|
||||
fontweight: 'normal'
|
||||
});
|
||||
</script>
|
||||
|
||||
<script src="/assets/js/vendor/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script><script src="/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/assets/js/docs.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -5,13 +5,13 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="Learn how to use Bootstrap’s included npm scripts to build our documentation, compile source code, run tests, and more.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Jekyll v3.6.2">
|
||||
<meta name="generator" content="Jekyll v3.7.0">
|
||||
|
||||
<title>Build tools · Bootstrap</title>
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
|
||||
<link href="/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
|
||||
|
||||
|
||||
<!-- Documentation extras -->
|
||||
@@ -125,7 +125,7 @@
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0-beta.3.zip">Download</a>
|
||||
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0.zip">Download</a>
|
||||
</header>
|
||||
|
||||
|
||||
@@ -337,11 +337,14 @@
|
||||
Visibility
|
||||
</a></li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.0/extend/icons/">
|
||||
<a class="bd-toc-link" href="/docs/4.0/extend/approach/">
|
||||
Extend
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.0/extend/approach/">
|
||||
Approach
|
||||
</a></li><li>
|
||||
<a href="/docs/4.0/extend/icons/">
|
||||
Icons
|
||||
</a></li></ul>
|
||||
@@ -392,13 +395,13 @@
|
||||
|
||||
<h2 id="tooling-setup">Tooling setup</h2>
|
||||
|
||||
<p>Bootstrap uses <a href="https://docs.npmjs.com/misc/scripts">NPM scripts</a> for its build system. Our <a href="https://github.com/twbs/bootstrap/blob/v4.0.0-beta.3/package.json">package.json</a> includes convenient methods for working with the framework, including compiling code, running tests, and more.</p>
|
||||
<p>Bootstrap uses <a href="https://docs.npmjs.com/misc/scripts">NPM scripts</a> for its build system. Our <a href="https://github.com/twbs/bootstrap/blob/v4.0.0/package.json">package.json</a> includes convenient methods for working with the framework, including compiling code, running tests, and more.</p>
|
||||
|
||||
<p>To use our build system and run our documentation locally, you’ll need a copy of Bootstrap’s source files and Node. Follow these steps and you should be ready to rock:</p>
|
||||
|
||||
<ol>
|
||||
<li><a href="https://nodejs.org/download/">Download and install Node.js</a>, which we use to manage our dependencies.</li>
|
||||
<li>Navigate to the root <code class="highlighter-rouge">/bootstrap</code> directory and run <code class="highlighter-rouge">npm install</code> to install our local dependencies listed in <a href="https://github.com/twbs/bootstrap/blob/v4.0.0-beta.3/package.json">package.json</a>.</li>
|
||||
<li>Navigate to the root <code class="highlighter-rouge">/bootstrap</code> directory and run <code class="highlighter-rouge">npm install</code> to install our local dependencies listed in <a href="https://github.com/twbs/bootstrap/blob/v4.0.0/package.json">package.json</a>.</li>
|
||||
<li><a href="https://www.ruby-lang.org/en/documentation/installation/">Install Ruby</a>, install <a href="https://bundler.io/">Bundler</a> with <code class="highlighter-rouge">gem install bundler</code>, and finally run <code class="highlighter-rouge">bundle install</code>. This will install all Ruby dependencies, such as Jekyll and plugins.
|
||||
<ul>
|
||||
<li><strong>Windows users:</strong> Read <a href="https://jekyllrb.com/docs/windows/">this guide</a> to get Jekyll up and running without problems.</li>
|
||||
@@ -410,7 +413,7 @@
|
||||
|
||||
<h2 id="using-npm-scripts">Using NPM scripts</h2>
|
||||
|
||||
<p>Our <a href="https://github.com/twbs/bootstrap/blob/v4.0.0-beta.3/package.json">package.json</a> includes the following commands and tasks:</p>
|
||||
<p>Our <a href="https://github.com/twbs/bootstrap/blob/v4.0.0/package.json">package.json</a> includes the following commands and tasks:</p>
|
||||
|
||||
<table>
|
||||
<thead>
|
||||
@@ -441,7 +444,7 @@
|
||||
|
||||
<p>Bootstrap uses <a href="https://github.com/postcss/autoprefixer">Autoprefixer</a> (included in our build process) to automatically add vendor prefixes to some CSS properties at build time. Doing so saves us time and code by allowing us to write key parts of our CSS a single time while eliminating the need for vendor mixins like those found in v3.</p>
|
||||
|
||||
<p>We maintain the list of browsers supported through Autoprefixer in a separate file within our GitHub repository. See <a href="https://github.com/twbs/bootstrap/blob/v4.0.0-beta.3/package.json">/package.json</a> for details.</p>
|
||||
<p>We maintain the list of browsers supported through Autoprefixer in a separate file within our GitHub repository. See <a href="https://github.com/twbs/bootstrap/blob/v4.0.0/package.json">/package.json</a> for details.</p>
|
||||
|
||||
<h2 id="local-documentation">Local documentation</h2>
|
||||
|
||||
@@ -467,34 +470,6 @@
|
||||
<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-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/docs.min.js"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
|
||||
<script>
|
||||
docsearch({
|
||||
apiKey: '48cb48b22351bc71ea5f12f4d1ede198',
|
||||
indexName: 'bootstrap-v4',
|
||||
inputSelector: '#search-input',
|
||||
handleSelected: function (input, event, suggestion) {
|
||||
var url = suggestion.url;
|
||||
url = suggestion.isLvl1 ? url.split('#')[0]: url;
|
||||
// If it's a title we remove the anchor so it does not jump.
|
||||
window.location.href = url;
|
||||
},
|
||||
transformData: function (hits) {
|
||||
return hits.map(function (hit) {
|
||||
hit.url = hit.url.replace('https://v4-alpha.getbootstrap.com', '/docs/4.0');
|
||||
return hit;
|
||||
});
|
||||
},
|
||||
debug: false // Set debug to true if you want to inspect the dropdown
|
||||
});
|
||||
</script><script>
|
||||
Holder.addTheme('gray', {
|
||||
bg: '#777',
|
||||
fg: 'rgba(255,255,255,.75)',
|
||||
font: 'Helvetica',
|
||||
fontweight: 'normal'
|
||||
});
|
||||
</script>
|
||||
|
||||
<script src="/assets/js/vendor/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script><script src="/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/assets/js/docs.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -5,13 +5,13 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="Discover what’s included in Bootstrap, including our precompiled and source code flavors. Remember, Bootstrap’s JavaScript plugins require jQuery.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Jekyll v3.6.2">
|
||||
<meta name="generator" content="Jekyll v3.7.0">
|
||||
|
||||
<title>Contents · Bootstrap</title>
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
|
||||
<link href="/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
|
||||
|
||||
|
||||
<!-- Documentation extras -->
|
||||
@@ -125,7 +125,7 @@
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0-beta.3.zip">Download</a>
|
||||
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0.zip">Download</a>
|
||||
</header>
|
||||
|
||||
|
||||
@@ -337,11 +337,14 @@
|
||||
Visibility
|
||||
</a></li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.0/extend/icons/">
|
||||
<a class="bd-toc-link" href="/docs/4.0/extend/approach/">
|
||||
Extend
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.0/extend/approach/">
|
||||
Approach
|
||||
</a></li><li>
|
||||
<a href="/docs/4.0/extend/icons/">
|
||||
Icons
|
||||
</a></li></ul>
|
||||
@@ -519,34 +522,6 @@
|
||||
<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-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/docs.min.js"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
|
||||
<script>
|
||||
docsearch({
|
||||
apiKey: '48cb48b22351bc71ea5f12f4d1ede198',
|
||||
indexName: 'bootstrap-v4',
|
||||
inputSelector: '#search-input',
|
||||
handleSelected: function (input, event, suggestion) {
|
||||
var url = suggestion.url;
|
||||
url = suggestion.isLvl1 ? url.split('#')[0]: url;
|
||||
// If it's a title we remove the anchor so it does not jump.
|
||||
window.location.href = url;
|
||||
},
|
||||
transformData: function (hits) {
|
||||
return hits.map(function (hit) {
|
||||
hit.url = hit.url.replace('https://v4-alpha.getbootstrap.com', '/docs/4.0');
|
||||
return hit;
|
||||
});
|
||||
},
|
||||
debug: false // Set debug to true if you want to inspect the dropdown
|
||||
});
|
||||
</script><script>
|
||||
Holder.addTheme('gray', {
|
||||
bg: '#777',
|
||||
fg: 'rgba(255,255,255,.75)',
|
||||
font: 'Helvetica',
|
||||
fontweight: 'normal'
|
||||
});
|
||||
</script>
|
||||
|
||||
<script src="/assets/js/vendor/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script><script src="/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/assets/js/docs.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -5,13 +5,13 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="Download Bootstrap to get the compiled CSS and JavaScript, source code, or include it with your favorite package managers like npm, RubyGems, and more.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Jekyll v3.6.2">
|
||||
<meta name="generator" content="Jekyll v3.7.0">
|
||||
|
||||
<title>Download · Bootstrap</title>
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
|
||||
<link href="/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
|
||||
|
||||
|
||||
<!-- Documentation extras -->
|
||||
@@ -125,7 +125,7 @@
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0-beta.3.zip">Download</a>
|
||||
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0.zip">Download</a>
|
||||
</header>
|
||||
|
||||
|
||||
@@ -337,11 +337,14 @@
|
||||
Visibility
|
||||
</a></li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.0/extend/icons/">
|
||||
<a class="bd-toc-link" href="/docs/4.0/extend/approach/">
|
||||
Extend
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.0/extend/approach/">
|
||||
Approach
|
||||
</a></li><li>
|
||||
<a href="/docs/4.0/extend/icons/">
|
||||
Icons
|
||||
</a></li></ul>
|
||||
@@ -398,7 +401,7 @@
|
||||
|
||||
<h2 id="compiled-css-and-js">Compiled CSS and JS</h2>
|
||||
|
||||
<p>Download ready-to-use compiled code for <strong>Bootstrap v4.0.0-beta.3</strong> to easily drop into your project, which includes:</p>
|
||||
<p>Download ready-to-use compiled code for <strong>Bootstrap v4.0.0</strong> to easily drop into your project, which includes:</p>
|
||||
|
||||
<ul>
|
||||
<li>Compiled and minified CSS bundles (see <a href="/docs/4.0/getting-started/contents/#comparison-of-css-files">CSS files comparison</a>)</li>
|
||||
@@ -407,7 +410,7 @@
|
||||
|
||||
<p>This doesn’t include documentation, source files, or any optional JavaScript dependencies (jQuery and Popper.js).</p>
|
||||
|
||||
<p><a href="https://github.com/twbs/bootstrap/releases/download/v4.0.0-beta.3/bootstrap-4.0.0-beta.3-dist.zip" class="btn btn-bd-primary" onclick="ga('send', 'event', 'Getting started', 'Download', 'Download Bootstrap');">Download</a></p>
|
||||
<p><a href="https://github.com/twbs/bootstrap/releases/download/v4.0.0/bootstrap-4.0.0-dist.zip" class="btn btn-bd-primary" onclick="ga('send', 'event', 'Getting started', 'Download', 'Download Bootstrap');">Download</a></p>
|
||||
|
||||
<h2 id="source-files">Source files</h2>
|
||||
|
||||
@@ -420,14 +423,14 @@
|
||||
|
||||
<p>Should you require <a href="/docs/4.0/getting-started/build-tools/#tooling-setup">build tools</a>, they are included for developing Bootstrap and its docs, but they’re likely unsuitable for your own purposes.</p>
|
||||
|
||||
<p><a href="https://github.com/twbs/bootstrap/archive/v4.0.0-beta.3.zip" class="btn btn-bd-primary" onclick="ga('send', 'event', 'Getting started', 'Download', 'Download source');">Download source</a></p>
|
||||
<p><a href="https://github.com/twbs/bootstrap/archive/v4.0.0.zip" class="btn btn-bd-primary" onclick="ga('send', 'event', 'Getting started', 'Download', 'Download source');">Download source</a></p>
|
||||
|
||||
<h2 id="bootstrapcdn">BootstrapCDN</h2>
|
||||
|
||||
<p>Skip the download with <a href="https://www.bootstrapcdn.com/">BootstrapCDN</a> to deliver cached version of Bootstrap’s compiled CSS and JS to your project.</p>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css"</span> <span class="na">integrity=</span><span class="s">"sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy"</span> <span class="na">crossorigin=</span><span class="s">"anonymous"</span><span class="nt">></span>
|
||||
<span class="nt"><script </span><span class="na">src=</span><span class="s">"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js"</span> <span class="na">integrity=</span><span class="s">"sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4"</span> <span class="na">crossorigin=</span><span class="s">"anonymous"</span><span class="nt">></script></span></code></pre></figure>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"</span> <span class="na">integrity=</span><span class="s">"sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"</span> <span class="na">crossorigin=</span><span class="s">"anonymous"</span><span class="nt">></span>
|
||||
<span class="nt"><script </span><span class="na">src=</span><span class="s">"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"</span> <span class="na">integrity=</span><span class="s">"sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"</span> <span class="na">crossorigin=</span><span class="s">"anonymous"</span><span class="nt">></script></span></code></pre></figure>
|
||||
|
||||
<p>If you’re using our compiled JavaScript, don’t forget to include CDN versions of jQuery and Popper.js before it.</p>
|
||||
|
||||
@@ -442,7 +445,7 @@
|
||||
|
||||
<p>Install Bootstrap in your Node.js powered apps with <a href="https://www.npmjs.com/package/bootstrap">the npm package</a>:</p>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-sh" data-lang="sh">npm install bootstrap@4.0.0-beta.3</code></pre></figure>
|
||||
<figure class="highlight"><pre><code class="language-sh" data-lang="sh">npm <span class="nb">install </span>bootstrap</code></pre></figure>
|
||||
|
||||
<p><code class="highlighter-rouge">require('bootstrap')</code> will load all of Bootstrap’s jQuery plugins onto the jQuery object. The <code class="highlighter-rouge">bootstrap</code> module itself does not export anything. You can manually load Bootstrap’s jQuery plugins individually by loading the <code class="highlighter-rouge">/js/*.js</code> files under the package’s top-level directory.</p>
|
||||
|
||||
@@ -457,11 +460,11 @@
|
||||
|
||||
<p>Install Bootstrap in your Ruby apps using <a href="https://bundler.io/">Bundler</a> (<strong>recommended</strong>) and <a href="https://rubygems.org/">RubyGems</a> by adding the following line to your <a href="https://bundler.io/gemfile.html"><code class="highlighter-rouge">Gemfile</code></a>:</p>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-ruby" data-lang="ruby"><span class="n">gem</span> <span class="s1">'bootstrap'</span><span class="p">,</span> <span class="s1">'~> 4.0.0.beta3'</span></code></pre></figure>
|
||||
<figure class="highlight"><pre><code class="language-ruby" data-lang="ruby"><span class="n">gem</span> <span class="s1">'bootstrap'</span><span class="p">,</span> <span class="s1">'~> 4.0.0'</span></code></pre></figure>
|
||||
|
||||
<p>Alternatively, if you’re not using Bundler, you can install the gem by running this command:</p>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-sh" data-lang="sh">gem install bootstrap <span class="nt">-v</span> 4.0.0.beta3</code></pre></figure>
|
||||
<figure class="highlight"><pre><code class="language-sh" data-lang="sh">gem <span class="nb">install </span>bootstrap <span class="nt">-v</span> 4.0.0</code></pre></figure>
|
||||
|
||||
<p><a href="https://github.com/twbs/bootstrap-rubygem/blob/master/README.md">See the gem’s README</a> for further details.</p>
|
||||
|
||||
@@ -469,17 +472,16 @@
|
||||
|
||||
<p>You can also install and manage Bootstrap’s Sass and JavaScript using <a href="https://getcomposer.org/">Composer</a>:</p>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-sh" data-lang="sh">composer require twbs/bootstrap:4.0.0-beta.3</code></pre></figure>
|
||||
<figure class="highlight"><pre><code class="language-sh" data-lang="sh">composer require twbs/bootstrap:4.0.0</code></pre></figure>
|
||||
|
||||
<h3 id="nuget">NuGet</h3>
|
||||
|
||||
<p>If you develop in .NET, you can also install and manage Bootstrap’s <a href="https://www.nuget.org/packages/bootstrap/">CSS</a> or <a href="https://www.nuget.org/packages/bootstrap.sass/">Sass</a> and JavaScript using <a href="https://www.nuget.org/">NuGet</a>:</p>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-powershell" data-lang="powershell">Install-Package bootstrap -Pre</code></pre></figure>
|
||||
<figure class="highlight"><pre><code class="language-powershell" data-lang="powershell">Install-Package bootstrap</code></pre></figure>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-powershell" data-lang="powershell">Install-Package bootstrap.sass -Pre</code></pre></figure>
|
||||
<figure class="highlight"><pre><code class="language-powershell" data-lang="powershell">Install-Package bootstrap.sass</code></pre></figure>
|
||||
|
||||
<p>The <code class="highlighter-rouge">-Pre</code> is required until Bootstrap v4 has a stable release.</p>
|
||||
|
||||
</main>
|
||||
</div>
|
||||
@@ -488,34 +490,6 @@
|
||||
<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-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/docs.min.js"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
|
||||
<script>
|
||||
docsearch({
|
||||
apiKey: '48cb48b22351bc71ea5f12f4d1ede198',
|
||||
indexName: 'bootstrap-v4',
|
||||
inputSelector: '#search-input',
|
||||
handleSelected: function (input, event, suggestion) {
|
||||
var url = suggestion.url;
|
||||
url = suggestion.isLvl1 ? url.split('#')[0]: url;
|
||||
// If it's a title we remove the anchor so it does not jump.
|
||||
window.location.href = url;
|
||||
},
|
||||
transformData: function (hits) {
|
||||
return hits.map(function (hit) {
|
||||
hit.url = hit.url.replace('https://v4-alpha.getbootstrap.com', '/docs/4.0');
|
||||
return hit;
|
||||
});
|
||||
},
|
||||
debug: false // Set debug to true if you want to inspect the dropdown
|
||||
});
|
||||
</script><script>
|
||||
Holder.addTheme('gray', {
|
||||
bg: '#777',
|
||||
fg: 'rgba(255,255,255,.75)',
|
||||
font: 'Helvetica',
|
||||
fontweight: 'normal'
|
||||
});
|
||||
</script>
|
||||
|
||||
<script src="/assets/js/vendor/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script><script src="/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/assets/js/docs.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -5,13 +5,13 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="Get started with Bootstrap, the world’s most popular framework for building responsive, mobile-first sites, with BootstrapCDN and a template starter page.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Jekyll v3.6.2">
|
||||
<meta name="generator" content="Jekyll v3.7.0">
|
||||
|
||||
<title>Introduction · Bootstrap</title>
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
|
||||
<link href="/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
|
||||
|
||||
|
||||
<!-- Documentation extras -->
|
||||
@@ -125,7 +125,7 @@
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0-beta.3.zip">Download</a>
|
||||
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0.zip">Download</a>
|
||||
</header>
|
||||
|
||||
|
||||
@@ -337,11 +337,14 @@
|
||||
Visibility
|
||||
</a></li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.0/extend/icons/">
|
||||
<a class="bd-toc-link" href="/docs/4.0/extend/approach/">
|
||||
Extend
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.0/extend/approach/">
|
||||
Approach
|
||||
</a></li><li>
|
||||
<a href="/docs/4.0/extend/icons/">
|
||||
Icons
|
||||
</a></li></ul>
|
||||
@@ -409,7 +412,7 @@
|
||||
|
||||
<p>Copy-paste the stylesheet <code class="highlighter-rouge"><link></code> into your <code class="highlighter-rouge"><head></code> before all other stylesheets to load our CSS.</p>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css"</span> <span class="na">integrity=</span><span class="s">"sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy"</span> <span class="na">crossorigin=</span><span class="s">"anonymous"</span><span class="nt">></span></code></pre></figure>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"</span> <span class="na">integrity=</span><span class="s">"sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"</span> <span class="na">crossorigin=</span><span class="s">"anonymous"</span><span class="nt">></span></code></pre></figure>
|
||||
|
||||
<h3 id="js">JS</h3>
|
||||
|
||||
@@ -419,7 +422,7 @@
|
||||
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><script </span><span class="na">src=</span><span class="s">"https://code.jquery.com/jquery-3.2.1.slim.min.js"</span> <span class="na">integrity=</span><span class="s">"sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"</span> <span class="na">crossorigin=</span><span class="s">"anonymous"</span><span class="nt">></script></span>
|
||||
<span class="nt"><script </span><span class="na">src=</span><span class="s">"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"</span> <span class="na">integrity=</span><span class="s">"sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"</span> <span class="na">crossorigin=</span><span class="s">"anonymous"</span><span class="nt">></script></span>
|
||||
<span class="nt"><script </span><span class="na">src=</span><span class="s">"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js"</span> <span class="na">integrity=</span><span class="s">"sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4"</span> <span class="na">crossorigin=</span><span class="s">"anonymous"</span><span class="nt">></script></span></code></pre></figure>
|
||||
<span class="nt"><script </span><span class="na">src=</span><span class="s">"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"</span> <span class="na">integrity=</span><span class="s">"sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"</span> <span class="na">crossorigin=</span><span class="s">"anonymous"</span><span class="nt">></script></span></code></pre></figure>
|
||||
|
||||
<p>Curious which components explicitly require jQuery, our JS, and Popper.js? Click the show components link below. If you’re at all unsure about the general page structure, keep reading for an example page template.</p>
|
||||
|
||||
@@ -452,7 +455,7 @@
|
||||
<span class="nt"><meta</span> <span class="na">name=</span><span class="s">"viewport"</span> <span class="na">content=</span><span class="s">"width=device-width, initial-scale=1, shrink-to-fit=no"</span><span class="nt">></span>
|
||||
|
||||
<span class="c"><!-- Bootstrap CSS --></span>
|
||||
<span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css"</span> <span class="na">integrity=</span><span class="s">"sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy"</span> <span class="na">crossorigin=</span><span class="s">"anonymous"</span><span class="nt">></span>
|
||||
<span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"</span> <span class="na">integrity=</span><span class="s">"sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"</span> <span class="na">crossorigin=</span><span class="s">"anonymous"</span><span class="nt">></span>
|
||||
|
||||
<span class="nt"><title></span>Hello, world!<span class="nt"></title></span>
|
||||
<span class="nt"></head></span>
|
||||
@@ -463,7 +466,7 @@
|
||||
<span class="c"><!-- jQuery first, then Popper.js, then Bootstrap JS --></span>
|
||||
<span class="nt"><script </span><span class="na">src=</span><span class="s">"https://code.jquery.com/jquery-3.2.1.slim.min.js"</span> <span class="na">integrity=</span><span class="s">"sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"</span> <span class="na">crossorigin=</span><span class="s">"anonymous"</span><span class="nt">></script></span>
|
||||
<span class="nt"><script </span><span class="na">src=</span><span class="s">"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"</span> <span class="na">integrity=</span><span class="s">"sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"</span> <span class="na">crossorigin=</span><span class="s">"anonymous"</span><span class="nt">></script></span>
|
||||
<span class="nt"><script </span><span class="na">src=</span><span class="s">"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js"</span> <span class="na">integrity=</span><span class="s">"sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4"</span> <span class="na">crossorigin=</span><span class="s">"anonymous"</span><span class="nt">></script></span>
|
||||
<span class="nt"><script </span><span class="na">src=</span><span class="s">"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"</span> <span class="na">integrity=</span><span class="s">"sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"</span> <span class="na">crossorigin=</span><span class="s">"anonymous"</span><span class="nt">></script></span>
|
||||
<span class="nt"></body></span>
|
||||
<span class="nt"></html></span></code></pre></figure>
|
||||
|
||||
@@ -530,34 +533,6 @@
|
||||
<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-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/docs.min.js"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
|
||||
<script>
|
||||
docsearch({
|
||||
apiKey: '48cb48b22351bc71ea5f12f4d1ede198',
|
||||
indexName: 'bootstrap-v4',
|
||||
inputSelector: '#search-input',
|
||||
handleSelected: function (input, event, suggestion) {
|
||||
var url = suggestion.url;
|
||||
url = suggestion.isLvl1 ? url.split('#')[0]: url;
|
||||
// If it's a title we remove the anchor so it does not jump.
|
||||
window.location.href = url;
|
||||
},
|
||||
transformData: function (hits) {
|
||||
return hits.map(function (hit) {
|
||||
hit.url = hit.url.replace('https://v4-alpha.getbootstrap.com', '/docs/4.0');
|
||||
return hit;
|
||||
});
|
||||
},
|
||||
debug: false // Set debug to true if you want to inspect the dropdown
|
||||
});
|
||||
</script><script>
|
||||
Holder.addTheme('gray', {
|
||||
bg: '#777',
|
||||
fg: 'rgba(255,255,255,.75)',
|
||||
font: 'Helvetica',
|
||||
fontweight: 'normal'
|
||||
});
|
||||
</script>
|
||||
|
||||
<script src="/assets/js/vendor/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script><script src="/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/assets/js/docs.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -5,13 +5,13 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="Bring Bootstrap to life with our optional JavaScript plugins built on jQuery. Learn about each plugin, our data and programmatic API options, and more.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Jekyll v3.6.2">
|
||||
<meta name="generator" content="Jekyll v3.7.0">
|
||||
|
||||
<title>JavaScript · Bootstrap</title>
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
|
||||
<link href="/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
|
||||
|
||||
|
||||
<!-- Documentation extras -->
|
||||
@@ -125,7 +125,7 @@
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0-beta.3.zip">Download</a>
|
||||
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0.zip">Download</a>
|
||||
</header>
|
||||
|
||||
|
||||
@@ -337,11 +337,14 @@
|
||||
Visibility
|
||||
</a></li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.0/extend/icons/">
|
||||
<a class="bd-toc-link" href="/docs/4.0/extend/approach/">
|
||||
Extend
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.0/extend/approach/">
|
||||
Approach
|
||||
</a></li><li>
|
||||
<a href="/docs/4.0/extend/icons/">
|
||||
Icons
|
||||
</a></li></ul>
|
||||
@@ -405,7 +408,7 @@
|
||||
|
||||
<h2 id="dependencies">Dependencies</h2>
|
||||
|
||||
<p>Some plugins and CSS components depend on other plugins. If you include plugins individually, make sure to check for these dependencies in the docs. Also note that <strong>all plugins depend on jQuery</strong> (this means jQuery must be included <strong>before</strong> the plugin files). <a href="https://github.com/twbs/bootstrap/blob/v4.0.0-beta.3/package.json">Consult our <code class="highlighter-rouge">package.json</code></a> to see which versions of jQuery are supported.</p>
|
||||
<p>Some plugins and CSS components depend on other plugins. If you include plugins individually, make sure to check for these dependencies in the docs. Also note that <strong>all plugins depend on jQuery</strong> (this means jQuery must be included <strong>before</strong> the plugin files). <a href="https://github.com/twbs/bootstrap/blob/v4.0.0/package.json">Consult our <code class="highlighter-rouge">package.json</code></a> to see which versions of jQuery are supported.</p>
|
||||
|
||||
<p>Our dropdowns, popovers and tooltips also depend on <a href="https://popper.js.org/">Popper.js</a>.</p>
|
||||
|
||||
@@ -481,7 +484,7 @@
|
||||
|
||||
<p>The version of each of Bootstrap’s jQuery plugins can be accessed via the <code class="highlighter-rouge">VERSION</code> property of the plugin’s constructor. For example, for the tooltip plugin:</p>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-js" data-lang="js"><span class="nx">$</span><span class="p">.</span><span class="nx">fn</span><span class="p">.</span><span class="nx">tooltip</span><span class="p">.</span><span class="nx">Constructor</span><span class="p">.</span><span class="nx">VERSION</span> <span class="c1">// => "4.0.0-beta.3"</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="nx">fn</span><span class="p">.</span><span class="nx">tooltip</span><span class="p">.</span><span class="nx">Constructor</span><span class="p">.</span><span class="nx">VERSION</span> <span class="c1">// => "4.0.0"</span></code></pre></figure>
|
||||
|
||||
<h2 id="no-special-fallbacks-when-javascript-is-disabled">No special fallbacks when JavaScript is disabled</h2>
|
||||
|
||||
@@ -506,34 +509,6 @@
|
||||
<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-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/docs.min.js"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
|
||||
<script>
|
||||
docsearch({
|
||||
apiKey: '48cb48b22351bc71ea5f12f4d1ede198',
|
||||
indexName: 'bootstrap-v4',
|
||||
inputSelector: '#search-input',
|
||||
handleSelected: function (input, event, suggestion) {
|
||||
var url = suggestion.url;
|
||||
url = suggestion.isLvl1 ? url.split('#')[0]: url;
|
||||
// If it's a title we remove the anchor so it does not jump.
|
||||
window.location.href = url;
|
||||
},
|
||||
transformData: function (hits) {
|
||||
return hits.map(function (hit) {
|
||||
hit.url = hit.url.replace('https://v4-alpha.getbootstrap.com', '/docs/4.0');
|
||||
return hit;
|
||||
});
|
||||
},
|
||||
debug: false // Set debug to true if you want to inspect the dropdown
|
||||
});
|
||||
</script><script>
|
||||
Holder.addTheme('gray', {
|
||||
bg: '#777',
|
||||
fg: 'rgba(255,255,255,.75)',
|
||||
font: 'Helvetica',
|
||||
fontweight: 'normal'
|
||||
});
|
||||
</script>
|
||||
|
||||
<script src="/assets/js/vendor/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script><script src="/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/assets/js/docs.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -5,13 +5,13 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="Customize Bootstrap 4 with our new built-in Sass variables for global style preferences for easy theming and component changes.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Jekyll v3.6.2">
|
||||
<meta name="generator" content="Jekyll v3.7.0">
|
||||
|
||||
<title>Theming Bootstrap · Bootstrap</title>
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
|
||||
<link href="/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
|
||||
|
||||
|
||||
<!-- Documentation extras -->
|
||||
@@ -125,7 +125,7 @@
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0-beta.3.zip">Download</a>
|
||||
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0.zip">Download</a>
|
||||
</header>
|
||||
|
||||
|
||||
@@ -337,11 +337,14 @@
|
||||
Visibility
|
||||
</a></li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.0/extend/icons/">
|
||||
<a class="bd-toc-link" href="/docs/4.0/extend/approach/">
|
||||
Extend
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.0/extend/approach/">
|
||||
Approach
|
||||
</a></li><li>
|
||||
<a href="/docs/4.0/extend/icons/">
|
||||
Icons
|
||||
</a></li></ul>
|
||||
@@ -380,8 +383,16 @@
|
||||
<li class="toc-entry toc-h2"><a href="#sass">Sass</a>
|
||||
<ul>
|
||||
<li class="toc-entry toc-h3"><a href="#file-structure">File structure</a></li>
|
||||
<li class="toc-entry toc-h3"><a href="#importing">Importing</a></li>
|
||||
<li class="toc-entry toc-h3"><a href="#variable-defaults">Variable defaults</a></li>
|
||||
<li class="toc-entry toc-h3"><a href="#maps-and-loops">Maps and loops</a></li>
|
||||
<li class="toc-entry toc-h3"><a href="#maps-and-loops">Maps and loops</a>
|
||||
<ul>
|
||||
<li class="toc-entry toc-h4"><a href="#modify-map">Modify map</a></li>
|
||||
<li class="toc-entry toc-h4"><a href="#add-to-map">Add to map</a></li>
|
||||
<li class="toc-entry toc-h4"><a href="#remove-from-map">Remove from map</a></li>
|
||||
<li class="toc-entry toc-h4"><a href="#required-keys">Required keys</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="toc-entry toc-h3"><a href="#functions">Functions</a></li>
|
||||
<li class="toc-entry toc-h3"><a href="#color-contrast">Color contrast</a></li>
|
||||
</ul>
|
||||
@@ -400,6 +411,12 @@
|
||||
<li class="toc-entry toc-h3"><a href="#responsive">Responsive</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="toc-entry toc-h2"><a href="#css-variables">CSS variables</a>
|
||||
<ul>
|
||||
<li class="toc-entry toc-h3"><a href="#available-variables">Available variables</a></li>
|
||||
<li class="toc-entry toc-h3"><a href="#examples">Examples</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -440,29 +457,31 @@
|
||||
├── js
|
||||
└── scss</code></pre></figure>
|
||||
|
||||
<h3 id="importing">Importing</h3>
|
||||
|
||||
<p>In your <code class="highlighter-rouge">custom.scss</code>, you’ll import Bootstrap’s source Sass files. You have two options: include all of Bootstrap, or pick the parts you need. We encourage the latter, though be aware there are some requirements and dependencies across our components. You also will need to include some JavaScript for our plugins.</p>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-scss" data-lang="scss"><span class="c1">// Custom.scss
|
||||
// Option A: Include all of Bootstrap
|
||||
</span>
|
||||
<figure class="highlight"><pre><code class="language-scss" data-lang="scss"><span class="c1">// Custom.scss</span>
|
||||
<span class="c1">// Option A: Include all of Bootstrap</span>
|
||||
|
||||
<span class="k">@import</span> <span class="s2">"node_modules/bootstrap/scss/bootstrap"</span><span class="p">;</span></code></pre></figure>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-scss" data-lang="scss"><span class="c1">// Custom.scss
|
||||
// Option B: Include parts of Bootstrap
|
||||
</span>
|
||||
<span class="c1">// Required
|
||||
</span><span class="k">@import</span> <span class="s2">"node_modules/bootstrap/scss/functions"</span><span class="p">;</span>
|
||||
<figure class="highlight"><pre><code class="language-scss" data-lang="scss"><span class="c1">// Custom.scss</span>
|
||||
<span class="c1">// Option B: Include parts of Bootstrap</span>
|
||||
|
||||
<span class="c1">// Required</span>
|
||||
<span class="k">@import</span> <span class="s2">"node_modules/bootstrap/scss/functions"</span><span class="p">;</span>
|
||||
<span class="k">@import</span> <span class="s2">"node_modules/bootstrap/scss/variables"</span><span class="p">;</span>
|
||||
<span class="k">@import</span> <span class="s2">"node_modules/bootstrap/scss/mixins"</span><span class="p">;</span>
|
||||
|
||||
<span class="c1">// Optional
|
||||
</span><span class="k">@import</span> <span class="s2">"node_modules/bootstrap/scss/reboot"</span><span class="p">;</span>
|
||||
<span class="c1">// Optional</span>
|
||||
<span class="k">@import</span> <span class="s2">"node_modules/bootstrap/scss/reboot"</span><span class="p">;</span>
|
||||
<span class="k">@import</span> <span class="s2">"node_modules/bootstrap/scss/type"</span><span class="p">;</span>
|
||||
<span class="k">@import</span> <span class="s2">"node_modules/bootstrap/scss/images"</span><span class="p">;</span>
|
||||
<span class="k">@import</span> <span class="s2">"node_modules/bootstrap/scss/code"</span><span class="p">;</span>
|
||||
<span class="k">@import</span> <span class="s2">"node_modules/bootstrap/scss/grid"</span><span class="p">;</span></code></pre></figure>
|
||||
|
||||
<p>With that setup in place, you can begin to modify any of the Sass variables and maps in your <code class="highlighter-rouge">custom.scss</code>. You can also start to add parts of Bootstrap under the <code class="highlighter-rouge">// Optional</code> section as needed.</p>
|
||||
<p>With that setup in place, you can begin to modify any of the Sass variables and maps in your <code class="highlighter-rouge">custom.scss</code>. You can also start to add parts of Bootstrap under the <code class="highlighter-rouge">// Optional</code> section as needed. We suggest using the full import stack from our <code class="highlighter-rouge">bootstrap.scss</code> file as your starting point.</p>
|
||||
|
||||
<h3 id="variable-defaults">Variable defaults</h3>
|
||||
|
||||
@@ -472,12 +491,12 @@
|
||||
|
||||
<p>Here’s an example that changes the <code class="highlighter-rouge">background-color</code> and <code class="highlighter-rouge">color</code> for the <code class="highlighter-rouge"><body></code> when importing and compiling Bootstrap via npm:</p>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-scss" data-lang="scss"><span class="c1">// Your variable overrides
|
||||
</span><span class="nv">$body-bg</span><span class="p">:</span> <span class="mh">#000</span><span class="p">;</span>
|
||||
<figure class="highlight"><pre><code class="language-scss" data-lang="scss"><span class="c1">// Your variable overrides</span>
|
||||
<span class="nv">$body-bg</span><span class="p">:</span> <span class="mh">#000</span><span class="p">;</span>
|
||||
<span class="nv">$body-color</span><span class="p">:</span> <span class="mh">#111</span><span class="p">;</span>
|
||||
|
||||
<span class="c1">// Bootstrap and its default variables
|
||||
</span><span class="k">@import</span> <span class="s2">"node_modules/bootstrap/scss/bootstrap"</span><span class="p">;</span></code></pre></figure>
|
||||
<span class="c1">// Bootstrap and its default variables</span>
|
||||
<span class="k">@import</span> <span class="s2">"node_modules/bootstrap/scss/bootstrap"</span><span class="p">;</span></code></pre></figure>
|
||||
|
||||
<p>Repeat as necessary for any variable in Bootstrap, including the global options below.</p>
|
||||
|
||||
@@ -485,19 +504,37 @@
|
||||
|
||||
<p>Bootstrap 4 includes a handful of Sass maps, key value pairs that make it easier to generate families of related CSS. We use Sass maps for our colors, grid breakpoints, and more. Just like Sass variables, all Sass maps include the <code class="highlighter-rouge">!default</code> flag and can be overridden and extended.</p>
|
||||
|
||||
<p>For example, to modify an existing color in our <code class="highlighter-rouge">$theme-colors</code> map, add the following to your custom Sass file:</p>
|
||||
<p>Some of our Sass maps are merged into empty ones by default. This is done to allow easy expansion of a given Sass map, but comes at the cost of making <em>removing</em> items from a map slightly more difficult.</p>
|
||||
|
||||
<h4 id="modify-map">Modify map</h4>
|
||||
|
||||
<p>To modify an existing color in our <code class="highlighter-rouge">$theme-colors</code> map, add the following to your custom Sass file:</p>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-scss" data-lang="scss"><span class="nv">$theme-colors</span><span class="p">:</span> <span class="p">(</span>
|
||||
<span class="s2">"primary"</span><span class="o">:</span> <span class="mh">#0074d9</span><span class="o">,</span>
|
||||
<span class="s2">"danger"</span><span class="o">:</span> <span class="mh">#ff4136</span>
|
||||
<span class="p">);</span></code></pre></figure>
|
||||
|
||||
<h4 id="add-to-map">Add to map</h4>
|
||||
|
||||
<p>To add a new color to <code class="highlighter-rouge">$theme-colors</code>, add the new key and value:</p>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-scss" data-lang="scss"><span class="nv">$theme-colors</span><span class="p">:</span> <span class="p">(</span>
|
||||
<span class="s2">"custom-color"</span><span class="o">:</span> <span class="mh">#900</span>
|
||||
<span class="p">);</span></code></pre></figure>
|
||||
|
||||
<h4 id="remove-from-map">Remove from map</h4>
|
||||
|
||||
<p>To remove colors from <code class="highlighter-rouge">$theme-colors</code>, or any other map, use <code class="highlighter-rouge">map-remove</code>:</p>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-scss" data-lang="scss"><span class="nv">$theme-colors</span><span class="p">:</span> <span class="nf">map-remove</span><span class="p">(</span><span class="nv">$theme-colors</span><span class="o">,</span> <span class="s2">"success"</span><span class="o">,</span> <span class="s2">"info"</span><span class="o">,</span> <span class="s2">"danger"</span><span class="p">);</span></code></pre></figure>
|
||||
|
||||
<h4 id="required-keys">Required keys</h4>
|
||||
|
||||
<p>Bootstrap assumes the presence of some specific keys within Sass maps as we used and extend these ourselves. As you customize the included maps, you may encounter errors where a specific Sass map’s key is being used.</p>
|
||||
|
||||
<p>For example, we use the <code class="highlighter-rouge">primary</code>, <code class="highlighter-rouge">success</code>, and <code class="highlighter-rouge">danger</code> keys from <code class="highlighter-rouge">$theme-colors</code> for links, buttons, and form states. Replacing the values of these keys should present no issues, but removing them may cause Sass compilation issues. In these instances, you’ll need to modify the Sass code that makes use of those values.</p>
|
||||
|
||||
<h3 id="functions">Functions</h3>
|
||||
|
||||
<p>Bootstrap utilizes several Sass functions, but only a subset are applicable to general theming. We’ve included three functions for getting values from the color maps:</p>
|
||||
@@ -554,14 +591,14 @@
|
||||
<p>It can also be used for one-off contrast needs:</p>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-scss" data-lang="scss"><span class="nc">.custom-element</span> <span class="p">{</span>
|
||||
<span class="nl">color</span><span class="p">:</span> <span class="nf">color-yiq</span><span class="p">(</span><span class="mh">#000</span><span class="p">);</span> <span class="c1">// returns `color: #fff`
|
||||
</span><span class="p">}</span></code></pre></figure>
|
||||
<span class="nl">color</span><span class="p">:</span> <span class="nf">color-yiq</span><span class="p">(</span><span class="mh">#000</span><span class="p">);</span> <span class="c1">// returns `color: #fff`</span>
|
||||
<span class="p">}</span></code></pre></figure>
|
||||
|
||||
<p>You can also specify a base color with our color map functions:</p>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-scss" data-lang="scss"><span class="nc">.custom-element</span> <span class="p">{</span>
|
||||
<span class="nl">color</span><span class="p">:</span> <span class="nf">color-yiq</span><span class="p">(</span><span class="nf">theme-color</span><span class="p">(</span><span class="s2">"dark"</span><span class="p">));</span> <span class="c1">// returns `color: #fff`
|
||||
</span><span class="p">}</span></code></pre></figure>
|
||||
<span class="nl">color</span><span class="p">:</span> <span class="nf">color-yiq</span><span class="p">(</span><span class="nf">theme-color</span><span class="p">(</span><span class="s2">"dark"</span><span class="p">));</span> <span class="c1">// returns `color: #fff`</span>
|
||||
<span class="p">}</span></code></pre></figure>
|
||||
|
||||
<h2 id="sass-options">Sass options</h2>
|
||||
|
||||
@@ -606,7 +643,7 @@
|
||||
<tr>
|
||||
<td><code class="highlighter-rouge">$enable-hover-media-query</code></td>
|
||||
<td><code class="highlighter-rouge">true</code> or <code class="highlighter-rouge">false</code> (default)</td>
|
||||
<td>…</td>
|
||||
<td><strong>Deprecated</strong></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code class="highlighter-rouge">$enable-grid-classes</code></td>
|
||||
@@ -706,11 +743,11 @@
|
||||
|
||||
<p>Here’s how you can use these in your Sass:</p>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-scss" data-lang="scss"><span class="c1">// With variable
|
||||
</span><span class="nc">.alpha</span> <span class="p">{</span> <span class="nl">color</span><span class="p">:</span> <span class="nv">$purple</span><span class="p">;</span> <span class="p">}</span>
|
||||
<figure class="highlight"><pre><code class="language-scss" data-lang="scss"><span class="c1">// With variable</span>
|
||||
<span class="nc">.alpha</span> <span class="p">{</span> <span class="nl">color</span><span class="p">:</span> <span class="nv">$purple</span><span class="p">;</span> <span class="p">}</span>
|
||||
|
||||
<span class="c1">// From the Sass map with our `color()` function
|
||||
</span><span class="nc">.beta</span> <span class="p">{</span> <span class="nl">color</span><span class="p">:</span> <span class="nf">color</span><span class="p">(</span><span class="s2">"purple"</span><span class="p">);</span> <span class="p">}</span></code></pre></figure>
|
||||
<span class="c1">// From the Sass map with our `color()` function</span>
|
||||
<span class="nc">.beta</span> <span class="p">{</span> <span class="nl">color</span><span class="p">:</span> <span class="nf">color</span><span class="p">(</span><span class="s2">"purple"</span><span class="p">);</span> <span class="p">}</span></code></pre></figure>
|
||||
|
||||
<p><a href="/docs/4.0/utilities/colors/">Color utility classes</a> are also available for setting <code class="highlighter-rouge">color</code> and <code class="highlighter-rouge">background-color</code>.</p>
|
||||
|
||||
@@ -816,15 +853,15 @@
|
||||
|
||||
<p>Here are two examples of how we loop over the <code class="highlighter-rouge">$theme-colors</code> map to generate modifiers to the <code class="highlighter-rouge">.alert</code> component and all our <code class="highlighter-rouge">.bg-*</code> background utilities.</p>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-scss" data-lang="scss"><span class="c1">// Generate alert modifier classes
|
||||
</span><span class="k">@each</span> <span class="nv">$color</span><span class="o">,</span> <span class="nv">$value</span> <span class="n">in</span> <span class="nv">$theme-colors</span> <span class="p">{</span>
|
||||
<figure class="highlight"><pre><code class="language-scss" data-lang="scss"><span class="c1">// Generate alert modifier classes</span>
|
||||
<span class="k">@each</span> <span class="nv">$color</span><span class="o">,</span> <span class="nv">$value</span> <span class="n">in</span> <span class="nv">$theme-colors</span> <span class="p">{</span>
|
||||
<span class="nc">.alert-</span><span class="si">#{</span><span class="nv">$color</span><span class="si">}</span> <span class="p">{</span>
|
||||
<span class="k">@include</span> <span class="nd">alert-variant</span><span class="p">(</span><span class="nf">theme-color-level</span><span class="p">(</span><span class="nv">$color</span><span class="o">,</span> <span class="m">-10</span><span class="p">)</span><span class="o">,</span> <span class="nf">theme-color-level</span><span class="p">(</span><span class="nv">$color</span><span class="o">,</span> <span class="m">-9</span><span class="p">)</span><span class="o">,</span> <span class="nf">theme-color-level</span><span class="p">(</span><span class="nv">$color</span><span class="o">,</span> <span class="m">6</span><span class="p">));</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">}</span>
|
||||
|
||||
<span class="c1">// Generate `.bg-*` color utilities
|
||||
</span><span class="k">@each</span> <span class="nv">$color</span><span class="o">,</span> <span class="nv">$value</span> <span class="n">in</span> <span class="nv">$theme-colors</span> <span class="p">{</span>
|
||||
<span class="c1">// Generate `.bg-*` color utilities</span>
|
||||
<span class="k">@each</span> <span class="nv">$color</span><span class="o">,</span> <span class="nv">$value</span> <span class="n">in</span> <span class="nv">$theme-colors</span> <span class="p">{</span>
|
||||
<span class="k">@include</span> <span class="nd">bg-variant</span><span class="p">(</span><span class="s1">'.bg-</span><span class="si">#{</span><span class="nv">$color</span><span class="si">}</span><span class="s1">'</span><span class="o">,</span> <span class="nv">$value</span><span class="p">);</span>
|
||||
<span class="p">}</span></code></pre></figure>
|
||||
|
||||
@@ -844,6 +881,69 @@
|
||||
|
||||
<p>Should you need to modify your <code class="highlighter-rouge">$grid-breakpoints</code>, your changes will apply to all the loops iterating over that map.</p>
|
||||
|
||||
<h2 id="css-variables">CSS variables</h2>
|
||||
|
||||
<p>Bootstrap 4 includes around two dozen <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables">CSS custom properties (variables)</a> in it’s compiled CSS. These provide easy access to commonly used values like our theme colors, breakpoints, and primary font stacks when working in your browser’s Inspector, a code sandbox, or general prototyping.</p>
|
||||
|
||||
<h3 id="available-variables">Available variables</h3>
|
||||
|
||||
<p>Here are the variables we include (note that the <code class="highlighter-rouge">:root</code> is required). They’re located in our <code class="highlighter-rouge">_root.scss</code> file.</p>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-css" data-lang="css"><span class="nd">:root</span> <span class="p">{</span>
|
||||
<span class="py">--blue</span><span class="p">:</span> <span class="m">#007bff</span><span class="p">;</span>
|
||||
<span class="py">--indigo</span><span class="p">:</span> <span class="m">#6610f2</span><span class="p">;</span>
|
||||
<span class="py">--purple</span><span class="p">:</span> <span class="m">#6f42c1</span><span class="p">;</span>
|
||||
<span class="py">--pink</span><span class="p">:</span> <span class="m">#e83e8c</span><span class="p">;</span>
|
||||
<span class="py">--red</span><span class="p">:</span> <span class="m">#dc3545</span><span class="p">;</span>
|
||||
<span class="py">--orange</span><span class="p">:</span> <span class="m">#fd7e14</span><span class="p">;</span>
|
||||
<span class="py">--yellow</span><span class="p">:</span> <span class="m">#ffc107</span><span class="p">;</span>
|
||||
<span class="py">--green</span><span class="p">:</span> <span class="m">#28a745</span><span class="p">;</span>
|
||||
<span class="py">--teal</span><span class="p">:</span> <span class="m">#20c997</span><span class="p">;</span>
|
||||
<span class="py">--cyan</span><span class="p">:</span> <span class="m">#17a2b8</span><span class="p">;</span>
|
||||
<span class="py">--white</span><span class="p">:</span> <span class="m">#fff</span><span class="p">;</span>
|
||||
<span class="py">--gray</span><span class="p">:</span> <span class="m">#6c757d</span><span class="p">;</span>
|
||||
<span class="py">--gray-dark</span><span class="p">:</span> <span class="m">#343a40</span><span class="p">;</span>
|
||||
<span class="py">--primary</span><span class="p">:</span> <span class="m">#007bff</span><span class="p">;</span>
|
||||
<span class="py">--secondary</span><span class="p">:</span> <span class="m">#6c757d</span><span class="p">;</span>
|
||||
<span class="py">--success</span><span class="p">:</span> <span class="m">#28a745</span><span class="p">;</span>
|
||||
<span class="py">--info</span><span class="p">:</span> <span class="m">#17a2b8</span><span class="p">;</span>
|
||||
<span class="py">--warning</span><span class="p">:</span> <span class="m">#ffc107</span><span class="p">;</span>
|
||||
<span class="py">--danger</span><span class="p">:</span> <span class="m">#dc3545</span><span class="p">;</span>
|
||||
<span class="py">--light</span><span class="p">:</span> <span class="m">#f8f9fa</span><span class="p">;</span>
|
||||
<span class="py">--dark</span><span class="p">:</span> <span class="m">#343a40</span><span class="p">;</span>
|
||||
<span class="py">--breakpoint-xs</span><span class="p">:</span> <span class="m">0</span><span class="p">;</span>
|
||||
<span class="py">--breakpoint-sm</span><span class="p">:</span> <span class="m">576px</span><span class="p">;</span>
|
||||
<span class="py">--breakpoint-md</span><span class="p">:</span> <span class="m">768px</span><span class="p">;</span>
|
||||
<span class="py">--breakpoint-lg</span><span class="p">:</span> <span class="m">992px</span><span class="p">;</span>
|
||||
<span class="py">--breakpoint-xl</span><span class="p">:</span> <span class="m">1200px</span><span class="p">;</span>
|
||||
<span class="py">--font-family-sans-serif</span><span class="p">:</span> <span class="n">-apple-system</span><span class="p">,</span> <span class="n">BlinkMacSystemFont</span><span class="p">,</span> <span class="s1">"Segoe UI"</span><span class="p">,</span> <span class="n">Roboto</span><span class="p">,</span> <span class="s1">"Helvetica Neue"</span><span class="p">,</span> <span class="n">Arial</span><span class="p">,</span> <span class="nb">sans-serif</span><span class="p">,</span> <span class="s1">"Apple Color Emoji"</span><span class="p">,</span> <span class="s1">"Segoe UI Emoji"</span><span class="p">,</span> <span class="s1">"Segoe UI Symbol"</span><span class="p">;</span>
|
||||
<span class="py">--font-family-monospace</span><span class="p">:</span> <span class="n">SFMono-Regular</span><span class="p">,</span> <span class="n">Menlo</span><span class="p">,</span> <span class="n">Monaco</span><span class="p">,</span> <span class="n">Consolas</span><span class="p">,</span> <span class="s1">"Liberation Mono"</span><span class="p">,</span> <span class="s1">"Courier New"</span><span class="p">,</span> <span class="nb">monospace</span><span class="p">;</span>
|
||||
<span class="p">}</span></code></pre></figure>
|
||||
|
||||
<h3 id="examples">Examples</h3>
|
||||
|
||||
<p>CSS variables offer similar flexibility to Sass’s variables, but without the need for compilation before being served to the browser. For example, here we’re resetting our page’s font and link styles with CSS variables.</p>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-css" data-lang="css"><span class="nt">body</span> <span class="p">{</span>
|
||||
<span class="nl">font</span><span class="p">:</span> <span class="m">1rem</span><span class="p">/</span><span class="m">1.5</span> <span class="n">var</span><span class="p">(</span><span class="n">--font-family-sans-serif</span><span class="p">);</span>
|
||||
<span class="p">}</span>
|
||||
<span class="nt">a</span> <span class="p">{</span>
|
||||
<span class="nl">color</span><span class="p">:</span> <span class="n">var</span><span class="p">(</span><span class="n">--blue</span><span class="p">);</span>
|
||||
<span class="p">}</span></code></pre></figure>
|
||||
|
||||
<p>You can also use our breakpoint variables in your media queries:</p>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-css" data-lang="css"><span class="nc">.content-secondary</span> <span class="p">{</span>
|
||||
<span class="nl">display</span><span class="p">:</span> <span class="nb">none</span><span class="p">;</span>
|
||||
<span class="p">}</span>
|
||||
|
||||
<span class="k">@media</span> <span class="p">(</span><span class="n">min-width</span><span class="p">(</span><span class="n">var</span><span class="p">(</span><span class="n">--breakpoint-sm</span><span class="p">)))</span> <span class="p">{</span>
|
||||
<span class="nc">.content-secondary</span> <span class="p">{</span>
|
||||
<span class="nl">display</span><span class="p">:</span> <span class="nb">block</span><span class="p">;</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">}</span></code></pre></figure>
|
||||
|
||||
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
@@ -851,34 +951,6 @@
|
||||
<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-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/docs.min.js"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
|
||||
<script>
|
||||
docsearch({
|
||||
apiKey: '48cb48b22351bc71ea5f12f4d1ede198',
|
||||
indexName: 'bootstrap-v4',
|
||||
inputSelector: '#search-input',
|
||||
handleSelected: function (input, event, suggestion) {
|
||||
var url = suggestion.url;
|
||||
url = suggestion.isLvl1 ? url.split('#')[0]: url;
|
||||
// If it's a title we remove the anchor so it does not jump.
|
||||
window.location.href = url;
|
||||
},
|
||||
transformData: function (hits) {
|
||||
return hits.map(function (hit) {
|
||||
hit.url = hit.url.replace('https://v4-alpha.getbootstrap.com', '/docs/4.0');
|
||||
return hit;
|
||||
});
|
||||
},
|
||||
debug: false // Set debug to true if you want to inspect the dropdown
|
||||
});
|
||||
</script><script>
|
||||
Holder.addTheme('gray', {
|
||||
bg: '#777',
|
||||
fg: 'rgba(255,255,255,.75)',
|
||||
font: 'Helvetica',
|
||||
fontweight: 'normal'
|
||||
});
|
||||
</script>
|
||||
|
||||
<script src="/assets/js/vendor/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script><script src="/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/assets/js/docs.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -5,13 +5,13 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="Learn how to include Bootstrap in your project using Webpack 3.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Jekyll v3.6.2">
|
||||
<meta name="generator" content="Jekyll v3.7.0">
|
||||
|
||||
<title>Webpack · Bootstrap</title>
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
|
||||
<link href="/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
|
||||
|
||||
|
||||
<!-- Documentation extras -->
|
||||
@@ -125,7 +125,7 @@
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0-beta.3.zip">Download</a>
|
||||
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0.zip">Download</a>
|
||||
</header>
|
||||
|
||||
|
||||
@@ -337,11 +337,14 @@
|
||||
Visibility
|
||||
</a></li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.0/extend/icons/">
|
||||
<a class="bd-toc-link" href="/docs/4.0/extend/approach/">
|
||||
Extend
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.0/extend/approach/">
|
||||
Approach
|
||||
</a></li><li>
|
||||
<a href="/docs/4.0/extend/icons/">
|
||||
Icons
|
||||
</a></li></ul>
|
||||
@@ -480,34 +483,6 @@ to your <code class="highlighter-rouge">package.json</code> using <code class="h
|
||||
<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-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/docs.min.js"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
|
||||
<script>
|
||||
docsearch({
|
||||
apiKey: '48cb48b22351bc71ea5f12f4d1ede198',
|
||||
indexName: 'bootstrap-v4',
|
||||
inputSelector: '#search-input',
|
||||
handleSelected: function (input, event, suggestion) {
|
||||
var url = suggestion.url;
|
||||
url = suggestion.isLvl1 ? url.split('#')[0]: url;
|
||||
// If it's a title we remove the anchor so it does not jump.
|
||||
window.location.href = url;
|
||||
},
|
||||
transformData: function (hits) {
|
||||
return hits.map(function (hit) {
|
||||
hit.url = hit.url.replace('https://v4-alpha.getbootstrap.com', '/docs/4.0');
|
||||
return hit;
|
||||
});
|
||||
},
|
||||
debug: false // Set debug to true if you want to inspect the dropdown
|
||||
});
|
||||
</script><script>
|
||||
Holder.addTheme('gray', {
|
||||
bg: '#777',
|
||||
fg: 'rgba(255,255,255,.75)',
|
||||
font: 'Helvetica',
|
||||
fontweight: 'normal'
|
||||
});
|
||||
</script>
|
||||
|
||||
<script src="/assets/js/vendor/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script><script src="/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/assets/js/docs.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -5,13 +5,13 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="Use our powerful mobile-first flexbox grid to build layouts of all shapes and sizes thanks to a twelve column system, five default responsive tiers, Sass variables and mixins, and dozens of predefined classes.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Jekyll v3.6.2">
|
||||
<meta name="generator" content="Jekyll v3.7.0">
|
||||
|
||||
<title>Grid system · Bootstrap</title>
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
|
||||
<link href="/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
|
||||
|
||||
|
||||
<!-- Documentation extras -->
|
||||
@@ -125,7 +125,7 @@
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0-beta.3.zip">Download</a>
|
||||
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0.zip">Download</a>
|
||||
</header>
|
||||
|
||||
|
||||
@@ -337,11 +337,14 @@
|
||||
Visibility
|
||||
</a></li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.0/extend/icons/">
|
||||
<a class="bd-toc-link" href="/docs/4.0/extend/approach/">
|
||||
Extend
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.0/extend/approach/">
|
||||
Approach
|
||||
</a></li><li>
|
||||
<a href="/docs/4.0/extend/icons/">
|
||||
Icons
|
||||
</a></li></ul>
|
||||
@@ -819,7 +822,7 @@
|
||||
|
||||
<h3 id="stacked-to-horizontal">Stacked to horizontal</h3>
|
||||
|
||||
<p>Using a single set of <code class="highlighter-rouge">.col-sm-*</code> classes, you can create a basic grid system that starts out stacked on extra small devices before becoming horizontal on desktop (medium) devices.</p>
|
||||
<p>Using a single set of <code class="highlighter-rouge">.col-sm-*</code> classes, you can create a basic grid system that starts out stacked before becoming horizontal with at the small breakpoint (<code class="highlighter-rouge">sm</code>).</p>
|
||||
|
||||
<div class="bd-example-row">
|
||||
|
||||
@@ -1248,15 +1251,15 @@
|
||||
|
||||
</div>
|
||||
|
||||
<p>There’s also a responsive <code class="highlighter-rouge">.order-first</code> class that quickly changes the order of one element by applying <code class="highlighter-rouge">order: -1</code>. This class can also be intermixed with the numbered <code class="highlighter-rouge">.order-*</code> classes as needed.</p>
|
||||
<p>There are also responsive <code class="highlighter-rouge">.order-first</code> and <code class="highlighter-rouge">.order-last</code> classes that change the <code class="highlighter-rouge">order</code> of an element by applying <code class="highlighter-rouge">order: -1</code> and <code class="highlighter-rouge">order: 13</code> (<code class="highlighter-rouge">order: $columns + 1</code>), respectively. These classes can also be intermixed with the numbered <code class="highlighter-rouge">.order-*</code> classes as needed.</p>
|
||||
|
||||
<div class="bd-example-row">
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
First, but unordered
|
||||
<div class="col order-last">
|
||||
First, but last
|
||||
</div>
|
||||
<div class="col">
|
||||
Second, but unordered
|
||||
@@ -1268,8 +1271,8 @@
|
||||
</div>
|
||||
</div><div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"container"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"row"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"col"</span><span class="nt">></span>
|
||||
First, but unordered
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"col order-last"</span><span class="nt">></span>
|
||||
First, but last
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"col"</span><span class="nt">></span>
|
||||
Second, but unordered
|
||||
@@ -1449,15 +1452,15 @@
|
||||
|
||||
<p>Mixins are used in conjunction with the grid variables to generate semantic CSS for individual grid columns.</p>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-scss" data-lang="scss"><span class="c1">// Creates a wrapper for a series of columns
|
||||
</span><span class="k">@include</span> <span class="nd">make-row</span><span class="p">();</span>
|
||||
<figure class="highlight"><pre><code class="language-scss" data-lang="scss"><span class="c1">// Creates a wrapper for a series of columns</span>
|
||||
<span class="k">@include</span> <span class="nd">make-row</span><span class="p">();</span>
|
||||
|
||||
<span class="c1">// Make the element grid-ready (applying everything but the width)
|
||||
</span><span class="k">@include</span> <span class="nd">make-col-ready</span><span class="p">();</span>
|
||||
<span class="c1">// Make the element grid-ready (applying everything but the width)</span>
|
||||
<span class="k">@include</span> <span class="nd">make-col-ready</span><span class="p">();</span>
|
||||
<span class="k">@include</span> <span class="nd">make-col</span><span class="p">(</span><span class="nv">$size</span><span class="o">,</span> <span class="nv">$columns</span><span class="o">:</span> <span class="nv">$grid-columns</span><span class="p">);</span>
|
||||
|
||||
<span class="c1">// Get fancy by offsetting, or changing the sort order
|
||||
</span><span class="k">@include</span> <span class="nd">make-col-offset</span><span class="p">(</span><span class="nv">$size</span><span class="o">,</span> <span class="nv">$columns</span><span class="o">:</span> <span class="nv">$grid-columns</span><span class="p">);</span></code></pre></figure>
|
||||
<span class="c1">// Get fancy by offsetting, or changing the sort order</span>
|
||||
<span class="k">@include</span> <span class="nd">make-col-offset</span><span class="p">(</span><span class="nv">$size</span><span class="o">,</span> <span class="nv">$columns</span><span class="o">:</span> <span class="nv">$grid-columns</span><span class="p">);</span></code></pre></figure>
|
||||
|
||||
<h3 id="example-usage">Example usage</h3>
|
||||
|
||||
@@ -1546,34 +1549,6 @@
|
||||
<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-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/docs.min.js"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
|
||||
<script>
|
||||
docsearch({
|
||||
apiKey: '48cb48b22351bc71ea5f12f4d1ede198',
|
||||
indexName: 'bootstrap-v4',
|
||||
inputSelector: '#search-input',
|
||||
handleSelected: function (input, event, suggestion) {
|
||||
var url = suggestion.url;
|
||||
url = suggestion.isLvl1 ? url.split('#')[0]: url;
|
||||
// If it's a title we remove the anchor so it does not jump.
|
||||
window.location.href = url;
|
||||
},
|
||||
transformData: function (hits) {
|
||||
return hits.map(function (hit) {
|
||||
hit.url = hit.url.replace('https://v4-alpha.getbootstrap.com', '/docs/4.0');
|
||||
return hit;
|
||||
});
|
||||
},
|
||||
debug: false // Set debug to true if you want to inspect the dropdown
|
||||
});
|
||||
</script><script>
|
||||
Holder.addTheme('gray', {
|
||||
bg: '#777',
|
||||
fg: 'rgba(255,255,255,.75)',
|
||||
font: 'Helvetica',
|
||||
fontweight: 'normal'
|
||||
});
|
||||
</script>
|
||||
|
||||
<script src="/assets/js/vendor/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script><script src="/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/assets/js/docs.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -5,13 +5,13 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="Documentation and examples for Bootstrap’s media object to construct highly repetitive components like blog comments, tweets, and the like.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Jekyll v3.6.2">
|
||||
<meta name="generator" content="Jekyll v3.7.0">
|
||||
|
||||
<title>Media object · Bootstrap</title>
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
|
||||
<link href="/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
|
||||
|
||||
|
||||
<!-- Documentation extras -->
|
||||
@@ -125,7 +125,7 @@
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0-beta.3.zip">Download</a>
|
||||
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0.zip">Download</a>
|
||||
</header>
|
||||
|
||||
|
||||
@@ -337,11 +337,14 @@
|
||||
Visibility
|
||||
</a></li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.0/extend/icons/">
|
||||
<a class="bd-toc-link" href="/docs/4.0/extend/approach/">
|
||||
Extend
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.0/extend/approach/">
|
||||
Approach
|
||||
</a></li><li>
|
||||
<a href="/docs/4.0/extend/icons/">
|
||||
Icons
|
||||
</a></li></ul>
|
||||
@@ -605,34 +608,6 @@
|
||||
<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-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/docs.min.js"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
|
||||
<script>
|
||||
docsearch({
|
||||
apiKey: '48cb48b22351bc71ea5f12f4d1ede198',
|
||||
indexName: 'bootstrap-v4',
|
||||
inputSelector: '#search-input',
|
||||
handleSelected: function (input, event, suggestion) {
|
||||
var url = suggestion.url;
|
||||
url = suggestion.isLvl1 ? url.split('#')[0]: url;
|
||||
// If it's a title we remove the anchor so it does not jump.
|
||||
window.location.href = url;
|
||||
},
|
||||
transformData: function (hits) {
|
||||
return hits.map(function (hit) {
|
||||
hit.url = hit.url.replace('https://v4-alpha.getbootstrap.com', '/docs/4.0');
|
||||
return hit;
|
||||
});
|
||||
},
|
||||
debug: false // Set debug to true if you want to inspect the dropdown
|
||||
});
|
||||
</script><script>
|
||||
Holder.addTheme('gray', {
|
||||
bg: '#777',
|
||||
fg: 'rgba(255,255,255,.75)',
|
||||
font: 'Helvetica',
|
||||
fontweight: 'normal'
|
||||
});
|
||||
</script>
|
||||
|
||||
<script src="/assets/js/vendor/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script><script src="/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/assets/js/docs.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -5,13 +5,13 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="Components and options for laying out your Bootstrap project, including wrapping containers, a powerful grid system, a flexible media object, and responsive utility classes.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Jekyll v3.6.2">
|
||||
<meta name="generator" content="Jekyll v3.7.0">
|
||||
|
||||
<title>Overview · Bootstrap</title>
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
|
||||
<link href="/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
|
||||
|
||||
|
||||
<!-- Documentation extras -->
|
||||
@@ -125,7 +125,7 @@
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0-beta.3.zip">Download</a>
|
||||
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0.zip">Download</a>
|
||||
</header>
|
||||
|
||||
|
||||
@@ -337,11 +337,14 @@
|
||||
Visibility
|
||||
</a></li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.0/extend/icons/">
|
||||
<a class="bd-toc-link" href="/docs/4.0/extend/approach/">
|
||||
Extend
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.0/extend/approach/">
|
||||
Approach
|
||||
</a></li><li>
|
||||
<a href="/docs/4.0/extend/icons/">
|
||||
Icons
|
||||
</a></li></ul>
|
||||
@@ -426,20 +429,20 @@
|
||||
|
||||
<p>Bootstrap primarily uses the following media query ranges—or breakpoints—in our source Sass files for our layout, grid system, and components.</p>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-scss" data-lang="scss"><span class="c1">// Extra small devices (portrait phones, less than 576px)
|
||||
// No media query since this is the default in Bootstrap
|
||||
</span>
|
||||
<span class="c1">// Small devices (landscape phones, 576px and up)
|
||||
</span><span class="k">@media</span> <span class="p">(</span><span class="n">min-width</span><span class="o">:</span> <span class="m">576px</span><span class="p">)</span> <span class="p">{</span> <span class="nc">...</span> <span class="p">}</span>
|
||||
<figure class="highlight"><pre><code class="language-scss" data-lang="scss"><span class="c1">// Extra small devices (portrait phones, less than 576px)</span>
|
||||
<span class="c1">// No media query since this is the default in Bootstrap</span>
|
||||
|
||||
<span class="c1">// Medium devices (tablets, 768px and up)
|
||||
</span><span class="k">@media</span> <span class="p">(</span><span class="n">min-width</span><span class="o">:</span> <span class="m">768px</span><span class="p">)</span> <span class="p">{</span> <span class="nc">...</span> <span class="p">}</span>
|
||||
<span class="c1">// Small devices (landscape phones, 576px and up)</span>
|
||||
<span class="k">@media</span> <span class="p">(</span><span class="n">min-width</span><span class="o">:</span> <span class="m">576px</span><span class="p">)</span> <span class="p">{</span> <span class="nc">...</span> <span class="p">}</span>
|
||||
|
||||
<span class="c1">// Large devices (desktops, 992px and up)
|
||||
</span><span class="k">@media</span> <span class="p">(</span><span class="n">min-width</span><span class="o">:</span> <span class="m">992px</span><span class="p">)</span> <span class="p">{</span> <span class="nc">...</span> <span class="p">}</span>
|
||||
<span class="c1">// Medium devices (tablets, 768px and up)</span>
|
||||
<span class="k">@media</span> <span class="p">(</span><span class="n">min-width</span><span class="o">:</span> <span class="m">768px</span><span class="p">)</span> <span class="p">{</span> <span class="nc">...</span> <span class="p">}</span>
|
||||
|
||||
<span class="c1">// Extra large devices (large desktops, 1200px and up)
|
||||
</span><span class="k">@media</span> <span class="p">(</span><span class="n">min-width</span><span class="o">:</span> <span class="m">1200px</span><span class="p">)</span> <span class="p">{</span> <span class="nc">...</span> <span class="p">}</span></code></pre></figure>
|
||||
<span class="c1">// Large devices (desktops, 992px and up)</span>
|
||||
<span class="k">@media</span> <span class="p">(</span><span class="n">min-width</span><span class="o">:</span> <span class="m">992px</span><span class="p">)</span> <span class="p">{</span> <span class="nc">...</span> <span class="p">}</span>
|
||||
|
||||
<span class="c1">// Extra large devices (large desktops, 1200px and up)</span>
|
||||
<span class="k">@media</span> <span class="p">(</span><span class="n">min-width</span><span class="o">:</span> <span class="m">1200px</span><span class="p">)</span> <span class="p">{</span> <span class="nc">...</span> <span class="p">}</span></code></pre></figure>
|
||||
|
||||
<p>Since we write our source CSS in Sass, all our media queries are available via Sass mixins:</p>
|
||||
|
||||
@@ -449,8 +452,8 @@
|
||||
<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="nc">...</span> <span class="p">}</span>
|
||||
<span class="k">@include</span> <span class="nd">media-breakpoint-up</span><span class="p">(</span><span class="n">xl</span><span class="p">)</span> <span class="p">{</span> <span class="nc">...</span> <span class="p">}</span>
|
||||
|
||||
<span class="c1">// Example usage:
|
||||
</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="c1">// Example usage:</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="nc">.some-class</span> <span class="p">{</span>
|
||||
<span class="nl">display</span><span class="p">:</span> <span class="nb">block</span><span class="p">;</span>
|
||||
<span class="p">}</span>
|
||||
@@ -458,20 +461,20 @@
|
||||
|
||||
<p>We occasionally use media queries that go in the other direction (the given screen size <em>or smaller</em>):</p>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-scss" data-lang="scss"><span class="c1">// Extra small devices (portrait phones, less than 576px)
|
||||
</span><span class="k">@media</span> <span class="p">(</span><span class="n">max-width</span><span class="o">:</span> <span class="m">575</span><span class="mi">.99px</span><span class="p">)</span> <span class="p">{</span> <span class="nc">...</span> <span class="p">}</span>
|
||||
<figure class="highlight"><pre><code class="language-scss" data-lang="scss"><span class="c1">// Extra small devices (portrait phones, less than 576px)</span>
|
||||
<span class="k">@media</span> <span class="p">(</span><span class="n">max-width</span><span class="o">:</span> <span class="m">575</span><span class="mi">.98px</span><span class="p">)</span> <span class="p">{</span> <span class="nc">...</span> <span class="p">}</span>
|
||||
|
||||
<span class="c1">// Small devices (landscape phones, less than 768px)
|
||||
</span><span class="k">@media</span> <span class="p">(</span><span class="n">max-width</span><span class="o">:</span> <span class="m">767</span><span class="mi">.99px</span><span class="p">)</span> <span class="p">{</span> <span class="nc">...</span> <span class="p">}</span>
|
||||
<span class="c1">// Small devices (landscape phones, less than 768px)</span>
|
||||
<span class="k">@media</span> <span class="p">(</span><span class="n">max-width</span><span class="o">:</span> <span class="m">767</span><span class="mi">.98px</span><span class="p">)</span> <span class="p">{</span> <span class="nc">...</span> <span class="p">}</span>
|
||||
|
||||
<span class="c1">// Medium devices (tablets, less than 992px)
|
||||
</span><span class="k">@media</span> <span class="p">(</span><span class="n">max-width</span><span class="o">:</span> <span class="m">991</span><span class="mi">.99px</span><span class="p">)</span> <span class="p">{</span> <span class="nc">...</span> <span class="p">}</span>
|
||||
<span class="c1">// Medium devices (tablets, less than 992px)</span>
|
||||
<span class="k">@media</span> <span class="p">(</span><span class="n">max-width</span><span class="o">:</span> <span class="m">991</span><span class="mi">.98px</span><span class="p">)</span> <span class="p">{</span> <span class="nc">...</span> <span class="p">}</span>
|
||||
|
||||
<span class="c1">// Large devices (desktops, less than 1200px)
|
||||
</span><span class="k">@media</span> <span class="p">(</span><span class="n">max-width</span><span class="o">:</span> <span class="m">1199</span><span class="mi">.99px</span><span class="p">)</span> <span class="p">{</span> <span class="nc">...</span> <span class="p">}</span>
|
||||
<span class="c1">// Large devices (desktops, less than 1200px)</span>
|
||||
<span class="k">@media</span> <span class="p">(</span><span class="n">max-width</span><span class="o">:</span> <span class="m">1199</span><span class="mi">.98px</span><span class="p">)</span> <span class="p">{</span> <span class="nc">...</span> <span class="p">}</span>
|
||||
|
||||
<span class="c1">// Extra large devices (large desktops)
|
||||
</span><span class="o">//</span> <span class="nt">No</span> <span class="nt">media</span> <span class="nt">query</span> <span class="nt">since</span> <span class="nt">the</span> <span class="nt">extra-large</span> <span class="nt">breakpoint</span> <span class="nt">has</span> <span class="nt">no</span> <span class="nt">upper</span> <span class="nt">bound</span> <span class="nt">on</span> <span class="nt">its</span> <span class="nt">width</span></code></pre></figure>
|
||||
<span class="c1">// Extra large devices (large desktops)</span>
|
||||
<span class="c1">// No media query since the extra-large breakpoint has no upper bound on its width</span></code></pre></figure>
|
||||
|
||||
<div class="bd-callout bd-callout-info">
|
||||
<p>Note that since browsers do not currently support <a href="https://www.w3.org/TR/mediaqueries-4/#range-context">range context queries</a>, we work around the limitations of <a href="https://www.w3.org/TR/mediaqueries-4/#mq-min-max"><code class="highlighter-rouge">min-</code> and <code class="highlighter-rouge">max-</code> prefixes</a> and viewports with fractional widths (which can occur under certain conditions on high-dpi devices, for instance) by using values with higher precision for these comparisons.</p>
|
||||
@@ -486,20 +489,20 @@
|
||||
|
||||
<p>There are also media queries and mixins for targeting a single segment of screen sizes using the minimum and maximum breakpoint widths.</p>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-scss" data-lang="scss"><span class="c1">// Extra small devices (portrait phones, less than 576px)
|
||||
</span><span class="k">@media</span> <span class="p">(</span><span class="n">max-width</span><span class="o">:</span> <span class="m">575</span><span class="mi">.99px</span><span class="p">)</span> <span class="p">{</span> <span class="nc">...</span> <span class="p">}</span>
|
||||
<figure class="highlight"><pre><code class="language-scss" data-lang="scss"><span class="c1">// Extra small devices (portrait phones, less than 576px)</span>
|
||||
<span class="k">@media</span> <span class="p">(</span><span class="n">max-width</span><span class="o">:</span> <span class="m">575</span><span class="mi">.98px</span><span class="p">)</span> <span class="p">{</span> <span class="nc">...</span> <span class="p">}</span>
|
||||
|
||||
<span class="c1">// Small devices (landscape phones, 576px and up)
|
||||
</span><span class="k">@media</span> <span class="p">(</span><span class="n">min-width</span><span class="o">:</span> <span class="m">576px</span><span class="p">)</span> <span class="nf">and</span> <span class="p">(</span><span class="n">max-width</span><span class="o">:</span> <span class="m">767</span><span class="mi">.99px</span><span class="p">)</span> <span class="p">{</span> <span class="nc">...</span> <span class="p">}</span>
|
||||
<span class="c1">// Small devices (landscape phones, 576px and up)</span>
|
||||
<span class="k">@media</span> <span class="p">(</span><span class="n">min-width</span><span class="o">:</span> <span class="m">576px</span><span class="p">)</span> <span class="nf">and</span> <span class="p">(</span><span class="n">max-width</span><span class="o">:</span> <span class="m">767</span><span class="mi">.98px</span><span class="p">)</span> <span class="p">{</span> <span class="nc">...</span> <span class="p">}</span>
|
||||
|
||||
<span class="c1">// Medium devices (tablets, 768px and up)
|
||||
</span><span class="k">@media</span> <span class="p">(</span><span class="n">min-width</span><span class="o">:</span> <span class="m">768px</span><span class="p">)</span> <span class="nf">and</span> <span class="p">(</span><span class="n">max-width</span><span class="o">:</span> <span class="m">991</span><span class="mi">.99px</span><span class="p">)</span> <span class="p">{</span> <span class="nc">...</span> <span class="p">}</span>
|
||||
<span class="c1">// Medium devices (tablets, 768px and up)</span>
|
||||
<span class="k">@media</span> <span class="p">(</span><span class="n">min-width</span><span class="o">:</span> <span class="m">768px</span><span class="p">)</span> <span class="nf">and</span> <span class="p">(</span><span class="n">max-width</span><span class="o">:</span> <span class="m">991</span><span class="mi">.98px</span><span class="p">)</span> <span class="p">{</span> <span class="nc">...</span> <span class="p">}</span>
|
||||
|
||||
<span class="c1">// Large devices (desktops, 992px and up)
|
||||
</span><span class="k">@media</span> <span class="p">(</span><span class="n">min-width</span><span class="o">:</span> <span class="m">992px</span><span class="p">)</span> <span class="nf">and</span> <span class="p">(</span><span class="n">max-width</span><span class="o">:</span> <span class="m">1199</span><span class="mi">.99px</span><span class="p">)</span> <span class="p">{</span> <span class="nc">...</span> <span class="p">}</span>
|
||||
<span class="c1">// Large devices (desktops, 992px and up)</span>
|
||||
<span class="k">@media</span> <span class="p">(</span><span class="n">min-width</span><span class="o">:</span> <span class="m">992px</span><span class="p">)</span> <span class="nf">and</span> <span class="p">(</span><span class="n">max-width</span><span class="o">:</span> <span class="m">1199</span><span class="mi">.98px</span><span class="p">)</span> <span class="p">{</span> <span class="nc">...</span> <span class="p">}</span>
|
||||
|
||||
<span class="c1">// Extra large devices (large desktops, 1200px and up)
|
||||
</span><span class="k">@media</span> <span class="p">(</span><span class="n">min-width</span><span class="o">:</span> <span class="m">1200px</span><span class="p">)</span> <span class="p">{</span> <span class="nc">...</span> <span class="p">}</span></code></pre></figure>
|
||||
<span class="c1">// Extra large devices (large desktops, 1200px and up)</span>
|
||||
<span class="k">@media</span> <span class="p">(</span><span class="n">min-width</span><span class="o">:</span> <span class="m">1200px</span><span class="p">)</span> <span class="p">{</span> <span class="nc">...</span> <span class="p">}</span></code></pre></figure>
|
||||
|
||||
<p>These media queries are also available via Sass mixins:</p>
|
||||
|
||||
@@ -511,9 +514,9 @@
|
||||
|
||||
<p>Similarly, media queries may span multiple breakpoint widths:</p>
|
||||
|
||||
<figure class="highlight"><pre><code class="language-scss" data-lang="scss"><span class="c1">// Example
|
||||
// Apply styles starting from medium devices and up to extra large devices
|
||||
</span><span class="k">@media</span> <span class="p">(</span><span class="n">min-width</span><span class="o">:</span> <span class="m">768px</span><span class="p">)</span> <span class="nf">and</span> <span class="p">(</span><span class="n">max-width</span><span class="o">:</span> <span class="m">1199</span><span class="mi">.99px</span><span class="p">)</span> <span class="p">{</span> <span class="nc">...</span> <span class="p">}</span></code></pre></figure>
|
||||
<figure class="highlight"><pre><code class="language-scss" data-lang="scss"><span class="c1">// Example</span>
|
||||
<span class="c1">// Apply styles starting from medium devices and up to extra large devices</span>
|
||||
<span class="k">@media</span> <span class="p">(</span><span class="n">min-width</span><span class="o">:</span> <span class="m">768px</span><span class="p">)</span> <span class="nf">and</span> <span class="p">(</span><span class="n">max-width</span><span class="o">:</span> <span class="m">1199</span><span class="mi">.98px</span><span class="p">)</span> <span class="p">{</span> <span class="nc">...</span> <span class="p">}</span></code></pre></figure>
|
||||
|
||||
<p>The Sass mixin for targeting the same screen size range would be:</p>
|
||||
|
||||
@@ -527,14 +530,13 @@
|
||||
|
||||
<p>We don’t encourage customization of these individual values; should you change one, you likely need to change them all.</p>
|
||||
|
||||
<div class="language-scss highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nv">$zindex-dropdown</span><span class="p">:</span> <span class="m">1000</span> <span class="o">!</span><span class="nb">default</span><span class="p">;</span>
|
||||
<figure class="highlight"><pre><code class="language-scss" data-lang="scss"><span class="nv">$zindex-dropdown</span><span class="p">:</span> <span class="m">1000</span> <span class="o">!</span><span class="nb">default</span><span class="p">;</span>
|
||||
<span class="nv">$zindex-sticky</span><span class="p">:</span> <span class="m">1020</span> <span class="o">!</span><span class="nb">default</span><span class="p">;</span>
|
||||
<span class="nv">$zindex-fixed</span><span class="p">:</span> <span class="m">1030</span> <span class="o">!</span><span class="nb">default</span><span class="p">;</span>
|
||||
<span class="nv">$zindex-modal-backdrop</span><span class="p">:</span> <span class="m">1040</span> <span class="o">!</span><span class="nb">default</span><span class="p">;</span>
|
||||
<span class="nv">$zindex-modal</span><span class="p">:</span> <span class="m">1050</span> <span class="o">!</span><span class="nb">default</span><span class="p">;</span>
|
||||
<span class="nv">$zindex-popover</span><span class="p">:</span> <span class="m">1060</span> <span class="o">!</span><span class="nb">default</span><span class="p">;</span>
|
||||
<span class="nv">$zindex-tooltip</span><span class="p">:</span> <span class="m">1070</span> <span class="o">!</span><span class="nb">default</span><span class="p">;</span>
|
||||
</code></pre></div></div>
|
||||
<span class="nv">$zindex-tooltip</span><span class="p">:</span> <span class="m">1070</span> <span class="o">!</span><span class="nb">default</span><span class="p">;</span></code></pre></figure>
|
||||
|
||||
<p>To handle overlapping borders within components (e.g., buttons and inputs in input groups), we use low single digit <code class="highlighter-rouge">z-index</code> values of <code class="highlighter-rouge">1</code>, <code class="highlighter-rouge">2</code>, and <code class="highlighter-rouge">3</code> for default, hover, and active states. On hover/focus/active, we bring a particular element to the forefront with a higher <code class="highlighter-rouge">z-index</code> value to show their border over the sibling elements.</p>
|
||||
|
||||
@@ -545,34 +547,6 @@
|
||||
<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-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/docs.min.js"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
|
||||
<script>
|
||||
docsearch({
|
||||
apiKey: '48cb48b22351bc71ea5f12f4d1ede198',
|
||||
indexName: 'bootstrap-v4',
|
||||
inputSelector: '#search-input',
|
||||
handleSelected: function (input, event, suggestion) {
|
||||
var url = suggestion.url;
|
||||
url = suggestion.isLvl1 ? url.split('#')[0]: url;
|
||||
// If it's a title we remove the anchor so it does not jump.
|
||||
window.location.href = url;
|
||||
},
|
||||
transformData: function (hits) {
|
||||
return hits.map(function (hit) {
|
||||
hit.url = hit.url.replace('https://v4-alpha.getbootstrap.com', '/docs/4.0');
|
||||
return hit;
|
||||
});
|
||||
},
|
||||
debug: false // Set debug to true if you want to inspect the dropdown
|
||||
});
|
||||
</script><script>
|
||||
Holder.addTheme('gray', {
|
||||
bg: '#777',
|
||||
fg: 'rgba(255,255,255,.75)',
|
||||
font: 'Helvetica',
|
||||
fontweight: 'normal'
|
||||
});
|
||||
</script>
|
||||
|
||||
<script src="/assets/js/vendor/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script><script src="/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/assets/js/docs.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -5,13 +5,13 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="For faster mobile-friendly and responsive development, Bootstrap includes dozens of utility classes for showing, hiding, aligning, and spacing content.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Jekyll v3.6.2">
|
||||
<meta name="generator" content="Jekyll v3.7.0">
|
||||
|
||||
<title>Utilities for layout · Bootstrap</title>
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
|
||||
<link href="/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
|
||||
|
||||
|
||||
<!-- Documentation extras -->
|
||||
@@ -125,7 +125,7 @@
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0-beta.3.zip">Download</a>
|
||||
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0.zip">Download</a>
|
||||
</header>
|
||||
|
||||
|
||||
@@ -337,11 +337,14 @@
|
||||
Visibility
|
||||
</a></li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.0/extend/icons/">
|
||||
<a class="bd-toc-link" href="/docs/4.0/extend/approach/">
|
||||
Extend
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.0/extend/approach/">
|
||||
Approach
|
||||
</a></li><li>
|
||||
<a href="/docs/4.0/extend/icons/">
|
||||
Icons
|
||||
</a></li></ul>
|
||||
@@ -414,34 +417,6 @@
|
||||
<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-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/docs.min.js"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
|
||||
<script>
|
||||
docsearch({
|
||||
apiKey: '48cb48b22351bc71ea5f12f4d1ede198',
|
||||
indexName: 'bootstrap-v4',
|
||||
inputSelector: '#search-input',
|
||||
handleSelected: function (input, event, suggestion) {
|
||||
var url = suggestion.url;
|
||||
url = suggestion.isLvl1 ? url.split('#')[0]: url;
|
||||
// If it's a title we remove the anchor so it does not jump.
|
||||
window.location.href = url;
|
||||
},
|
||||
transformData: function (hits) {
|
||||
return hits.map(function (hit) {
|
||||
hit.url = hit.url.replace('https://v4-alpha.getbootstrap.com', '/docs/4.0');
|
||||
return hit;
|
||||
});
|
||||
},
|
||||
debug: false // Set debug to true if you want to inspect the dropdown
|
||||
});
|
||||
</script><script>
|
||||
Holder.addTheme('gray', {
|
||||
bg: '#777',
|
||||
fg: 'rgba(255,255,255,.75)',
|
||||
font: 'Helvetica',
|
||||
fontweight: 'normal'
|
||||
});
|
||||
</script>
|
||||
|
||||
<script src="/assets/js/vendor/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script><script src="/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/assets/js/docs.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -5,13 +5,13 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="Bootstrap 4 is a major rewrite of the entire project. The most notable changes are summarized below, followed by more specific changes to relevant components.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Jekyll v3.6.2">
|
||||
<meta name="generator" content="Jekyll v3.7.0">
|
||||
|
||||
<title>Migrating to v4 · Bootstrap</title>
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
|
||||
<link href="/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
|
||||
|
||||
|
||||
<!-- Documentation extras -->
|
||||
@@ -125,7 +125,7 @@
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0-beta.3.zip">Download</a>
|
||||
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/twbs/bootstrap/archive/v4.0.0.zip">Download</a>
|
||||
</header>
|
||||
|
||||
|
||||
@@ -337,11 +337,14 @@
|
||||
Visibility
|
||||
</a></li></ul>
|
||||
</div><div class="bd-toc-item">
|
||||
<a class="bd-toc-link" href="/docs/4.0/extend/icons/">
|
||||
<a class="bd-toc-link" href="/docs/4.0/extend/approach/">
|
||||
Extend
|
||||
</a>
|
||||
|
||||
<ul class="nav bd-sidenav"><li>
|
||||
<a href="/docs/4.0/extend/approach/">
|
||||
Approach
|
||||
</a></li><li>
|
||||
<a href="/docs/4.0/extend/icons/">
|
||||
Icons
|
||||
</a></li></ul>
|
||||
@@ -376,6 +379,11 @@
|
||||
|
||||
<div class="d-none d-xl-block col-xl-2 bd-toc">
|
||||
<ul class="section-nav">
|
||||
<li class="toc-entry toc-h2"><a href="#stable-changes">Stable changes</a>
|
||||
<ul>
|
||||
<li class="toc-entry toc-h3"><a href="#printing">Printing</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="toc-entry toc-h2"><a href="#beta-3-changes">Beta 3 changes</a>
|
||||
<ul>
|
||||
<li class="toc-entry toc-h3"><a href="#miscellaneous">Miscellaneous</a></li>
|
||||
@@ -438,7 +446,24 @@
|
||||
<p class="bd-lead">Bootstrap 4 is a major rewrite of the entire project. The most notable changes are summarized below, followed by more specific changes to relevant components.</p>
|
||||
<script async src="https://cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=getbootstrapcom" id="_carbonads_js"></script>
|
||||
|
||||
<h2 id="beta-3-changes">Beta 3 changes</h2>
|
||||
<h2 id="stable-changes">Stable changes</h2>
|
||||
|
||||
<p>Moving from Beta 3 to our stable v4.0 release, there are no breaking changes, but there are some notable changes.</p>
|
||||
|
||||
<h3 id="printing">Printing</h3>
|
||||
<ul>
|
||||
<li>
|
||||
<p>Fixed broken print utilities. Previously, using a <code class="highlighter-rouge">.d-print-*</code> class would unexpectedly overrule any other <code class="highlighter-rouge">.d-*</code> class. Now, they match our other display utilities and only apply to that media (<code class="highlighter-rouge">@media print</code>).</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>Expanded available print display utilities to match other utilities. Beta 3 and older only had <code class="highlighter-rouge">block</code>, <code class="highlighter-rouge">inline-block</code>, <code class="highlighter-rouge">inline</code>, and <code class="highlighter-rouge">none</code>. Stable v4 added <code class="highlighter-rouge">flex</code>, <code class="highlighter-rouge">inline-flex</code>, <code class="highlighter-rouge">table</code>, <code class="highlighter-rouge">table-row</code>, and <code class="highlighter-rouge">table-cell</code>.</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>Fixed print preview rendering across browsers with new print styles that specify <code class="highlighter-rouge">@page</code> <code class="highlighter-rouge">size</code>.</p>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<h2 id="beta-3-changes">Beta 3 changes</h2>
|
||||
|
||||
<p>While Beta 2 saw the bulk of our breaking changes during the beta phase, but we still have a few that needed to be addressed in the Beta 3 release. These changes apply if you’re updating to Beta 3 from Beta 2 or any older version of Bootstrap.</p>
|
||||
|
||||
@@ -465,13 +490,16 @@
|
||||
<li>
|
||||
<p>Removed <code class="highlighter-rouge">.col-form-legend</code> in favor of a slightly improved <code class="highlighter-rouge">.col-form-label</code>. This way <code class="highlighter-rouge">.col-form-label-sm</code> and <code class="highlighter-rouge">.col-form-label-lg</code> can be used on <code class="highlighter-rouge"><legend></code> elements with ease.</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>Custom file inputs received a change to their <code class="highlighter-rouge">$custom-file-text</code> Sass variable. It’s no longer a nested Sass map and now only powers one string—the <code class="highlighter-rouge">Browse</code> button as that is now the only pseudo-element generated from our Sass. The <code class="highlighter-rouge">Choose file</code> text now comes from the <code class="highlighter-rouge">.custom-file-label</code>.</p>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<h3 id="input-groups">Input groups</h3>
|
||||
|
||||
<ul>
|
||||
<li>
|
||||
<p>Input group addons are now specific to their placement relative to an input. We’ve dropped <code class="highlighter-rouge">.input-group-addon</code> and <code class="highlighter-rouge">.input-group-btn</code> for two new classes, <code class="highlighter-rouge">.input-group-prepend</code> and <code class="highlighter-rouge">.input-group-append</code>. You must explicitly use an append or a prepend now, simplifying much of our CSS.</p>
|
||||
<p>Input group addons are now specific to their placement relative to an input. We’ve dropped <code class="highlighter-rouge">.input-group-addon</code> and <code class="highlighter-rouge">.input-group-btn</code> for two new classes, <code class="highlighter-rouge">.input-group-prepend</code> and <code class="highlighter-rouge">.input-group-append</code>. You must explicitly use an append or a prepend now, simplifying much of our CSS. Within an append or prepend, place your buttons as they would exist anywhere else, but wrap text in <code class="highlighter-rouge">.input-group-text</code>.</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>Validation styles are now supported, as are multiple inputs (though you can only validate one input per group).</p>
|
||||
@@ -874,34 +902,6 @@
|
||||
<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-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/docs.min.js"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
|
||||
<script>
|
||||
docsearch({
|
||||
apiKey: '48cb48b22351bc71ea5f12f4d1ede198',
|
||||
indexName: 'bootstrap-v4',
|
||||
inputSelector: '#search-input',
|
||||
handleSelected: function (input, event, suggestion) {
|
||||
var url = suggestion.url;
|
||||
url = suggestion.isLvl1 ? url.split('#')[0]: url;
|
||||
// If it's a title we remove the anchor so it does not jump.
|
||||
window.location.href = url;
|
||||
},
|
||||
transformData: function (hits) {
|
||||
return hits.map(function (hit) {
|
||||
hit.url = hit.url.replace('https://v4-alpha.getbootstrap.com', '/docs/4.0');
|
||||
return hit;
|
||||
});
|
||||
},
|
||||
debug: false // Set debug to true if you want to inspect the dropdown
|
||||
});
|
||||
</script><script>
|
||||
Holder.addTheme('gray', {
|
||||
bg: '#777',
|
||||
fg: 'rgba(255,255,255,.75)',
|
||||
font: 'Helvetica',
|
||||
fontweight: 'normal'
|
||||
});
|
||||
</script>
|
||||
|
||||
<script src="/assets/js/vendor/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script><script src="/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/assets/js/docs.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user