Kodulehe loomine, 13. kord

08.12.2021
 |  Kommentaare pole

Bootstrap 5

Kodulehe iseseisev kujundamine CSSi abil on muidugi tore, aga kaasaegsetes lahendusest kasutatakse selle teeke (failide ja koodide kogumikke). Üheks neist on Bootstrap, mille versiooni 5 toetavad kõik kaasaegsemad veebilehitsejad. Bootstrap’i peamiseks eeliseks on asjaolu, et kogu kujundus lähtub sellest, et kodulehte vaadatakse nutiseadmetest. Ehk siis, kogu kujundus kohandub sõltuvalt sellest, missuguselt ekraanilt kasutaja lehte vaatab.

Bootstrap 5 on võimalik alla laadida siit, kui aga on soov kasutada avalikke ressursse, siis tuleb HTML lehe päisesse, märgendite <head> ja </head> vahele lisada järgmised osad:

1. info selle kohta, et leht kohandub vastavalt ekraanisuurusele:

<meta name="viewport" content="width=device-width, initial-scale=1">

2. lingid Bootstrap’i CSS failidele ning JavaScript’i koodile:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script>

Selle tulemusena näeb lehe päis välja seesugune:

<head>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Raleway:ital,wght@1,600&display=swap" rel="stylesheet">
  <title>Kontakt</title>
  <link rel="stylesheet" href="style.css">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script>
</head>

Bootstrap 5 on kasutusel kahte liiki konteinerid:

1. fikseeritud laiusega konteiner – class=”container“, mille abil on võimalik ekraanisuurusega kohanduvat kujundust luua:

<div class="container">
</div>

2. kogu ekraanisuurusega konteiner – class=”container-fluid“, mis kõikidel ekraanisuurustel katab ekraani servast serva:

<div class="container-fluid">
</div>

Karusselli loomine Bootstrap 5 abil

Väga populaarne on kasutada vahelduvaid pilte, niinimetatud karusselli kodulehe mingis osas. Bootstrap 5 muudab sellise asja tegemise väga lihtsaks. Esmalt leiame endale 3 pilt, näiteks lind1.jpg, lind2.jpg ja lind3.jpg.

1. alustada tuleb üldisest konteinerist:

<div id="naidis" class="carousel slide" data-bs-ride="carousel">

</div>

2. seejärel lisada nupud soovide kohaselt karusselli erinevate piltide vahel liikumiseks:

 <div class="carousel-indicators">
   <button type="button" data-bs-target="#naidis" data-bs-slide-to="0" class="active"></button>
   <button type="button" data-bs-target="#naidis" data-bs-slide-to="1"></button>
   <button type="button" data-bs-target="#naidis" data-bs-slide-to="2"></button>
 </div>

3. järgmisena luua sisu karusselli jaoks:

<div class="carousel-inner">
  <div class="carousel-item active">
    <img src="lind1.jpg" alt="Tuuletallaja" class="d-block">
  </div>
  <div class="carousel-item">
    <img src="lind2.jpg" alt="Kühmnokk-luik" class="d-block">
  </div>
  <div class="carousel-item">
    <img src="lind3.jpg" alt="Merikotkas" class="d-block">
  </div>
</div>

4. lisada ka edasi ja tagasi liikumise nupud:

<button class="carousel-control-prev" type="button" data-bs-target="#naidis" data-bs-slide="prev">
  <span class="carousel-control-prev-icon"></span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#naidis" data-bs-slide="next">
  <span class="carousel-control-next-icon"></span>
</button>

Ja kogu kood kokku on seesugune:

<div id="naidis" class="carousel slide" data-bs-ride="carousel"> 
 <div class="carousel-indicators">
   <button type="button" data-bs-target="#naidis" data-bs-slide-to="0" class="active"></button>
   <button type="button" data-bs-target="#naidis" data-bs-slide-to="1"></button>
   <button type="button" data-bs-target="#naidis" data-bs-slide-to="2"></button>
 </div>
 <div class="carousel-inner">
   <div class="carousel-item active">
     <img src="lind1.jpg" alt="Tuuletallaja" class="d-block">
   </div>
   <div class="carousel-item">
     <img src="lind2.jpg" alt="Kühmnokk-luik" class="d-block">
   </div>
   <div class="carousel-item">
     <img src="lind3.jpg" alt="Merikotkas" class="d-block">
   </div>
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#naidis" data-bs-slide="prev">
    <span class="carousel-control-prev-icon"></span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#naidis" data-bs-slide="next">
    <span class="carousel-control-next-icon"></span>
   </button>
</div>

Kui on soov lisada ka teksti piltide peale, siis saab seda teha niimoodi:

<div class="carousel-item active">
  <img src="lind1.jpg" alt="Tuuletallaja" class="d-block">
  <div class="carousel-caption">
    <h3>Tuuletallaja (Abruka, september 2021)</h3>
  </div>
</div>