Kuinka luoda painikkeita Bootstrap 5: een?
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:
Napitunnisteet – painikeluokkien käyttäminen eri tunnisteilla
Painikkeiden luokkia tuetaan