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

Docs: add explanation of the base .btn class (#37275)

Browse Source 
* Docs: add explanation of the base `.btn` class

and a callout reminding authors to at least define some focus styling if they intend to use it "naked"

* Turn callout into a warning

* Add initial heading

* Tweak callout wording
This commit is contained in:
Patrick H. Lauke 2023-01-03 11:28:27 +00:00 committed by GitHub
parent 3ee2a75495
commit 9013c9884e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 15 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
site/content/docs/5.3/components/buttons.md
View File

@ -6,7 +6,21 @@ group: components
toc: true
---
## Examples
## Base class
Bootstrap has a base `.btn` class that sets up basic styles such as padding and content alignment. By default, `.btn` controls have a transparent border and background color, and lack any explicit focus and hover styles.
{{< example >}}
<button type="button" class="btn">Base class</button>
{{< /example >}}
The `.btn` class is intended to be used in conjunction with our additional predefined button styles, or to serve as a basis for your own custom styles.
{{< callout warning >}}
If you are using the `.btn` class on its own, remember to at least define some explicit `:focus` and/or `:focus-visible` styles.
{{< /callout >}}
## Predefined styles
Bootstrap includes several predefined button styles, each serving its own semantic purpose, with a few extras thrown in for more control.