mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-21 04:41:36 +02:00
Code Issues Releases Wiki Activity

Add v5.3.2 docs (#39183)

Browse Source
This commit is contained in:
XhmikosR
2023-09-14 17:28:33 +03:00
committed by GitHub
parent dca1db555b
commit cf7976b7a0
231 changed files with 1657 additions and 1415 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
docs/5.3/components/buttons/index.html
View File

@@ -5,7 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Use Bootstrap&rsquo;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="Hugo 0.115.4">
<meta name="generator" content="Hugo 0.118.2">
<meta name="docsearch:language" content="en">
<meta name="docsearch:version" content="5.3">
@@ -20,7 +20,7 @@
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@3">
<link href="/docs/5.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" crossorigin="anonymous">
<link href="/docs/5.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<link href="/docs/5.3/assets/css/docs.css" rel="stylesheet">
@@ -531,7 +531,7 @@
<main class="bd-main order-1">
<div class="bd-intro pt-2 ps-lg-2">
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
<div class="mb-3 mb-md-0 d-flex text-nowrap"><a class="btn btn-sm btn-bd-light rounded-2" href="https://github.com/twbs/bootstrap/blob/v5.3.1/site/content/docs/5.3/components/buttons.md" title="View and edit this file on GitHub" target="_blank" rel="noopener">
<div class="mb-3 mb-md-0 d-flex text-nowrap"><a class="btn btn-sm btn-bd-light rounded-2" href="https://github.com/twbs/bootstrap/blob/v5.3.2/site/content/docs/5.3/components/buttons.md" title="View and edit this file on GitHub" target="_blank" rel="noopener">
View on GitHub
</a>
</div>
@@ -1027,7 +1027,7 @@ Visually, these toggle buttons are identical to the <a href="/docs/5.3/forms/che
<p>As part of Bootstrap&rsquo;s evolving CSS variables approach, buttons now use local CSS variables on <code>.btn</code> for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.</p>
<div class="bd-example-snippet bd-code-snippet bd-file-ref">
<div class="d-flex align-items-center highlight-toolbar ps-3 pe-2 py-1 border-bottom">
<a class="font-monospace link-secondary link-underline-secondary link-underline-opacity-0 link-underline-opacity-100-hover small" href="https://github.com/twbs/bootstrap/blob/v5.3.1/scss/_buttons.scss">scss/_buttons.scss</a>
<a class="font-monospace link-secondary link-underline-secondary link-underline-opacity-0 link-underline-opacity-100-hover small" href="https://github.com/twbs/bootstrap/blob/v5.3.2/scss/_buttons.scss">scss/_buttons.scss</a>
<div class="d-flex ms-auto">
<button type="button" class="btn-clipboard mt-0 me-0" title="Copy to clipboard">
<svg class="bi" aria-hidden="true"><use xlink:href="#clipboard"/></svg>
@@ -1055,7 +1055,7 @@ Visually, these toggle buttons are identical to the <a href="/docs/5.3/forms/che
</div>
<div class="bd-example-snippet bd-code-snippet bd-file-ref">
<div class="d-flex align-items-center highlight-toolbar ps-3 pe-2 py-1 border-bottom">
<a class="font-monospace link-secondary link-underline-secondary link-underline-opacity-0 link-underline-opacity-100-hover small" href="https://github.com/twbs/bootstrap/blob/v5.3.1/site/assets/scss/_buttons.scss">site/assets/scss/_buttons.scss</a>
<a class="font-monospace link-secondary link-underline-secondary link-underline-opacity-0 link-underline-opacity-100-hover small" href="https://github.com/twbs/bootstrap/blob/v5.3.2/site/assets/scss/_buttons.scss">site/assets/scss/_buttons.scss</a>
<div class="d-flex ms-auto">
<button type="button" class="btn-clipboard mt-0 me-0" title="Copy to clipboard">
<svg class="bi" aria-hidden="true"><use xlink:href="#clipboard"/></svg>
@@ -1078,7 +1078,7 @@ Visually, these toggle buttons are identical to the <a href="/docs/5.3/forms/che
<h3 id="sass-variables">Sass variables <a class="anchor-link" href="#sass-variables" aria-label="Link to this section: Sass variables"></a></h3>
<div class="bd-example-snippet bd-code-snippet bd-file-ref">
<div class="d-flex align-items-center highlight-toolbar ps-3 pe-2 py-1 border-bottom">
<a class="font-monospace link-secondary link-underline-secondary link-underline-opacity-0 link-underline-opacity-100-hover small" href="https://github.com/twbs/bootstrap/blob/v5.3.1/scss/_variables.scss">scss/_variables.scss</a>
<a class="font-monospace link-secondary link-underline-secondary link-underline-opacity-0 link-underline-opacity-100-hover small" href="https://github.com/twbs/bootstrap/blob/v5.3.2/scss/_variables.scss">scss/_variables.scss</a>
<div class="d-flex ms-auto">
<button type="button" class="btn-clipboard mt-0 me-0" title="Copy to clipboard">
<svg class="bi" aria-hidden="true"><use xlink:href="#clipboard"/></svg>
@@ -1112,6 +1112,7 @@ Visually, these toggle buttons are identical to the <a href="/docs/5.3/forms/che
</span></span><span class="line"><span class="cl"><span class="nv">$btn-link-color</span><span class="o">:</span> <span class="nf">var</span><span class="p">(</span><span class="o">--</span><span class="si">#{</span><span class="nv">$prefix</span><span class="si">}</span><span class="n">link-color</span><span class="p">);</span>
</span></span><span class="line"><span class="cl"><span class="nv">$btn-link-hover-color</span><span class="o">:</span> <span class="nf">var</span><span class="p">(</span><span class="o">--</span><span class="si">#{</span><span class="nv">$prefix</span><span class="si">}</span><span class="n">link-hover-color</span><span class="p">);</span>
</span></span><span class="line"><span class="cl"><span class="nv">$btn-link-disabled-color</span><span class="o">:</span> <span class="nv">$gray-600</span><span class="p">;</span>
</span></span><span class="line"><span class="cl"><span class="nv">$btn-link-focus-shadow-rgb</span><span class="o">:</span> <span class="nf">to-rgb</span><span class="p">(</span><span class="nf">mix</span><span class="p">(</span><span class="nf">color-contrast</span><span class="p">(</span><span class="nv">$link-color</span><span class="p">)</span><span class="o">,</span> <span class="nv">$link-color</span><span class="o">,</span> <span class="mi">15</span><span class="kt">%</span><span class="p">));</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="c1">// Allows for customizing button radius independently from global border radius
</span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nv">$btn-border-radius</span><span class="o">:</span> <span class="nf">var</span><span class="p">(</span><span class="o">--</span><span class="si">#{</span><span class="nv">$prefix</span><span class="si">}</span><span class="n">border-radius</span><span class="p">);</span>
@@ -1133,7 +1134,7 @@ Visually, these toggle buttons are identical to the <a href="/docs/5.3/forms/che
<p>There are three mixins for buttons: button and button outline variant mixins (both based on <code>$theme-colors</code>), plus a button size mixin.</p>
<div class="bd-example-snippet bd-code-snippet bd-file-ref">
<div class="d-flex align-items-center highlight-toolbar ps-3 pe-2 py-1 border-bottom">
<a class="font-monospace link-secondary link-underline-secondary link-underline-opacity-0 link-underline-opacity-100-hover small" href="https://github.com/twbs/bootstrap/blob/v5.3.1/scss/mixins/_buttons.scss">scss/mixins/_buttons.scss</a>
<a class="font-monospace link-secondary link-underline-secondary link-underline-opacity-0 link-underline-opacity-100-hover small" href="https://github.com/twbs/bootstrap/blob/v5.3.2/scss/mixins/_buttons.scss">scss/mixins/_buttons.scss</a>
<div class="d-flex ms-auto">
<button type="button" class="btn-clipboard mt-0 me-0" title="Copy to clipboard">
<svg class="bi" aria-hidden="true"><use xlink:href="#clipboard"/></svg>
@@ -1171,7 +1172,7 @@ Visually, these toggle buttons are identical to the <a href="/docs/5.3/forms/che
</span></span></code></pre></div></div>
<div class="bd-example-snippet bd-code-snippet bd-file-ref">
<div class="d-flex align-items-center highlight-toolbar ps-3 pe-2 py-1 border-bottom">
<a class="font-monospace link-secondary link-underline-secondary link-underline-opacity-0 link-underline-opacity-100-hover small" href="https://github.com/twbs/bootstrap/blob/v5.3.1/scss/mixins/_buttons.scss">scss/mixins/_buttons.scss</a>
<a class="font-monospace link-secondary link-underline-secondary link-underline-opacity-0 link-underline-opacity-100-hover small" href="https://github.com/twbs/bootstrap/blob/v5.3.2/scss/mixins/_buttons.scss">scss/mixins/_buttons.scss</a>
<div class="d-flex ms-auto">
<button type="button" class="btn-clipboard mt-0 me-0" title="Copy to clipboard">
<svg class="bi" aria-hidden="true"><use xlink:href="#clipboard"/></svg>
@@ -1202,7 +1203,7 @@ Visually, these toggle buttons are identical to the <a href="/docs/5.3/forms/che
</span></span></code></pre></div></div>
<div class="bd-example-snippet bd-code-snippet bd-file-ref">
<div class="d-flex align-items-center highlight-toolbar ps-3 pe-2 py-1 border-bottom">
<a class="font-monospace link-secondary link-underline-secondary link-underline-opacity-0 link-underline-opacity-100-hover small" href="https://github.com/twbs/bootstrap/blob/v5.3.1/scss/mixins/_buttons.scss">scss/mixins/_buttons.scss</a>
<a class="font-monospace link-secondary link-underline-secondary link-underline-opacity-0 link-underline-opacity-100-hover small" href="https://github.com/twbs/bootstrap/blob/v5.3.2/scss/mixins/_buttons.scss">scss/mixins/_buttons.scss</a>
<div class="d-flex ms-auto">
<button type="button" class="btn-clipboard mt-0 me-0" title="Copy to clipboard">
<svg class="bi" aria-hidden="true"><use xlink:href="#clipboard"/></svg>
@@ -1219,7 +1220,7 @@ Visually, these toggle buttons are identical to the <a href="/docs/5.3/forms/che
<p>Button variants (for regular and outline buttons) use their respective mixins with our <code>$theme-colors</code> map to generate the modifier classes in <code>scss/_buttons.scss</code>.</p>
<div class="bd-example-snippet bd-code-snippet bd-file-ref">
<div class="d-flex align-items-center highlight-toolbar ps-3 pe-2 py-1 border-bottom">
<a class="font-monospace link-secondary link-underline-secondary link-underline-opacity-0 link-underline-opacity-100-hover small" href="https://github.com/twbs/bootstrap/blob/v5.3.1/scss/_buttons.scss">scss/_buttons.scss</a>
<a class="font-monospace link-secondary link-underline-secondary link-underline-opacity-0 link-underline-opacity-100-hover small" href="https://github.com/twbs/bootstrap/blob/v5.3.2/scss/_buttons.scss">scss/_buttons.scss</a>
<div class="d-flex ms-auto">
<button type="button" class="btn-clipboard mt-0 me-0" title="Copy to clipboard">
<svg class="bi" aria-hidden="true"><use xlink:href="#clipboard"/></svg>
@@ -1274,7 +1275,7 @@ Visually, these toggle buttons are identical to the <a href="/docs/5.3/forms/che
<ul class="list-unstyled small">
<li class="mb-2">Designed and built with all the love in the world by the <a href="/docs/5.3/about/team/">Bootstrap team</a> with the help of <a href="https://github.com/twbs/bootstrap/graphs/contributors">our contributors</a>.</li>
<li class="mb-2">Code licensed <a href="https://github.com/twbs/bootstrap/blob/main/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>.</li>
<li class="mb-2">Currently v5.3.1.</li>
<li class="mb-2">Currently v5.3.2.</li>
</ul>
</div>
<div class="col-6 col-lg-2 offset-lg-1 mb-3">
@@ -1323,7 +1324,7 @@ Visually, these toggle buttons are identical to the <a href="/docs/5.3/forms/che
</div>
</footer>
<script src="/docs/5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-HwwvtgBNo3bZJJLYd8oVXjrBZt8cqVSpeBNS5n7C8IVInixGAoxmnlMuBnhbgrkm" crossorigin="anonymous"></script>
<script src="/docs/5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/@docsearch/js@3"></script>
@@ -1352,10 +1353,10 @@ Visually, these toggle buttons are identical to the <a href="/docs/5.3/forms/che
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.3.1\/dist\/css\/bootstrap.min.css" rel="stylesheet">
<link href="https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.3.2\/dist\/css\/bootstrap.min.css" rel="stylesheet">
<link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet">
<title>Bootstrap Example</title>
<${'script'} src="https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.3.1\/dist\/js\/bootstrap.bundle.min.js"></${'script'}>
<${'script'} src="https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.3.2\/dist\/js\/bootstrap.bundle.min.js"></${'script'}>
</head>
<body class="p-3 m-0 border-0 ${classes}">