mirror of
https://github.com/twbs/bootstrap.git
synced 2025-08-21 20:55:50 +02:00
Add v5.0.1 docs. (#33973)
This commit is contained in:
XhmikosR
GitHub
@@ -17,7 +17,7 @@
|
||||
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0" crossorigin="anonymous">
|
||||
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
|
||||
|
||||
<link href="/docs/5.0/assets/css/docs.css" rel="stylesheet">
|
||||
|
||||
@@ -55,7 +55,7 @@
|
||||
ga('send', 'pageview');
|
||||
</script>
|
||||
<script async src="https://www.google-analytics.com/analytics.js"></script>
|
||||
<script src="https://cdn.usefathom.com/script.js" data-site="TAXRUMOF" defer></script>
|
||||
<script defer src="https://cdn.usefathom.com/script.js" data-site="TAXRUMOF"></script>
|
||||
|
||||
|
||||
</head>
|
||||
@@ -138,7 +138,7 @@
|
||||
</header>
|
||||
|
||||
|
||||
|
||||
|
||||
<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
|
||||
<div class="container-xxl d-flex align-items-md-center">
|
||||
<form class="bd-search position-relative me-auto">
|
||||
@@ -394,7 +394,7 @@
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
|
||||
<strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
|
||||
<nav id="TableOfContents">
|
||||
@@ -424,10 +424,10 @@
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="bd-content ps-lg-4">
|
||||
|
||||
|
||||
|
||||
<h2 id="examples">Examples</h2>
|
||||
<p>Alerts are available for any length of text, as well as an optional close button. For proper styling, use one of the eight <strong>required</strong> contextual classes (e.g., <code>.alert-success</code>). For inline dismissal, use the <a href="#dismissing">alerts JavaScript plugin</a>.</p>
|
||||
@@ -557,7 +557,7 @@
|
||||
<p>Similarly, you can use <a href="/docs/5.0/utilities/flex/">flexbox utilities</a> and <a href="https://icons.getbootstrap.com/">Bootstrap Icons</a> to create alerts with icons. Depending on your icons and content, you may want to add more utilities or custom styles.</p>
|
||||
<div class="bd-example">
|
||||
<div class="alert alert-primary d-flex align-items-center" role="alert">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-exclamation-triangle-fill flex-shrink-0 me-2" viewBox="0 0 16 16">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-exclamation-triangle-fill flex-shrink-0 me-2" viewBox="0 0 16 16" role="img" aria-label="Warning:">
|
||||
<path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/>
|
||||
</svg>
|
||||
<div>
|
||||
@@ -565,7 +565,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div><div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"alert alert-primary d-flex align-items-center"</span> <span class="na">role</span><span class="o">=</span><span class="s">"alert"</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">svg</span> <span class="na">xmlns</span><span class="o">=</span><span class="s">"http://www.w3.org/2000/svg"</span> <span class="na">width</span><span class="o">=</span><span class="s">"24"</span> <span class="na">height</span><span class="o">=</span><span class="s">"24"</span> <span class="na">fill</span><span class="o">=</span><span class="s">"currentColor"</span> <span class="na">class</span><span class="o">=</span><span class="s">"bi bi-exclamation-triangle-fill flex-shrink-0 me-2"</span> <span class="na">viewBox</span><span class="o">=</span><span class="s">"0 0 16 16"</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">svg</span> <span class="na">xmlns</span><span class="o">=</span><span class="s">"http://www.w3.org/2000/svg"</span> <span class="na">width</span><span class="o">=</span><span class="s">"24"</span> <span class="na">height</span><span class="o">=</span><span class="s">"24"</span> <span class="na">fill</span><span class="o">=</span><span class="s">"currentColor"</span> <span class="na">class</span><span class="o">=</span><span class="s">"bi bi-exclamation-triangle-fill flex-shrink-0 me-2"</span> <span class="na">viewBox</span><span class="o">=</span><span class="s">"0 0 16 16"</span> <span class="na">role</span><span class="o">=</span><span class="s">"img"</span> <span class="na">aria-label</span><span class="o">=</span><span class="s">"Warning:"</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">path</span> <span class="na">d</span><span class="o">=</span><span class="s">"M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"</span><span class="p">/></span>
|
||||
<span class="p"></</span><span class="nt">svg</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">div</span><span class="p">></span>
|
||||
@@ -587,25 +587,25 @@
|
||||
</svg>
|
||||
|
||||
<div class="alert alert-primary d-flex align-items-center" role="alert">
|
||||
<svg class="bi flex-shrink-0 me-2" width="24" height="24"><use xlink:href="#info-fill"/></svg>
|
||||
<svg class="bi flex-shrink-0 me-2" width="24" height="24" role="img" aria-label="Info:"><use xlink:href="#info-fill"/></svg>
|
||||
<div>
|
||||
An example alert with an icon
|
||||
</div>
|
||||
</div>
|
||||
<div class="alert alert-success d-flex align-items-center" role="alert">
|
||||
<svg class="bi flex-shrink-0 me-2" width="24" height="24"><use xlink:href="#check-circle-fill"/></svg>
|
||||
<svg class="bi flex-shrink-0 me-2" width="24" height="24" role="img" aria-label="Success:"><use xlink:href="#check-circle-fill"/></svg>
|
||||
<div>
|
||||
An example success alert with an icon
|
||||
</div>
|
||||
</div>
|
||||
<div class="alert alert-warning d-flex align-items-center" role="alert">
|
||||
<svg class="bi flex-shrink-0 me-2" width="24" height="24"><use xlink:href="#exclamation-triangle-fill"/></svg>
|
||||
<svg class="bi flex-shrink-0 me-2" width="24" height="24" role="img" aria-label="Warning:"><use xlink:href="#exclamation-triangle-fill"/></svg>
|
||||
<div>
|
||||
An example warning alert with an icon
|
||||
</div>
|
||||
</div>
|
||||
<div class="alert alert-danger d-flex align-items-center" role="alert">
|
||||
<svg class="bi flex-shrink-0 me-2" width="24" height="24"><use xlink:href="#exclamation-triangle-fill"/></svg>
|
||||
<svg class="bi flex-shrink-0 me-2" width="24" height="24" role="img" aria-label="Danger:"><use xlink:href="#exclamation-triangle-fill"/></svg>
|
||||
<div>
|
||||
An example danger alert with an icon
|
||||
</div>
|
||||
@@ -623,25 +623,25 @@
|
||||
<span class="p"></</span><span class="nt">svg</span><span class="p">></span>
|
||||
|
||||
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"alert alert-primary d-flex align-items-center"</span> <span class="na">role</span><span class="o">=</span><span class="s">"alert"</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">svg</span> <span class="na">class</span><span class="o">=</span><span class="s">"bi flex-shrink-0 me-2"</span> <span class="na">width</span><span class="o">=</span><span class="s">"24"</span> <span class="na">height</span><span class="o">=</span><span class="s">"24"</span><span class="p">><</span><span class="nt">use</span> <span class="na">xlink:href</span><span class="o">=</span><span class="s">"#info-fill"</span><span class="p">/></</span><span class="nt">svg</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">svg</span> <span class="na">class</span><span class="o">=</span><span class="s">"bi flex-shrink-0 me-2"</span> <span class="na">width</span><span class="o">=</span><span class="s">"24"</span> <span class="na">height</span><span class="o">=</span><span class="s">"24"</span> <span class="na">role</span><span class="o">=</span><span class="s">"img"</span> <span class="na">aria-label</span><span class="o">=</span><span class="s">"Info:"</span><span class="p">><</span><span class="nt">use</span> <span class="na">xlink:href</span><span class="o">=</span><span class="s">"#info-fill"</span><span class="p">/></</span><span class="nt">svg</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">div</span><span class="p">></span>
|
||||
An example alert with an icon
|
||||
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"alert alert-success d-flex align-items-center"</span> <span class="na">role</span><span class="o">=</span><span class="s">"alert"</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">svg</span> <span class="na">class</span><span class="o">=</span><span class="s">"bi flex-shrink-0 me-2"</span> <span class="na">width</span><span class="o">=</span><span class="s">"24"</span> <span class="na">height</span><span class="o">=</span><span class="s">"24"</span><span class="p">><</span><span class="nt">use</span> <span class="na">xlink:href</span><span class="o">=</span><span class="s">"#check-circle-fill"</span><span class="p">/></</span><span class="nt">svg</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">svg</span> <span class="na">class</span><span class="o">=</span><span class="s">"bi flex-shrink-0 me-2"</span> <span class="na">width</span><span class="o">=</span><span class="s">"24"</span> <span class="na">height</span><span class="o">=</span><span class="s">"24"</span> <span class="na">role</span><span class="o">=</span><span class="s">"img"</span> <span class="na">aria-label</span><span class="o">=</span><span class="s">"Success:"</span><span class="p">><</span><span class="nt">use</span> <span class="na">xlink:href</span><span class="o">=</span><span class="s">"#check-circle-fill"</span><span class="p">/></</span><span class="nt">svg</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">div</span><span class="p">></span>
|
||||
An example success alert with an icon
|
||||
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"alert alert-warning d-flex align-items-center"</span> <span class="na">role</span><span class="o">=</span><span class="s">"alert"</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">svg</span> <span class="na">class</span><span class="o">=</span><span class="s">"bi flex-shrink-0 me-2"</span> <span class="na">width</span><span class="o">=</span><span class="s">"24"</span> <span class="na">height</span><span class="o">=</span><span class="s">"24"</span><span class="p">><</span><span class="nt">use</span> <span class="na">xlink:href</span><span class="o">=</span><span class="s">"#exclamation-triangle-fill"</span><span class="p">/></</span><span class="nt">svg</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">svg</span> <span class="na">class</span><span class="o">=</span><span class="s">"bi flex-shrink-0 me-2"</span> <span class="na">width</span><span class="o">=</span><span class="s">"24"</span> <span class="na">height</span><span class="o">=</span><span class="s">"24"</span> <span class="na">role</span><span class="o">=</span><span class="s">"img"</span> <span class="na">aria-label</span><span class="o">=</span><span class="s">"Warning:"</span><span class="p">><</span><span class="nt">use</span> <span class="na">xlink:href</span><span class="o">=</span><span class="s">"#exclamation-triangle-fill"</span><span class="p">/></</span><span class="nt">svg</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">div</span><span class="p">></span>
|
||||
An example warning alert with an icon
|
||||
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"alert alert-danger d-flex align-items-center"</span> <span class="na">role</span><span class="o">=</span><span class="s">"alert"</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">svg</span> <span class="na">class</span><span class="o">=</span><span class="s">"bi flex-shrink-0 me-2"</span> <span class="na">width</span><span class="o">=</span><span class="s">"24"</span> <span class="na">height</span><span class="o">=</span><span class="s">"24"</span><span class="p">><</span><span class="nt">use</span> <span class="na">xlink:href</span><span class="o">=</span><span class="s">"#exclamation-triangle-fill"</span><span class="p">/></</span><span class="nt">svg</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">svg</span> <span class="na">class</span><span class="o">=</span><span class="s">"bi flex-shrink-0 me-2"</span> <span class="na">width</span><span class="o">=</span><span class="s">"24"</span> <span class="na">height</span><span class="o">=</span><span class="s">"24"</span> <span class="na">role</span><span class="o">=</span><span class="s">"img"</span> <span class="na">aria-label</span><span class="o">=</span><span class="s">"Danger:"</span><span class="p">><</span><span class="nt">use</span> <span class="na">xlink:href</span><span class="o">=</span><span class="s">"#exclamation-triangle-fill"</span><span class="p">/></</span><span class="nt">svg</span><span class="p">></span>
|
||||
<span class="p"><</span><span class="nt">div</span><span class="p">></span>
|
||||
An example danger alert with an icon
|
||||
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
||||
@@ -808,7 +808,7 @@ When an alert is dismissed, the element is completely removed from the page stru
|
||||
<ul class="list-unstyled small text-muted">
|
||||
<li class="mb-2">Designed and built with all the love in the world by the <a href="/docs/5.0/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.0.0.</li>
|
||||
<li class="mb-2">Currently v5.0.1.</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 offset-lg-1 mb-3">
|
||||
@@ -855,7 +855,7 @@ When an alert is dismissed, the element is completely removed from the page stru
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-p34f1UUtsS3wqzfto5wAAmdvj+osOnFyQFpp4Ua3gs/ZVWx6oOypYoCJhGGScy+8" crossorigin="anonymous"></script>
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
|
||||
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
|
||||
@@ -863,7 +863,7 @@ When an alert is dismissed, the element is completely removed from the page stru
|
||||
<script src="/docs/5.0/assets/js/docs.min.js"></script>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user