TechBlogSD - Allt för WordPress- och WEB -utveckling
WEB- och WordPress - instruktioner, nyheter, recensioner av teman och plugins

Hur man skapar Bootstrap 5 Button Group?

2

Knappgrupp som namnet indikerar är helt enkelt en grupp knappar i linje med varandra för att visa dem som ett enda element. I vår tidigare knapphandledning har vi förklarat hur du skapar knappar med kryssruta och alternativknappar med hjälp av knappgruppskoncept. Låt oss i denna handledning förklara olika typer av knappgrupper med exempel i Bootstrap 5.

Handledning för Bootstrap 5 -knappsgrupp

Denna handledning täcker följande kapitel:

  1. Skapa horisontell knappgrupp
  2. Knappgrupps verktygsfält
  3. Storlek på knappgrupper
  4. Kapslad knappgrupp med rullgardinsmeny
  5. Vertikal knappgrupp
  6. Kapslad vertikal knappgrupp

1 Horisontell knappgrupp

Horisontell knappgrupp är den enkla formen att gruppera två eller flera knappar tillsammans. Låt oss skapa en knappgrupp med fyra knappar med klassen ".btn-group" med en div-tagg. Varje knapp använder olika kontextuella klasser för att visa den i olika färger.

<!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>

"Rollen" och "aria-label" är valfria och används främst ur tillgänglighetssynpunkt på skärmläsare.

Detta ger följande resultat i webbläsaren.

Hur man skapar Bootstrap 5 Button Group?

Ovanstående kod är en fullständig mallkod med CDN CSS och skriptlänkar. Du kan helt enkelt ersätta blocket mellan knappens start och slut med knappkoden i exemplen nedan för att skapa och testa olika knappgruppsstilar.

2 -knapps gruppverktygsfält

Med grupperingsalternativet kan du ha ett verktygsfält som arrangemang genom att lägga till attributet add role = "toolbar”. Du kan också använda knappgrupp tillsammans med inmatningsgrupper för att skapa verktygsfält med textinmatning. Exempelkoden ges nedan:

<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>

Det ger följande resultat i webbläsaren:

Hur man skapar Bootstrap 5 Button Group?

Som du kan se har knappgruppen och ingångsgruppselementen ingen lucka. Du bör använda anpassad CSS för att lägga till marginal mellan dessa två element för att anpassa dem korrekt.

3 Olika storlekar på knappgrupper

Bootstrap 5 låter dig ha tre storleksklasser för stora (btn-group-lg), standard och små (btn-group-sm). Du kan direkt lägga till stor eller liten klass till klassen ".btn-grupp" för att ändra storlek.

<!-- 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>

Koden ovan ger resultaten enligt nedan:

Hur man skapar Bootstrap 5 Button Group?

4 Skapa kapslade knappgrupper med rullgardinsmenyn

Kapslade knappgrupper är enkla att skapa genom att placera klassen ".btn-grupp" i en annan ".btn-grupp" -klass. På så sätt kan du visa några knappar och sedan en rullgardinsmeny med ytterligare länkar.

<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>

Resultatet ska se ut nedan:

Hur man skapar Bootstrap 5 Button Group?

5 vertikala knappgrupper

Knappar kan grupperas vertikalt med ".vertikal" klass tillsammans med ".btn-grupp" -klass.

<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>

Resultatet av koden bör ge nedanstående knappgrupp:

Hur man skapar Bootstrap 5 Button Group?

6 Nested Vertical Button Group

I likhet med horisontell häckning kan vertikala knappgrupper också kapslas med rullgardinsmenyn.

<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>

Nedan är hur resultatet kommer att se ut:

Hur man skapar Bootstrap 5 Button Group?

Observera att delade knappar inte stöds i vertikal häckning.


Lär dig Bootstrap 5 (Index )


Inspelningskälla: webnots.com
Leave A Reply

Denna webbplats använder cookies för att förbättra din upplevelse. Vi antar att du är ok med detta, men du kan välja bort det om du vill. Jag accepterar Fler detaljer