TechBlogSD - Kaikki WordPressin ja WEB: n kehittämiseen
WEB- ja WordPress - ohjeet, uutiset, arvostelut teemoista ja laajennuksista

Kuinka luoda Bootstrap 5 -painikkeinen ryhmä?

1

Painikkeiden ryhmä, kuten nimi osoittaa, on yksinkertaisesti ryhmä painikkeita, jotka on kohdistettu yhteen osoittamaan ne yhtenä elementtinä. Edellisessä painikkeiden opetusohjelmassa olemme selittäneet, kuinka luodaan painikkeita, joissa on valintaruutu ja valintanapit painikkeiden ryhmäkonseptin avulla. Tässä opetusohjelmassa selitetään erityyppisiä painikeryhmiä Bootstrap 5: n esimerkeillä .

Bootstrap 5 Button Group -opetusohjelma

Tämä opetusohjelma kattaa seuraavat luvut:

  1. Vaakapainikkeiden ryhmän luominen
  2. Painikeryhmän työkalurivi
  3. Nappiryhmien mitoitus
  4. Sisäänrakennettu painikeryhmä pudotusvalikolla
  5. Pystypainikkeiden ryhmä
  6. Sisäänrakennettu pystysuora painikeryhmä

1 Vaakasuuntainen painikeryhmä

Vaakapainikkeiden ryhmä on yksinkertainen muoto kahden tai useamman painikkeen yhdistämiseksi yhteen. Luodaan neljän painikkeen painikeryhmä käyttämällä ".btn-group" -luokkaa ja div-tunniste. Jokainen painike käyttää eri asiayhteysluokkaa näyttääkseen sen eri väreinä.

<!DOCTYPE html> <html lang="en"> <head> <!-- Meta Tags for Bootstrap 5 --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Bootstrap 5 CSS --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous"> </head> <body> <!-- Start of Button Group --> <div class="btn-group" role="group" aria-label="Horizontal Button Group"> <button type="button" class="btn btn-primary">Button 1 </button> <button type="button" class="btn btn-warning">Button 2</button> <button type="button" class="btn btn-danger">Button 3</button> <button type="button" class="btn btn-info">Button 4</button> </div> <!-- End of Button Group --> <!-- Bootstrap 5 Scripts --> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script> </body> </html>

"Rooli" ja "aria-label" ovat valinnaisia, ja niitä käytetään pääasiassa näytönlukuohjelmien saavutettavuuden kannalta.

Tämä tuottaa seuraavan tuloksen selaimessa.

Kuinka luoda Bootstrap 5 -painikkeinen ryhmä?

Yllä oleva koodi on täydellinen mallikoodi, joka käyttää CDN CSS: ää ja komentosarjojen linkkejä. Voit yksinkertaisesti korvata näppäinryhmän alun ja lopun välisen lohkon alla olevissa esimerkeissä annetulla koodilla, jotta voit luoda ja testata erilaisia ​​näppäinryhmätyylejä.

2 Painikeryhmän työkalupalkki

Ryhmittelyvaihtoehdon avulla voit saada työkalurivin kaltaisen järjestelyn lisäämällä add role = "toolbar” -määritteen. Voit myös käyttää näppäinryhmää syöttöryhmien kanssa työkalurivien luomiseen tekstinsyöttöä käyttäen. Esimerkkikoodi on annettu alla:

<div class="btn-toolbar" role="toolbar" aria-label="Button Group Toolbar"> <div class="btn-group" role="group" aria-label="Button Group"> <button type="button" class="btn btn-primary">A</button> <button type="button" class="btn btn-warning">B</button> <button type="button" class="btn btn-info">C</button> <button type="button" class="btn btn-success">D</button> </div> <div class="input-group"> <span class="input-group-addon" id="id1">@</span> <input type="text" class="form-control" placeholder="This is input group box" aria-describedby="id1"> </div> </div>

Se tuottaa seuraavan tuloksen selaimessa:

Kuinka luoda Bootstrap 5 -painikkeinen ryhmä?

Kuten näette, painike- ja syöttöryhmän elementeissä ei ole aukkoa. Käytä mukautettua CSS: ää lisäämään marginaalia näiden kahden elementin väliin, jotta ne voidaan kohdistaa oikein.

3 Painikeryhmien eri koko

