Site-uri și aplicații pentru WWW

Aplicatii (6)


Bootstrap 4

Generalități

Bootstrap este un framework pentru componenta de front-end a site-urilor și aplicațiilor web.

Realizatorii acestuia s-au concentrat pe realizarea unei colecții extinse de componente prestilizate (zeci!) și pe afișarea corectă a acestora în toate browser-ele moderne și pe ecrane având diverse rezoluții. O atenție aparte a fost acordată afișării pe ecranele telefoanelor mobile, caracteristica principală a acestui framework fiind "mobile-first".

Dezvoltat inițial de Twitter, Bootstrap este acum folosit pe scară largă pentru diverse componente de front-end (site-uri, aplicații web, template-uri pentru WordPress ș.a.).

Bootstrap este gratuit, versatil și intuitiv. Utilizarea lui presupune doar cunoștințe de bază de HTML și CSS.

Cea mai bună metodă de a face cunoștință cu acest framework constă în realizarea unei pagini web. În cele ce urmează veți realiza site-ul din imagine:

  1. Setări inițiale și crearea unui fișier HTML de pornire

Pentru a începe crearea paginii web, se va creea într-un editor adecvat (Sublime Text, Microsoft Studio Code, Notepad++, Atom, etc.) un fișier conținând structura de bază a unei pagini Web. Ea a fost descărcată de la adresa https://getbootstrap.com/docs/4.6/getting-started/introduction/.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">

    <title>Demo Bootstrap</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js" integrity="sha384-+YQ4JLhjyBLPDQt//I+STsc9iw4uQqACwlvpslubQzn4u2UU2UFM80nGisd026JF" crossorigin="anonymous"></script>
  </body>
</html>

Fișierul realizat va fi salvat cu numele index.html în directorul în care păstrați aplicațiile realizate.

În codul fișierului realizat se observă că sunt inserate 4 fișiere găzduite pe site-uri CDN (prescurtare de la eng. Content Development Network):

  • bootstrap.min.css, în <head> și
  • jquery-3.5.1.slim.min.js, popper.min.js și bootstrap.min.js înainte de </body>

Evident, dacă se accesează site-ul framework-ului, ansamblul de fișiere necesare funcționării Bootstrap-ului poate fi descărcat sub forma unei arhive. Apoi acestea pot fi extrase și inserate în pagină.

În acest caz pagina ar putea avea următorul conținut:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="css/bootstrap.min.css">

    <title>Demo Bootstrap</title>
  </head>
  <body>
    <h1>Hello, world!</h1>
    <script type="text/javascript" src="js/jquery-3.5.1.slim.min.js"></script>
    <script type="text/javascript" src="js/popper.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
  </body>
</html>





  1. Crearea barei de navigare

Prima modificare adusă fișierului creat va fi adăugarea unei bare de navigare. În Bootstrap o astfel de componentă se realizează folosind un element HTML5 <nav> și câteva clase predefinite. O prezentare extinsă a acestei componente poate fi accesată aici.

Bara creată va fi implicit responsive și, pe ecrane mici, ansamblul de meniuri derulante va fi ascuns iar pe bară va fi afișat un buton cu un simbol sugestiv (faimosul "hamburger").

În pagina web începută, elementul <nav> va fi primul element din secțiunea <body>.

  <nav class="navbar navbar-expand-md">
      <div class="container">
        <a class="navbar-brand" href="#">Logo</a>
        <button class="navbar-toggler navbar-dark" type="button" data-toggle="collapse" data-target="#main-navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="main-navigation">
          <ul class="navbar-nav">
            <li class="nav-item">
              <a class="nav-link" href="#">Home</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">About</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Contact</a>
            </li>
          </ul>
        </div>
      </div>
    </nav>

Observație: Bara de navigare este componenta cea mai complexă dintr-o pagină.

Explicații:

Clasa .container utilizată în elementul <div> din <nav> limitează lățimea blocului la o dimensiune dependentă de mărimea ferestrei browser-ului în care se afișează pagina.

Dimensiunile ferestrei în care este afișată pagina și care determină modificarea lățimii de afișare impuse prin utilizarea clasei .container sunt clasificate astfel:

