This is the 20th day of my participation in the More text Challenge. For more details, see more text Challenge

“Bootstrap5 zero base to master” an old liu original, strive for a daily update section.

20.1 Simple example

A button group is formed by combining a series of buttons on a row or stacking them in a vertical column wrapped in.btn-group.

<div class="btn-group" role="group" aria-label="Basic example">
<button type="button" class="btn btn-primary">Left</button>
<button type="button" class="btn btn-primary">Middle</button>
<button type="button" class="btn btn-primary">Right</button>
</div>
Copy the code

These classes can also be added to link groups as an alternative to the.nav navigation component.

<div class="btn-group">
<a href="#" class="btn btn-primary active" aria-current="page">Active link</a>
<a href="#" class="btn btn-primary">Link</a>
<a href="#" class="btn btn-primary">Link</a>
</div>
Copy the code

20.2 Different forms of button groups

20.2.1 Blending color styles

Several buttons of different colors are put together

<div class="btn-group" role="group" aria-label="Basic mixed styles example">
<button type="button" class="btn btn-danger">Left</button>
<button type="button" class="btn btn-warning">Middle</button>
<button type="button" class="btn btn-success">Right</button>
</div>
Copy the code

20.2.2 Outline styles

<div class="btn-group" role="group" aria-label="Basic outlined example">
<button type="button" class="btn btn-outline-primary">Left</button>
<button type="button" class="btn btn-outline-primary">Middle</button>
<button type="button" class="btn btn-outline-primary">Right</button>
</div>
Copy the code

20.2.3 checkbox

Check boxes are also covered in the forms section, where the button format hides the form and shows only the label, which has both checked and unselected states.

<div class="btn-group" role="group" aria-label="Basic checkbox toggle button group">
<input type="checkbox" class="btn-check" id="btncheck1" autocomplete="off" checked>
<label class="btn btn-outline-primary" for="btncheck1">Checkbox 1</label>

<input type="checkbox" class="btn-check" id="btncheck2" autocomplete="off">
<label class="btn btn-outline-primary" for="btncheck2">Checkbox 2</label>

<input type="checkbox" class="btn-check" id="btncheck3" autocomplete="off">
<label class="btn btn-outline-primary" for="btncheck3">Checkbox 3</label>
</div>
Copy the code

20.2.4 Radio button group

With the checkbox

<div class="btn-group" role="group" aria-label="Basic radio toggle button group"> <input type="radio" class="btn-check" name="btnradio" id="btnradio1" autocomplete="off" checked> <label class="btn btn-outline-primary" for="btnradio1">Radio 1</label> <input type="radio" class="btn-check" name="btnradio" id="btnradio2" autocomplete="off"> <label class="btn btn-outline-primary" for="btnradio2">Radio 2</label> <input type="radio" class="btn-check" name="btnradio" id="btnradio3" autocomplete="off"> <label class="btn btn-outline-primary"  for="btnradio3">Radio 3</label> </div>Copy the code

20.2.5 Button Toolbar

Add an entire group of buttons to the button toolbar to build more complex components. Use generic classes to separate groups, buttons, etc., depending on your needs.

<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
<div class="btn-group me-2" role="group" aria-label="First group">
<button type="button" class="btn btn-primary">1</button>
<button type="button" class="btn btn-primary">2</button>
<button type="button" class="btn btn-primary">3</button>
<button type="button" class="btn btn-primary">4</button>
</div>
<div class="btn-group me-2" role="group" aria-label="Second group">
<button type="button" class="btn btn-secondary">5</button>
<button type="button" class="btn btn-secondary">6</button>
<button type="button" class="btn btn-secondary">7</button>
</div>
<div class="btn-group" role="group" aria-label="Third group">
<button type="button" class="btn btn-info">8</button>
</div>
</div>
Copy the code

Arbitrarily mix the input group with the button group in the toolbar. Similar to the above example, you need some generic categories to appropriately distance the contents of these. You can use this here, and it will become clearer when you finish the form section.

