Bootstrap 5 Button Component: Styling, Sizing, and State Settings Tutorial

The Bootstrap 5 button component is used for web page interaction, enabling quick implementation of unified styles, responsive layouts, and interactive states without writing CSS from scratch. Before use, introduce Bootstrap 5 CSS via CDN (JS is optional). The basic style is centered on `.btn`, with color classes (e.g., `.btn-primary`, `.btn-secondary`) or outline classes (`btn-outline-*`) to achieve different effects. There are three sizes: default, small (`.btn-sm`), and large (`.btn-lg`). States are automatically handled: hover (color darkens), active (indented), and disabled (grayed out and unclickable with the `disabled` attribute). Extended tips include shape adjustments (`.rounded-0` for right angles, `.rounded-circle` for circles) and button groups (`.btn-group`). Mastering basic styles, sizes, and states allows efficient use of the component.