Extra smallSmallMediumLargeExtra large
Prescurtare.col-.col-sm-.col-md-.col-lg-.col-xl-
Dimensiuni<576px>576px>720px>960px>1140

.navbar-expand-md — indică dimensiunea ecranului sub care meniurile derulante de pe elementul <nav> vor fi ascunse. Clasa .navbar-expand-md indică faptul că transformarea va avea loc pentru ecrame sub 768px, adică mai mici decât ecranele de dimensiune medie (sufix -md, eng. medium).

.navbar-brand — Clasă folosită la stilizarea logo-ului firmei, prezent de regulă pe barele de navigare.

.navbar-toggler — Clasă folosită pentru butonul care realizează afișarea meniului pe ecrane mici. Proprietățile data-toggle="collapse" și data-target="#main-navigation" sunt legate de blocul <div class="collapse ..." id="main-navigation" și servesc la crearea mecanismului de afișare alternativă (desfășurată sau sub formă de buton) a meniurilor derulante din <nav>.

.navbar-toggler-icon — Crează simbolul care va fi selectat cu mouse-ul în cazul ecranelor mici, pentru a determina afișarea verticală a meniurilor derulante de pe bară.

.navbar-nav — Clasa pentru stilizarea listei neordonate (<ul>) utilizate la crearea șirului de elemente ale meniului. Pentru stilizarea elementelor <li> se folosesc clasele nav-item și nav-link.

Aceste precizări arată în esență principiile Bootstrap-ului. Astfel, pornind de la regulile comune de stilizare a elementelor dintr-o pagină web, autorii framework-ului au definit un ansamblu coerent de clase care permit o afișare cel puțin acceptabilă a acestora. Desigur, orice dezvoltator poate interveni cu modifificări care pot schimba modul de afișare predefinit.

Afișarea unor componente complexe, ca <nav> - ul de exemplu, necesită cunoștințe limitate de HTML și CSS iar dacă trebuie și un cod JavaScript, acesta este deja prezent în fișierul bootstrap.min.js inserat.

Reazultat:

Destul de modest rezultatul, dar cu încă un mic efort de stilizare, se poate ameliora substanțial.






Barele de navigare mai au niște clase CSS importante (bg-dark sau navbar-dark) dar în exemplul considerat acestea vor fi înlocuite cu stiluri noi, adaptate modelului de pagină dorit.


Stiluri CSS suplimentare

Pentru a adăuga stilurile suplimentare necesare, se va crea un fișier denumit index.css. Acesta va fi salvat într-un subdirector denumit css și inserat în fișierul index.html scriind în <head>, după linia care inserează bootstrap.min.css, linia:

   <link rel="stylesheet" href="css/index.css"> 

Conținutul fișierului index.css va fi:

body {
  padding: 0;
  margin: 0;
  background: #f2f6e9;
}

/*--- bara de navigare ---*/
.navbar {
  background:#6ab446;
}

.nav-link,
.navbar-brand {
  color: #fff;
  cursor: pointer;
}

.nav-link {
  margin-right: 1em !important;
}

.nav-link:hover {
  color: #000;
}

.navbar-collapse {
  justify-content: flex-end;
}

Rezultat:






  1. Crearea primei secțiuni din pagină, constând dintr-un element <header> având o imagine pe fundal

După adăugarea barei de navigare va fi adăugat paginii un element HTML <header>:

  <header class="page-header header container-fluid">
  </header>

Clasa Bootstrap container-fluid impune ca lățime a paginii să coincidă cu mărimea ferestrei pe care aceasta este afișată.

În continuare va fi inserată în <header> o imagine de mari dimesiuni, ca fundal. În index.css va fi adăugată clasa .header definită astfel:

  .header {
    background-image: url('../imagini/background.jpg');
    background-size: cover;
    background-position: center;
    position: relative;
  }

De asemenea va fi adăugat fișierului HTML un mic script JavaScript care realizează extinderea automată, în direcție verticală, a elementului <header>:

  $(document).ready(function(){
    $('.header').height($(window).height());
  })

