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

Kuinka luoda painikkeita Bootstrap 5: een?

13

Painikkeet ovat yksi minkä tahansa käyttöliittymäkehyksen peruselementteistä. Toisessa artikkelissamme olemme nähneet monia esimerkkejä Bootstrap 3 -painikkeista. Bootstrap 4: ssä on pieniä muutoksia painikeluokkiin käyttökokemuksen parantamiseksi. Esimerkiksi oletuspainikkeiden luokka ".btn-dafault" muutetaan toissijaiseksi painikkeeksi, jonka luokka on ".btn-Secondary", ja erittäin pieni painikeluokka ".btn-xs" poistetaan. Ei ole paljon muutoksia Bootstrap 5: n painikkeisiin. Tässä opetusohjelmassa tutustutaan tarkemmin erityyppisten painikkeiden luomiseen Bootstrap 5: llä.

Bootstrap -painikkeiden perusteet

Ennen kuin luot painikkeita, muista seuraavat kohdat:

  • Jotta voit tunnistaa minkä tahansa elementin painikkeeksi, sinun on sisällytettävä vähintään ".btn" -luokka.
  • Lisäluokat määrittävät vain painikkeen tyylin ".btn" -luokan lisäksi.
  • Luokka ".btn" voidaan lisätä HTML -elementteihin, kuten
  • Tarvitset Bootstrap -komentosarjatiedostoja vain Bootstrap -laajennukset -osioon, jotta voit luoda vaihtotehosteen, muut painikkeet toimivat yksinkertaisesti CSS: n kanssa. Katso lisätietoja Bootstrap 5 -aloitusmallista.

Perus -oletuspainikkeet

Voit luoda eri värejä painikkeita käyttämällä .btn -luokan taustatyökaluluokkia.

  • Ensisijainen – tämä on ensisijainen tai pääpainike, jota käytetään sinisen värin kanssa.
  • Toissijainen – valkoinen väripainike on toissijainen tai vaihtoehtoinen painike.
  • Menestys – vihreä painike, jota käytetään positiivisiin toimiin.
  • Info – Vaaleansininen painike, jota käytetään tietojen näyttämiseen.
  • Varoitus – keltainen painike, jota käytetään varoituksiin.
  • Vaara – Punainen painike, jota käytetään virhetoimintoihin.
  • Valo – Painike vaaleanharmaalla värillä.
  • Tumma – Painike tummalla taustalla.
  • Linkki – Taustavärien lisäksi voit myös luoda linkkipainikkeen ilman taustaa.

Ensisijaisen painikekoodin pitäisi näyttää tältä

<!DOCTYPE html> <html lang="en"> <head> <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 --> <button type="button" class="btn btn-primary">Primary</button> <!-- End of Button --> <!-- 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>

Kuten selitetty, ".btn" -luokka tunnistaa elementin painikkeeksi ja ".btn-ensisijainen" -luokkaa käytetään painikkeen luomiseen ensisijaisella (sininen) värillä. Samoin muut painikekoodit on annettu alla:

<button type="button" class="btn btn-secondary">Secondary</button> <button type="button" class="btn btn-success">Success</button> <button type="button" class="btn btn-info">Info</button> <button type="button" class="btn btn-warning">Warning</button> <button type="button" class="btn btn-danger">Danger</button> <button type="button" class="btn btn-light">Light Button</button> <button type="button" class="btn btn-dark">Dark Button</button> <button type="button" class="btn btn-link">Link</button>

Viimeinen kohde on linkkipainike, joka näyttää tekstilinkiltä näytöllä, mutta toimii painikkeena, kun sitä napsautetaan tai hiiren päällä. Oletuspainikkeet näyttävät alla selaimessa:

Kuinka luoda painikkeita Bootstrap 5: een?

Napitunnisteet – painikeluokkien käyttäminen eri tunnisteilla

Painikkeiden luokkia tuetaan

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