Tutorial bootstrap

<< Inapoi
Inainte >>

Introducere

Bootstrap este o bibliotecă gratuită, open-source, pentru proiectarea de site-uri web şi aplicaţii web. Acesta conţine şabloane de design HTML si CSS pentru orice, de la meniuri de navigaţie, butoane, imagini, fonturi, formulare şi alte componente de interfaţă, precum şi extensii JavaScript.

Pentru folosirea tehnologiei bootstrap, aceasta se poate downloada gratis. Ea conţine mai multe fişiere .css şi .js. Practic, avem nevoie doar de fişierul: bootstrap.min.css şi bootstrap.min.js.
Apoi, in secţiunea <head> din pagina web, pentru folosirea acestora, vom scrie:


<link rel="stylesheet" href="bootstrap.min.css">
<script src="bootstrap.min.js"></script>


Adiţional, pentru a folosi toate facilitatile bootstrap, avem nevoie şi de:


<script src="jquery.min.js"></script>
<script src="popper.min.js"></script>


Şi nu in ultimul rând, folosirea fonturilor awesome, crează efecte vizuale deosebite:


<link rel="stylesheet" href="font-awesome.min.css">


Însă, recomandat este să nu folosim fişierele downloadate, ci să punem în secţiunea <head> din pagina web, link-uri directe către aceste fişiere de pe internet (pentru a beneficia de toate update-urile).


Head bootstrap

Site responsiv

Pentru ca site-ul nostru sa fie responsiv (adică paginile să fie afişate corect pentru orice rezoluţie a oricărui dispozitiv de vizualizare), în secţiunea <head> trebuie să punem instrucţiunea:


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


Să vorbim acum despre elementele bootstrap:


Containere bootstrap

Putem începe construirea unei pagini web apelând la un container care să găzduiască toate elementele din pagină. În bootstrap sunt definite 2 tipuri de containere:
Containere fixe (care sunt responsive), unde lăţimea paginii web rămâne constantă pentru un anumit dispozitiv (deşi va lua o altă valoare fixă pentru altă rezoluţie a ecranului):


<div class="container">
Elemente pagina web....
</div>


Containere fluid, unde lăţimea paginii web va ocupa toată lăţimea ecranului şi se va modifica la orice redimensionare a ferestrei browserului.


<div class="container-fluid">
Elemente pagina web....
</div>


Nu este obligatoriu să folosim containere pentru a găzdui elementele paginii. Ele sunt strict necesare dacă folosim grila paginii (grid).
Această grilă împarte lăţimea paginii in 12 coloane (de lăţimi diferite, pentru diferite rezoluţii). Astfel, pe fiecare linie, putem apela o oarecare coloană pentru a plasa un element. De exemplu:


Grila bootstrap

Bare de navigare

În bootstrap sunt definite clase de bare de navigare de diferite dimensiuni şi culori. Un exemplu de bară de navigare este:


Bare de navigare

Întâi adăugăm un logo text folosind clasa navbar-brand, astfel:


Bara navigare

Acum vom adăuga şi o imagine la logo, astfel:


Bara navigare

Acum vom adăuga butonul care foloseşte clasa navbar-toggler, care apare la rezoluţie mică (telefoane mobile) şi care va desfaşura meniul pe acestea. La rezoluţie mare, meniurile sunt dispuse în bara de navigare şi acest buton nu apare.
În figura următoare avem pagina vizualizată pe laptop, la rezoluţie mare:


Buton navigare

Iar în figura următoare avem pagina web pe un telefon mobil (apare butonul cu 3 linii din dreapta):


Buton navigare

Acum vom adăuga butonul de revenire acasa (Home). La fel, la vizualizarea pe laptop va apărea astfel:


Buton home

Iar la vizualizarea pe telefon mobil, fără butonul de meniu apăsat:


Buton home

Sau cu butonul de meniu apăsat:


Buton home

Acum vom crea un link simplu spre o altă pagină web. Vizualizarea pe laptop:


Link navbar

Şi vizualizarea pe telefon mobil, fără butonul de meniu apăsat:


Link navbar

Sau cu butonul de meniu apăsat:


Link navbar

Acum vom crea un meniu derulant (dropdown). Codul sursă este:


Navbar dropdown

Vizualizarea pe laptop fără meniul derulant apăsat:


Navbar dropdown

Vizualizarea pe laptop cu meniul derulant apăsat:


Navbar dropdown

Şi vizualizarea pe telefon mobil, fără meniul derulant apăsat:


Navbar dropdown

Şi vizualizarea pe telefon mobil, cu meniul derulant apăsat:


Navbar dropdown

Caracteristici text bootstrap

Câteva tipuri de text:


<p class="font-weight-bold">Tip text</p>
<p class="font-weight-normal">Tip text</p>
<p class="font-weight-light">Tip text</p>
<p class="font-italic">Tip text.</p>


Tip text

Tip text

Tip text

Tip text


În bootstrap, sunt definite câteva clase de text colorat, care se folosesc foarte uşor:


Text color

Marele avantaj la lucrul cu text (ca şi cu imagini sau alte elemente), este că un element din pagina web poate folosi în acelaşi timp mai multe clase.
De exemplu, dacă folosim heading-ul h3, acesta are o marime prestabilită. Dacă vrem sa-i dăm o culoare folosim spre exemplu clasa: text-primary (albastru). Daca vrem sa centram textul, folosim clasa :text-center.


Text cu clase

Important! Dacă totuşi clasele care sunt definite în fişierul: bootstrap.min.css nu ne satisfac, putem crea un fişier: style.css, în care să completăm caracteristicile unei clase, sau chiar sa le schimbăm (mărime, culoare), pentru ca acestea vor fi luate în considerare şi se vor suprascrie peste cele din bootstrap.


Unele clase de text se pot folosi şi pentru link-uri, astfel:


Link color

Putem folosi uşor şi clasele de fundal, astfel:


Back color

Butoane în bootstrap

Putem utiliza clasele de butoane din bootstrap:


Butoane bootstrap

Sau clasa de grup de butoane:


Grup butoane bootstrap

Folosirea icon-urilor font awesome

Există o multitudine de icon-uri font awesome, care se pot folosi individual, pot crea un link sau pot fi introduse pe un buton.
Se introduc folosind prefixul fa urmat de numele icon-ului. Spre exemplu, pentru icon-ul home, avem:


<i class="fa fa-home"></i>


Pentru diferite mărimi ale acestora, putem adăuga un stil astfel:


<i class="fa fa-home"></i>
<i class="fa fa-home" style="font-size:24px;"></i>
<i class="fa fa-home" style="font-size:36px;"></i>
<i class="fa fa-home" style="font-size:48px;color:red;">Text</i>


Text

Un exemplu de folosire a acestor icon-uri pe butoane:


Font awesome bootstrap

Folosirea contururilor în bootstrap

Există clase definite şi pentru culoarea contururilor. Acestea pot fi aplicate la imagini sau la text:


Contururi bootstrap

Lucrul cu imagini

În bootstrap sunt definite 3 clase de imagini: imagini cu colţuri rotunjite, imagini circulare şi thumbnail-uri.
La toate cele trei clase se poate adauga opţiunea: float-left sau float-right, pentru a poziţiona imaginea în stânga sau în dreapta paginii.


Imagini bootstrap

O imagine se poate centra pe orizontală folosind clasa: rounded mx-auto d-block, astfel:


Imagini centrate bootstrap

Acum, folosind câte puţin din aceste exemple, să creăm o primă pagină web:


<< Inapoi
Inainte >>