Bootstrap 5: n avulla voit määrittää kolme kokoluokkaa suurille (btn-group-lg), oletusarvoisille ja pienille (btn-group-sm). Voit lisätä suuria tai pieniä luokkia suoraan .btn-ryhmään muuttaaksesi kokoa.

<!-- Start of Large Button Group Size --> <div class="btn-group btn-group-lg" role="group" aria-label="Large Button Group"> <button type="button" class="btn btn-primary">Large Button 1</button> <button type="button" class="btn btn-warning">Large Button 2</button> <button type="button" class="btn btn-danger">Large Button 3</button> </div> <!-- Start of Default Button Group Size --> <div class="btn-group" role="group" aria-label="Default Button Group"> <button type="button" class="btn btn-primary">Default Button 1</button> <button type="button" class="btn btn-warning">Default Button 2</button> <button type="button" class="btn btn-danger">Default Button 3</button> </div> <!-- Start of Small Button Group Size --> <div class="btn-group btn-group-sm" role="group" aria-label="Small Button Group"> <button type="button" class="btn btn-primary">Small Button 1</button> <button type="button" class="btn btn-warning">Small Button 2</button> <button type="button" class="btn btn-danger">Small Button 3</button> </div>

Yllä oleva koodi tuottaa seuraavat tulokset:

Kuinka luoda Bootstrap 5 -painikkeinen ryhmä?

4 Sisäkkäisten painikeryhmien luominen pudotusvalikolla

Sisäkkäisiä painikeryhmiä on helppo luoda sijoittamalla .btn-ryhmäluokka toiseen .btn-ryhmä-luokkaan. Tällä tavalla voit näyttää muutamia painikkeita ja sitten avattavan valikon, jossa on muita linkkejä.

<div class="btn-group" role="group" aria-label="Nested Button Group"> <button type="button" class="btn btn-primary">Button 1</button> <button type="button" class="btn btn-info">Button 2</button> <div class="btn-group" role="group"> <button id="nested1" type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown 1 </button> <div class="dropdown-menu" aria-labelledby="nested1"> <a class="dropdown-item text-danger" href="#">Dropdown Link 1</a> <div class="dropdown-divider"></div> <a class="dropdown-item text-info" href="#">Dropdown Link 2</a> </div> </div> </div>

Tuloksen pitäisi näyttää tältä:

Kuinka luoda Bootstrap 5 -painikkeinen ryhmä?

5 pystysuuntaista painikeryhmää

Painikkeet voidaan ryhmitellä pystysuoraan käyttämällä .vertical-luokkaa yhdessä .btn-group-luokan kanssa.

<div class="btn-group-vertical"> <button type="button" class="btn btn-primary">Button 1 </button> <button type="button" class="btn btn-warning">Button 2</button> <button type="button" class="btn btn-danger">Button 3</button> </div>

Koodin tuloksen pitäisi tuottaa alla oleva painikeryhmä:

Kuinka luoda Bootstrap 5 -painikkeinen ryhmä?

6 Sisäänrakennettu pystysuora painikeryhmä

Horisontaalisen sisäkkäisyyden tapaan pystysuorat painikeryhmät voidaan myös sisäistää avattavalla valikolla.

<div class="btn-group-vertical" role="group" aria-label="Nested Button Group"> <button type="button" class="btn btn-primary">Button 1</button> <button type="button" class="btn btn-secondary">Button 2</button> <div class="btn-group" role="group"> <button id="nested2" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown 1 </button> <div class="dropdown-menu" aria-labelledby="nested2"> <a class="dropdown-item text-danger" href="#">Dropdown Link 1</a> <div class="dropdown-divider"></div> <a class="dropdown-item text-danger" href="#">Dropdown Link 2</a> </div> </div> </div>

Alla näet, miltä tulos näyttää:

Kuinka luoda Bootstrap 5 -painikkeinen ryhmä?

Huomaa, että jakopainikkeita ei tueta pystysuorassa sisäkkäisyydessä.


Opi Bootstrap 5 (hakemisto )


Leave A Reply

Tämä verkkosivusto käyttää evästeitä parantaakseen käyttökokemustasi. Oletamme, että olet kunnossa, mutta voit halutessasi kieltäytyä. Hyväksyä Lisätietoja