mirror of
https://github.com/twbs/bootstrap.git
synced 2025-09-02 01:42:36 +02:00
Add v5.3.4 docs (#40657)
* Add v5.3.4 docs * Rebuild * Update stackblitz --------- Co-authored-by: Mark Otto <markdotto@gmail.com>
This commit is contained in:
XhmikosR
GitHub
252
index.html
252
index.html
@@ -5,26 +5,22 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="Powerful, extensible, and feature-packed frontend toolkit. Build and customize with Sass, utilize prebuilt grid system and components, and bring projects to life with powerful JavaScript plugins.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Hugo 0.122.0">
|
||||
<meta name="generator" content="Hugo 0.145.0">
|
||||
|
||||
<meta name="docsearch:language" content="en">
|
||||
<meta name="docsearch:version" content="5.3">
|
||||
|
||||
<title>Bootstrap · The most popular HTML, CSS, and JS library in the world.</title>
|
||||
|
||||
<link rel="canonical" href="https://getbootstrap.com/">
|
||||
|
||||
<link rel="preconnect" href="https://AK7KMZKZHQ-dsn.algolia.net" crossorigin>
|
||||
<link rel="preconnect" href="https://ak7kmzkzhq-dsn.algolia.net" crossorigin>
|
||||
|
||||
<title>Bootstrap · The most popular HTML, CSS, and JS library in the world.</title>
|
||||
|
||||
<script src="/docs/5.3/assets/js/color-modes.js"></script>
|
||||
|
||||
<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-DQvkBjpPgn7RC31MCQoOeC9TI2kdqa4+BSgNMNj8v77fdC77Kj5zpWFTJaaAoMbC"><link href="/docs/5.3/assets/css/docs.css" rel="stylesheet">
|
||||
<link href="/docs/5.3/assets/css/search.css" rel="stylesheet">
|
||||
|
||||
<link href="/docs/5.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
|
||||
|
||||
<link href="/docs/5.3/assets/css/docs.css" rel="stylesheet">
|
||||
|
||||
<!-- Favicons -->
|
||||
<link rel="apple-touch-icon" href="/docs/5.3/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
|
||||
<link rel="icon" href="/docs/5.3/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
|
||||
<link rel="icon" href="/docs/5.3/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
|
||||
@@ -51,21 +47,13 @@
|
||||
|
||||
<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
|
||||
|
||||
<script>
|
||||
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
|
||||
ga('create', 'UA-146052-10', 'getbootstrap.com');
|
||||
ga('set', 'anonymizeIp', true);
|
||||
ga('send', 'pageview');
|
||||
</script>
|
||||
<script async src="https://www.google-analytics.com/analytics.js"></script>
|
||||
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<div class="skippy visually-hidden-focusable overflow-hidden">
|
||||
<div class="container-xl">
|
||||
<a class="d-inline-flex p-2 m-1" href="#content">Skip to main content</a>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -171,7 +159,7 @@
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="offcanvas-lg offcanvas-end flex-grow-1" tabindex="-1" id="bdNavbar" aria-labelledby="bdNavbarOffcanvasLabel" data-bs-scroll="true">
|
||||
<div class="offcanvas-lg offcanvas-end flex-grow-1" tabindex="-1" id="bdNavbar" aria-labelledby="bdNavbarOffcanvasLabel">
|
||||
<div class="offcanvas-header px-4 pb-0">
|
||||
<h5 class="offcanvas-title text-white" id="bdNavbarOffcanvasLabel">Bootstrap</h5>
|
||||
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas" aria-label="Close" data-bs-target="#bdNavbar"></button>
|
||||
@@ -181,19 +169,19 @@
|
||||
<hr class="d-lg-none text-white-50">
|
||||
<ul class="navbar-nav flex-row flex-wrap bd-navbar-nav">
|
||||
<li class="nav-item col-6 col-lg-auto">
|
||||
<a class="nav-link py-2 px-0 px-lg-2" href="/docs/5.3/getting-started/introduction/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Docs');">Docs</a>
|
||||
<a class="nav-link py-2 px-0 px-lg-2" href="/docs/5.3/getting-started/introduction/">Docs</a>
|
||||
</li>
|
||||
<li class="nav-item col-6 col-lg-auto">
|
||||
<a class="nav-link py-2 px-0 px-lg-2" href="/docs/5.3/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
|
||||
<a class="nav-link py-2 px-0 px-lg-2" href="/docs/5.3/examples/">Examples</a>
|
||||
</li>
|
||||
<li class="nav-item col-6 col-lg-auto">
|
||||
<a class="nav-link py-2 px-0 px-lg-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
|
||||
<a class="nav-link py-2 px-0 px-lg-2" href="https://icons.getbootstrap.com/" target="_blank" rel="noopener">Icons</a>
|
||||
</li>
|
||||
<li class="nav-item col-6 col-lg-auto">
|
||||
<a class="nav-link py-2 px-0 px-lg-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
|
||||
<a class="nav-link py-2 px-0 px-lg-2" href="https://themes.getbootstrap.com/" target="_blank" rel="noopener">Themes</a>
|
||||
</li>
|
||||
<li class="nav-item col-6 col-lg-auto">
|
||||
<a class="nav-link py-2 px-0 px-lg-2" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
|
||||
<a class="nav-link py-2 px-0 px-lg-2" href="https://blog.getbootstrap.com/" target="_blank" rel="noopener">Blog</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
@@ -207,9 +195,10 @@
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item col-6 col-lg-auto">
|
||||
<a class="nav-link py-2 px-0 px-lg-2" href="https://twitter.com/getbootstrap" target="_blank" rel="noopener">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" class="navbar-nav-svg" viewBox="0 0 512 416.32" role="img"><title>Twitter</title><path fill="currentColor" d="M160.83 416.32c193.2 0 298.92-160.22 298.92-298.92 0-4.51 0-9-.2-13.52A214 214 0 0 0 512 49.38a212.93 212.93 0 0 1-60.44 16.6 105.7 105.7 0 0 0 46.3-58.19 209 209 0 0 1-66.79 25.37 105.09 105.09 0 0 0-181.73 71.91 116.12 116.12 0 0 0 2.66 24c-87.28-4.3-164.73-46.3-216.56-109.82A105.48 105.48 0 0 0 68 159.6a106.27 106.27 0 0 1-47.53-13.11v1.43a105.28 105.28 0 0 0 84.21 103.06 105.67 105.67 0 0 1-47.33 1.84 105.06 105.06 0 0 0 98.14 72.94A210.72 210.72 0 0 1 25 370.84a202.17 202.17 0 0 1-25-1.43 298.85 298.85 0 0 0 160.83 46.92"/></svg>
|
||||
<small class="d-lg-none ms-2">Twitter</small>
|
||||
<a class="nav-link py-2 px-0 px-lg-2" href="https://x.com/getbootstrap" target="_blank" rel="noopener">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" class="navbar-nav-svg" viewBox="0 0 1200 1227" role="img"><title>X</title><path fill="currentColor" d="M714.163 519.284 1160.89 0h-105.86L667.137 450.887 357.328 0H0l468.492 681.821L0 1226.37h105.866l409.625-476.152 327.181 476.152H1200L714.137 519.284h.026ZM569.165 687.828l-47.468-67.894-377.686-540.24h162.604l304.797 435.991 47.468 67.894 396.2 566.721H892.476L569.165 687.854v-.026Z"/></svg>
|
||||
|
||||
<small class="d-lg-none ms-2">X</small>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item col-6 col-lg-auto">
|
||||
@@ -223,9 +212,7 @@
|
||||
<hr class="d-lg-none my-2 text-white-50">
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li class="nav-item dropdown">
|
||||
<li class="nav-item dropdown">
|
||||
<button type="button" class="btn btn-link nav-link py-2 px-0 px-lg-2 dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-display="static">
|
||||
<span class="d-lg-none" aria-hidden="true">Bootstrap</span><span class="visually-hidden">Bootstrap </span> v5.3 <span class="visually-hidden">(switch to other versions)</span>
|
||||
</button>
|
||||
@@ -234,7 +221,7 @@
|
||||
<li>
|
||||
<a class="dropdown-item d-flex align-items-center justify-content-between active" aria-current="true" href="/">
|
||||
Latest (5.3.x)
|
||||
<svg class="bi"><use xlink:href="#check2"></use></svg>
|
||||
<svg class="bi" aria-hidden="true"><use xlink:href="#check2"></use></svg>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
@@ -263,39 +250,40 @@
|
||||
</li>
|
||||
|
||||
<li class="nav-item dropdown">
|
||||
<button class="btn btn-link nav-link py-2 px-0 px-lg-2 dropdown-toggle d-flex align-items-center"
|
||||
id="bd-theme"
|
||||
type="button"
|
||||
aria-expanded="false"
|
||||
data-bs-toggle="dropdown"
|
||||
data-bs-display="static"
|
||||
aria-label="Toggle theme (auto)">
|
||||
<svg class="bi my-1 theme-icon-active"><use href="#circle-half"></use></svg>
|
||||
<span class="d-lg-none ms-2" id="bd-theme-text">Toggle theme</span>
|
||||
</button>
|
||||
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="bd-theme-text">
|
||||
<li>
|
||||
<button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="light" aria-pressed="false">
|
||||
<svg class="bi me-2 opacity-50"><use href="#sun-fill"></use></svg>
|
||||
Light
|
||||
<svg class="bi ms-auto d-none"><use href="#check2"></use></svg>
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="dark" aria-pressed="false">
|
||||
<svg class="bi me-2 opacity-50"><use href="#moon-stars-fill"></use></svg>
|
||||
Dark
|
||||
<svg class="bi ms-auto d-none"><use href="#check2"></use></svg>
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button type="button" class="dropdown-item d-flex align-items-center active" data-bs-theme-value="auto" aria-pressed="true">
|
||||
<svg class="bi me-2 opacity-50"><use href="#circle-half"></use></svg>
|
||||
Auto
|
||||
<svg class="bi ms-auto d-none"><use href="#check2"></use></svg>
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
<button class="btn btn-link nav-link px-0 px-lg-2 py-2 dropdown-toggle d-flex align-items-center"
|
||||
id="bd-theme"
|
||||
type="button"
|
||||
aria-expanded="false"
|
||||
data-bs-toggle="dropdown"
|
||||
data-bs-display="static"
|
||||
aria-label="Toggle theme (auto)">
|
||||
<svg class="bi my-1 theme-icon-active" aria-hidden="true"><use href="#circle-half"></use></svg>
|
||||
<span class="d-lg-none ms-2" id="bd-theme-text">Toggle theme</span>
|
||||
</button>
|
||||
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="bd-theme-text">
|
||||
<li>
|
||||
<button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="light" aria-pressed="false">
|
||||
<svg class="bi me-2 opacity-50" aria-hidden="true"><use href="#sun-fill"></use></svg>
|
||||
Light
|
||||
<svg class="bi ms-auto d-none" aria-hidden="true"><use href="#check2"></use></svg>
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="dark" aria-pressed="false">
|
||||
<svg class="bi me-2 opacity-50" aria-hidden="true"><use href="#moon-stars-fill"></use></svg>
|
||||
Dark
|
||||
<svg class="bi ms-auto d-none" aria-hidden="true"><use href="#check2"></use></svg>
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button type="button" class="dropdown-item d-flex align-items-center active" data-bs-theme-value="auto" aria-pressed="true">
|
||||
<svg class="bi me-2 opacity-50" aria-hidden="true"><use href="#circle-half"></use></svg>
|
||||
Auto
|
||||
<svg class="bi ms-auto d-none" aria-hidden="true"><use href="#check2"></use></svg>
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
@@ -304,7 +292,7 @@
|
||||
</header>
|
||||
|
||||
|
||||
|
||||
|
||||
<main>
|
||||
<div class="bd-masthead mb-3" id="content">
|
||||
<div class="container-xxl bd-gutter">
|
||||
@@ -312,25 +300,32 @@
|
||||
<a class="d-flex flex-column flex-lg-row justify-content-center align-items-center mb-4 text-dark lh-sm text-decoration-none" href="https://www.herodevs.com/support/nes-bootstrap?utm_source=Bootstrap_site&utm_medium=Banner&utm_campaign=v3and4_eol" rel="noopener" target="_blank">
|
||||
<span class="d-sm-inline-flex align-items-center gap-1 py-2 px-3 me-2 mb-2 mb-lg-0 rounded-5 masthead-notice">
|
||||
Get Security Updates for Bootstrap 3 & 4
|
||||
<svg class="bi" style="width: 20px; height: 20px;"><use xlink:href="#arrow-right-short"></use></svg>
|
||||
<svg class="bi" style="width: 20px; height: 20px; margin-block: -2px;" aria-hidden="true"><use xlink:href="#arrow-right-short"></use></svg>
|
||||
</span>
|
||||
</a>
|
||||
<img src="/docs/5.3/assets/brand/bootstrap-logo-shadow.png" width="200" height="165" alt="Bootstrap" class="d-none d-sm-block mx-auto mb-3">
|
||||
|
||||
<img class="img-fluid mx-auto d-none d-sm-block mb-3"
|
||||
srcset="/docs/5.3/assets/brand/bootstrap-logo-shadow.png, /docs/5.3/assets/brand/bootstrap-logo-shadow@2x.png 2x"
|
||||
src="/docs/5.3/assets/brand/bootstrap-logo-shadow.png"
|
||||
alt="Bootstrap"
|
||||
width="200"
|
||||
height="165">
|
||||
|
||||
<h1 class="mb-3 fw-semibold lh-1">Build fast, responsive sites with Bootstrap</h1>
|
||||
<p class="lead mb-4">
|
||||
Powerful, extensible, and feature-packed frontend toolkit. Build and customize with Sass, utilize prebuilt grid system and components, and bring projects to life with powerful JavaScript plugins.
|
||||
</p>
|
||||
<div class="d-flex flex-column flex-lg-row align-items-md-stretch justify-content-md-center gap-3 mb-4">
|
||||
<div class="d-inline-block v-align-middle fs-5">
|
||||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-sh" data-lang="sh"><span class="line"><span class="cl">npm i bootstrap@5.3.3</span></span></code></pre></div>
|
||||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-sh" data-lang="sh"><span class="line"><span class="cl">npm i bootstrap@5.3.4</span></span></code></pre></div>
|
||||
</div>
|
||||
<a href="/docs/5.3/getting-started/introduction/" class="btn btn-lg bd-btn-lg btn-bd-primary d-flex align-items-center justify-content-center fw-semibold" onclick="ga('send', 'event', 'Jumbotron actions', 'Get started', 'Get started');">
|
||||
<a href="/docs/5.3/getting-started/introduction/" class="btn btn-lg bd-btn-lg btn-bd-primary d-flex align-items-center justify-content-center fw-semibold">
|
||||
<svg class="bi me-2" aria-hidden="true"><use xlink:href="#book-half"></use></svg>
|
||||
Read the docs
|
||||
</a>
|
||||
</div>
|
||||
<p class="text-body-secondary mb-0">
|
||||
Currently <strong>v5.3.3</strong>
|
||||
Currently <strong>v5.3.4</strong>
|
||||
<span class="px-1">·</span>
|
||||
<a href="/docs/5.3/getting-started/download/" class="link-secondary">Download</a>
|
||||
<span class="px-1">·</span>
|
||||
@@ -345,41 +340,41 @@
|
||||
<div class="container-xxl bd-gutter masthead-followup">
|
||||
<div class="col-lg-7 mx-auto pb-3 mb-3 mb-md-5 text-md-center">
|
||||
<div class="masthead-followup-icon d-inline-block mb-3" style="--bg-rgb: var(--bd-violet-rgb);">
|
||||
<svg class="bi fs-1"><use xlink:href="#code"></use></svg>
|
||||
<svg class="bi fs-1" aria-hidden="true"><use xlink:href="#code"></use></svg>
|
||||
</div>
|
||||
<h2 class="display-5 mb-3 fw-semibold lh-sm">Get started any way you want</h2>
|
||||
<p class="lead fw-normal">
|
||||
Jump right into building with Bootstrap—use the CDN, install it via package manager, or download the source code.
|
||||
</p>
|
||||
<p class="d-flex justify-content-md-start justify-content-md-center lead fw-normal">
|
||||
<p class="d-flex justify-content-md-center lead fw-normal">
|
||||
<a href="/docs/5.3/getting-started/download/" class="icon-link icon-link-hover fw-semibold ps-md-4">
|
||||
Read installation docs
|
||||
<svg class="bi"><use xlink:href="#arrow-right"></use></svg>
|
||||
<svg class="bi" aria-hidden="true"><use xlink:href="#arrow-right"></use></svg>
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<section class="row g-3 g-md-5 mb-5 pb-5 justify-content-center">
|
||||
<div class="col-lg-6 py-lg-4 pe-lg-5">
|
||||
<svg class="bi mb-2 fs-2 text-body-secondary"><use xlink:href="#box-seam"></use></svg>
|
||||
<svg class="bi mb-2 fs-2 text-body-secondary" aria-hidden="true"><use xlink:href="#box-seam"></use></svg>
|
||||
<h3 class="fw-semibold">Install via package manager</h3>
|
||||
<p class="pe-lg-5">
|
||||
Install Bootstrap’s source Sass and JavaScript files via npm, RubyGems, Composer, or Meteor. Package managed installs don’t include documentation or our full build scripts. You can also <a href="https://github.com/twbs/examples/">use any demo from our Examples repo</a> to quickly jumpstart Bootstrap projects.
|
||||
Install Bootstrap’s source Sass and JavaScript files via npm, RubyGems, Composer, or Meteor. Package-managed installs don’t include documentation or our full build scripts. You can also <a href="https://github.com/twbs/examples/">use any demo from our Examples repo</a> to quickly jumpstart Bootstrap projects.
|
||||
</p>
|
||||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-sh" data-lang="sh"><span class="line"><span class="cl">npm install bootstrap@5.3.3</span></span></code></pre></div>
|
||||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-sh" data-lang="sh"><span class="line"><span class="cl">gem install bootstrap -v 5.3.3</span></span></code></pre></div>
|
||||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-sh" data-lang="sh"><span class="line"><span class="cl">npm install bootstrap@5.3.4</span></span></code></pre></div>
|
||||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-sh" data-lang="sh"><span class="line"><span class="cl">gem install bootstrap -v 5.3.4</span></span></code></pre></div>
|
||||
<p>
|
||||
<a href="/docs/5.3/getting-started/download/">Read our installation docs</a> for more info and additional package managers.
|
||||
</p>
|
||||
</div>
|
||||
<div class="col-lg-6 py-lg-4 ps-lg-5 border-lg-start">
|
||||
<svg class="bi mb-2 fs-2 text-body-secondary"><use xlink:href="#globe2"></use></svg>
|
||||
<svg class="bi mb-2 fs-2 text-body-secondary" aria-hidden="true"><use xlink:href="#globe2"></use></svg>
|
||||
<h3 class="fw-semibold">Include via CDN</h3>
|
||||
<p class="pe-lg-5">
|
||||
When you only need to include Bootstrap’s compiled CSS or JS, you can use <a href="https://www.jsdelivr.com/package/npm/bootstrap">jsDelivr</a>. See it in action with our simple <a href="/docs/5.3/getting-started/introduction/#quick-start">quick start</a>, or <a href="/docs/5.3/examples/">browse the examples</a> to jumpstart your next project. You can also choose to include Popper and our JS <a href="/docs/5.3/getting-started/introduction/#separate">separately</a>.
|
||||
</p>
|
||||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><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.3/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-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"</span> <span class="na">crossorigin</span><span class="o">=</span><span class="s">"anonymous"</span><span class="p">></span></span></span></code></pre></div>
|
||||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><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.3/dist/js/bootstrap.bundle.min.js"</span> <span class="na">integrity</span><span class="o">=</span><span class="s">"sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"</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></code></pre></div>
|
||||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><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.4/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-DQvkBjpPgn7RC31MCQoOeC9TI2kdqa4+BSgNMNj8v77fdC77Kj5zpWFTJaaAoMbC"</span> <span class="na">crossorigin</span><span class="o">=</span><span class="s">"anonymous"</span><span class="p">></span></span></span></code></pre></div>
|
||||
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><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.4/dist/js/bootstrap.bundle.min.js"</span> <span class="na">integrity</span><span class="o">=</span><span class="s">"sha384-YUe2LzesAfftltw+PEaao2tjU/QATaW/rOitAq67e0CT0Zi2VVRL0oC4+gAaeBKu"</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></code></pre></div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-8 mx-auto text-center">
|
||||
@@ -404,16 +399,16 @@
|
||||
|
||||
<section class="col-lg-7 mb-5">
|
||||
<div class="masthead-followup-icon d-inline-block mb-3" style="--bg-rgb: var(--bs-primary-rgb);">
|
||||
<svg class="bi fs-1"><use xlink:href="#palette2"></use></svg>
|
||||
<svg class="bi fs-1" aria-hidden="true"><use xlink:href="#palette2"></use></svg>
|
||||
</div>
|
||||
<h2 class="display-5 mb-3 fw-semibold lh-sm">Customize everything with Sass</h2>
|
||||
<p class="lead fw-normal">
|
||||
Bootstrap utilizes Sass for a modular and customizable architecture. Import only the components you need, enable global options like gradients and shadows, and write your own CSS with our variables, maps, functions, and mixins.
|
||||
</p>
|
||||
<p class="d-flex justify-content-start lead fw-normal">
|
||||
<p class="d-flex lead fw-normal">
|
||||
<a href="/docs/5.3/customize/overview/" class="icon-link icon-link-hover fw-semibold">
|
||||
Learn more about customizing
|
||||
<svg class="bi"><use xlink:href="#arrow-right"></use></svg>
|
||||
<svg class="bi" aria-hidden="true"><use xlink:href="#arrow-right"></use></svg>
|
||||
</a>
|
||||
</p>
|
||||
</section>
|
||||
@@ -465,16 +460,16 @@
|
||||
<section class="row g-md-5 pb-md-5 mb-5 align-items-center">
|
||||
<div class="col-lg-8 mb-5">
|
||||
<div class="masthead-followup-icon d-inline-block mb-3" style="--bg-rgb: var(--bd-pink-rgb);">
|
||||
<svg class="bi fs-1"><use xlink:href="#braces"></use></svg>
|
||||
<svg class="bi fs-1" aria-hidden="true"><use xlink:href="#braces"></use></svg>
|
||||
</div>
|
||||
<h2 class="display-5 mb-3 fw-semibold lh-sm">Build and extend in real-time with CSS variables</h2>
|
||||
<p class="lead fw-normal">
|
||||
Bootstrap 5 is evolving with each release to better utilize CSS variables for global theme styles, individual components, and even utilities. We provide dozens of variables for colors, font styles, and more at a <code>:root</code> level for use anywhere. On components and utilities, CSS variables are scoped to the relevant class and can easily be modified.
|
||||
</p>
|
||||
<p class="d-flex align-items-start flex-column lead fw-normal mb-0">
|
||||
<p class="d-flex flex-column lead fw-normal mb-0">
|
||||
<a href="/docs/5.3/customize/css-variables/" class="icon-link icon-link-hover fw-semibold mb-3">
|
||||
Learn more about CSS variables
|
||||
<svg class="bi"><use xlink:href="#arrow-right"></use></svg>
|
||||
<svg class="bi" aria-hidden="true"><use xlink:href="#arrow-right"></use></svg>
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
@@ -514,11 +509,11 @@
|
||||
<section class="pb-md-5 mb-5">
|
||||
<div class="col-lg-8 mb-5">
|
||||
<div class="masthead-followup-icon d-inline-block mb-3 me-2" style="--bg-rgb: var(--bs-danger-rgb);">
|
||||
<svg class="bi fs-1"><use xlink:href="#menu-button-wide-fill"></use></svg>
|
||||
<svg class="bi fs-1" aria-hidden="true"><use xlink:href="#menu-button-wide-fill"></use></svg>
|
||||
</div>
|
||||
<svg class="bi me-2 fs-2 text-body-secondary"><use xlink:href="#plus"></use></svg>
|
||||
<svg class="bi me-2 fs-2 text-body-secondary" aria-hidden="true"><use xlink:href="#plus"></use></svg>
|
||||
<div class="masthead-followup-icon d-inline-block mb-3" style="--bg-rgb: var(--bs-info-rgb);">
|
||||
<svg class="bi fs-1"><use xlink:href="#braces-asterisk"></use></svg>
|
||||
<svg class="bi fs-1" aria-hidden="true"><use xlink:href="#braces-asterisk"></use></svg>
|
||||
</div>
|
||||
<h2 class="display-5 mb-3 fw-semibold lh-sm">Components, meet the Utility API</h2>
|
||||
<p class="lead fw-normal">
|
||||
@@ -565,10 +560,10 @@
|
||||
</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">li</span><span class="p">></span>
|
||||
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">ul</span><span class="p">></span>
|
||||
</span></span></code></pre></div>
|
||||
<p class="d-flex justify-content-start mb-md-0">
|
||||
<a href="/docs/5.3/examples#snippets" class="icon-link icon-link-hover fw-semibold">
|
||||
<p class="d-flex mb-md-0">
|
||||
<a href="/docs/5.3/examples/#snippets" class="icon-link icon-link-hover fw-semibold">
|
||||
Explore customized components
|
||||
<svg class="bi"><use xlink:href="#arrow-right"></use></svg>
|
||||
<svg class="bi" aria-hidden="true"><use xlink:href="#arrow-right"></use></svg>
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
@@ -590,10 +585,10 @@
|
||||
</span></span><span class="line"><span class="cl"><span class="p">);</span>
|
||||
</span></span></code></pre></div>
|
||||
|
||||
<p class="d-flex justify-content-start mb-md-0">
|
||||
<p class="d-flex mb-md-0">
|
||||
<a href="/docs/5.3/utilities/api/" class="icon-link icon-link-hover fw-semibold mb-3">
|
||||
Explore the utility API
|
||||
<svg class="bi"><use xlink:href="#arrow-right"></use></svg>
|
||||
<svg class="bi" aria-hidden="true"><use xlink:href="#arrow-right"></use></svg>
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
@@ -603,16 +598,16 @@
|
||||
<section class="pb-md-5 mb-5">
|
||||
<div class="col-lg-8 mb-5">
|
||||
<div class="masthead-followup-icon d-inline-block mb-3" style="--bg-rgb: var(--bs-warning-rgb);">
|
||||
<svg class="bi fs-1"><use xlink:href="#plugin"></use></svg>
|
||||
<svg class="bi fs-1" aria-hidden="true"><use xlink:href="#plugin"></use></svg>
|
||||
</div>
|
||||
<h2 class="display-5 mb-3 fw-semibold lh-sm">Powerful JavaScript plugins without jQuery</h2>
|
||||
<p class="lead fw-normal">
|
||||
Add toggleable hidden elements, modals and offcanvas menus, popovers and tooltips, and so much more—all without jQuery. Bootstrap's JavaScript is HTML-first, meaning most plugins are added with <code>data</code> attributes in your HTML. Need more control? Include individual plugins programmatically.
|
||||
</p>
|
||||
<p class="d-flex justify-content-start lead fw-normal mb-md-0">
|
||||
<p class="d-flex lead fw-normal mb-md-0">
|
||||
<a href="/docs/5.3/getting-started/javascript/" class="icon-link icon-link-hover fw-semibold">
|
||||
Learn more about Bootstrap JavaScript
|
||||
<svg class="bi"><use xlink:href="#arrow-right"></use></svg>
|
||||
<svg class="bi" aria-hidden="true"><use xlink:href="#arrow-right"></use></svg>
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
@@ -732,7 +727,7 @@
|
||||
<section class="row g-3 g-md-5 pb-md-5 mb-5 align-items-center">
|
||||
<div class="col-lg-6">
|
||||
<div class="masthead-followup-icon d-inline-block mb-3" style="--bg-rgb: var(--bd-teal-rgb);">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" focusable="false" viewBox="0 0 16 16">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" viewBox="0 0 16 16" aria-hidden="true">
|
||||
<path d="M0 6a6 6 0 1112 0A6 6 0 010 6z"/>
|
||||
<path d="M12.93 5h1.57a.5.5 0 01.5.5v9a.5.5 0 01-.5.5h-9a.5.5 0 01-.5-.5v-1.57a6.953 6.953 0 01-1-.22v1.79A1.5 1.5 0 005.5 16h9a1.5 1.5 0 001.5-1.5v-9A1.5 1.5 0 0014.5 4h-1.79c.097.324.17.658.22 1z"/>
|
||||
</svg>
|
||||
@@ -742,25 +737,30 @@
|
||||
<p class="lead fw-normal">
|
||||
<a href="https://icons.getbootstrap.com/">Bootstrap Icons</a> is an open source SVG icon library featuring over 1,800 glyphs, with more added every release. They're designed to work in any project, whether you use Bootstrap itself or not. Use them as SVGs or icon fonts—both options give you vector scaling and easy customization via CSS.
|
||||
</p>
|
||||
<p class="d-flex justify-content-start lead fw-normal mb-md-0">
|
||||
<p class="d-flex lead fw-normal mb-md-0">
|
||||
<a href="https://icons.getbootstrap.com/" class="icon-link icon-link-hover fw-semibold">
|
||||
Get Bootstrap Icons
|
||||
<svg class="bi"><use xlink:href="#arrow-right"></use></svg>
|
||||
<svg class="bi" aria-hidden="true"><use xlink:href="#arrow-right"></use></svg>
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<img class="img-fluid mt-3 mx-auto" srcset="/docs/5.3/assets/img/bootstrap-icons.png,
|
||||
/docs/5.3/assets/img/bootstrap-icons@2x.png 2x"
|
||||
src="/docs/5.3/assets/img/bootstrap-icons.png"
|
||||
alt="Bootstrap Icons" width="700" height="425" loading="lazy">
|
||||
|
||||
<img class="img-fluid mx-auto d-block mt-3"
|
||||
srcset="/docs/5.3/assets/img/bootstrap-icons.png, /docs/5.3/assets/img/bootstrap-icons@2x.png 2x"
|
||||
src="/docs/5.3/assets/img/bootstrap-icons.png"
|
||||
alt="Bootstrap Icons"
|
||||
loading="lazy"
|
||||
width="700"
|
||||
height="425">
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="row g-3 g-md-5 pb-md-5 mb-5 align-items-center">
|
||||
<div class="col-lg-6">
|
||||
<div class="masthead-followup-icon d-inline-block mb-3" style="--bg-rgb: var(--bd-violet-rgb);">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" focusable="false" viewBox="0 0 16 16">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" viewBox="0 0 16 16" aria-hidden="true">
|
||||
<path fill-rule="evenodd" d="M8 16a6 6 0 006-6c0-1.655-1.122-2.904-2.432-4.362C10.254 4.176 8.75 2.503 8 0c0 0-6 5.686-6 10a6 6 0 006 6zM6.646 4.646c-.376.377-1.272 1.489-2.093 3.13l.894.448c.78-1.559 1.616-2.58 1.907-2.87l-.708-.708z" clip-rule="evenodd"/>
|
||||
</svg>
|
||||
|
||||
@@ -769,25 +769,30 @@
|
||||
<p class="lead fw-normal">
|
||||
Take Bootstrap to the next level with premium themes from the <a href="https://themes.getbootstrap.com/">official Bootstrap Themes marketplace</a>. Themes are built on Bootstrap as their own extended frameworks, rich with new components and plugins, documentation, and powerful build tools.
|
||||
</p>
|
||||
<p class="d-flex justify-content-start lead fw-normal mb-md-0">
|
||||
<p class="d-flex lead fw-normal mb-md-0">
|
||||
<a href="https://themes.getbootstrap.com/" class="icon-link icon-link-hover fw-semibold">
|
||||
Browse Bootstrap Themes
|
||||
<svg class="bi"><use xlink:href="#arrow-right"></use></svg>
|
||||
<svg class="bi" aria-hidden="true"><use xlink:href="#arrow-right"></use></svg>
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<img class="img-fluid mt-3 mx-auto" srcset="/docs/5.3/assets/img/bootstrap-themes.png,
|
||||
/docs/5.3/assets/img/bootstrap-themes@2x.png 2x"
|
||||
src="/docs/5.3/assets/img/bootstrap-themes.png"
|
||||
alt="Bootstrap Themes" width="700" height="500" loading="lazy">
|
||||
|
||||
<img class="img-fluid mx-auto d-block mt-3"
|
||||
srcset="/docs/5.3/assets/img/bootstrap-themes.png, /docs/5.3/assets/img/bootstrap-themes@2x.png 2x"
|
||||
src="/docs/5.3/assets/img/bootstrap-themes.png"
|
||||
alt="Bootstrap Themes"
|
||||
loading="lazy"
|
||||
width="700"
|
||||
height="500">
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<footer class="bd-footer py-4 py-md-5 mt-5 bg-body-tertiary">
|
||||
@@ -801,7 +806,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.3.</li>
|
||||
<li class="mb-2">Currently v5.3.4.</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 offset-lg-1 mb-3">
|
||||
@@ -833,7 +838,7 @@
|
||||
<li class="mb-2"><a href="https://github.com/twbs/bootstrap/tree/v4-dev" target="_blank" rel="noopener">Bootstrap 4</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/icons" target="_blank" rel="noopener">Icons</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/rfs" target="_blank" rel="noopener">RFS</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/examples/" target="_blank" rel="noopener">Examples repo</a></li>
|
||||
<li class="mb-2"><a href="https://github.com/twbs/examples" target="_blank" rel="noopener">Examples repo</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 mb-3">
|
||||
@@ -850,19 +855,12 @@
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="/docs/5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
|
||||
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/@docsearch/js@3"></script>
|
||||
|
||||
|
||||
|
||||
<script src="/docs/5.3/assets/js/docs.min.js"></script>
|
||||
|
||||
|
||||
|
||||
|
||||
<script defer src="/docs/5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YUe2LzesAfftltw+PEaao2tjU/QATaW/rOitAq67e0CT0Zi2VVRL0oC4+gAaeBKu"></script>
|
||||
|
||||
<script defer src="/docs/5.3/assets/js/application.js"></script>
|
||||
<script defer src="/docs/5.3/assets/js/search.js"></script>
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user