Scriptul va fi salvat în fișierul index.js, în subdirectorul js. Inserarea lui se va realiza plasând înainte de </body> linia:

   <script src="js/index.js"></script> 

Rezultat:

În continuare, în elementul <header> va fi inserat un conținut constând dintr-un titlu, un text și un buton.






Pentru a permite scrierea pe elementul <header>, va fi mai întâi inserat în acesta un element <div> stilizat folosind clasa .overlay, definită astfel:

  .overlay {
    min-height: 100%;
    min-width: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background: rgba(0, 0, 0, 0.5);  /* negru + transparenta */
  }

Elementul <header> va fi completat astfel:

  <header class="page-header header container-fluid">
     <div class="overlay d-flex justify-content-center align-items-center"></div>
  </header>

Pentru proprietatea CSS display: flex;, necesară aici pentru a centra elementul <div> care va fi inserat în continuare și care va conține informațiile afișate în header, în Bootstrap se folosește clasa d-flex (detalii privind afișarea folosind flex aici).

Rezultat:

În centrul blocul <div> din <header> va fi adăugat apoi un <div> conținând un titlu, un paragraf și un buton:

  <div class="descriere text-center">
     <h1>Welcome to the Landing Page!</h1>
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque interdum quam odio, quis placerat ante luctus eu. Sed aliquet dolor id sapien rutrum, id vulputate quam iaculis. Suspendisse consectetur mi id libero fringilla, in pharetra sem ullamcorper.</p>
</div>

Clasa .descriere folosită la stilizare va fi definită astfel:

.descriere {
  width: 60%;
}

.descriere h1 {
  color: #6ab446;
}

.descriere p {
  color: #fff;
  font-size: 1.3rem;
  line-height: 1.5;
}

Observație: Pentru a centra textul din elementul <div> adăugat s-a folosit clasa predefintă text-center. Clase similare cu text-center, necesare impunerii altor variante de cadrare a textului, pot fi accesate aici.

Orice "landing page", ca și pagina creată până în acest moment, conține și un buton (denumit buton CTA, Call To Action). În blocul din <header> va fi adăugat un element <a> stilizat ca buton:

   <a href="#more" class="btn btn-outline-secondary btn-lg">Tell Me More!</a> 

De asemenea, în index.css vor trebui adăugate stilurile:

.descriere a {
  border:1px solid #6ab446;
  background:#6ab446;
  border-radius: 0;
  color:#fff;
}
.descriere a:hover {
  border:1px solid #fff;
  background:#fff;
  color:#000;
}

Rezultat:






  1. Crearea unei noi secțiuni având trei coloane

Practic partea de "landing page" s-a încheiat și trebuie adăugată în continuare următoarea secțiune a paginii. Aceasta va conține trei blocuri, plasate pe trei coloane.

Pentru a defini cele trei coloane se va folosi grila de poziționare specifică Bootstrap-ului având 12 coloane egale. Informații detaliate privind utilizarea acesteia pot fi accesate aici.

Pentru a declanșa poziționarea blocurilor folosind grila integrată, secțiunii care folosește această facilitate trebuie să i se adauge clasa row. De asemenea, pentru separarea noii secțiuni de zona de "landing page" se va folosi clasa mt-5. Denumirea clasei este o prescurtare de la margin-top iar 5 este un cod care indică mărimea spațiului. Detalii privind clasele predefinite utilizate pentru spațiere pot fi accesate aici.

   <a name="more"></a><div class="container">
    <div class="row mt-5">
      <div class="col-md-4">
        <div class="card h-100">
          <img class="card-img-top" src="imagini/imaginea1.jpg" alt="Card image cap">
          <div class="card-body">
            <h5 class="card-title">Card title</h5>
            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
          </div>
        </div>
      </div>

      <div class="col-md-4">
        <div class="card h-100">
          <img class="card-img-top" src="imagini/imaginea2.jpg" alt="Card image cap">
          <div class="card-body">
            <h5 class="card-title">Card title</h5>
            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
          </div>
        </div>
      </div>

      <div class="col-md-4">
        <!-- bloc vid, deocamdata -->
      </div>
    </div>
  </div>