<div class="btn-toolbar mb-3" role="toolbar" aria-label="Toolbar with button groups">
<div class="btn-group me-2" role="group" aria-label="First group">
<button type="button" class="btn btn-outline-secondary">1</button>
<button type="button" class="btn btn-outline-secondary">2</button>
<button type="button" class="btn btn-outline-secondary">3</button>
<button type="button" class="btn btn-outline-secondary">4</button>
</div>
<div class="input-group">
<div class="input-group-text" id="btnGroupAddon">@</div>
<input type="text" class="form-control" placeholder="Input group example" aria-label="Input group example" aria-describedby="btnGroupAddon">
</div>
</div>

<div class="btn-toolbar justify-content-between" role="toolbar" aria-label="Toolbar with button groups">
<div class="btn-group" role="group" aria-label="First group">
<button type="button" class="btn btn-outline-secondary">1</button>
<button type="button" class="btn btn-outline-secondary">2</button>
<button type="button" class="btn btn-outline-secondary">3</button>
<button type="button" class="btn btn-outline-secondary">4</button>
</div>
<div class="input-group">
<div class="input-group-text" id="btnGroupAddon2">@</div>
<input type="text" class="form-control" placeholder="Input group example" aria-label="Input group example" aria-describedby="btnGroupAddon2">
</div>
</div>
Copy the code

20.3 size

Instead of applying the button sizing category to every button in the group, just add bTN-group -* to every element with bTN-group.

<div class="btn-group btn-group-lg" role="group" aria-label="...">... </div><div class="btn-group" role="group" aria-label="...">.</div>
<div class="btn-group btn-group-sm" role="group" aria-label="...">.</div>
Copy the code

20.4 nested

When you want to mix drop-down menus with button groups, just put.btn-group in another.btn-group.

<div class="btn-group" role="group" aria-label="Button group with nested dropdown">
<button type="button" class="btn btn-primary">1</button>
<button type="button" class="btn btn-primary">2</button>

<div class="btn-group" role="group">
<button id="btnGroupDrop1" type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</button>
<ul class="dropdown-menu" aria-labelledby="btnGroupDrop1">
<li><a class="dropdown-item" href="#">Dropdown link</a></li>
<li><a class="dropdown-item" href="#">Dropdown link</a></li>
</ul>
</div>
</div>
Copy the code

20.5 Vertical variation

To stack a group of buttons vertically instead of horizontally, you simply replace the button group label btn-group with btn-group-vertical in the example above. Instead of attaching the btn-group-vertical class to btn-group). Nesting is supported here, and splitting the drop-down list is not supported.

<! doctype html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="keywords" content=""> <meta name="description" content=""> <link href=".. / bootstrap5 / bootstrap. Min. CSS "rel =" stylesheet "> < title > button group < / title > < / head > < body > < div class =" container "> < br > < br > < br > <div class="btn-group-vertical" role="group"> <input type="radio" class="btn-check" name="vbtn-radio" id="vbtn-radio1" autocomplete="off" checked=""> <label class="btn btn-outline-danger" for="vbtn-radio1">Radio 1</label> <input type="radio" class="btn-check" name="vbtn-radio" id="vbtn-radio2" autocomplete="off"> <label class="btn btn-outline-danger" for="vbtn-radio2">Radio 2</label> <input type="radio" class="btn-check" name="vbtn-radio" id="vbtn-radio3" autocomplete="off"> <label class="btn btn-outline-danger" for="vbtn-radio3">Radio 3</label> </div> </div> <script src=".. /bootstrap5/bootstrap.bundle.min.js" ></script> </body> </html> ... </div>Copy the code

Nesting is simple, just a tag from the 2.4 example

<div class="btn-group-vertical" role="group">
        <button type="button" class="btn btn-primary">1</button>
        <button type="button" class="btn btn-primary">2</button>
        
        <div class="btn-group" role="group">
        <button id="btnGroupDrop1" type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
        Dropdown
        </button>
        <ul class="dropdown-menu" aria-labelledby="btnGroupDrop1">
        <li><a class="dropdown-item" href="#">Dropdown link</a></li>
        <li><a class="dropdown-item" href="#">Dropdown link</a></li>
        </ul>
        </div>
        </div>
Copy the code

Today’s course here, please pay attention to me, timely learning an old Liu original “Bootstrap5 zero foundation to master” section 21 Bootstrap5 card usage, card function is also very powerful and useful, do not miss ah.

If this post helped you, please click “like”.