bootstrap
Tartalomjegyzék
alapok
-
invalid-feedback
Ez az osztály szépen megformázza a hibaüzeneteket, de a megjelenése más beállításoktól is függ.
Ezért állítsuk be css-ben, hogy mindig megjelenjen:
col
- col elemen belül tartalom igazítása vízszintesen:
icon
svg mode
- Ez az ajánlott módszer, mert csak azokat az ikonokat építjük be a programba melyeket felhasználunk.
- A bootstrap ikonok <svg> elemként állnak rendelkezésre. A html oldalon csak az svg-elemre van szükség, mely leírja az ikon formáját.
- Egy svg-elem mérete a width és a height jellemzőivel állítható be:
-
A program csak egyszer tartalmazza egy ikon svg-leíróját!
Az svg-leírón belüli width és height jellemző beállítása thymeleaf esetén úgy történhet, hogy az svg-elemet include-oljuk,
és include paraméterben adjuk át az ikon méretét. -
Ha az svg-elem be van ágyazva egy külső elembe, a külső elem ne tartalmazzon font méretezést.
Igaz hogy így az svg-elem átméretezhető, azonban alatta/felette eltüntethetetlen hézagok keletkeznek. - A betűszín beállítása hatással van az ikon színére is.
font mode
- Ennél a módszernél az ikonok font-ként állnak elő. Erre hivatkozni kell a html oldal <head> részében, mely itt van leírva:
- A html <head> kiegészítés miatt sajnos minden ikon be van húzva az oldalra, nemcsak azok melyeket használunk.
- A html oldalon így lehet egy ikonra hivatkozni, mely méretezhető, és szinezhető:
modal
- Modal ablak megjelenítése, és a modal-body feltöltése:
progress
-
Egy jól kinéző progress, mely így jelenik meg 7%, és 68%-os beállítás esetén:
- Fekete háttér: bg-dark
- A default-nál nagyobb magasság: height: 24px
- Csíkos zöld haladás jelző: progress-bar-striped bg-success
- A szöveg a haladás jelzőn kívül is látszódik: overflow-visible
- Fehér szöveg: text-white
- Normál szövegméret: fs-6
- A szöveg nem ér a progress széléhez: px-2
row
- row elemen belül col elemek igazítása függőlegesen:
table
-
Cella tartalom igazítása függőlegesen:
<tr> helyett használható a <th> és <td> tag is. -
Cella tartalom igazítása vízszintesen:
<td> helyett használható a <th> tag is.