Pentru a insera conținutul fiecărei coloane s-au utilizat elemente prestilizate (elemente <div> având class="card").

Pentru a impune modul de utilizare a coloanelor grilei, fiecare card este dimensionat folosind clasa col-md-4. Sufixul -md specifică o clasă care va fi folosită dacă pagina va fi afișată pe un ecran având lățimea > 720px. Clasa col-md-4 indică folosirea a 4 coloane adiacente pentru blocul astfel stilizat. Deci blocurile din secvența descrisă vor utiliza 4 coloane pe ecrane medii sau mari și 12 coloane (întreaga lățime disponibilă) pe ecrane mici. Pentru ecrane mai mari, deoarece nu s-a specificat nimic, se vor folosi tot 4 coloane, generalizându-se specificațiile date prin utilizarea clasei .col-md-*. La fel, pentru ecrane mai mici decât cele specificate de clasa .col-md-* se vor utiliza 12 coloane.

Când trebuie afișate mai multe carduri pe o linie, o cerință comună este egalizarea înălțimilor acestora. Pentru aceasta se va utiliza clasa "h-100", care impune extinderea dimensiunii verticale a unui bloc până la 100% din spațiul disponibil (detalii aici). Deci pentru stilizarea blocurilor care definesc cardurile se va scrie: <div class="card h-100">.

Rezultat:






  1. Adăugarea unui formular de contact

În spațiul lăsat liber va fi adăugat un formular de contact.

În Bootstrap crearea acestui formular este foarte simplă:

      <div class="col-md-4">
        <div class="card h-100">
          <div class="card-body">
            <h5 class="card-title">Get in Touch!</h5>
            <form>
              <div class="form-group">
                <input type="text" class="form-control" placeholder="Name" name="nume">
              </div>
              <div class="form-group">
                <input type="email" class="form-control" placeholder="Email Address" name="email">
              </div>
              <div class="form-group">
                <textarea class="form-control" rows="4" placeholder="Your opinion..."></textarea>
              </div>
              <div class="text-center">
                <button type="submit" class="btn btn-secondary">Send</button>
              </div>
            </form>
          </div> 
        </div>
      </div>

Specific definirii în Bootstrap a unui câmp dintr-un formular este inserarea elementelor destinate introducerii unor date (<input>, <textarea>, <select>, etc.) în elemente <div> având class="form-group". Elementele destinate introducerii datelor vor avea class="form-control".

Rezultat:






  1. Adăugarea unui footer având două coloane

Ultima parte a paginii va fi o secțiune având două coloane.

  <footer class="page-footer">
    <div class="container">
      <div class="row">
        <div class="col-md-8">
          <h6 class="text-uppercase font-weight-bold">Additional Information</h6>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque interdum quam odio, quis placerat ante luctus eu. Sed aliquet dolor id sapien rutrum, id vulputate quam iaculis.</p>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque interdum quam odio, quis placerat ante luctus eu. Sed aliquet dolor id sapien rutrum, id vulputate quam iaculis.</p>
        </div>
        <div class="col-md-4">
          <h6 class="text-uppercase font-weight-bold">Contact</h6>
          <p>DECIDFR, str. Dorobanților, 71-73, Cluj-Napoca
            <br/>decidfr@staff.utcluj.ro
            <br/> (+40) 256 200 217
          </div>
        </div>
        <div class="footer-copyright text-center">© 2021 Copyright: decidfr.utcluj.ro</div>
      </div>
    </footer>

Pe lângă clasele obișnuite, care realizează dispunerea informațiilor pe coloane (col-md-*), în această secțiune au fost utilizate și alte clase Bootstrap: .text-uppercase .font-weight-bold și .footer-copyright. De asemenea s-au adăugat în index.css două clase suplimentare.

.page-footer {
  background-color: #222;
  color: #CCC;
  padding: 40px 10px 30px 10px;
}

.footer-copyright {
  color: #999;
  padding: 20px 0;
}

Rezultat:






Pagina realizată, în forma finală, a fost inclusă în arhiva bootstrap.zip.