From 2c7f888c1ec667119c6a811ed247aaa3cd539fed Mon Sep 17 00:00:00 2001
From: ZhangChengLin <469946668@qq.com>
Date: Mon, 5 Jun 2023 23:02:46 +0800
Subject: [PATCH] add a base class style display for toggle buttons

---
 site/content/docs/5.3/components/buttons.md  | 26 ++++++++++++++----
 site/content/docs/5.3/forms/checks-radios.md | 29 +++++++++++++++++---
 2 files changed, 45 insertions(+), 10 deletions(-)

diff --git a/site/content/docs/5.3/components/buttons.md b/site/content/docs/5.3/components/buttons.md
index da380c144c..83a61382a3 100644
--- a/site/content/docs/5.3/components/buttons.md
+++ b/site/content/docs/5.3/components/buttons.md
@@ -178,15 +178,29 @@ Visually, these toggle buttons are identical to the [checkbox toggle buttons]({{
 Add `data-bs-toggle="button"` to toggle a button's `active` state. If you're pre-toggling a button, you must manually add the `.active` class **and** `aria-pressed="true"` to ensure that it is conveyed appropriately to assistive technologies.
 
 {{< example >}}
-<button type="button" class="btn btn-primary" data-bs-toggle="button">Toggle button</button>
-<button type="button" class="btn btn-primary active" data-bs-toggle="button" aria-pressed="true">Active toggle button</button>
-<button type="button" class="btn btn-primary" disabled data-bs-toggle="button">Disabled toggle button</button>
+<p class="d-inline-flex gap-1">
+  <button type="button" class="btn" data-bs-toggle="button">Toggle button</button>
+  <button type="button" class="btn active" data-bs-toggle="button" aria-pressed="true">Active toggle button</button>
+  <button type="button" class="btn" disabled data-bs-toggle="button">Disabled toggle button</button>
+</p>
+<p class="d-inline-flex gap-1">
+  <button type="button" class="btn btn-primary" data-bs-toggle="button">Toggle button</button>
+  <button type="button" class="btn btn-primary active" data-bs-toggle="button" aria-pressed="true">Active toggle button</button>
+  <button type="button" class="btn btn-primary" disabled data-bs-toggle="button">Disabled toggle button</button>
+</p>
 {{< /example >}}
 
 {{< example >}}
-<a href="#" class="btn btn-primary" role="button" data-bs-toggle="button">Toggle link</a>
-<a href="#" class="btn btn-primary active" role="button" data-bs-toggle="button" aria-pressed="true">Active toggle link</a>
-<a class="btn btn-primary disabled" aria-disabled="true" role="button" data-bs-toggle="button">Disabled toggle link</a>
+<p class="d-inline-flex gap-1">
+  <a href="#" class="btn" role="button" data-bs-toggle="button">Toggle link</a>
+  <a href="#" class="btn active" role="button" data-bs-toggle="button" aria-pressed="true">Active toggle link</a>
+  <a class="btn disabled" aria-disabled="true" role="button" data-bs-toggle="button">Disabled toggle link</a>
+</p>
+<p class="d-inline-flex gap-1">
+  <a href="#" class="btn btn-primary" role="button" data-bs-toggle="button">Toggle link</a>
+  <a href="#" class="btn btn-primary active" role="button" data-bs-toggle="button" aria-pressed="true">Active toggle link</a>
+  <a class="btn btn-primary disabled" aria-disabled="true" role="button" data-bs-toggle="button">Disabled toggle link</a>
+</p>
 {{< /example >}}
 
 ### Methods
diff --git a/site/content/docs/5.3/forms/checks-radios.md b/site/content/docs/5.3/forms/checks-radios.md
index 13a5091ad6..a18ab38c2b 100644
--- a/site/content/docs/5.3/forms/checks-radios.md
+++ b/site/content/docs/5.3/forms/checks-radios.md
@@ -250,16 +250,23 @@ Create button-like checkboxes and radio buttons by using `.btn` styles rather th
 {{< example >}}
 <input type="checkbox" class="btn-check" id="btn-check" autocomplete="off">
 <label class="btn btn-primary" for="btn-check">Single toggle</label>
-{{< /example >}}
 
-{{< example >}}
 <input type="checkbox" class="btn-check" id="btn-check-2" checked autocomplete="off">
 <label class="btn btn-primary" for="btn-check-2">Checked</label>
+
+<input type="checkbox" class="btn-check" id="btn-check-3" autocomplete="off" disabled>
+<label class="btn btn-primary" for="btn-check-3">Disabled</label>
 {{< /example >}}
 
 {{< example >}}
-<input type="checkbox" class="btn-check" id="btn-check-3" autocomplete="off" disabled>
-<label class="btn btn-primary" for="btn-check-3">Disabled</label>
+<input type="checkbox" class="btn-check" id="btn-check-4" autocomplete="off">
+<label class="btn" for="btn-check-4">Single toggle</label>
+
+<input type="checkbox" class="btn-check" id="btn-check-5" checked autocomplete="off">
+<label class="btn" for="btn-check-5">Checked</label>
+
+<input type="checkbox" class="btn-check" id="btn-check-6" autocomplete="off" disabled>
+<label class="btn" for="btn-check-6">Disabled</label>
 {{< /example >}}
 
 {{< callout info >}}
@@ -282,6 +289,20 @@ Visually, these checkbox toggle buttons are identical to the [button plugin togg
 <label class="btn btn-secondary" for="option4">Radio</label>
 {{< /example >}}
 
+{{< example >}}
+<input type="radio" class="btn-check" name="options-base" id="option5" autocomplete="off" checked>
+<label class="btn" for="option5">Checked</label>
+
+<input type="radio" class="btn-check" name="options-base" id="option6" autocomplete="off">
+<label class="btn" for="option6">Radio</label>
+
+<input type="radio" class="btn-check" name="options-base" id="option7" autocomplete="off" disabled>
+<label class="btn" for="option7">Disabled</label>
+
+<input type="radio" class="btn-check" name="options-base" id="option8" autocomplete="off">
+<label class="btn" for="option8">Radio</label>
+{{< /example >}}
+
 ### Outlined styles
 
 Different variants of `.btn`, such at the various outlined styles, are supported.