rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2024-12-01 13:24:25 +01:00
Code Issues Actions Packages Releases Activity

Docs: display examples based on the docs current color mode (#37562)

Browse Source 
* Docs: display examples based on the docs current color mode

* Fix _default/examples.html
This commit is contained in:
Julien Déramond 2022-12-29 07:58:35 +01:00 committed by GitHub
parent baf5d4c4c1
commit 8befabbde9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
27 changed files with 54 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
site/content/docs/5.3/examples/album-rtl/index.html
View File

@ -51,7 +51,7 @@ direction: rtl
</div>
</section>
<div class="album py-5 bg-light">
<div class="album py-5 bg-body-tertiary">
<div class="container">
<div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-3">

2
site/content/docs/5.3/examples/album/index.html
View File

@ -50,7 +50,7 @@ title: Album example
</div>
</section>
<div class="album py-5 bg-light">
<div class="album py-5 bg-body-tertiary">
<div class="container">
<div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-3">

2
site/content/docs/5.3/examples/blog-rtl/index.html
View File

@ -161,7 +161,7 @@ include_js: false
<div class="col-md-4">
<div class="position-sticky" style="top: 2rem;">
<div class="p-4 mb-3 bg-light rounded">
<div class="p-4 mb-3 bg-body-tertiary rounded">
<h4 class="fst-italic">حول</h4>
<p class="mb-0">أقبلت، فأقبلت معك الحياة بجميع صنوفها وألوانها: فالنبات ينبت، والأشجار تورق وتزهر، والهرة تموء، والقمري يسجع، والغنم يثغو، والبقر يخور، وكل أليف يدعو أليفه. كل شيء يشعر بالحياة وينسي هموم الحياة، ولا يذكر إلا سعادة الحياة، فإن كان الزمان جسدا فأنت روحه، وإن كان عمرا فأنت شبابه.</p>
</div>

2
site/content/docs/5.3/examples/blog/index.html
View File

@ -213,7 +213,7 @@ include_js: false
<div class="col-md-4">
<div class="position-sticky" style="top: 2rem;">
<div class="p-4 mb-3 bg-light rounded">
<div class="p-4 mb-3 bg-body-tertiary rounded">
<h4 class="fst-italic">About</h4>
<p class="mb-0">Customize this section to tell your visitors a little bit about your publication, writers, content, or something else entirely. Totally up to you.</p>
</div>

6
site/content/docs/5.3/examples/cheatsheet-rtl/index.html
View File

@ -5,7 +5,7 @@ extra_css:
- "../cheatsheet/cheatsheet.rtl.css"
extra_js:
- src: "../cheatsheet/cheatsheet.js"
body_class: "bg-light"
body_class: "bg-body-tertiary"
direction: rtl
---
@ -1221,7 +1221,7 @@ direction: rtl
<div>
{{< example show_markup="false" >}}
<nav class="navbar navbar-expand-lg bg-light">
<nav class="navbar navbar-expand-lg bg-body-tertiary">
<div class="container-fluid">
<a class="navbar-brand" href="#">
<img src="/docs/{{< param docs_version >}}/assets/brand/bootstrap-logo-white.svg" width="38" height="30" class="d-inline-block align-top" alt="Bootstrap" loading="lazy"
@ -1434,7 +1434,7 @@ direction: rtl
<div>
<div class="bd-example">
<nav id="navbar-example2" class="navbar bg-light px-3">
<nav id="navbar-example2" class="navbar bg-body-tertiary px-3">
<a class="navbar-brand" href="#">شريط التنقل</a>
<ul class="nav nav-pills">
<li class="nav-item">

6
site/content/docs/5.3/examples/cheatsheet/index.html
View File

@ -5,7 +5,7 @@ extra_css:
- "cheatsheet.css"
extra_js:
- src: "cheatsheet.js"
body_class: "bg-light"
body_class: "bg-body-tertiary"
---
<header class="bd-header bg-dark py-3 d-flex align-items-stretch border-bottom border-dark">
@ -1220,7 +1220,7 @@ body_class: "bg-light"
<div>
{{< example show_markup="false" >}}
<nav class="navbar navbar-expand-lg bg-light">
<nav class="navbar navbar-expand-lg bg-body-tertiary">
<div class="container-fluid">
<a class="navbar-brand" href="#">
<img src="/docs/{{< param docs_version >}}/assets/brand/bootstrap-logo-white.svg" width="38" height="30" class="d-inline-block align-top" alt="Bootstrap" loading="lazy"
@ -1431,7 +1431,7 @@ body_class: "bg-light"
<div>
<div class="bd-example">
<nav id="navbar-example2" class="navbar bg-light px-3">
<nav id="navbar-example2" class="navbar bg-body-tertiary px-3">
<a class="navbar-brand" href="#">Navbar</a>
<ul class="nav nav-pills">
<li class="nav-item">

4
site/content/docs/5.3/examples/checkout-rtl/index.html
View File

@ -6,7 +6,7 @@ extra_css:
- "../checkout/checkout.css"
extra_js:
- src: "../checkout/checkout.js"
body_class: "bg-light"
body_class: "bg-body-tertiary"
---
<div class="container">
@ -45,7 +45,7 @@ body_class: "bg-light"
</div>
<span class="text-muted">$5</span>
</li>
<li class="list-group-item d-flex justify-content-between bg-light">
<li class="list-group-item d-flex justify-content-between bg-body-tertiary">
<div class="text-success">
<h6 class="my-0">رمز ترويجي</h6>
<small>EXAMPLECODE</small>

4
site/content/docs/5.3/examples/checkout/index.html
View File

@ -5,7 +5,7 @@ extra_css:
- "checkout.css"
extra_js:
- src: "checkout.js"
body_class: "bg-light"
body_class: "bg-body-tertiary"
---
<div class="container">
@ -44,7 +44,7 @@ body_class: "bg-light"
</div>
<span class="text-muted">$5</span>
</li>
<li class="list-group-item d-flex justify-content-between bg-light">
<li class="list-group-item d-flex justify-content-between bg-body-tertiary">
<div class="text-success">
<h6 class="my-0">Promo code</h6>
<small>EXAMPLECODE</small>

2
site/content/docs/5.3/examples/dashboard-rtl/index.html
View File

@ -27,7 +27,7 @@ extra_js:
<div class="container-fluid">
<div class="row">
<nav id="sidebarMenu" class="col-md-3 col-lg-2 d-md-block bg-light sidebar collapse">
<nav id="sidebarMenu" class="col-md-3 col-lg-2 d-md-block bg-body-tertiary sidebar collapse">
<div class="position-sticky pt-3 sidebar-sticky">
<ul class="nav flex-column">
<li class="nav-item">

2
site/content/docs/5.3/examples/dashboard/index.html
View File

@ -26,7 +26,7 @@ extra_js:
<div class="container-fluid">
<div class="row">
<nav id="sidebarMenu" class="col-md-3 col-lg-2 d-md-block bg-light sidebar collapse">
<nav id="sidebarMenu" class="col-md-3 col-lg-2 d-md-block bg-body-tertiary sidebar collapse">
<div class="position-sticky pt-3 sidebar-sticky">
<ul class="nav flex-column">
<li class="nav-item">

2
site/content/docs/5.3/examples/dropdowns/index.html
View File

@ -70,7 +70,7 @@ body_class: ""
<div class="d-flex gap-5 justify-content-center">
<div class="dropdown-menu d-block position-static pt-0 mx-0 rounded-3 shadow overflow-hidden w-280px">
<form class="p-2 mb-2 bg-light border-bottom">
<form class="p-2 mb-2 bg-body-tertiary border-bottom">
<input type="search" class="form-control" autocomplete="false" placeholder="Type to filter...">
</form>
<ul class="list-unstyled mb-0">

6
site/content/docs/5.3/examples/headers/index.html
View File

@ -194,10 +194,10 @@ body_class: ""
<div class="container-fluid pb-3">
<div class="d-grid gap-3" style="grid-template-columns: 1fr 2fr;">
<div class="bg-light border rounded-3">
<div class="bg-body-tertiary border rounded-3">
<br><br><br><br><br><br><br><br><br><br>
</div>
<div class="bg-light border rounded-3">
<div class="bg-body-tertiary border rounded-3">
<br><br><br><br><br><br><br><br><br><br>
</div>
</div>
@ -205,7 +205,7 @@ body_class: ""
<div class="b-example-divider"></div>
<nav class="py-2 bg-light border-bottom">
<nav class="py-2 bg-body-tertiary border-bottom">
<div class="container d-flex flex-wrap">
<ul class="nav me-auto">
<li class="nav-item"><a href="#" class="nav-link link-dark px-2 active" aria-current="page">Home</a></li>

2
site/content/docs/5.3/examples/heroes/index.html
View File

@ -66,7 +66,7 @@ body_class: ""
<p class="col-lg-10 fs-4">Below is an example form built entirely with Bootstrap’s form controls. Each required form group has a validation state that can be triggered by attempting to submit the form without completing it.</p>
</div>
<div class="col-md-10 mx-auto col-lg-5">
<form class="p-4 p-md-5 border rounded-3 bg-light">
<form class="p-4 p-md-5 border rounded-3 bg-body-tertiary">
<div class="form-floating mb-3">
<input type="email" class="form-control" id="floatingInput" placeholder="name@example.com">
<label for="floatingInput">Email address</label>

4
site/content/docs/5.3/examples/jumbotron/index.html
View File

@ -13,7 +13,7 @@ include_js: false
</a>
</header>
<div class="p-5 mb-4 bg-light rounded-3">
<div class="p-5 mb-4 bg-body-tertiary rounded-3">
<div class="container-fluid py-5">
<h1 class="display-5 fw-bold">Custom jumbotron</h1>
<p class="col-md-8 fs-4">Using a series of utilities, you can create this jumbotron, just like the one in previous versions of Bootstrap. Check out the examples below for how you can remix and restyle it to your liking.</p>
@ -30,7 +30,7 @@ include_js: false
</div>
</div>
<div class="col-md-6">
<div class="h-100 p-5 bg-light border rounded-3">
<div class="h-100 p-5 bg-body-tertiary border rounded-3">
<h2>Add borders</h2>
<p>Or, keep it light and add a border for some added definition to the boundaries of your content. Be sure to look under the hood at the source HTML here as we've adjusted the alignment and sizing of both column's content for equal-height.</p>
<button class="btn btn-outline-secondary" type="button">Example button</button>

4
site/content/docs/5.3/examples/list-groups/index.html
View File

@ -145,8 +145,8 @@ body_class: ""
</small>
</span>
</label>
<label class="list-group-item d-flex gap-3 bg-light">
<input class="form-check-input form-check-input-placeholder bg-light flex-shrink-0 pe-none" disabled type="checkbox" value="" style="font-size: 1.375em;">
<label class="list-group-item d-flex gap-3 bg-body-tertiary">
<input class="form-check-input form-check-input-placeholder bg-body-tertiary flex-shrink-0 pe-none" disabled type="checkbox" value="" style="font-size: 1.375em;">
<span class="pt-1 form-checked-content">
<span contenteditable="true" class="w-100">Add new task...</span>
<small class="d-block text-muted">

2
site/content/docs/5.3/examples/navbar-bottom/index.html
View File

@ -4,7 +4,7 @@ title: Bottom navbar example
---
<main class="container">
<div class="bg-light p-5 rounded mt-3">
<div class="bg-body-tertiary p-5 rounded mt-3">
<h1>Bottom Navbar example</h1>
<p class="lead">This example is a quick exercise to illustrate how the bottom navbar works.</p>
<a class="btn btn-lg btn-primary" href="{{< docsref "/components/navbar" >}}" role="button">View navbar docs &raquo;</a>

2
site/content/docs/5.3/examples/navbar-fixed/index.html
View File

@ -32,7 +32,7 @@ extra_css:
</nav>
<main class="container">
<div class="bg-light p-5 rounded">
<div class="bg-body-tertiary p-5 rounded">
<h1>Navbar example</h1>
<p class="lead">This example is a quick exercise to illustrate how fixed to top navbar works. As you scroll, it will remain fixed to the top of your browser’s viewport.</p>
<a class="btn btn-lg btn-primary" href="{{< docsref "/components/navbar" >}}" role="button">View navbar docs &raquo;</a>

2
site/content/docs/5.3/examples/navbar-static/index.html
View File

@ -32,7 +32,7 @@ extra_css:
</nav>
<main class="container">
<div class="bg-light p-5 rounded">
<div class="bg-body-tertiary p-5 rounded">
<h1>Navbar example</h1>
<p class="lead">This example is a quick exercise to illustrate how the top-aligned navbar works. As you scroll, this navbar remains in its original position and moves with the rest of the page.</p>
<a class="btn btn-lg btn-primary" href="{{< docsref "/components/navbar" >}}" role="button">View navbar docs &raquo;</a>

4
site/content/docs/5.3/examples/navbars-offcanvas/index.html
View File

@ -48,7 +48,7 @@ extra_css:
</div>
</nav>
<nav class="navbar bg-light" aria-label="Light offcanvas navbar">
<nav class="navbar bg-body-tertiary" aria-label="Light offcanvas navbar">
<div class="container-fluid">
<a class="navbar-brand" href="#">Light offcanvas navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbarLight" aria-controls="offcanvasNavbarLight">
@ -133,7 +133,7 @@ extra_css:
</nav>
<div class="container my-5">
<div class="bg-light p-5 rounded">
<div class="bg-body-tertiary p-5 rounded">
<div class="col-sm-8 py-5 mx-auto">
<h1 class="display-5 fw-normal">Navbar with offcanvas examples</h1>
<p class="fs-5">This example shows how responsive offcanvas menus work within the navbar. For positioning of navbars, checkout the <a href="{{< docsref "/examples/navbar-static" >}}">top</a> and <a href="{{< docsref "/examples/navbar-fixed" >}}">fixed top</a> examples.</p>

8
site/content/docs/5.3/examples/navbars/index.html
View File

@ -336,7 +336,7 @@ extra_css:
</nav>
<div class="container">
<nav class="navbar navbar-expand-lg bg-light rounded" aria-label="Eleventh navbar example">
<nav class="navbar navbar-expand-lg bg-body-tertiary rounded" aria-label="Eleventh navbar example">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarsExample09" aria-controls="navbarsExample09" aria-expanded="false" aria-label="Toggle navigation">
@ -370,7 +370,7 @@ extra_css:
</div>
</nav>
<nav class="navbar navbar-expand-lg bg-light rounded" aria-label="Twelfth navbar example">
<nav class="navbar navbar-expand-lg bg-body-tertiary rounded" aria-label="Twelfth navbar example">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarsExample10" aria-controls="navbarsExample10" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
@ -400,7 +400,7 @@ extra_css:
</div>
</nav>
<nav class="navbar navbar-expand-lg bg-light rounded" aria-label="Thirteenth navbar example">
<nav class="navbar navbar-expand-lg bg-body-tertiary rounded" aria-label="Thirteenth navbar example">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarsExample11" aria-controls="navbarsExample11" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
@ -435,7 +435,7 @@ extra_css:
</nav>
<div>
<div class="bg-light p-5 rounded">
<div class="bg-body-tertiaryp-5 rounded">
<div class="col-sm-8 mx-auto">
<h1>Navbar examples</h1>
<p>This example is a quick exercise to illustrate how the navbar and its contents work. Some navbars extend the width of the viewport, others are confined within a <code>.container</code>. For positioning of navbars, checkout the <a href="{{< docsref "/examples/navbar-static" >}}">top</a> and <a href="{{< docsref "/examples/navbar-fixed" >}}">fixed top</a> examples.</p>

2
site/content/docs/5.3/examples/offcanvas-navbar/index.html
View File

@ -5,7 +5,7 @@ extra_css:
- "offcanvas-navbar.css"
extra_js:
- src: "offcanvas-navbar.js"
body_class: "bg-light"
body_class: "bg-body-tertiary"
aliases: "/docs/5.3/examples/offcanvas/"
---

18
site/content/docs/5.3/examples/product/index.html
View File

@ -21,7 +21,7 @@ extra_css:
</header>
<main>
<div class="position-relative overflow-hidden p-3 p-md-5 m-md-3 text-center bg-light">
<div class="position-relative overflow-hidden p-3 p-md-5 m-md-3 text-center bg-body-tertiary">
<div class="col-md-5 p-lg-5 mx-auto my-5">
<h1 class="display-4 fw-normal">Punny headline</h1>
<p class="lead fw-normal">And an even wittier subheading to boot. Jumpstart your marketing efforts with this example based on Apple’s marketing pages.</p>
@ -37,9 +37,9 @@ extra_css:
<h2 class="display-5">Another headline</h2>
<p class="lead">And an even wittier subheading.</p>
</div>
<div class="bg-light shadow-sm mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"></div>
<div class="bg-body-tertiary shadow-sm mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"></div>
</div>
<div class="bg-light me-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center overflow-hidden">
<div class="bg-body-tertiary me-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center overflow-hidden">
<div class="my-3 p-3">
<h2 class="display-5">Another headline</h2>
<p class="lead">And an even wittier subheading.</p>
@ -49,7 +49,7 @@ extra_css:
</div>
<div class="d-md-flex flex-md-equal w-100 my-md-3 ps-md-3">
<div class="bg-light me-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center overflow-hidden">
<div class="bg-body-tertiary me-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center overflow-hidden">
<div class="my-3 p-3">
<h2 class="display-5">Another headline</h2>
<p class="lead">And an even wittier subheading.</p>
@ -61,19 +61,19 @@ extra_css:
<h2 class="display-5">Another headline</h2>
<p class="lead">And an even wittier subheading.</p>
</div>
<div class="bg-light shadow-sm mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"></div>
<div class="bg-body-tertiary shadow-sm mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"></div>
</div>
</div>
<div class="d-md-flex flex-md-equal w-100 my-md-3 ps-md-3">
<div class="bg-light me-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center overflow-hidden">
<div class="bg-body-tertiary me-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center overflow-hidden">
<div class="my-3 p-3">
<h2 class="display-5">Another headline</h2>
<p class="lead">And an even wittier subheading.</p>
</div>
<div class="bg-body shadow-sm mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"></div>
</div>
<div class="bg-light me-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center overflow-hidden">
<div class="bg-body-tertiary me-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center overflow-hidden">
<div class="my-3 py-3">
<h2 class="display-5">Another headline</h2>
<p class="lead">And an even wittier subheading.</p>
@ -83,14 +83,14 @@ extra_css:
</div>
<div class="d-md-flex flex-md-equal w-100 my-md-3 ps-md-3">
<div class="bg-light me-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center overflow-hidden">
<div class="bg-body-tertiary me-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center overflow-hidden">
<div class="my-3 p-3">
<h2 class="display-5">Another headline</h2>
<p class="lead">And an even wittier subheading.</p>
</div>
<div class="bg-body shadow-sm mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"></div>
</div>
<div class="bg-light me-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center overflow-hidden">
<div class="bg-body-tertiary me-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center overflow-hidden">
<div class="my-3 py-3">
<h2 class="display-5">Another headline</h2>
<p class="lead">And an even wittier subheading.</p>

6
site/content/docs/5.3/examples/sidebars/index.html
View File

@ -126,7 +126,7 @@ body_class: ""
<div class="b-example-divider b-example-vr"></div>
<div class="d-flex flex-column flex-shrink-0 p-3 bg-light" style="width: 280px;">
<div class="d-flex flex-column flex-shrink-0 p-3 bg-body-tertiary" style="width: 280px;">
<a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto link-dark text-decoration-none">
<svg class="bi pe-none me-2" width="40" height="32"><use xlink:href="#bootstrap"/></svg>
<span class="fs-4">Sidebar</span>
@ -182,7 +182,7 @@ body_class: ""
<div class="b-example-divider b-example-vr"></div>
<div class="d-flex flex-column flex-shrink-0 bg-light" style="width: 4.5rem;">
<div class="d-flex flex-column flex-shrink-0 bg-body-tertiary" style="width: 4.5rem;">
<a href="/" class="d-block p-3 link-dark text-decoration-none" title="Icon-only" data-bs-toggle="tooltip" data-bs-placement="right">
<svg class="bi pe-none" width="40" height="32"><use xlink:href="#bootstrap"/></svg>
<span class="visually-hidden">Icon-only</span>
@ -293,7 +293,7 @@ body_class: ""
<div class="b-example-divider b-example-vr"></div>
<div class="d-flex flex-column align-items-stretch flex-shrink-0 bg-white" style="width: 380px;">
<div class="d-flex flex-column align-items-stretch flex-shrink-0 bg-body-tertiary" style="width: 380px;">
<a href="/" class="d-flex align-items-center flex-shrink-0 p-3 link-dark text-decoration-none border-bottom">
<svg class="bi pe-none me-2" width="30" height="24"><use xlink:href="#bootstrap"/></svg>
<span class="fs-5 fw-semibold">List group</span>

2
site/content/docs/5.3/examples/sticky-footer-navbar/index.html
View File

@ -45,7 +45,7 @@ body_class: "d-flex flex-column h-100"
</div>
</main>
<footer class="footer mt-auto py-3 bg-light">
<footer class="footer mt-auto py-3 bg-body-tertiary">
<div class="container">
<span class="text-muted">Place sticky footer content here.</span>
</div>

2
site/content/docs/5.3/examples/sticky-footer/index.html
View File

@ -17,7 +17,7 @@ include_js: false
</div>
</main>
<footer class="footer mt-auto py-3 bg-light">
<footer class="footer mt-auto py-3 bg-body-tertiary">
<div class="container">
<span class="text-muted">Place sticky footer content here.</span>
</div>

2
site/content/docs/5.3/helpers/stretched-link.md
View File

@ -66,7 +66,7 @@ If the stretched link doesn't seem to work, the [containing block](https://devel
<p class="card-text">
<a href="#" class="stretched-link text-danger" style="position: relative;">Stretched link will not work here, because <code>position: relative</code> is added to the link</a>
</p>
<p class="card-text bg-light" style="transform: rotate(0);">
<p class="card-text bg-body-tertiary" style="transform: rotate(0);">
This <a href="#" class="text-warning stretched-link">stretched link</a> will only be spread over the <code>p</code>-tag, because a transform is applied to it.
</p>
</div>

5
site/layouts/_default/examples.html
View File

@ -1,6 +1,9 @@
<!doctype html>
<html {{ if eq .Page.Params.direction "rtl" }}lang="ar" dir="rtl"{{ else }}lang="en"{{ end }}{{ with .Page.Params.html_class }} class="{{ . }}"{{ end }}>
<html {{ if eq .Page.Params.direction "rtl" }}lang="ar" dir="rtl"{{ else }}lang="en"{{ end }}{{ with .Page.Params.html_class }} class="{{ . }}"{{ end }} data-bs-theme="auto">
<head>
{{- $colorModeJS := printf "/docs/%s/assets/js/color-modes.js" $.Site.Params.docs_version -}}
<script src="{{ $colorModeJS | relURL }}"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">