Bootstrap 5, kaart (card)
Vaatleme Bootstrap 5 elementi kaart. See on kastikujuline element, millel on päis ja jalus ning millele on võimalik lisada pilti:
<div class="row"> <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12"> <div class="card"> <div class="card-header bg-success text-white text-center">Virmalised</div> <img class="card-img-top" src="pilt.jpg" alt="Virmalised"> <div class="card-body"> <h4 class="card-title">Suurupi, 26.09.2020</h4> <p class="card-text">Virmalised tekivad, kui Maa magnetvälja ergastavad päikesetuule osakesed.</p> <a href="https://virmalised.ee/virmaliste-ennustus/" class="card-link">Ennustus</a> </div> <div class="card-footer bg-white text-center">Elu on imeline!</div> </div> </div> </div>
Kaardi loomine siis toimus järgmiselt:
- esmalt siis tekitasin uue rea – class=”row”
- seejärel tekitasin kasti, kuhu sisse kaardi panin – class=”col-lg-3 col-md-4 col-sm-6 col-xs-12″ (NB! kasti laius kohandub vastavalt ekraani laiusele – kõige väiksematel ekraanidel on 12 ühikut (col-xs-12), ehk terve lehe laiune, nt sülearvuti ekraanil aga 3 ühikut (col-lg-3) lai, ehk lehele mahub veel 3 samasugust kasti, st kokku 4 kasti suurusega 3 ühikut)
- selle sisse siis omakord kaardi kasti – class=”card“
- lisasin kaardile ka päise – class=”card-header bg-success text-center text-white”, kus:
- card–header – kaardi päis
- bg–success – taustavärv on success toonile vastav
- text-center – paigutab tektsi keskele
- text-white – määrab tekstivärviks valge
- lisasin kaardile pildi – class=”card-img-top” (NB! Pilt on lisatud pärast päist, väljaspoole elementi, mille klass on card-body):
- kui on soov paigutada pilt teksti alla, siis saab kasutada klassi class=”card-img-bottom”
- kui on soov paigutada pilt teksti taha, siis:
- jääb pildi klass samaks
- sisuosale tuleb lisada klass class=”card-img-overlay”
- lisasin kaardi sisuosa – class=”card-body”, millel on elemendid:
- class=”card-title” – kaardi pealkiri
- class=”card-text” – kaardi sisu
- class=”card-link” – kaardi link
- lisasin kaardile jaluse – class=”card-footer bg-white text-center”
Tulemust on võimalik näha siit.