mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-28 23:59:53 +02:00
Code Issues Releases Wiki Activity

Docs: quick fixes for HTML (#36395)

Browse Source 
* Using the new helper in the doc

* Remove input from `Tab` access

* Change scrollspy code examples

* Reordering tables for JS

* Fix for parcel file

* Center align all the code example texts in layout

* Alphabetical reorder the helpers
This commit is contained in:
Louis-Maxime Piton
2022-05-20 19:21:48 +02:00
committed by GitHub
parent 73e45ee36c
commit 8959bf3f0b
36 changed files with 276 additions and 262 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -45,7 +45,7 @@ include_js: false
</div>
<main class="container">
<div class="p-4 p-md-5 mb-4 text-white rounded bg-dark">
<div class="p-4 p-md-5 mb-4 rounded text-bg-dark">
<div class="col-md-6 px-0">
<h1 class="display-4 fst-italic">عنوان تدوينة مميزة أطول</h1>
<p class="lead my-3">عدة أسطر نصية متعددة تعبر عن التدوية، وذلك لإعلام القراء الجدد بسرعة وكفاءة حول أكثر الأشياء إثارة للاهتمام في محتويات هذه التدوينة.</p>

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

@@ -44,7 +44,7 @@ include_js: false
</div>
<main class="container">
<div class="p-4 p-md-5 mb-4 text-white rounded bg-dark">
<div class="p-4 p-md-5 mb-4 rounded text-bg-dark">
<div class="col-md-6 px-0">
<h1 class="display-4 fst-italic">Title of a longer featured blog post</h1>
<p class="lead my-3">Multiple lines of text that form the lede, informing new readers quickly and efficiently about what’s most interesting in this post’s contents.</p>

12
site/content/docs/5.2/examples/cheatsheet-rtl/index.html
View File

@@ -692,16 +692,16 @@ direction: rtl
<p class="h2">مثال على عنوان <span class="badge bg-secondary">جديد</span></p>
<p class="h3">مثال على عنوان <span class="badge bg-success">جديد</span></p>
<p class="h4">مثال على عنوان <span class="badge bg-danger">جديد</span></p>
<p class="h5">مثال على عنوان <span class="badge bg-warning text-dark">جديد</span></p>
<p class="h6">مثال على عنوان <span class="badge bg-info text-dark">جديد</span></p>
<p class="h6">مثال على عنوان <span class="badge bg-light text-dark">جديد</span></p>
<p class="h5">مثال على عنوان <span class="badge text-bg-warning">جديد</span></p>
<p class="h6">مثال على عنوان <span class="badge text-bg-info">جديد</span></p>
<p class="h6">مثال على عنوان <span class="badge text-bg-light">جديد</span></p>
<p class="h6">مثال على عنوان <span class="badge bg-dark">جديد</span></p>
{{< /example >}}
{{< example show_markup="false" >}}
{{< badge.inline >}}
{{- range (index $.Site.Data "theme-colors") }}
<span class="badge rounded-pill bg-{{ .name }}{{ if or (eq .name "light") (eq .name "warning") (eq .name "info") }} text-dark{{ end }}">{{ .name | title }}</span>{{- end -}}
<span class="badge rounded-pill {{ if or (eq .name "light") (eq .name "warning") (eq .name "info") }}text-{{ end }}bg-{{ .name }}">{{ .name | title }}</span>{{- end -}}
{{< /badge.inline >}}
{{< /example >}}
</div>
@@ -1395,10 +1395,10 @@ direction: rtl
<div class="progress-bar bg-success w-25" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div>
</div>
<div class="progress mb-3">
<div class="progress-bar bg-info text-dark w-50" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">50%</div>
<div class="progress-bar text-bg-info w-50" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">50%</div>
</div>
<div class="progress mb-3">
<div class="progress-bar bg-warning text-dark w-75" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">75%</div>
<div class="progress-bar text-bg-warning w-75" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">75%</div>
</div>
<div class="progress">
<div class="progress-bar bg-danger w-100" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">100%</div>

12
site/content/docs/5.2/examples/cheatsheet/index.html
View File

@@ -691,16 +691,16 @@ body_class: "bg-light"
<p class="h2">Example heading <span class="badge bg-secondary">New</span></p>
<p class="h3">Example heading <span class="badge bg-success">New</span></p>
<p class="h4">Example heading <span class="badge bg-danger">New</span></p>
<p class="h5">Example heading <span class="badge bg-warning text-dark">New</span></p>
<p class="h6">Example heading <span class="badge bg-info text-dark">New</span></p>
<p class="h6">Example heading <span class="badge bg-light text-dark">New</span></p>
<p class="h5">Example heading <span class="badge text-bg-warning">New</span></p>
<p class="h6">Example heading <span class="badge text-bg-info">New</span></p>
<p class="h6">Example heading <span class="badge text-bg-light">New</span></p>
<p class="h6">Example heading <span class="badge bg-dark">New</span></p>
{{< /example >}}
{{< example show_markup="false" >}}
{{< badge.inline >}}
{{- range (index $.Site.Data "theme-colors") }}
<span class="badge rounded-pill bg-{{ .name }}{{ if or (eq .name "light") (eq .name "warning") (eq .name "info") }} text-dark{{ end }}">{{ .name | title }}</span>{{- end -}}
<span class="badge rounded-pill {{ if or (eq .name "light") (eq .name "warning") (eq .name "info") }}text-{{ end }}bg-{{ .name }}">{{ .name | title }}</span>{{- end -}}
{{< /badge.inline >}}
{{< /example >}}
</div>
@@ -1392,10 +1392,10 @@ body_class: "bg-light"
<div class="progress-bar bg-success w-25" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div>
</div>
<div class="progress mb-3">
<div class="progress-bar bg-info text-dark w-50" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">50%</div>
<div class="progress-bar text-bg-info w-50" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">50%</div>
</div>
<div class="progress mb-3">
<div class="progress-bar bg-warning text-dark w-75" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">75%</div>
<div class="progress-bar text-bg-warning w-75" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">75%</div>
</div>
<div class="progress">
<div class="progress-bar bg-danger w-100" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">100%</div>

2
site/content/docs/5.2/examples/cover/index.html
View File

@@ -4,7 +4,7 @@ title: Cover Template
extra_css:
- "cover.css"
html_class: "h-100"
body_class: "d-flex h-100 text-center text-white bg-dark"
body_class: "d-flex h-100 text-center text-bg-dark"
include_js: false
---

18
site/content/docs/5.2/examples/features/index.html
View File

@@ -71,7 +71,7 @@ body_class: ""
<h2 class="pb-2 border-bottom">Columns with icons</h2>
<div class="row g-4 py-5 row-cols-1 row-cols-lg-3">
<div class="feature col">
<div class="feature-icon d-inline-flex align-items-center justify-content-center bg-primary bg-gradient text-white fs-2 mb-3">
<div class="feature-icon d-inline-flex align-items-center justify-content-center text-bg-primary bg-gradient fs-2 mb-3">
<svg class="bi" width="1em" height="1em"><use xlink:href="#collection"/></svg>
</div>
<h2>Featured title</h2>
@@ -82,7 +82,7 @@ body_class: ""
</a>
</div>
<div class="feature col">
<div class="feature-icon d-inline-flex align-items-center justify-content-center bg-primary bg-gradient text-white fs-2 mb-3">
<div class="feature-icon d-inline-flex align-items-center justify-content-center text-bg-primary bg-gradient fs-2 mb-3">
<svg class="bi" width="1em" height="1em"><use xlink:href="#people-circle"/></svg>
</div>
<h2>Featured title</h2>
@@ -93,7 +93,7 @@ body_class: ""
</a>
</div>
<div class="feature col">
<div class="feature-icon d-inline-flex align-items-center justify-content-center bg-primary bg-gradient text-white fs-2 mb-3">
<div class="feature-icon d-inline-flex align-items-center justify-content-center text-bg-primary bg-gradient fs-2 mb-3">
<svg class="bi" width="1em" height="1em"><use xlink:href="#toggles2"/></svg>
</div>
<h2>Featured title</h2>
@@ -112,7 +112,7 @@ body_class: ""
<h2 class="pb-2 border-bottom">Hanging icons</h2>
<div class="row g-4 py-5 row-cols-1 row-cols-lg-3">
<div class="col d-flex align-items-start">
<div class="icon-square bg-light text-dark d-inline-flex align-items-center justify-content-center fs-4 flex-shrink-0 me-3">
<div class="icon-square text-bg-light d-inline-flex align-items-center justify-content-center fs-4 flex-shrink-0 me-3">
<svg class="bi" width="1em" height="1em"><use xlink:href="#toggles2"/></svg>
</div>
<div>
@@ -124,7 +124,7 @@ body_class: ""
</div>
</div>
<div class="col d-flex align-items-start">
<div class="icon-square bg-light text-dark d-inline-flex align-items-center justify-content-center fs-4 flex-shrink-0 me-3">
<div class="icon-square text-bg-light d-inline-flex align-items-center justify-content-center fs-4 flex-shrink-0 me-3">
<svg class="bi" width="1em" height="1em"><use xlink:href="#cpu-fill"/></svg>
</div>
<div>
@@ -136,7 +136,7 @@ body_class: ""
</div>
</div>
<div class="col d-flex align-items-start">
<div class="icon-square bg-light text-dark d-inline-flex align-items-center justify-content-center fs-4 flex-shrink-0 me-3">
<div class="icon-square text-bg-light d-inline-flex align-items-center justify-content-center fs-4 flex-shrink-0 me-3">
<svg class="bi" width="1em" height="1em"><use xlink:href="#tools"/></svg>
</div>
<div>
@@ -157,7 +157,7 @@ body_class: ""
<div class="row row-cols-1 row-cols-lg-3 align-items-stretch g-4 py-5">
<div class="col">
<div class="card card-cover h-100 overflow-hidden text-white bg-dark rounded-4 shadow-lg" style="background-image: url('unsplash-photo-1.jpg');">
<div class="card card-cover h-100 overflow-hidden text-bg-dark rounded-4 shadow-lg" style="background-image: url('unsplash-photo-1.jpg');">
<div class="d-flex flex-column h-100 p-5 pb-3 text-white text-shadow-1">
<h2 class="pt-5 mt-5 mb-4 display-6 lh-1 fw-bold">Short title, long jacket</h2>
<ul class="d-flex list-unstyled mt-auto">
@@ -178,7 +178,7 @@ body_class: ""
</div>
<div class="col">
<div class="card card-cover h-100 overflow-hidden text-white bg-dark rounded-4 shadow-lg" style="background-image: url('unsplash-photo-2.jpg');">
<div class="card card-cover h-100 overflow-hidden text-bg-dark rounded-4 shadow-lg" style="background-image: url('unsplash-photo-2.jpg');">
<div class="d-flex flex-column h-100 p-5 pb-3 text-white text-shadow-1">
<h2 class="pt-5 mt-5 mb-4 display-6 lh-1 fw-bold">Much longer title that wraps to multiple lines</h2>
<ul class="d-flex list-unstyled mt-auto">
@@ -199,7 +199,7 @@ body_class: ""
</div>
<div class="col">
<div class="card card-cover h-100 overflow-hidden text-white bg-dark rounded-4 shadow-lg" style="background-image: url('unsplash-photo-3.jpg');">
<div class="card card-cover h-100 overflow-hidden text-bg-dark rounded-4 shadow-lg" style="background-image: url('unsplash-photo-3.jpg');">
<div class="d-flex flex-column h-100 p-5 pb-3 text-shadow-1">
<h2 class="pt-5 mt-5 mb-4 display-6 lh-1 fw-bold">Another longer title belongs here</h2>
<ul class="d-flex list-unstyled mt-auto">

52
site/content/docs/5.2/examples/grid/index.html
View File

@@ -17,37 +17,37 @@ include_js: false
<h2 class="mt-4">Five grid tiers</h2>
<p>There are five tiers to the Bootstrap grid system, one for each range of devices we support. Each tier starts at a minimum viewport size and automatically applies to the larger devices unless overridden.</p>
<div class="row mb-3">
<div class="row mb-3 text-center">
<div class="col-4 themed-grid-col">.col-4</div>
<div class="col-4 themed-grid-col">.col-4</div>
<div class="col-4 themed-grid-col">.col-4</div>
</div>
<div class="row mb-3">
<div class="row mb-3 text-center">
<div class="col-sm-4 themed-grid-col">.col-sm-4</div>
<div class="col-sm-4 themed-grid-col">.col-sm-4</div>
<div class="col-sm-4 themed-grid-col">.col-sm-4</div>
</div>
<div class="row mb-3">
<div class="row mb-3 text-center">
<div class="col-md-4 themed-grid-col">.col-md-4</div>
<div class="col-md-4 themed-grid-col">.col-md-4</div>
<div class="col-md-4 themed-grid-col">.col-md-4</div>
</div>
<div class="row mb-3">
<div class="row mb-3 text-center">
<div class="col-lg-4 themed-grid-col">.col-lg-4</div>
<div class="col-lg-4 themed-grid-col">.col-lg-4</div>
<div class="col-lg-4 themed-grid-col">.col-lg-4</div>
</div>
<div class="row mb-3">
<div class="row mb-3 text-center">
<div class="col-xl-4 themed-grid-col">.col-xl-4</div>
<div class="col-xl-4 themed-grid-col">.col-xl-4</div>
<div class="col-xl-4 themed-grid-col">.col-xl-4</div>
</div>
<div class="row mb-3">
<div class="row mb-3 text-center">
<div class="col-xxl-4 themed-grid-col">.col-xxl-4</div>
<div class="col-xxl-4 themed-grid-col">.col-xxl-4</div>
<div class="col-xxl-4 themed-grid-col">.col-xxl-4</div>
@@ -55,7 +55,7 @@ include_js: false
<h2 class="mt-4">Three equal columns</h2>
<p>Get three equal-width columns <strong>starting at desktops and scaling to large desktops</strong>. On mobile devices, tablets and below, the columns will automatically stack.</p>
<div class="row mb-3">
<div class="row mb-3 text-center">
<div class="col-md-4 themed-grid-col">.col-md-4</div>
<div class="col-md-4 themed-grid-col">.col-md-4</div>
<div class="col-md-4 themed-grid-col">.col-md-4</div>
@@ -63,7 +63,7 @@ include_js: false
<h2 class="mt-4">Three equal columns alternative</h2>
<p>By using the <code>.row-cols-*</code> classes, you can easily create a grid with equal columns.</p>
<div class="row row-cols-md-3 mb-3">
<div class="row row-cols-md-3 mb-3 text-center">
<div class="col themed-grid-col"><code>.col</code> child of <code>.row-cols-md-3</code></div>
<div class="col themed-grid-col"><code>.col</code> child of <code>.row-cols-md-3</code></div>
<div class="col themed-grid-col"><code>.col</code> child of <code>.row-cols-md-3</code></div>
@@ -71,7 +71,7 @@ include_js: false
<h2 class="mt-4">Three unequal columns</h2>
<p>Get three columns <strong>starting at desktops and scaling to large desktops</strong> of various widths. Remember, grid columns should add up to twelve for a single horizontal block. More than that, and columns start stacking no matter the viewport.</p>
<div class="row mb-3">
<div class="row mb-3 text-center">
<div class="col-md-3 themed-grid-col">.col-md-3</div>
<div class="col-md-6 themed-grid-col">.col-md-6</div>
<div class="col-md-3 themed-grid-col">.col-md-3</div>
@@ -79,7 +79,7 @@ include_js: false
<h2 class="mt-4">Two columns</h2>
<p>Get two columns <strong>starting at desktops and scaling to large desktops</strong>.</p>
<div class="row mb-3">
<div class="row mb-3 text-center">
<div class="col-md-8 themed-grid-col">.col-md-8</div>
<div class="col-md-4 themed-grid-col">.col-md-4</div>
</div>
@@ -94,7 +94,7 @@ include_js: false
<h2 class="mt-4">Two columns with two nested columns</h2>
<p>Per the documentation, nesting is easy—just put a row of columns within an existing column. This gives you two columns <strong>starting at desktops and scaling to large desktops</strong>, with another two (equal widths) within the larger column.</p>
<p>At mobile device sizes, tablets and down, these columns and their nested columns will stack.</p>
<div class="row mb-3">
<div class="row mb-3 text-center">
<div class="col-md-8 themed-grid-col">
<div class="pb-3">
.col-md-8
@@ -112,16 +112,16 @@ include_js: false
<h2 class="mt-4">Mixed: mobile and desktop</h2>
<p>The Bootstrap v5 grid system has six tiers of classes: xs (extra small, this class infix is not used), sm (small), md (medium), lg (large), xl (x-large), and xxl (xx-large). You can use nearly any combination of these classes to create more dynamic and flexible layouts.</p>
<p>Each tier of classes scales up, meaning if you plan on setting the same widths for md, lg, xl and xxl, you only need to specify md.</p>
<div class="row mb-3">
<div class="row mb-3 text-center">
<div class="col-md-8 themed-grid-col">.col-md-8</div>
<div class="col-6 col-md-4 themed-grid-col">.col-6 .col-md-4</div>
</div>
<div class="row mb-3">
<div class="row mb-3 text-center">
<div class="col-6 col-md-4 themed-grid-col">.col-6 .col-md-4</div>
<div class="col-6 col-md-4 themed-grid-col">.col-6 .col-md-4</div>
<div class="col-6 col-md-4 themed-grid-col">.col-6 .col-md-4</div>
</div>
<div class="row mb-3">
<div class="row mb-3 text-center">
<div class="col-6 themed-grid-col">.col-6</div>
<div class="col-6 themed-grid-col">.col-6</div>
</div>
@@ -129,11 +129,11 @@ include_js: false
<hr class="my-4">
<h2 class="mt-4">Mixed: mobile, tablet, and desktop</h2>
<div class="row mb-3">
<div class="row mb-3 text-center">
<div class="col-sm-6 col-lg-8 themed-grid-col">.col-sm-6 .col-lg-8</div>
<div class="col-6 col-lg-4 themed-grid-col">.col-6 .col-lg-4</div>
</div>
<div class="row mb-3">
<div class="row mb-3 text-center">
<div class="col-6 col-sm-4 themed-grid-col">.col-6 .col-sm-4</div>
<div class="col-6 col-sm-4 themed-grid-col">.col-6 .col-sm-4</div>
<div class="col-6 col-sm-4 themed-grid-col">.col-6 .col-sm-4</div>
@@ -143,7 +143,7 @@ include_js: false
<h2 class="mt-4">Gutters</h2>
<p>With <code>.gx-*</code> classes, the horizontal gutters can be adjusted.</p>
<div class="row row-cols-1 row-cols-md-3 gx-4">
<div class="row row-cols-1 row-cols-md-3 gx-4 text-center">
<div class="col themed-grid-col"><code>.col</code> with <code>.gx-4</code> gutters</div>
<div class="col themed-grid-col"><code>.col</code> with <code>.gx-4</code> gutters</div>
<div class="col themed-grid-col"><code>.col</code> with <code>.gx-4</code> gutters</div>
@@ -152,7 +152,7 @@ include_js: false
<div class="col themed-grid-col"><code>.col</code> with <code>.gx-4</code> gutters</div>
</div>
<p class="mt-4">Use the <code>.gy-*</code> classes to control the vertical gutters.</p>
<div class="row row-cols-1 row-cols-md-3 gy-4">
<div class="row row-cols-1 row-cols-md-3 gy-4 text-center">
<div class="col themed-grid-col"><code>.col</code> with <code>.gy-4</code> gutters</div>
<div class="col themed-grid-col"><code>.col</code> with <code>.gy-4</code> gutters</div>
<div class="col themed-grid-col"><code>.col</code> with <code>.gy-4</code> gutters</div>
@@ -161,7 +161,7 @@ include_js: false
<div class="col themed-grid-col"><code>.col</code> with <code>.gy-4</code> gutters</div>
</div>
<p class="mt-4">With <code>.g-*</code> classes, the gutters in both directions can be adjusted.</p>
<div class="row row-cols-1 row-cols-md-3 g-3">
<div class="row row-cols-1 row-cols-md-3 g-3 text-center">
<div class="col themed-grid-col"><code>.col</code> with <code>.g-3</code> gutters</div>
<div class="col themed-grid-col"><code>.col</code> with <code>.g-3</code> gutters</div>
<div class="col themed-grid-col"><code>.col</code> with <code>.g-3</code> gutters</div>
@@ -178,11 +178,11 @@ include_js: false
<p>Additional classes added in Bootstrap v4.4 allow containers that are 100% wide until a particular breakpoint. v5 adds a new <code>xxl</code> breakpoint.</p>
</div>
<div class="container themed-container">.container</div>
<div class="container-sm themed-container">.container-sm</div>
<div class="container-md themed-container">.container-md</div>
<div class="container-lg themed-container">.container-lg</div>
<div class="container-xl themed-container">.container-xl</div>
<div class="container-xxl themed-container">.container-xxl</div>
<div class="container-fluid themed-container">.container-fluid</div>
<div class="container themed-container text-center">.container</div>
<div class="container-sm themed-container text-center">.container-sm</div>
<div class="container-md themed-container text-center">.container-md</div>
<div class="container-lg themed-container text-center">.container-lg</div>
<div class="container-xl themed-container text-center">.container-xl</div>
<div class="container-xxl themed-container text-center">.container-xxl</div>
<div class="container-fluid themed-container text-center">.container-fluid</div>
</main>

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

@@ -89,7 +89,7 @@ body_class: ""
<div class="b-example-divider"></div>
<header class="p-3 bg-dark text-white">
<header class="p-3 text-bg-dark">
<div class="container">
<div class="d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start">
<a href="/" class="d-flex align-items-center mb-2 mb-lg-0 text-white text-decoration-none">
@@ -105,7 +105,7 @@ body_class: ""
</ul>
<form class="col-12 col-lg-auto mb-3 mb-lg-0 me-lg-3" role="search">
<input type="search" class="form-control form-control-dark text-white bg-dark" placeholder="Search..." aria-label="Search">
<input type="search" class="form-control form-control-dark text-bg-dark" placeholder="Search..." aria-label="Search">
</form>
<div class="text-end">
@@ -235,7 +235,7 @@ body_class: ""
<div class="b-example-divider"></div>
<header>
<div class="px-3 py-2 bg-dark text-white">
<div class="px-3 py-2 text-bg-dark">
<div class="container">
<div class="d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start">
<a href="/" class="d-flex align-items-center my-2 my-lg-0 me-lg-auto text-white text-decoration-none">

2
site/content/docs/5.2/examples/jumbotron/index.html
View File

@@ -23,7 +23,7 @@ include_js: false
<div class="row align-items-md-stretch">
<div class="col-md-6">
<div class="h-100 p-5 text-white bg-dark rounded-3">
<div class="h-100 p-5 text-bg-dark rounded-3">
<h2>Change the background</h2>
<p>Swap the background-color utility and add a `.text-*` color utility to mix up the jumbotron look. Then, mix and match with additional component themes and more.</p>
<button class="btn btn-outline-light" type="button">Example button</button>

2
site/content/docs/5.2/examples/masonry/index.html
View File

@@ -54,7 +54,7 @@ extra_js:
</div>
</div>
<div class="col-sm-6 col-lg-4 mb-4">
<div class="card bg-primary text-white text-center p-3">
<div class="card text-bg-primary text-center p-3">
<figure class="mb-0">
<blockquote class="blockquote">
<p>A well-known quote, contained in a blockquote element.</p>

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

@@ -12,7 +12,7 @@ extra_css:
<button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbarDark" aria-controls="offcanvasNavbarDark">
<span class="navbar-toggler-icon"></span>
</button>
<div class="offcanvas offcanvas-end text-white bg-dark" tabindex="-1" id="offcanvasNavbarDark" aria-labelledby="offcanvasNavbarDarkLabel">
<div class="offcanvas offcanvas-end text-bg-dark" tabindex="-1" id="offcanvasNavbarDark" aria-labelledby="offcanvasNavbarDarkLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasNavbarDarkLabel">Offcanvas</h5>
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas" aria-label="Close"></button>
@@ -96,7 +96,7 @@ extra_css:
<button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbar2" aria-controls="offcanvasNavbar2">
<span class="navbar-toggler-icon"></span>
</button>
<div class="offcanvas offcanvas-end text-white bg-dark" tabindex="-1" id="offcanvasNavbar2" aria-labelledby="offcanvasNavbar2Label">
<div class="offcanvas offcanvas-end text-bg-dark" tabindex="-1" id="offcanvasNavbar2" aria-labelledby="offcanvasNavbar2Label">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasNavbar2Label">Offcanvas</h5>
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas" aria-label="Close"></button>

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

@@ -52,7 +52,7 @@ aliases: "/docs/5.2/examples/offcanvas/"
<a class="nav-link active" aria-current="page" href="#">Dashboard</a>
<a class="nav-link" href="#">
Friends
<span class="badge bg-light text-dark rounded-pill align-text-bottom">27</span>
<span class="badge text-bg-light rounded-pill align-text-bottom">27</span>
</a>
<a class="nav-link" href="#">Explore</a>
<a class="nav-link" href="#">Suggestions</a>

2
site/content/docs/5.2/examples/pricing/index.html
View File

@@ -73,7 +73,7 @@ include_js: false
</div>
<div class="col">
<div class="card mb-4 rounded-3 shadow-sm border-primary">
<div class="card-header py-3 text-white bg-primary border-primary">
<div class="card-header py-3 text-bg-primary border-primary">
<h4 class="my-0 fw-normal">Enterprise</h4>
</div>
<div class="card-body">

4
site/content/docs/5.2/examples/product/index.html
View File

@@ -32,7 +32,7 @@ extra_css:
</div>
<div class="d-md-flex flex-md-equal w-100 my-md-3 ps-md-3">
<div class="bg-dark me-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center text-white overflow-hidden">
<div class="text-bg-dark 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>
@@ -56,7 +56,7 @@ extra_css:
</div>
<div class="bg-dark shadow-sm mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"></div>
</div>
<div class="bg-primary me-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center text-white overflow-hidden">
<div class="text-bg-primary 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>

2
site/content/docs/5.2/examples/sidebars/index.html
View File

@@ -70,7 +70,7 @@ body_class: ""
<main class="d-flex flex-nowrap">
<h1 class="visually-hidden">Sidebars examples</h1>
<div class="d-flex flex-column flex-shrink-0 p-3 text-white bg-dark" style="width: 280px;">
<div class="d-flex flex-column flex-shrink-0 p-3 text-bg-dark" style="width: 280px;">
<a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto text-white 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>