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

Hur skapar jag Bootstrap 5 Dropdowns?

1

Vi har redan berört rullgardinsmenyn i vår tidigare handledning om Bootstrap -knappar. Dropdown är bara en knapp (eller en länk) och visa en lista när du klickar på den. I den här självstudien kan vi utforska olika typer av Bootstrap 5 -rullgardinsmenyer med exempel. Kom ihåg att inkludera bootstrap.bundled.min.js för att rullgardinsmenyn ska fungera. Du kan referera startmallen här.

Handledning för Bootstrap 5 Dropdowns

  1. Grundläggande funktioner i rullgardinsmenyn
  2. Skapar standard rullgardinsmeny
  3. Lägger till avdelare
  4. Inaktiverar länk i rullgardinsmenyn
  5. Dropdown med höger menyjustering
  6. Nedrullningsknapp med rubrik
  7. Storlek på rullgardinsmeny
  8. Dela ned rullgardinsmenyn
  9. Knapp för delning
  10. Poäng att komma ihåg

1 Grunderna i Bootstrap 5 Dropdowns

  • Dropdowns är en växlingsbar lista med länkar eller knappelement som visas uppåt eller nedåt.
  • Detta används vanligtvis för rullgardinsmenyer eller rullgardinsmenyalternativ och navigeringsobjekt i sidofältet.
  • Det fungerar baserat på Popper.js -skriptet.
  • Du bör inkludera popper.min.js och sedan bootstrap.min.js i samma sekvens. Använd alla exemplen i den här självstudien tillsammans med vår startmall.
  • Det kommer som standard inte att läggas till några "roll” eller “aria-” attribut i rullgardinsmenyn. Du bör manuellt infoga var som helst.
  • Rullgardinsmenyn kan stängas antingen genom att klicka på knappen eller klicka utanför. Du kan också använda "Esc" -knappen för att stänga rullgardinsmenyn.

2 Skapa standard rullgardinsmeny

Nedan är koden för att skapa en standardmeny i Bootstrap 5:

<div class="dropdown"> <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownmenu" data-bs-toggle="dropdown" aria-expanded="false"> Dropdown Button </button> <div class="dropdown-menu" aria-labelledby="dropdownmenu"> <a class="dropdown-item" href="#">Dropdown One</a> <a class="dropdown-item" href="#">Dropdown Two</a> <a class="dropdown-item" href="#">Dropdown Three</a> </div> </div>

Det ger följande resultat i webbläsaren:

Hur skapar jag Bootstrap 5 Dropdowns?

  • I grund och botten måste du slå in innehållet i en div med ".dropdown" -klassen. Detta identifierar knappen som en rullgardinsmeny. Du kan också använda taggen istället för knappen.
  • Knappen (eller länken) ska ingå i klassen ".dropdown-toggle". I det här exemplet har vi använt klassen "btn-primary" för att skapa knappen med primärfärg. Du kan använda valfri färgklass för att ha olika färgknappar.
  • Efter knappen skapa en rullgardinsmeny med objekt.

3 Lägga till avdelare i rullgardinsmenyn

Nu vet du hur du skapar den grundläggande rullgardinsmenyn. Låt oss lägga till några dekorativa saker som att lägga till avdelare mellan menyalternativen och rubriken.

<div class="dropdown"> <button class="btn btn-info dropdown-toggle" type="button" id="dropdownmenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown Button </button> <div class="dropdown-menu" aria-labelledby="dropdownmenu"> <h6 class="dropdown-header">Dropdown Header</h6> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">Dropdown One</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">Dropdown Two</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">Dropdown Three</a> </div> </div>

Nedrullningsmenyn kommer att se ut nedan:

Hur skapar jag Bootstrap 5 Dropdowns?

4 Inaktivera länk i rullgardinsobjekt

Du kan inaktivera objektet i rullgardinsmenyn för att förhindra att klicka på:

<div class="dropdown"> <button class="btn btn-info dropdown-toggle" type="button" id="dropdownmenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown Button </button> <div class="dropdown-menu" aria-labelledby="dropdownmenu"> <a class="dropdown-item" href="#">Dropdown One</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">Dropdown Two</a> <div class="dropdown-divider"></div> <a class="dropdown-item disabled" href="#">Dropdown Three</a> </div> </div>

Vi har använt informationsknappen och inaktiverat den tredje länken. Om du flyttar musen över den inaktiverade länken visas stoppmarkörssymbolen och du kan inte klicka på den.

Hur skapar jag Bootstrap 5 Dropdowns?

5 Rullgardinsmeny med höger menyjustering

