mirror of
https://github.com/twbs/bootstrap.git
synced 2025-08-12 16:44:17 +02:00
Add v5.3.0 docs (#38658)
This commit is contained in:
XhmikosR
GitHub
@@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="Bootstrap now supports color modes, or themes, as of v5.3.0. Explore our default light color mode and the new dark mode, or create your own using our styles as your template.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Hugo 0.111.3">
|
||||
<meta name="generator" content="Hugo 0.112.5">
|
||||
|
||||
<meta name="docsearch:language" content="en">
|
||||
<meta name="docsearch:version" content="5.3">
|
||||
@@ -18,7 +18,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-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
|
||||
<link href="/docs/5.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" 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"><small class="d-inline-flex px-2 py-1 fw-semibold text-success-emphasis bg-success-subtle border border-success-subtle rounded-2 me-2">Added in v5.3</small><a class="btn btn-sm btn-bd-light rounded-2" href="https://github.com/twbs/bootstrap/blob/v5.3.0-alpha3/site/content/docs/5.3/customize/color-modes.md" title="View and edit this file on GitHub" target="_blank" rel="noopener">
|
||||
<div class="mb-3 mb-md-0 d-flex text-nowrap"><small class="d-inline-flex px-2 py-1 fw-semibold text-success-emphasis bg-success-subtle border border-success-subtle rounded-2 me-2">Added in v5.3</small><a class="btn btn-sm btn-bd-light rounded-2" href="https://github.com/twbs/bootstrap/blob/v5.3.0/site/content/docs/5.3/customize/color-modes.md" title="View and edit this file on GitHub" target="_blank" rel="noopener">
|
||||
View on GitHub
|
||||
</a>
|
||||
</div>
|
||||
@@ -564,11 +564,12 @@
|
||||
</li>
|
||||
<li><a href="#custom-color-modes">Custom color modes</a></li>
|
||||
<li><a href="#javascript">JavaScript</a></li>
|
||||
<li><a href="#adding-theme-colors">Adding theme colors</a></li>
|
||||
<li><a href="#css">CSS</a>
|
||||
<ul>
|
||||
<li><a href="#variables">Variables</a></li>
|
||||
<li><a href="#sass-variables">Sass variables</a></li>
|
||||
<li><a href="#sass-mixin">Sass mixin</a></li>
|
||||
<li><a href="#sass-mixins">Sass mixins</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
@@ -580,12 +581,16 @@
|
||||
<div class="bd-content ps-lg-2">
|
||||
|
||||
|
||||
<h2 id="dark-mode">Dark mode <a class="anchor-link" href="#dark-mode" aria-label="Link to this section: Dark mode"></a></h2>
|
||||
<div class="bd-callout bd-callout-info">
|
||||
<strong>Try it yourself!</strong> Download the source code and working demo for using Bootstrap with Stylelint, and the color modes from the <a href="https://github.com/twbs/examples/tree/main/color-modes">twbs/examples repository</a>. You can also <a href="https://stackblitz.com/github/twbs/examples/tree/main/color-modes?file=index.html">open the example in StackBlitz</a>.
|
||||
</div>
|
||||
|
||||
<h2 id="dark-mode">Dark mode <a class="anchor-link" href="#dark-mode" aria-label="Link to this section: Dark mode"></a></h2>
|
||||
<p><strong>Bootstrap now supports color modes, starting with dark mode!</strong> With v5.3.0 you can implement your own color mode toggler (see below for an example from Bootstrap’s docs) and apply the different color modes as you see fit. We support a light mode (default) and now dark mode. Color modes can be toggled globally on the <code><html></code> element, or on specific components and elements, thanks to the <code>data-bs-theme</code> attribute.</p>
|
||||
<p>Alternatively, you can also switch to a media query implementation thanks to our color mode mixin—see <a href="#building-with-sass">the usage section for details</a>. Heads up though—this eliminates your ability to change themes on a per-component basis as shown below.</p>
|
||||
<h2 id="example">Example <a class="anchor-link" href="#example" aria-label="Link to this section: Example"></a></h2>
|
||||
<p>For example, to change the color mode of a dropdown menu, add <code>data-bs-theme="light"</code> or <code>data-bs-theme="dark"</code> to the parent <code>.dropdown</code>. Now, no matter the global color mode, these dropdowns will display with the specified theme value.</p>
|
||||
<div class="bd-example-snippet bd-code-snippet"><div class="bd-example d-flex justify-content-between">
|
||||
<div class="bd-example-snippet bd-code-snippet"><div class="bd-example m-0 border-0 d-flex justify-content-between">
|
||||
<div class="dropdown" data-bs-theme="light">
|
||||
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButtonLight" data-bs-toggle="dropdown" aria-expanded="false">
|
||||
Default dropdown
|
||||
@@ -676,11 +681,11 @@
|
||||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">"utf-8"</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"viewport"</span> <span class="na">content</span><span class="o">=</span><span class="s">"width=device-width, initial-scale=1"</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">title</span><span class="p">></span>Bootstrap demo<span class="p"></</span><span class="nt">title</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">link</span> <span class="na">href</span><span class="o">=</span><span class="s">"https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css"</span> <span class="na">rel</span><span class="o">=</span><span class="s">"stylesheet"</span> <span class="na">integrity</span><span class="o">=</span><span class="s">"sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ"</span> <span class="na">crossorigin</span><span class="o">=</span><span class="s">"anonymous"</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">link</span> <span class="na">href</span><span class="o">=</span><span class="s">"https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"</span> <span class="na">rel</span><span class="o">=</span><span class="s">"stylesheet"</span> <span class="na">integrity</span><span class="o">=</span><span class="s">"sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM"</span> <span class="na">crossorigin</span><span class="o">=</span><span class="s">"anonymous"</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">head</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">body</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">h1</span><span class="p">></span>Hello, world!<span class="p"></</span><span class="nt">h1</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"</span> <span class="na">integrity</span><span class="o">=</span><span class="s">"sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe"</span> <span class="na">crossorigin</span><span class="o">=</span><span class="s">"anonymous"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"</span> <span class="na">integrity</span><span class="o">=</span><span class="s">"sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz"</span> <span class="na">crossorigin</span><span class="o">=</span><span class="s">"anonymous"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">body</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">html</span><span class="p">></span>
|
||||
</span></span></code></pre></div><p>Bootstrap does not yet ship with a built-in color mode picker, but you can use the one from our own documentation if you like. <a href="#javascript">Learn more in the JavaScript section.</a></p>
|
||||
@@ -720,9 +725,9 @@
|
||||
</span></span></code></pre></div><h2 id="custom-color-modes">Custom color modes <a class="anchor-link" href="#custom-color-modes" aria-label="Link to this section: Custom color modes"></a></h2>
|
||||
<p>While the primary use case for color modes is light and dark mode, custom color modes are also possible. Create your own <code>data-bs-theme</code> selector with a custom value as the name of your color mode, then modify our Sass and CSS variables as needed. We opted to create a separate <code>_variables-dark.scss</code> stylesheet to house Bootstrap’s dark mode specific Sass variables, but that’s not required for you.</p>
|
||||
<p>For example, you can create a “blue theme” with the selector <code>data-bs-theme="blue"</code>. In your custom Sass or CSS file, add the new selector and override any global or component CSS variables as needed. If you’re using Sass, you can also use Sass’s functions within your CSS variable overrides.</p>
|
||||
<div class="bd-example-snippet bd-code-snippet bd-scss-docs">
|
||||
<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.0-alpha3/site/assets/scss/_content.scss">site/assets/scss/_content.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.0/site/assets/scss/_content.scss">site/assets/scss/_content.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>
|
||||
@@ -775,7 +780,7 @@
|
||||
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
</span></span></code></pre></div><h2 id="javascript">JavaScript <a class="anchor-link" href="#javascript" aria-label="Link to this section: JavaScript"></a></h2>
|
||||
<p>To allow visitors or users to toggle color modes, you’ll need to create a toggle element to control the <code>data-bs-theme</code> attribute on the root element, <code><html></code>. We’ve built a toggler in our documentation that initially defers to a user’s current system color mode, but provides an option to override that and pick a specific color mode.</p>
|
||||
<p>Here’s a look at the JavaScript that powers it. Feel free to inspect our own documentation navbar to see how it’s implemented using HTML and CSS from our own components. Note that if you decide to use media queries for your color modes, your JavaScript may need to be modified or removed if you prefer an implicit control.</p>
|
||||
<p>Here’s a look at the JavaScript that powers it. Feel free to inspect our own documentation navbar to see how it’s implemented using HTML and CSS from our own components. It is suggested to include the JavaScript at the top of your page to reduce potential screen flickering during reloading of your site. Note that if you decide to use media queries for your color modes, your JavaScript may need to be modified or removed if you prefer an implicit control.</p>
|
||||
<div class="bd-example-snippet bd-code-snippet"><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-js" data-lang="js"><span class="line"><span class="cl"><span class="cm">/*!
|
||||
</span></span></span><span class="line"><span class="cl"><span class="cm"> * Color mode toggler for Bootstrap's docs (https://getbootstrap.com/)
|
||||
</span></span></span><span class="line"><span class="cl"><span class="cm"> * Copyright 2011-2023 The Bootstrap Authors
|
||||
@@ -785,9 +790,11 @@
|
||||
</span></span><span class="line"><span class="cl"><span class="p">(()</span> <span class="p">=></span> <span class="p">{</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="s1">'use strict'</span>
|
||||
</span></span><span class="line"><span class="cl">
|
||||
</span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">storedTheme</span> <span class="o">=</span> <span class="nx">localStorage</span><span class="p">.</span><span class="nx">getItem</span><span class="p">(</span><span class="s1">'theme'</span><span class="p">)</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">getStoredTheme</span> <span class="o">=</span> <span class="p">()</span> <span class="p">=></span> <span class="nx">localStorage</span><span class="p">.</span><span class="nx">getItem</span><span class="p">(</span><span class="s1">'theme'</span><span class="p">)</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">setStoredTheme</span> <span class="o">=</span> <span class="nx">theme</span> <span class="p">=></span> <span class="nx">localStorage</span><span class="p">.</span><span class="nx">setItem</span><span class="p">(</span><span class="s1">'theme'</span><span class="p">,</span> <span class="nx">theme</span><span class="p">)</span>
|
||||
</span></span><span class="line"><span class="cl">
|
||||
</span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">getPreferredTheme</span> <span class="o">=</span> <span class="p">()</span> <span class="p">=></span> <span class="p">{</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">storedTheme</span> <span class="o">=</span> <span class="nx">getStoredTheme</span><span class="p">()</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="k">if</span> <span class="p">(</span><span class="nx">storedTheme</span><span class="p">)</span> <span class="p">{</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="nx">storedTheme</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="p">}</span>
|
||||
@@ -795,7 +802,7 @@
|
||||
</span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="nb">window</span><span class="p">.</span><span class="nx">matchMedia</span><span class="p">(</span><span class="s1">'(prefers-color-scheme: dark)'</span><span class="p">).</span><span class="nx">matches</span> <span class="o">?</span> <span class="s1">'dark'</span> <span class="o">:</span> <span class="s1">'light'</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="p">}</span>
|
||||
</span></span><span class="line"><span class="cl">
|
||||
</span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">setTheme</span> <span class="o">=</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">theme</span><span class="p">)</span> <span class="p">{</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">setTheme</span> <span class="o">=</span> <span class="nx">theme</span> <span class="p">=></span> <span class="p">{</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="k">if</span> <span class="p">(</span><span class="nx">theme</span> <span class="o">===</span> <span class="s1">'auto'</span> <span class="o">&&</span> <span class="nb">window</span><span class="p">.</span><span class="nx">matchMedia</span><span class="p">(</span><span class="s1">'(prefers-color-scheme: dark)'</span><span class="p">).</span><span class="nx">matches</span><span class="p">)</span> <span class="p">{</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nb">document</span><span class="p">.</span><span class="nx">documentElement</span><span class="p">.</span><span class="nx">setAttribute</span><span class="p">(</span><span class="s1">'data-bs-theme'</span><span class="p">,</span> <span class="s1">'dark'</span><span class="p">)</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
|
||||
@@ -834,7 +841,8 @@
|
||||
</span></span><span class="line"><span class="cl"> <span class="p">}</span>
|
||||
</span></span><span class="line"><span class="cl">
|
||||
</span></span><span class="line"><span class="cl"> <span class="nb">window</span><span class="p">.</span><span class="nx">matchMedia</span><span class="p">(</span><span class="s1">'(prefers-color-scheme: dark)'</span><span class="p">).</span><span class="nx">addEventListener</span><span class="p">(</span><span class="s1">'change'</span><span class="p">,</span> <span class="p">()</span> <span class="p">=></span> <span class="p">{</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="k">if</span> <span class="p">(</span><span class="nx">storedTheme</span> <span class="o">!==</span> <span class="s1">'light'</span> <span class="o">||</span> <span class="nx">storedTheme</span> <span class="o">!==</span> <span class="s1">'dark'</span><span class="p">)</span> <span class="p">{</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">storedTheme</span> <span class="o">=</span> <span class="nx">getStoredTheme</span><span class="p">()</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="k">if</span> <span class="p">(</span><span class="nx">storedTheme</span> <span class="o">!==</span> <span class="s1">'light'</span> <span class="o">&&</span> <span class="nx">storedTheme</span> <span class="o">!==</span> <span class="s1">'dark'</span><span class="p">)</span> <span class="p">{</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nx">setTheme</span><span class="p">(</span><span class="nx">getPreferredTheme</span><span class="p">())</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="p">}</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="p">})</span>
|
||||
@@ -846,7 +854,7 @@
|
||||
</span></span><span class="line"><span class="cl"> <span class="p">.</span><span class="nx">forEach</span><span class="p">(</span><span class="nx">toggle</span> <span class="p">=></span> <span class="p">{</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nx">toggle</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="s1">'click'</span><span class="p">,</span> <span class="p">()</span> <span class="p">=></span> <span class="p">{</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="kr">const</span> <span class="nx">theme</span> <span class="o">=</span> <span class="nx">toggle</span><span class="p">.</span><span class="nx">getAttribute</span><span class="p">(</span><span class="s1">'data-bs-theme-value'</span><span class="p">)</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nx">localStorage</span><span class="p">.</span><span class="nx">setItem</span><span class="p">(</span><span class="s1">'theme'</span><span class="p">,</span> <span class="nx">theme</span><span class="p">)</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nx">setStoredTheme</span><span class="p">(</span><span class="nx">theme</span><span class="p">)</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nx">setTheme</span><span class="p">(</span><span class="nx">theme</span><span class="p">)</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="nx">showActiveTheme</span><span class="p">(</span><span class="nx">theme</span><span class="p">,</span> <span class="kc">true</span><span class="p">)</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="p">})</span>
|
||||
@@ -854,12 +862,54 @@
|
||||
</span></span><span class="line"><span class="cl"> <span class="p">})</span>
|
||||
</span></span><span class="line"><span class="cl"><span class="p">})()</span></span></span></code></pre></div></div>
|
||||
|
||||
<h2 id="css">CSS <a class="anchor-link" href="#css" aria-label="Link to this section: CSS"></a></h2>
|
||||
<h2 id="adding-theme-colors">Adding theme colors <a class="anchor-link" href="#adding-theme-colors" aria-label="Link to this section: Adding theme colors"></a></h2>
|
||||
<p>Adding a new color in <code>$theme-colors</code> is not enough for some of our components like <a href="/docs/5.3/components/alerts/">alerts</a> and <a href="/docs/5.3/components/list-group/">list groups</a>. New colors must also be defined in <code>$theme-colors-text</code>, <code>$theme-colors-bg-subtle</code>, and <code>$theme-colors-border-subtle</code> for light theme; but also in <code>$theme-colors-text-dark</code>, <code>$theme-colors-bg-subtle-dark</code>, and <code>$theme-colors-border-subtle-dark</code> for dark theme.</p>
|
||||
<p>This is a manual process because Sass cannot generate its own Sass variables from an existing variable or map. In future versions of Bootstrap, we’ll revisit this setup to reduce the duplication.</p>
|
||||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-scss" data-lang="scss"><span class="line"><span class="cl"><span class="c1">// Required
|
||||
</span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="k">@import</span> <span class="s2">"functions"</span><span class="p">;</span>
|
||||
</span></span><span class="line"><span class="cl"><span class="k">@import</span> <span class="s2">"variables"</span><span class="p">;</span>
|
||||
</span></span><span class="line"><span class="cl"><span class="k">@import</span> <span class="s2">"variables-dark"</span><span class="p">;</span>
|
||||
</span></span><span class="line"><span class="cl">
|
||||
</span></span><span class="line"><span class="cl"><span class="c1">// Add a custom color to $theme-colors
|
||||
</span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nv">$custom-colors</span><span class="o">:</span> <span class="p">(</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="s2">"custom-color"</span><span class="o">:</span> <span class="mh">#712cf9</span>
|
||||
</span></span><span class="line"><span class="cl"><span class="p">);</span>
|
||||
</span></span><span class="line"><span class="cl"><span class="nv">$theme-colors</span><span class="o">:</span> <span class="nf">map-merge</span><span class="p">(</span><span class="nv">$theme-colors</span><span class="o">,</span> <span class="nv">$custom-colors</span><span class="p">);</span>
|
||||
</span></span><span class="line"><span class="cl">
|
||||
</span></span><span class="line"><span class="cl"><span class="k">@import</span> <span class="s2">"maps"</span><span class="p">;</span>
|
||||
</span></span><span class="line"><span class="cl"><span class="k">@import</span> <span class="s2">"mixins"</span><span class="p">;</span>
|
||||
</span></span><span class="line"><span class="cl"><span class="k">@import</span> <span class="s2">"utilities"</span><span class="p">;</span>
|
||||
</span></span><span class="line"><span class="cl">
|
||||
</span></span><span class="line"><span class="cl"><span class="c1">// Add a custom color to new theme maps
|
||||
</span></span></span><span class="line"><span class="cl"><span class="c1"></span>
|
||||
</span></span><span class="line"><span class="cl"><span class="c1">// Light mode
|
||||
</span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nv">$custom-colors-text</span><span class="o">:</span> <span class="p">(</span><span class="s2">"custom-color"</span><span class="o">:</span> <span class="mh">#712cf9</span><span class="p">);</span>
|
||||
</span></span><span class="line"><span class="cl"><span class="nv">$custom-colors-bg-subtle</span><span class="o">:</span> <span class="p">(</span><span class="s2">"custom-color"</span><span class="o">:</span> <span class="mh">#e1d2fe</span><span class="p">);</span>
|
||||
</span></span><span class="line"><span class="cl"><span class="nv">$custom-colors-border-subtle</span><span class="o">:</span> <span class="p">(</span><span class="s2">"custom-color"</span><span class="o">:</span> <span class="mh">#bfa1fc</span><span class="p">);</span>
|
||||
</span></span><span class="line"><span class="cl">
|
||||
</span></span><span class="line"><span class="cl"><span class="nv">$theme-colors-text</span><span class="o">:</span> <span class="nf">map-merge</span><span class="p">(</span><span class="nv">$theme-colors-text</span><span class="o">,</span> <span class="nv">$custom-colors-text</span><span class="p">);</span>
|
||||
</span></span><span class="line"><span class="cl"><span class="nv">$theme-colors-bg-subtle</span><span class="o">:</span> <span class="nf">map-merge</span><span class="p">(</span><span class="nv">$theme-colors-bg-subtle</span><span class="o">,</span> <span class="nv">$custom-colors-bg-subtle</span><span class="p">);</span>
|
||||
</span></span><span class="line"><span class="cl"><span class="nv">$theme-colors-border-subtle</span><span class="o">:</span> <span class="nf">map-merge</span><span class="p">(</span><span class="nv">$theme-colors-border-subtle</span><span class="o">,</span> <span class="nv">$custom-colors-border-subtle</span><span class="p">);</span>
|
||||
</span></span><span class="line"><span class="cl">
|
||||
</span></span><span class="line"><span class="cl"><span class="c1">// Dark mode
|
||||
</span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nv">$custom-colors-text-dark</span><span class="o">:</span> <span class="p">(</span><span class="s2">"custom-color"</span><span class="o">:</span> <span class="mh">#e1d2f2</span><span class="p">);</span>
|
||||
</span></span><span class="line"><span class="cl"><span class="nv">$custom-colors-bg-subtle-dark</span><span class="o">:</span> <span class="p">(</span><span class="s2">"custom-color"</span><span class="o">:</span> <span class="mh">#8951fa</span><span class="p">);</span>
|
||||
</span></span><span class="line"><span class="cl"><span class="nv">$custom-colors-border-subtle-dark</span><span class="o">:</span> <span class="p">(</span><span class="s2">"custom-color"</span><span class="o">:</span> <span class="mh">#e1d2f2</span><span class="p">);</span>
|
||||
</span></span><span class="line"><span class="cl">
|
||||
</span></span><span class="line"><span class="cl"><span class="nv">$theme-colors-text-dark</span><span class="o">:</span> <span class="nf">map-merge</span><span class="p">(</span><span class="nv">$theme-colors-text-dark</span><span class="o">,</span> <span class="nv">$custom-colors-text-dark</span><span class="p">);</span>
|
||||
</span></span><span class="line"><span class="cl"><span class="nv">$theme-colors-bg-subtle-dark</span><span class="o">:</span> <span class="nf">map-merge</span><span class="p">(</span><span class="nv">$theme-colors-bg-subtle-dark</span><span class="o">,</span> <span class="nv">$custom-colors-bg-subtle-dark</span><span class="p">);</span>
|
||||
</span></span><span class="line"><span class="cl"><span class="nv">$theme-colors-border-subtle-dark</span><span class="o">:</span> <span class="nf">map-merge</span><span class="p">(</span><span class="nv">$theme-colors-border-subtle-dark</span><span class="o">,</span> <span class="nv">$custom-colors-border-subtle-dark</span><span class="p">);</span>
|
||||
</span></span><span class="line"><span class="cl">
|
||||
</span></span><span class="line"><span class="cl"><span class="c1">// Remainder of Bootstrap imports
|
||||
</span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="k">@import</span> <span class="s2">"root"</span><span class="p">;</span>
|
||||
</span></span><span class="line"><span class="cl"><span class="k">@import</span> <span class="s2">"reboot"</span><span class="p">;</span>
|
||||
</span></span><span class="line"><span class="cl"><span class="c1">// etc
|
||||
</span></span></span></code></pre></div><h2 id="css">CSS <a class="anchor-link" href="#css" aria-label="Link to this section: CSS"></a></h2>
|
||||
<h3 id="variables">Variables <a class="anchor-link" href="#variables" aria-label="Link to this section: Variables"></a></h3>
|
||||
<p>Dozens of root level CSS variables are repeated as overrides for dark mode. These are scoped to the color mode selector, which defaults to <code>data-bs-theme</code> but <a href="#building-with-sass">can be configured</a> to use a <code>prefers-color-scheme</code> media query. Use these variables as a guideline for generating your own new color modes.</p>
|
||||
<div class="bd-example-snippet bd-code-snippet bd-scss-docs">
|
||||
<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.0-alpha3/scss/_root.scss">scss/_root.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.0/scss/_root.scss">scss/_root.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>
|
||||
@@ -895,9 +945,7 @@
|
||||
</span></span><span class="line"><span class="cl"> <span class="na">--#{$prefix}#{$color}-border-subtle</span><span class="o">:</span> <span class="si">#{</span><span class="nv">$value</span><span class="si">}</span><span class="p">;</span>
|
||||
</span></span><span class="line"><span class="cl"><span class="p">}</span>
|
||||
</span></span><span class="line"><span class="cl">
|
||||
</span></span><span class="line"><span class="cl"><span class="k">@if</span> <span class="nv">$headings-color-dark</span> <span class="o">!=</span> <span class="n">null</span> <span class="p">{</span>
|
||||
</span></span><span class="line"><span class="cl"> <span class="na">--#{$prefix}heading-color</span><span class="o">:</span> <span class="si">#{</span><span class="nv">$headings-color-dark</span><span class="si">}</span><span class="p">;</span>
|
||||
</span></span><span class="line"><span class="cl"><span class="p">}</span>
|
||||
</span></span><span class="line"><span class="cl"><span class="na">--#{$prefix}heading-color</span><span class="o">:</span> <span class="si">#{</span><span class="nv">$headings-color-dark</span><span class="si">}</span><span class="p">;</span>
|
||||
</span></span><span class="line"><span class="cl">
|
||||
</span></span><span class="line"><span class="cl"><span class="na">--#{$prefix}link-color</span><span class="o">:</span> <span class="si">#{</span><span class="nv">$link-color-dark</span><span class="si">}</span><span class="p">;</span>
|
||||
</span></span><span class="line"><span class="cl"><span class="na">--#{$prefix}link-hover-color</span><span class="o">:</span> <span class="si">#{</span><span class="nv">$link-hover-color-dark</span><span class="si">}</span><span class="p">;</span>
|
||||
@@ -915,9 +963,9 @@
|
||||
</span></span><span class="line"><span class="cl"><span class="na">--#{$prefix}form-invalid-border-color</span><span class="o">:</span> <span class="si">#{</span><span class="nv">$form-invalid-border-color-dark</span><span class="si">}</span><span class="p">;</span></span></span></code></pre></div></div>
|
||||
<h3 id="sass-variables">Sass variables <a class="anchor-link" href="#sass-variables" aria-label="Link to this section: Sass variables"></a></h3>
|
||||
<p>CSS variables for our dark color mode are partially generated from dark mode specific Sass variables in <code>_variables-dark.scss</code>. This also includes some custom overrides for changing the colors of embedded SVGs used throughout our components.</p>
|
||||
<div class="bd-example-snippet bd-code-snippet bd-scss-docs">
|
||||
<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.0-alpha3/scss/_variables-dark.scss">scss/_variables-dark.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.0/scss/_variables-dark.scss">scss/_variables-dark.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>
|
||||
@@ -965,7 +1013,7 @@
|
||||
</span></span><span class="line"><span class="cl"><span class="nv">$body-emphasis-color-dark</span><span class="o">:</span> <span class="nv">$white</span><span class="p">;</span>
|
||||
</span></span><span class="line"><span class="cl"><span class="nv">$border-color-dark</span><span class="o">:</span> <span class="nv">$gray-700</span><span class="p">;</span>
|
||||
</span></span><span class="line"><span class="cl"><span class="nv">$border-color-translucent-dark</span><span class="o">:</span> <span class="nf">rgba</span><span class="p">(</span><span class="nv">$white</span><span class="o">,</span> <span class="mf">.15</span><span class="p">);</span>
|
||||
</span></span><span class="line"><span class="cl"><span class="nv">$headings-color-dark</span><span class="o">:</span> <span class="n">null</span><span class="p">;</span>
|
||||
</span></span><span class="line"><span class="cl"><span class="nv">$headings-color-dark</span><span class="o">:</span> <span class="ni">inherit</span><span class="p">;</span>
|
||||
</span></span><span class="line"><span class="cl"><span class="nv">$link-color-dark</span><span class="o">:</span> <span class="nf">tint-color</span><span class="p">(</span><span class="nv">$primary</span><span class="o">,</span> <span class="mi">40</span><span class="kt">%</span><span class="p">);</span>
|
||||
</span></span><span class="line"><span class="cl"><span class="nv">$link-hover-color-dark</span><span class="o">:</span> <span class="nf">shift-color</span><span class="p">(</span><span class="nv">$link-color-dark</span><span class="o">,</span> <span class="o">-</span><span class="nv">$link-shade-percentage</span><span class="p">);</span>
|
||||
</span></span><span class="line"><span class="cl"><span class="nv">$code-color-dark</span><span class="o">:</span> <span class="nf">tint-color</span><span class="p">(</span><span class="nv">$code-color</span><span class="o">,</span> <span class="mi">40</span><span class="kt">%</span><span class="p">);</span>
|
||||
@@ -999,11 +1047,11 @@
|
||||
</span></span><span class="line"><span class="cl"><span class="nv">$accordion-button-icon-dark</span><span class="o">:</span> <span class="sx">url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='</span><span class="si">#{</span><span class="nv">$accordion-icon-color-dark</span><span class="si">}</span><span class="sx">'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>")</span><span class="p">;</span>
|
||||
</span></span><span class="line"><span class="cl"><span class="nv">$accordion-button-active-icon-dark</span><span class="o">:</span> <span class="sx">url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='</span><span class="si">#{</span><span class="nv">$accordion-icon-active-color-dark</span><span class="si">}</span><span class="sx">'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>")</span><span class="p">;</span>
|
||||
</span></span></code></pre></div></div>
|
||||
<h3 id="sass-mixin">Sass mixin <a class="anchor-link" href="#sass-mixin" aria-label="Link to this section: Sass mixin"></a></h3>
|
||||
<h3 id="sass-mixins">Sass mixins <a class="anchor-link" href="#sass-mixins" aria-label="Link to this section: Sass mixins"></a></h3>
|
||||
<p>Styles for dark mode, and any custom color modes you create, can be scoped appropriately to the <code>data-bs-theme</code> attribute selector or media query with the customizable <code>color-mode()</code> mixin. See the <a href="#building-with-sass">Sass usage section</a> for more details.</p>
|
||||
<div class="bd-example-snippet bd-code-snippet bd-scss-docs">
|
||||
<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.0-alpha3/scss/mixins/_color-mode.scss">scss/mixins/_color-mode.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.0/scss/mixins/_color-mode.scss">scss/mixins/_color-mode.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>
|
||||
@@ -1046,7 +1094,7 @@
|
||||
<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.0-alpha3.</li>
|
||||
<li class="mb-2">Currently v5.3.0.</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 offset-lg-1 mb-3">
|
||||
@@ -1095,7 +1143,7 @@
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="/docs/5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" crossorigin="anonymous"></script>
|
||||
<script src="/docs/5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>
|
||||
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/@docsearch/js@3"></script>
|
||||
@@ -1123,10 +1171,10 @@
|
||||
<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.0-alpha3\/dist\/css\/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.3.0\/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\.0\-alpha3\/dist\/js\/bootstrap\.bundle\.min\.js"></${'script'}>
|
||||
<${'script'} src="https:\/\/cdn\.jsdelivr\.net\/npm\/bootstrap@5\.3\.0\/dist\/js\/bootstrap\.bundle\.min\.js"></${'script'}>
|
||||
</head>
|
||||
<body class="p-3 m-0 border-0 ${classes}">
|
||||
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="Bootstrap is supported by an extensive color system that themes our styles and components. This enables more comprehensive customization and extension for any project.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Hugo 0.111.3">
|
||||
<meta name="generator" content="Hugo 0.112.5">
|
||||
|
||||
<meta name="docsearch:language" content="en">
|
||||
<meta name="docsearch:version" content="5.3">
|
||||
@@ -18,7 +18,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-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
|
||||
<link href="/docs/5.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" 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.0-alpha3/site/content/docs/5.3/customize/color.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.0/site/content/docs/5.3/customize/color.md" title="View and edit this file on GitHub" target="_blank" rel="noopener">
|
||||
View on GitHub
|
||||
</a>
|
||||
</div>
|
||||
@@ -922,7 +922,7 @@
|
||||
</table>
|
||||
<h3 id="using-the-new-colors">Using the new colors <a class="anchor-link" href="#using-the-new-colors" aria-label="Link to this section: Using the new colors"></a></h3>
|
||||
<p>These new colors are accessible via CSS variables and utility classes—like <code>--bs-primary-bg-subtle</code> and <code>.bg-primary-subtle</code>—allowing you to compose your own CSS rules with the variables, or to quickly apply styles via classes. The utilities are built with the color’s associated CSS variables, and since we customize those CSS variables for dark mode, they are also adaptive to color mode by default.</p>
|
||||
<div class="bd-example-snippet bd-code-snippet"><div class="bd-example">
|
||||
<div class="bd-example-snippet bd-code-snippet"><div class="bd-example m-0 border-0">
|
||||
<div class="p-3 text-primary-emphasis bg-primary-subtle border border-primary-subtle rounded-3">
|
||||
Example element with utilities
|
||||
</div>
|
||||
@@ -978,9 +978,9 @@
|
||||
|
||||
</div>
|
||||
<p>All these colors are available as a Sass map, <code>$theme-colors</code>.</p>
|
||||
<div class="bd-example-snippet bd-code-snippet bd-scss-docs">
|
||||
<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.0-alpha3/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.0/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>
|
||||
@@ -1309,9 +1309,9 @@
|
||||
<li><code>$grays</code> lists all tints and shades of gray</li>
|
||||
</ul>
|
||||
<p>Within <code>scss/_variables.scss</code>, you’ll find Bootstrap’s color variables and Sass map. Here’s an example of the <code>$colors</code> Sass map:</p>
|
||||
<div class="bd-example-snippet bd-code-snippet bd-scss-docs">
|
||||
<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.0-alpha3/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.0/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>
|
||||
@@ -1398,7 +1398,7 @@
|
||||
<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.0-alpha3.</li>
|
||||
<li class="mb-2">Currently v5.3.0.</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 offset-lg-1 mb-3">
|
||||
@@ -1447,7 +1447,7 @@
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="/docs/5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" crossorigin="anonymous"></script>
|
||||
<script src="/docs/5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>
|
||||
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/@docsearch/js@3"></script>
|
||||
@@ -1475,10 +1475,10 @@
|
||||
<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.0-alpha3\/dist\/css\/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.3.0\/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\.0\-alpha3\/dist\/js\/bootstrap\.bundle\.min\.js"></${'script'}>
|
||||
<${'script'} src="https:\/\/cdn\.jsdelivr\.net\/npm\/bootstrap@5\.3\.0\/dist\/js\/bootstrap\.bundle\.min\.js"></${'script'}>
|
||||
</head>
|
||||
<body class="p-3 m-0 border-0 ${classes}">
|
||||
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="Learn how and why we build nearly all our components responsively and with base and modifier classes.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Hugo 0.111.3">
|
||||
<meta name="generator" content="Hugo 0.112.5">
|
||||
|
||||
<meta name="docsearch:language" content="en">
|
||||
<meta name="docsearch:version" content="5.3">
|
||||
@@ -18,7 +18,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-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
|
||||
<link href="/docs/5.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" 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.0-alpha3/site/content/docs/5.3/customize/components.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.0/site/content/docs/5.3/customize/components.md" title="View and edit this file on GitHub" target="_blank" rel="noopener">
|
||||
View on GitHub
|
||||
</a>
|
||||
</div>
|
||||
@@ -573,9 +573,9 @@
|
||||
<h2 id="modifiers">Modifiers <a class="anchor-link" href="#modifiers" aria-label="Link to this section: Modifiers"></a></h2>
|
||||
<p>Many of Bootstrap’s components are built with a base-modifier class approach. This means the bulk of the styling is contained to a base class (e.g., <code>.btn</code>) while style variations are confined to modifier classes (e.g., <code>.btn-danger</code>). These modifier classes are built from the <code>$theme-colors</code> map to make customizing the number and name of our modifier classes.</p>
|
||||
<p>Here are two examples of how we loop over the <code>$theme-colors</code> map to generate modifiers to the <code>.alert</code> and <code>.list-group</code> components.</p>
|
||||
<div class="bd-example-snippet bd-code-snippet bd-scss-docs">
|
||||
<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.0-alpha3/scss/_alert.scss">scss/_alert.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.0/scss/_alert.scss">scss/_alert.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>
|
||||
@@ -591,9 +591,9 @@
|
||||
</span></span><span class="line"><span class="cl"> <span class="p">}</span>
|
||||
</span></span><span class="line"><span class="cl"><span class="p">}</span>
|
||||
</span></span></code></pre></div></div>
|
||||
<div class="bd-example-snippet bd-code-snippet bd-scss-docs">
|
||||
<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.0-alpha3/scss/_list-group.scss">scss/_list-group.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.0/scss/_list-group.scss">scss/_list-group.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>
|
||||
@@ -621,9 +621,9 @@
|
||||
</span></span></code></pre></div></div>
|
||||
<h2 id="responsive">Responsive <a class="anchor-link" href="#responsive" aria-label="Link to this section: Responsive"></a></h2>
|
||||
<p>These Sass loops aren’t limited to color maps, either. You can also generate responsive variations of your components. Take for example our responsive alignment of the dropdowns where we mix an <code>@each</code> loop for the <code>$grid-breakpoints</code> Sass map with a media query include.</p>
|
||||
<div class="bd-example-snippet bd-code-snippet bd-scss-docs">
|
||||
<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.0-alpha3/scss/_dropdown.scss">scss/_dropdown.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.0/scss/_dropdown.scss">scss/_dropdown.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>
|
||||
@@ -657,9 +657,9 @@
|
||||
</span></span><span class="line"><span class="cl"><span class="p">}</span>
|
||||
</span></span></code></pre></div></div>
|
||||
<p>Should you modify your <code>$grid-breakpoints</code>, your changes will apply to all the loops iterating over that map.</p>
|
||||
<div class="bd-example-snippet bd-code-snippet bd-scss-docs">
|
||||
<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.0-alpha3/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.0/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>
|
||||
@@ -674,7 +674,7 @@
|
||||
</span></span><span class="line"><span class="cl"> <span class="na">xxl</span><span class="o">:</span> <span class="mi">1400</span><span class="kt">px</span>
|
||||
</span></span><span class="line"><span class="cl"><span class="p">);</span>
|
||||
</span></span></code></pre></div></div>
|
||||
<p>For more information and examples on how to modify our Sass maps and variables, please refer to <a href="/docs/5.3/layout/grid/#sass">the Sass section of the Grid documentation</a>.</p>
|
||||
<p>For more information and examples on how to modify our Sass maps and variables, please refer to <a href="/docs/5.3/layout/grid/#css">the CSS section of the Grid documentation</a>.</p>
|
||||
<h2 id="creating-your-own">Creating your own <a class="anchor-link" href="#creating-your-own" aria-label="Link to this section: Creating your own"></a></h2>
|
||||
<p>We encourage you to adopt these guidelines when building with Bootstrap to create your own components. We’ve extended this approach ourselves to the custom components in our documentation and examples. Components like our callouts are built just like our provided components with base and modifier classes.</p>
|
||||
<div class="bd-example">
|
||||
@@ -721,7 +721,7 @@
|
||||
<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.0-alpha3.</li>
|
||||
<li class="mb-2">Currently v5.3.0.</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 offset-lg-1 mb-3">
|
||||
@@ -770,7 +770,7 @@
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="/docs/5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" crossorigin="anonymous"></script>
|
||||
<script src="/docs/5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>
|
||||
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/@docsearch/js@3"></script>
|
||||
@@ -798,10 +798,10 @@
|
||||
<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.0-alpha3\/dist\/css\/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.3.0\/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\.0\-alpha3\/dist\/js\/bootstrap\.bundle\.min\.js"></${'script'}>
|
||||
<${'script'} src="https:\/\/cdn\.jsdelivr\.net\/npm\/bootstrap@5\.3\.0\/dist\/js\/bootstrap\.bundle\.min\.js"></${'script'}>
|
||||
</head>
|
||||
<body class="p-3 m-0 border-0 ${classes}">
|
||||
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="Use Bootstrap’s CSS custom properties for fast and forward-looking design and development.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Hugo 0.111.3">
|
||||
<meta name="generator" content="Hugo 0.112.5">
|
||||
|
||||
<meta name="docsearch:language" content="en">
|
||||
<meta name="docsearch:version" content="5.3">
|
||||
@@ -18,7 +18,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-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
|
||||
<link href="/docs/5.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" 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.0-alpha3/site/content/docs/5.3/customize/css-variables.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.0/site/content/docs/5.3/customize/css-variables.md" title="View and edit this file on GitHub" target="_blank" rel="noopener">
|
||||
View on GitHub
|
||||
</a>
|
||||
</div>
|
||||
@@ -667,6 +667,7 @@
|
||||
--bs-tertiary-color-rgb: 33, 37, 41;
|
||||
--bs-tertiary-bg: #f8f9fa;
|
||||
--bs-tertiary-bg-rgb: 248, 249, 250;
|
||||
--bs-heading-color: inherit;
|
||||
--bs-link-color: #0d6efd;
|
||||
--bs-link-color-rgb: 13, 110, 253;
|
||||
--bs-link-decoration: underline;
|
||||
@@ -739,6 +740,7 @@
|
||||
--bs-danger-border-subtle: #842029;
|
||||
--bs-light-border-subtle: #495057;
|
||||
--bs-dark-border-subtle: #343a40;
|
||||
--bs-heading-color: inherit;
|
||||
--bs-link-color: #6ea8fe;
|
||||
--bs-link-hover-color: #8bb9fe;
|
||||
--bs-link-color-rgb: 110, 168, 254;
|
||||
@@ -771,9 +773,9 @@
|
||||
|
||||
<p>Bootstrap provides custom <code>:focus</code> styles using a combination of Sass and CSS variables that can be optionally added to specific components and elements. We do not yet globally override all <code>:focus</code> styles.</p>
|
||||
<p>In our Sass, we set default values that can be customized before compiling.</p>
|
||||
<div class="bd-example-snippet bd-code-snippet bd-scss-docs">
|
||||
<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.0-alpha3/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.0/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>
|
||||
@@ -786,9 +788,9 @@
|
||||
</span></span><span class="line"><span class="cl"><span class="nv">$focus-ring-box-shadow</span><span class="o">:</span> <span class="mi">0</span> <span class="mi">0</span> <span class="nv">$focus-ring-blur</span> <span class="nv">$focus-ring-width</span> <span class="nv">$focus-ring-color</span><span class="p">;</span>
|
||||
</span></span></code></pre></div></div>
|
||||
<p>Those variables are then reassigned to <code>:root</code> level CSS variables that can be customized in real-time, including with options for <code>x</code> and <code>y</code> offsets (which default to their fallback value of <code>0</code>).</p>
|
||||
<div class="bd-example-snippet bd-code-snippet bd-scss-docs">
|
||||
<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.0-alpha3/scss/_root.scss">scss/_root.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.0/scss/_root.scss">scss/_root.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>
|
||||
@@ -816,7 +818,7 @@
|
||||
<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.0-alpha3.</li>
|
||||
<li class="mb-2">Currently v5.3.0.</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 offset-lg-1 mb-3">
|
||||
@@ -865,7 +867,7 @@
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="/docs/5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" crossorigin="anonymous"></script>
|
||||
<script src="/docs/5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>
|
||||
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/@docsearch/js@3"></script>
|
||||
@@ -893,10 +895,10 @@
|
||||
<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.0-alpha3\/dist\/css\/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.3.0\/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\.0\-alpha3\/dist\/js\/bootstrap\.bundle\.min\.js"></${'script'}>
|
||||
<${'script'} src="https:\/\/cdn\.jsdelivr\.net\/npm\/bootstrap@5\.3\.0\/dist\/js\/bootstrap\.bundle\.min\.js"></${'script'}>
|
||||
</head>
|
||||
<body class="p-3 m-0 border-0 ${classes}">
|
||||
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="Keep your projects lean, responsive, and maintainable so you can deliver the best experience and focus on more important jobs.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Hugo 0.111.3">
|
||||
<meta name="generator" content="Hugo 0.112.5">
|
||||
|
||||
<meta name="docsearch:language" content="en">
|
||||
<meta name="docsearch:version" content="5.3">
|
||||
@@ -18,7 +18,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-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
|
||||
<link href="/docs/5.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" 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.0-alpha3/site/content/docs/5.3/customize/optimize.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.0/site/content/docs/5.3/customize/optimize.md" title="View and edit this file on GitHub" target="_blank" rel="noopener">
|
||||
View on GitHub
|
||||
</a>
|
||||
</div>
|
||||
@@ -571,9 +571,9 @@
|
||||
|
||||
<h2 id="lean-sass-imports">Lean Sass imports <a class="anchor-link" href="#lean-sass-imports" aria-label="Link to this section: Lean Sass imports"></a></h2>
|
||||
<p>When using Sass in your asset pipeline, make sure you optimize Bootstrap by only <code>@import</code>ing the components you need. Your largest optimizations will likely come from the <code>Layout & Components</code> section of our <code>bootstrap.scss</code>.</p>
|
||||
<div class="bd-example-snippet bd-code-snippet bd-scss-docs">
|
||||
<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.0-alpha3/scss/bootstrap.scss">scss/bootstrap.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.0/scss/bootstrap.scss">scss/bootstrap.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>
|
||||
@@ -696,7 +696,7 @@
|
||||
<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.0-alpha3.</li>
|
||||
<li class="mb-2">Currently v5.3.0.</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 offset-lg-1 mb-3">
|
||||
@@ -745,7 +745,7 @@
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="/docs/5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" crossorigin="anonymous"></script>
|
||||
<script src="/docs/5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>
|
||||
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/@docsearch/js@3"></script>
|
||||
@@ -773,10 +773,10 @@
|
||||
<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.0-alpha3\/dist\/css\/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.3.0\/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\.0\-alpha3\/dist\/js\/bootstrap\.bundle\.min\.js"></${'script'}>
|
||||
<${'script'} src="https:\/\/cdn\.jsdelivr\.net\/npm\/bootstrap@5\.3\.0\/dist\/js\/bootstrap\.bundle\.min\.js"></${'script'}>
|
||||
</head>
|
||||
<body class="p-3 m-0 border-0 ${classes}">
|
||||
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="Quickly customize Bootstrap with built-in variables to easily toggle global CSS preferences for controlling style and behavior.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Hugo 0.111.3">
|
||||
<meta name="generator" content="Hugo 0.112.5">
|
||||
|
||||
<meta name="docsearch:language" content="en">
|
||||
<meta name="docsearch:version" content="5.3">
|
||||
@@ -18,7 +18,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-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
|
||||
<link href="/docs/5.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" 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.0-alpha3/site/content/docs/5.3/customize/options.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.0/site/content/docs/5.3/customize/options.md" title="View and edit this file on GitHub" target="_blank" rel="noopener">
|
||||
View on GitHub
|
||||
</a>
|
||||
</div>
|
||||
@@ -663,7 +663,7 @@
|
||||
<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.0-alpha3.</li>
|
||||
<li class="mb-2">Currently v5.3.0.</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 offset-lg-1 mb-3">
|
||||
@@ -712,7 +712,7 @@
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="/docs/5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" crossorigin="anonymous"></script>
|
||||
<script src="/docs/5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>
|
||||
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/@docsearch/js@3"></script>
|
||||
@@ -740,10 +740,10 @@
|
||||
<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.0-alpha3\/dist\/css\/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.3.0\/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\.0\-alpha3\/dist\/js\/bootstrap\.bundle\.min\.js"></${'script'}>
|
||||
<${'script'} src="https:\/\/cdn\.jsdelivr\.net\/npm\/bootstrap@5\.3\.0\/dist\/js\/bootstrap\.bundle\.min\.js"></${'script'}>
|
||||
</head>
|
||||
<body class="p-3 m-0 border-0 ${classes}">
|
||||
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="Learn how to theme, customize, and extend Bootstrap with Sass, a boatload of global options, an expansive color system, and more.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Hugo 0.111.3">
|
||||
<meta name="generator" content="Hugo 0.112.5">
|
||||
|
||||
<meta name="docsearch:language" content="en">
|
||||
<meta name="docsearch:version" content="5.3">
|
||||
@@ -18,7 +18,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-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
|
||||
<link href="/docs/5.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" 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.0-alpha3/site/content/docs/5.3/customize/overview.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.0/site/content/docs/5.3/customize/overview.md" title="View and edit this file on GitHub" target="_blank" rel="noopener">
|
||||
View on GitHub
|
||||
</a>
|
||||
</div>
|
||||
@@ -640,7 +640,7 @@
|
||||
<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.0-alpha3.</li>
|
||||
<li class="mb-2">Currently v5.3.0.</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 offset-lg-1 mb-3">
|
||||
@@ -689,7 +689,7 @@
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="/docs/5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" crossorigin="anonymous"></script>
|
||||
<script src="/docs/5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>
|
||||
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/@docsearch/js@3"></script>
|
||||
@@ -717,10 +717,10 @@
|
||||
<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.0-alpha3\/dist\/css\/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.3.0\/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\.0\-alpha3\/dist\/js\/bootstrap\.bundle\.min\.js"></${'script'}>
|
||||
<${'script'} src="https:\/\/cdn\.jsdelivr\.net\/npm\/bootstrap@5\.3\.0\/dist\/js\/bootstrap\.bundle\.min\.js"></${'script'}>
|
||||
</head>
|
||||
<body class="p-3 m-0 border-0 ${classes}">
|
||||
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="Utilize our source Sass files to take advantage of variables, maps, mixins, and functions to help you build faster and customize your project.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Hugo 0.111.3">
|
||||
<meta name="generator" content="Hugo 0.112.5">
|
||||
|
||||
<meta name="docsearch:language" content="en">
|
||||
<meta name="docsearch:version" content="5.3">
|
||||
@@ -18,7 +18,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-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
|
||||
<link href="/docs/5.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" 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.0-alpha3/site/content/docs/5.3/customize/sass.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.0/site/content/docs/5.3/customize/sass.md" title="View and edit this file on GitHub" target="_blank" rel="noopener">
|
||||
View on GitHub
|
||||
</a>
|
||||
</div>
|
||||
@@ -723,9 +723,9 @@
|
||||
</span></span><span class="line"><span class="cl"> <span class="na">background-color</span><span class="o">:</span> <span class="nv">$dark</span><span class="p">;</span>
|
||||
</span></span><span class="line"><span class="cl"><span class="p">}</span>
|
||||
</span></span></code></pre></div><p>You can lighten or darken colors with Bootstrap’s <code>tint-color()</code> and <code>shade-color()</code> functions. These functions will mix colors with black or white, unlike Sass’ native <code>lighten()</code> and <code>darken()</code> functions which will change the lightness by a fixed amount, which often doesn’t lead to the desired effect.</p>
|
||||
<div class="bd-example-snippet bd-code-snippet bd-scss-docs">
|
||||
<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.0-alpha3/scss/_functions.scss">scss/_functions.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.0/scss/_functions.scss">scss/_functions.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>
|
||||
@@ -805,9 +805,9 @@
|
||||
<p>Our <code>scss/mixins/</code> directory has a ton of mixins that power parts of Bootstrap and can also be used across your own project.</p>
|
||||
<h3 id="color-schemes">Color schemes <a class="anchor-link" href="#color-schemes" aria-label="Link to this section: Color schemes"></a></h3>
|
||||
<p>A shorthand mixin for the <code>prefers-color-scheme</code> media query is available with support for <code>light</code>, <code>dark</code>, and custom color schemes. See <a href="/docs/5.3/customize/color-modes/">the color modes documentation</a> for information on our color mode mixin.</p>
|
||||
<div class="bd-example-snippet bd-code-snippet bd-scss-docs">
|
||||
<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.0-alpha3/scss/mixins/_color-scheme.scss">scss/mixins/_color-scheme.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.0/scss/mixins/_color-scheme.scss">scss/mixins/_color-scheme.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>
|
||||
@@ -845,7 +845,7 @@
|
||||
<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.0-alpha3.</li>
|
||||
<li class="mb-2">Currently v5.3.0.</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 offset-lg-1 mb-3">
|
||||
@@ -894,7 +894,7 @@
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="/docs/5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" crossorigin="anonymous"></script>
|
||||
<script src="/docs/5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>
|
||||
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/@docsearch/js@3"></script>
|
||||
@@ -922,10 +922,10 @@
|
||||
<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.0-alpha3\/dist\/css\/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.3.0\/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\.0\-alpha3\/dist\/js\/bootstrap\.bundle\.min\.js"></${'script'}>
|
||||
<${'script'} src="https:\/\/cdn\.jsdelivr\.net\/npm\/bootstrap@5\.3\.0\/dist\/js\/bootstrap\.bundle\.min\.js"></${'script'}>
|
||||
</head>
|
||||
<body class="p-3 m-0 border-0 ${classes}">
|
||||
|
||||
|
||||
Reference in New Issue
Block a user