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

Kuinka luoda Bootstrap 5 -pudotusvalikot?

3

Olemme jo koskettaneet pudotusvalikkoa edellisessä Bootstrap -painikkeita koskevassa opetusohjelmassa. Pudotusvalikko on vain painiketta (tai linkkiä) ja näytä luettelo, kun napsautat sitä. Tässä opetusohjelmassa tarkastellaan erilaisia ​​Bootstrap 5 -pudotusvalikoita ja esimerkkejä. Muista sisällyttää bootstrap.bundled.min.js, jotta pudotusvalikko toimii. Voit viitata aloitusmalliin tästä.

Bootstrap 5 -pudotusvalikon opetusohjelma

  1. Pudotusvalikkojen perusominaisuudet
  2. Luodaan pudotusvalikon oletuspainike
  3. Lisätään jakaja
  4. Poista linkki käytöstä avattavasta valikosta
  5. Pudotusvalikko oikealla valikkokohdistuksella
  6. Avattava painike otsikon kanssa
  7. Avattavan painikkeen koko
  8. Jaa pudotusvalikko
  9. Jaa pudotuspainike
  10. Muistettavia kohtia

1 Bootstrapin perusteet 5 pudotusvalikkoa

  • Pudotusvalikot ovat vaihdettavissa oleva luettelo linkeistä tai painikeelementeistä, jotka näkyvät ylös- tai alaspäin.
  • Tätä käytetään yleensä pudotus- tai pudotusvalikkokohteisiin ja sivupalkin navigointikohteisiin.
  • Se toimii Popper.js -komentosarjan perusteella.
  • Sinun tulee sisällyttää popper.min.js ja sitten bootstrap.min.js samaan järjestykseen. Käytä kaikkia tämän opetusohjelman esimerkkejä aloitusmallimme kanssa.
  • Avattavaan elementtiin ei ole oletusarvoisesti lisätty rooli- tai aria-määritteitä. Sinun on lisättävä ne manuaalisesti aina, kun niitä tarvitaan.
  • Avattavat kohteet voidaan sulkea joko napsauttamalla painiketta tai napsauttamalla ulkopuolella. Voit myös sulkea avattavat kohteet painamalla Esc -näppäintä.

2 Pudotusvalikon oletuspainikkeen luominen

Alla on koodi Bootstrap 5: n oletusvalikon luomiseksi:

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

Se tuottaa seuraavan tuloksen selaimessa:

Kuinka luoda Bootstrap 5 -pudotusvalikot?

  • Pohjimmiltaan sinun täytyy kääriä sisältö divin sisälle käyttämällä .dropdown -luokkaa. Tämä tunnistaa painikkeen avattavaksi painikkeeksi. Voit myös käyttää tagia painikkeen sijaan.
  • Painike (tai linkki) on sisällytettävä ".dropdown-toggle" -luokkaan. Tässä esimerkissä olemme luoneet "btn-Primary" -luokan luomaan painike ensisijaisella värillä. Voit käyttää mitä tahansa värityökaluluokkaa eri väripainikkeella.
  • Luo painikkeen jälkeen avattava valikko, jossa on kohteita.

3 Jakajien lisääminen alasvetovalikosta

Nyt tiedät, miten voit luoda avattavan peruspainikkeen. Lisätään joitakin koriste -esineitä, kuten valikon ja otsikon välinen jakaja.

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

Avattava valikko näyttää tältä:

Kuinka luoda Bootstrap 5 -pudotusvalikot?

4 Linkin poistaminen käytöstä pudotusvalikosta

Voit poistaa kohteen käytöstä avattavasta valikosta estääksesi napsautuksen:

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

Olemme käyttäneet info -painiketta ja poistaneet kolmannen linkin käytöstä. Kun siirrät hiiren käytöstä poistetun linkin päälle, pysäytyskohdistimen symboli näkyy, etkä voi napsauttaa sitä.

Kuinka luoda Bootstrap 5 -pudotusvalikot?

5 Pudotusvalikko oikealla valikkokohdistuksella

Kuten olet huomannut yllä olevissa esimerkeissä, valikko näytetään oletusarvoisesti vasemmalla suunnalla. Voit muuttaa sen oikeaan kohdistukseen lisäämällä luokan .dropdown-menu-right ja .dropdown-menu-luokan. Muista, että tämä siirtää koko valikkolaatikon säiliön oikealle puolelle. Sinun tulisi käyttää muita CSS -tyylejä valikon sijoittamiseen avattavan painikkeen elementin alle oikein.

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

Oikealle kohdistetut valikkokohdat näyttävät tältä:

Kuinka luoda Bootstrap 5 -pudotusvalikot?

6 Pudotuspainike otsikolla

Voit myös lisätä otsikkotekstin valikkokohteisiin käyttämällä ".dropdown-header" -luokkaa millä tahansa H1-H6-tunnisteella. Yleensä otsikko lisätään valikon yläosaan eikä sitä voi napsauttaa.

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

Ylätunnisteella pudottaminen tuottaa seuraavan tuloksen:

Kuinka luoda Bootstrap 5 -pudotusvalikot?

7 Avattavan painikkeen koko

Tee pudotusvalikosta iso tai pieni käyttämällä .btn-lg- ja .btn-sm-luokkia, kuten alla:

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

Huomaa, että olemme käyttäneet kahta painikeryhmää kahden painikkeen näyttämiseen rivissä, jos haluat näyttää vain yhden painikkeen (esimerkiksi suuren), voit käyttää oletusluokkaa ".dropdown".

Alla on suuret ja pienet pudotuspainikkeet:

Kuinka luoda Bootstrap 5 -pudotusvalikot?

8 Jaettu pudotuspainike

Tähän mennessä olemme nähneet erilaisia ​​pudotusvalintoja yhdellä painikkeella. Jaetun painikkeen osassa on kaksi painiketta, joten sinun tulee käyttää painikeryhmää näyttääksesi ne riviin ilman väliä. Kahden painikkeen jakaminen on mahdollista css-luokan ".dropdown-toggle-split" avulla.

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

Jaa pudotusvalikko näyttää tältä:

Kuinka luoda Bootstrap 5 -pudotusvalikot?

9 Jaettu pudotuspainike

Tämä on yksinkertaisesti pudotustyyli oletusvalikon sijaan .dropup -luokan avulla.

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

Pudotusjako -painike näyttää tältä:

Kuinka luoda Bootstrap 5 -pudotusvalikot?

10 tärkeää muistettavaa asiaa

Avattava valikko näytetään automaattisesti alas tai ylös selaimen näkymäportista riippuen. Esimerkiksi kun olet sivun lopussa, avattavat valikkokohdat näytetään yllä kuten pudotusvalikko.

Avattavan valikon painike -elementti tukee kaikkia taustavärityökaluluokkia, jotka ovat samanlaisia ​​kuin oletuspainikeosa. Bootstrap 3 tukee vain valikkokohtien linkkejä. Mutta Bootstrap 4: ssä ja 5: ssä jokainen valikkokohta voi olla linkki tai painike.


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