Som du har märkt i exemplen ovan kommer menyn som standard att visas med vänsterjustering. Du kan ändra den till högerjustering genom att lägga till klassen ".dropdown-menu-right" tillsammans med ".dropdown-menu" -klassen. Kom ihåg att detta kommer att flytta hela menyrutan till höger om behållaren. Du bör använda ytterligare CSS -stilar för att placera menyn under rullgardinsmenyelementet korrekt.

<div class="dropdown"> <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownmenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown Button Alignment Right </button> <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownmenu"> <a class="dropdown-item" href="#">Dropdown One</a> <a class="dropdown-item" href="#">Dropdown Two</a> <a class="dropdown-item" href="#">Dropdown Three</a> </div> </div>

De högerinriktade menyalternativen kommer att se ut nedan:

Hur skapar jag Bootstrap 5 Dropdowns?

6 Nedrullningsknapp med rubrik

Du kan också lägga till en rubriktext i menyalternativen med klassen ".downdown-header" med någon av H1-H6-taggarna. I allmänhet läggs rubriken överst på menyn och går inte att klicka på.

<div class="dropdown"> <button class="btn btn-warning dropdown-toggle" type="button" id="dropdownmenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown Button </button> <div class="dropdown-menu" aria-labelledby="dropdownmenu"> <h5 class="dropdown-header" href="#">Dropdown Header</h5> <a class="dropdown-item" href="#">Dropdown One</a> <a class="dropdown-item" href="#">Dropdown Two</a> </div> </div>

Nedrullning med rubrik ger följande resultat:

Hur skapar jag Bootstrap 5 Dropdowns?

7 Storlek på rullgardinsmenyn

Gör rullgardinsmenyn stor eller liten med klasserna ".btn-lg" och ".btn-sm" som nedan:

<div class="btn-group"> <button class="btn btn-danger btn-lg dropdown-toggle" type="button" id="dropdownmenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown Button </button> <div class="dropdown-menu" aria-labelledby="dropdownmenu"> <a class="dropdown-item" href="#">Dropdown One</a> <a class="dropdown-item" href="#">Dropdown Two</a> <a class="dropdown-item" href="#">Dropdown Three</a> </div> </div> <div class="btn-group"> <button class="btn btn-danger btn-sm dropdown-toggle" type="button" id="dropdownmenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown Button </button> <div class="dropdown-menu" aria-labelledby="dropdownmenu"> <a class="dropdown-item" href="#">Dropdown One</a> <a class="dropdown-item" href="#">Dropdown Two</a> <a class="dropdown-item" href="#">Dropdown Three</a> </div> </div>

Observera att vi har använt två knappgrupper för att visa två knappar inline, om du bara vill visa en knapp (säg stor) kan du använda standardklassen ".downdown".

De stora och små rullgardinsmenyerna visas nedan:

Hur skapar jag Bootstrap 5 Dropdowns?

8 Knapp för delad nedrullning

Från och med nu har vi sett olika typer av rullgardinsmeny som en enda knapp. Delningsknappen har två knappar en del av den, därför bör du använda knappgrupp för att visa dem inline utan mellanrum. Delning av två knappar är möjlig med hjälp av css-klasserna ".dropdown-toggle-split".

<div class="btn-group"> <button type="button" class="btn btn-secondary">Split Button</button> <button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <span class="sr-only">Dropdown Button Group</span> </button> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Dropdown One</a> <a class="dropdown-item" href="#">Dropdown Two</a> <a class="dropdown-item" href="#">Dropdown Three</a> </div> </div>

Neddelningsknappen kommer att se ut nedan:

Hur skapar jag Bootstrap 5 Dropdowns?

9 Knapp för delning

Detta är helt enkelt en dropup -stil istället för standard rullgardinsmenyn med ".dropup" -klassen.

<div class="btn-group dropup"> <button type="button" class="btn btn-warning">Split Dropup Button</button> <button type="button" class="btn btn-info dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <span class="sr-only">Dropdown Button Group</span> </button> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Dropdown One</a> <a class="dropdown-item" href="#">Dropdown Two</a> <a class="dropdown-item" href="#">Dropdown Three</a> </div> </div>

Drop -up -knappen kommer att se ut nedan:

Hur skapar jag Bootstrap 5 Dropdowns?

10 viktiga punkter att komma ihåg

Rullgardinsmenyn visas automatiskt nedåt eller uppåt beroende på webbläsarens visningsport. Till exempel, när du är i slutet av sidan visas rullgardinsmenyalternativen ovan som rullgardinsmenyn.

Knappelementet i rullgardinsmenyn stöder alla bakgrundsfärgsklasser som liknar standardknappkomponenter. Bootstrap 3 stöder endast länkar för menyalternativ. Men i Bootstrap 4 och 5 kan varje menyalternativ vara en länk eller ett knappelement.


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