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

Add v5.3.0 docs (#38658)

Browse Source
This commit is contained in:
XhmikosR
2023-05-30 18:21:02 +03:00
committed by GitHub
parent 87498ceeb2
commit 4be8b59d15
232 changed files with 4200 additions and 3253 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
docs/5.3/components/pagination/index.html
View File

@@ -5,7 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Documentation and examples for showing pagination to indicate a series of related content exists across multiple pages.">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<meta name="generator" content="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/components/pagination.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/components/pagination.md" title="View and edit this file on GitHub" target="_blank" rel="noopener">
View on GitHub
</a>
</div>
@@ -577,7 +577,7 @@
<h2 id="overview">Overview <a class="anchor-link" href="#overview" aria-label="Link to this section: Overview"></a></h2>
<p>We use a large block of connected links for our pagination, making links hard to miss and easily scalable—all while providing large hit areas. Pagination is built with list HTML elements so screen readers can announce the number of available links. Use a wrapping <code>&lt;nav&gt;</code> element to identify it as a navigation section to screen readers and other assistive technologies.</p>
<p>In addition, as pages likely have more than one such navigation section, it&rsquo;s advisable to provide a descriptive <code>aria-label</code> for the <code>&lt;nav&gt;</code> to reflect its purpose. For example, if the pagination component is used to navigate between a set of search results, an appropriate label could be <code>aria-label=&quot;Search results pages&quot;</code>.</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">
<nav aria-label="Page navigation example">
<ul class="pagination">
<li class="page-item"><a class="page-link" href="#">Previous</a></li>
@@ -609,7 +609,7 @@
<h2 id="working-with-icons">Working with icons <a class="anchor-link" href="#working-with-icons" aria-label="Link to this section: Working with icons"></a></h2>
<p>Looking to use an icon or symbol in place of text for some pagination links? Be sure to provide proper screen reader support with <code>aria</code> attributes.</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">
<nav aria-label="Page navigation example">
<ul class="pagination">
<li class="page-item">
@@ -658,7 +658,7 @@
<h2 id="disabled-and-active-states">Disabled and active states <a class="anchor-link" href="#disabled-and-active-states" aria-label="Link to this section: Disabled and active states"></a></h2>
<p>Pagination links are customizable for different circumstances. Use <code>.disabled</code> for links that appear un-clickable and <code>.active</code> to indicate the current page.</p>
<p>While the <code>.disabled</code> class uses <code>pointer-events: none</code> to <em>try</em> to disable the link functionality of <code>&lt;a&gt;</code>s, that CSS property is not yet standardized and doesn&rsquo;t account for keyboard navigation. As such, you should always add <code>tabindex=&quot;-1&quot;</code> on disabled links and use custom JavaScript to fully disable their functionality.</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">
<nav aria-label="...">
<ul class="pagination">
<li class="page-item disabled">
@@ -701,7 +701,7 @@
</span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">nav</span><span class="p">&gt;</span></span></span></code></pre></div></div>
<p>You can optionally swap out active or disabled anchors for <code>&lt;span&gt;</code>, or omit the anchor in the case of the prev/next arrows, to remove click functionality and prevent keyboard focus while retaining intended styles.</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">
<nav aria-label="...">
<ul class="pagination">
<li class="page-item disabled">
@@ -745,7 +745,7 @@
<h2 id="sizing">Sizing <a class="anchor-link" href="#sizing" aria-label="Link to this section: Sizing"></a></h2>
<p>Fancy larger or smaller pagination? Add <code>.pagination-lg</code> or <code>.pagination-sm</code> for additional sizes.</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">
<nav aria-label="...">
<ul class="pagination pagination-lg">
<li class="page-item active" aria-current="page">
@@ -775,7 +775,7 @@
</span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">ul</span><span class="p">&gt;</span>
</span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">nav</span><span class="p">&gt;</span></span></span></code></pre></div></div>
<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">
<nav aria-label="...">
<ul class="pagination pagination-sm">
<li class="page-item active" aria-current="page">
@@ -807,7 +807,7 @@
<h2 id="alignment">Alignment <a class="anchor-link" href="#alignment" aria-label="Link to this section: Alignment"></a></h2>
<p>Change the alignment of pagination components with <a href="/docs/5.3/utilities/flex/">flexbox utilities</a>. For example, with <code>.justify-content-center</code>:</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">
<nav aria-label="Page navigation example">
<ul class="pagination justify-content-center">
<li class="page-item disabled">
@@ -846,7 +846,7 @@
</span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">nav</span><span class="p">&gt;</span></span></span></code></pre></div></div>
<p>Or with <code>.justify-content-end</code>:</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">
<nav aria-label="Page navigation example">
<ul class="pagination justify-content-end">
<li class="page-item disabled">
@@ -889,9 +889,9 @@
<small class="d-inline-flex mb-3 px-2 py-1 fw-semibold text-success-emphasis bg-success-subtle border border-success-subtle rounded-2">Added in v5.2.0</small>
<p>As part of Bootstrap&rsquo;s evolving CSS variables approach, pagination now uses local CSS variables on <code>.pagination</code> for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.</p>
<div class="bd-example-snippet bd-code-snippet bd-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/_pagination.scss">scss/_pagination.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/_pagination.scss">scss/_pagination.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>
@@ -918,9 +918,9 @@
</span></span><span class="line"><span class="cl"><span class="na">--#{$prefix}pagination-disabled-bg</span><span class="o">:</span> <span class="si">#{</span><span class="nv">$pagination-disabled-bg</span><span class="si">}</span><span class="p">;</span>
</span></span><span class="line"><span class="cl"><span class="na">--#{$prefix}pagination-disabled-border-color</span><span class="o">:</span> <span class="si">#{</span><span class="nv">$pagination-disabled-border-color</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>
<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>
@@ -965,9 +965,9 @@
</span></span><span class="line"><span class="cl"><span class="nv">$pagination-border-radius-lg</span><span class="o">:</span> <span class="nf">var</span><span class="p">(</span><span class="o">--</span><span class="si">#{</span><span class="nv">$prefix</span><span class="si">}</span><span class="n">border-radius-lg</span><span class="p">);</span>
</span></span></code></pre></div></div>
<h3 id="sass-mixins">Sass mixins <a class="anchor-link" href="#sass-mixins" aria-label="Link to this section: Sass mixins"></a></h3>
<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/_pagination.scss">scss/mixins/_pagination.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/_pagination.scss">scss/mixins/_pagination.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>
@@ -997,7 +997,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">
@@ -1046,7 +1046,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>
@@ -1074,10 +1074,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}">