A Bootstrap 4 segítségével szabványos gombokat lehet létrehozni. A gombok kinézetét előre definiált osztályok határozzák meg,
Négy féle tag -et lehet gombokként kezelni.
<a href="#" class="btn btn-info" role="button">Link Button</a>
<button type="button" class="btn btn-info">Button</button>
<input type="button" class="btn btn-info" value="Input Button">
<input type="submit" class="btn btn-info" value="Submit Button">
Az osztályok jelentése:
Itt találhatók az eredeti példák: https://www.w3schools.com/bootstrap/bootstrap_ref_css_buttons.asp
| Class | Leírás | |
|---|---|---|
| .btn | Alap osztály, amiből bármilyen tag gomb lehet |
| .btn-default | Alapértelmezett / sztenderd gombokat kapunk | |
| .btn-primary | Elsődleges gombot jelöl ki | |
| .btn-success | Pozitív vagy sikeres eredményt jelöl | |
| .btn-info | Információt kapunk a gomb megnyomására | |
| .btn-warning | Figyelmeztető üzenetet kapunk a gomb megnyomására | |
| .btn-danger | Veszélyt jelző üzenetet kapunk a gomb megnyomására | |
| .btn-link | A gombot link formájára formáz | |
| .btn-lg | Nagy gomb | |
| .btn-sm | Kis gomb | |
| .btn-xs | Nagyon kis gombok létrehozása | |
| .btn-block | Blokk szintű gombsor létrehozása (A szülő elem teljes szélességét elfoglalja a gombsor) | |
| .active | Lenyomott állapotot ad a gomb | |
| .disabled | Letiltott állapotú gomb | |
| .navbar-btn | Függőlegesen igazított gombok egy navbarban. |
Button Group Classes
The classes below can be used to style any <a>, <button>, or <input> element:
| Class | Leírás | |
|---|---|---|
| .btn-group | Egy soros gombsort hoz létre |
| .btn-group-justified | A teljes képernyő szélességében megjelenő gombsor | |
| .btn-group-lg | Nagyobb gombokból álló gombsor | |
| .btn-group-sm | Kis gombokból álló gombsor létrehozása | |
| .btn-group-xs | Nagyon kis gombokból álló gombsor létrehozása | |
| .btn-group-vertical | A gombsor függőlegesen jelenik meg |