Nupud
Boostrap 5 pakub automaatselt kujundatud nuppe:
<button type="button" class="btn">Esialgne</button> <button type="button" class="btn btn-primary">Esmane</button> <button type="button" class="btn btn-secondary">Teisene</button> <button type="button" class="btn btn-success">Edukas</button> <button type="button" class="btn btn-info">Info</button> <button type="button" class="btn btn-warning">Hoiatus</button> <button type="button" class="btn btn-danger">Oht</button> <button type="button" class="btn btn-dark">Tume</button> <button type="button" class="btn btn-light">Hele</button>
Vaikimisi klass on btn. Nuppudele on lisatud järgmised klassid:
- btn-primary – tekitab sinise taustavärvi
- btn-secondary – tekitab halli taustavärvi
- btn-success – tekitab rohelise taustavärvi
- btn-info – tekitab helesinise taustavärvi, nupu tekst on tume
- btn-warning – tekitab kollase taustavärvi, nupu tekst on tume
- btn-danger – tekitab punase taustavärvi
- btn-dark – tekitab musta taustavärvi
- btn-light – tekitab heleda taustavärviga nupu, mille tekst on tume
Neid klasse saab lisada <a>, <button> ja <input> elementidele.
Lisades kõigile eelnimetatud klassidele outline lühendi btn järele näiteks selliselt btn-outline-primary, tekivad nupud:
- mille tekst ja raam on vastavat värvi
- millest hiirega üle liikudes muutub nupu taustavärv vastavalt etteantule
Lisaks on võimalik määratleda nupu suurust, lisades klassi btn-lg, kui on soov suuremat nuppu saada, või btn-sm, kui on soov väiksemat nuppu saada.