11 Elemente de Baza Bootstrap

Noțiuni introductive
În lecțiile anterioare am văzut cum CSS poate modifica aspectul unui
element HTML în așa fel încât să arate așa cum ți l-ai imaginat. Totuși,
acest proces necesită foarte mult timp și de obicei necesită sensibilitate
față de design sau ajutorul unui designer grafic. În capitolul următor vom
explora o altă soluție care va face ca site-ul tău să arate încântător, chiar
dacă nu știi nimic despre design.
Despre framework-urile CSS
Multe persoane proiectează și construiesc site-uri web peste tot în lume.
Majoritatea dintre ele se confruntă cu probleme similare cu ale tale: de
exemplu, și ele vor ca site-urile lor web să arate frumos atât pe platforme
mobile, cât și calculatoare.
Din fericire, există programatori și designeri grafici care deja au gasit o
cale de a rezolva aceste probleme cu CSS. Câțiva dintre ei încearcă să facă
aceste soluții reutilizabile, punându-le împreună si distribuindu-le într-un
mod accesibil. Aceste pachete se numesc librării sau framework-uri.

Despre Bootstrap
În următoarele lecții, vom discuta despre Bootstrap. Bootstrap este la
momentul actual cel mai popular framework CSS printre dezvoltatorii web.
De ce framework-urile precum Bootstrap sunt atât de importante?
Gândește-te la următorul scenariu simplu: dorești să incluzi un tabel pe
site-ul tău, care arată bine pe orice tip de ecran imaginabil. Dacă utilizezi
CSS simplu, trebuie să testezi pagina pe o groază de dispozitive și să fii
atent la o sumedenie de capcane. În schimb, când folosești Bootstrap,
este suficient să adaugi clasa table la tabelul tău și va funcționa.
+1 sfat: Majoritatea limbajelor de programare și a framework-urilor au
o documentație online grozvă, iar Bootstrap nu face excepție. Nu
trebuie să îți amintești exact tot ce vom discuta în următoarele sarcini.
Oricând te blochezi sau nu îți amintești ceva, trebuie doar să intri
pe getbootstrap.com și să te uiți peste resursele de acolo.
În această lecție, vom discuta despre secțiunile „CSS” și „Components”.
Sarcină
Mergi la pagina de destinație a proiectului Bootstrap și află care este versiunea curentă.
(Sfat: o vei găsi după litera „v”)
Adăugând framework-ul paginii
tale
Creează un nou bin în JSBin (în partea stângă sus a ecranului, butonul
„New bin”).
Lipește următorul segment de cod între tag-urile <body>:
<div class="jumbotron">
<div class="container">
<h1>Hello, world!</h1>
<p>Acesta este un șablon pentru un simplu site informațional
sau de marketing. El include un callout mare, care se numește
jumbotron, și trei piese de susținere a conținutului.
Folosește-l ca punct de început pentru a crea ceva mai
unic.</p>
<p><a class="btn btn-primary btn-lg" href="#"
role="button">Află mai multe »</a></p>
</div> 
</div> 
<div class="row">
<div class="col-md-4">
<h2>Rubrică</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce
dapibus, tellus ac cursus commodo, tortor mauris condimentum
nibh, ut fermentum massa justo sit amet risus. Etiam porta sem
malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-default" href="#" role="button">Vezi
detalii »</a></p>
</div>
<h2>Rubrică</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce
dapibus, tellus ac cursus commodo, tortor mauris condimentum
nibh, ut fermentum massa justo sit amet risus. Etiam porta sem
malesuada magna mollis euismod. Donec sed odio dui. </p>
detalii »</a></p>
</div>
<h2>Rubrică</h2>
<p>Donec sed odio dui. Cras justo odio, dapibus ac
facilisis in, egestas eget quam. Vestibulum id ligula porta
felis euismod semper. Fusce dapibus, tellus ac cursus commodo,
tortor mauris condimentum nibh, ut fermentum massa justo sit
amet risus.</p>
detalii »</a></p>
</div>
</div>
<hr>
<footer>
<p>© 2015 Company, Inc.</p>
</footer>
</div> 
Copy
Dă clic pe Add Library (Adaugă bibliotecă) din colțul din stânga sus și
alege Bootstrap latest (Cea mai recentă versiune Bootstrap) din meniul
derulant.
Pagina ta a devenit dintr-odată frumoasă. :)
+1 sfat: Trebuie să plasezi întotdeauna cursorul în secțiunea head a paginii
tale când activezi librăria Bootstrap, altfel nu va funcționa corespunzător.
Ce s-a întâmplat? Când ai dat clic pe opțiunea Bootstrap latest, JSBin a
introdus automat niște cod nou în secțiunea <head> a paginii tale. Acestea
sunt linkurile care trimit la librăria Bootstrap din afara paginii tale.
Momentan, prima linie e cea mai importantă pentru noi:
<link
href="https://maxcdn.bootstrapcdn.com/bootstrap/*.*.*/css/boots
trap.min.css" rel="stylesheet" type="text/css" />
Copy
Această linie face referire la foaia de stil Bootstrap (fișierul CSS). De acum
înainte, acesta este CSS-ul care definește înfățișarea paginii tale.
Privește cum a schimbat fontul, marginile, spațiile albe și, de asemenea,
linkurile sunt acum butoane.
Acordă-ți câteva minute pentru a te uita prin codul HTML pe care l-am
folosit. Observă elementele și clasele care au construit ceea ce vezi.
Caută clasa btn-primary și schimb-o cu btn-success.
Sarcină
Care este culoarea butonului?
Folosind CSS personalizat

Este timpul să deschidem panoul CSS în JSBin. Cu toate că pagina ta este
bine formatată, panoul este gol. Stilizarea este gestionată de către
Bootstrap în acest moment. Încă mai avem propriul set de stiluri (panoul
CSS acum gol) și îl putem folosi împreună cu Bootstrap.
Încearcă să scrii ceva CSS în panou. De exemplu, mărește dimensiunea
elementului <h1>:
h1 { font-size: 60px; }
Copy
Poți suprascrie aproape orice cu propriul cod CSS, în timp ce păstrezi
celelalte elemente predefinite din Bootstrap. Vom învăța mult mai multe
despre moștenirea regulilor CSS, dar pentru moment trebuie să știi că poți
scrie CSS adițional peste Bootstrap. În cazul unui conflict, noul tău CSS va
înlocui setările Bootstrap (în mare parte).
Sarcină
Schimbă un alt element de pe pagina ta cu CSS personalizat. Scrie numele elementului

pe care l-ai schimbat aici:
Design responsiv
Închide panourile HTML și CSS, lasă deschis doar Output. Ai observat cum
pagina s-a rearanjat pentru a se adapta noului spațiu disponibil?
Redimensionează lățimea ferestrei browserului tău. Pornește cu ecranul
complet și încearcă să-i micșorezi lățimea încetul cu încetul. Observă ce se
întâmplă cu structura paginii și cum se schimbă marginile.
În ziua de astăzi, multe persoane navighează pe internet de pe multe
dispozitive diferite cu diverse dimensiuni ale ecranelor. Dacă vrei să creezi
pagini pe care oamenii vor vrea să le utilizeze, trebuie să iei în considerare
acest aspect. Așa-numitul „design responsiv” oferă o soluție usoară la
această problemă. Site-urile web realizate în acest fel pot monitoriza

dimensiunea ecranului disponibil și să schimbe aspectul paginii în funcție
de ecran.
Framework-ul Bootstrap este construit pe acest principiu al designului
responsiv. Dacă folosești în mod consistent logica din spatele acestuia
(sistemul de grile și clasele, despre care vom discuta imediat), paginile tale
vor arăta bine pe orice ecran, fără prea multă bătaie de cap.
Sarcină
Lipește URL-ul la bin-ul pe care l-ai editat recent:
Containerele
Îți amintești de principiul designului responsiv? Am vorbit despre el cu
câteva lecții în urmă. Am spus că acesta susține ca site-urile moderne să
fie responsive, adică să arate bine pe orice ecran, de la telefoane mobile
până la ecrane gigantice. De asemenea, am stabilit că Bootstrap este un
framework CSS responsiv, care utilizează un sistem de grile pentru a
atinge acest țel.
În această lecție, vom învăța cum să utilizăm sistemul de grile în timpul
setării layoutului de bază al site-ului.

Deschide un nou bin în JSBin (butonul „New bin” din colțul din stânga sus).
Apoi, mută cursorul în secțiunea head a codului HTML și alege
opțiunea Add Library --> Bootstrap latest din bara de instrumente.
Copiază următorul cod între tag-urile <body>:
<h1>O pagină responsivă</h1>
<p>Text pentru testare.</p>
</div>
Copy
Închide fiecare panou în afară de „Output”. Observă unde se află bordurile
site-ului tău. Deschide instrumentele de dezvoltator din Chrome (F12) și
inspectează elementul <div> cu clasa container. Examinează regulile legate
de acest element din fereastra „Styles”.
Redimensionează fereastra browserului și examinează regulile din nou.
Observă că s-au schimbat.
Deschide panoul HTML din nou și schimbă clasa în container-fluid. Observă
cum s-au schimbat bordurile paginii tale și regulile corespunzătoare din
fereastra „Styles”.
Ai fost martorul unui bloc de construcție de bază a sistemului de rețele
responsiv al lui Bootstrap, container în acțiune. Există două tipuri de clase
de containere în Bootstrap, .container și .container-fluid. Amandouă au același

scop: să aranjeze conținutul din interiorul lor în mod estetic, însă fac asta
într-un mod puțin diferit. Dimensiunea lui .container depinde de
dimensiunea paginii, însă partea unde rezidă conținutul propriu-zis are o
lățime fixă. Când redimensionezi fereastra, doar părțile „goale" de pe
margini își schimbă dimensiunea. De exemplu:
@media (min-width: 1200px)

.container {
width: 1170px;
}
Copy
Această regulă CSS îi indică următoarele browserului: când ecranul are cel
puțin 1200 de pixeli, .container ar trebui să aibă o dimensiune de 1170 de
pixeli. Dacă redimensionezi fereastra, vei vedea care e regula efectivă în
acel moment, bazată pe dimensiunea disponibilă a ecranului.
În contrast, .container-fluid păstrează părțile „goale” de pe margine la fel și
schimbă lățimea conținutului actual în mod dinamic, în funcție de
dimensiunea ecranului:
.container-fluid {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
Copy
Acesta este codul care îndeplinește efectul clasei .container-fluid.
Liniile margin-right: auto și margin-left: auto îi indică browserului că nu putem
specifica o valoare exactă a marginilor, dar vrem ca acestea să fie egale
mereu, poziționând astfel conținutul la centru.
+1 sfat: Prima regulă a sistemului de grile Boostrap este ca
întotdeauna să împachetezi conținutul de pe pagina ta într-un
container. Dacă nu faci asta, elementele HTML nu vor fi aranjate bine,
iar layoutul tău se va strica.
Sarcină
Care container îți place cel mai mult - cel fix sau cel fluid?
Grila
În regulă, acum știm prima regulă a sistemului de grile Bootstrap: fiecare
pagină ar trebui să aibă un container. În această sarcină, vom face un pas
înainte și îți voi prezenta grila efectivă care te va ajuta să poziționezi cu
ușurință orice pe pagină.

Grila Bootstrap constă în aceleași două elemente ca și orice altă grilă:
rânduri și coloane. Poți avea oricâte rânduri vrei pe o pagină, dar pe
fiecare rând pot exista doar 12 coloane.
Hai să ilustrăm sistemul cu puțin cod. Lipește următorul bloc într-un nou
bin:
<div class="row">
<div class="col-xs-6">coloana 1</div>
</div>
<div class="row">
</div>
<div class="row">
</div>
Copy
Ce s-a întâmplat aici? Mai întâi, am creat 3 rânduri cu 3 linii <div
class="row"></div>. Acestea vor apărea una sub cealaltă și vor grupa

coloanele noastre. Aceasta este a doua regulă din sistemul de grile din
Bootstrap: după container, ar trebui întotdeauna să începi cu rânduri.
În interiorul elementelor div class="row", există coloane, reprezentate de
alte elemente div, dar de această dată cu clasa col-xs-NUMBER. Pentru
moment, nu trebuie să te preocupi de partea -xs-, ci doar concentrează-te
pe numere. Cum spuneam mai înainte, rândurile pot conține 12 coloane.
Numărul de la sfârșitul fiecărei clase .col indică numărul de coloane ale
elementului div în chestiune. Dacă încerci să incluzi mai mult de 12
coloane în orice rând dat, Bootstrap „desparte” în mod automat conținutul
și împinge partea rămasă pe un nou rând.
Pentru a ilustra aceasta, poți vedea că în exemplul nostru de cod, fiecare
rând are 12 coloane de conținut, dar în diferite forme. Prima este de 6+6, a
doua de 4+4+4, iar a treia este de 3+3+3+3 coloane. Luând în considerare
aceasta, a treia regulă a grilei Bootstrap este că după rânduri trebuie să fie
mai întâi coloane.
Iată grila într-o imagine pentru a înțelege mai bine conceptele pe care se
bazează:
În regulă, aum știi că A) ar trebui să pui totul într-un container, B) ar trebui
apoi să scrii rândurile, iar C) trebuie să populezi aceste rânduri cu coloane.

Dar cum rămâne cu conținutul, cu titlurile, paragrafele, imaginile etc.? Ei
bine, acestea intră în elementele div class="col-xs-NUMBER", și anume în
coloane. Cu alte cuvinte, elementele copii ale containerului sunt rândurile,
elementele copii ale rândurilor sunt coloanele, iar elementele copii ale
coloanelor sunt orice alte elemente HTML pe care le folosești pentru a-ți
construi pagina.
+1 sfat: Poate ai remarcat că sistemul de grile specifică lățimea unui rând,
dar nu și înălțimea acestuia. Asta pentru că înălțimea este setată în mod
automat la înălțimea celei mai mari coloane de pe rând, care la rândul său
este definită de înălțimea conținutului pe care îl adăpostește. De aici apare
întrebarea, cum poziționăm coloanele mai scurte la centrul celor mai
lungi? Din nefericire, Boostrap nu dispune de o soluție încorporată pentru
aceasta, așa că trebuie să căutăm răspunsul în altă parte. Vom face asta
într-o lecție viitoare, unde vom discuta despre metoda display: flex;.
Aproape am terminat de discutat despre sistemul de grile, dar trebuie să
revenim puțin și să vorbim despre breakpoints (punctele de întrerupere).
Amintește-ți de partea -xs- din codul de mai sus, pe care te-am rugat să o
ignori pentru o perioadă. Acesta este un breakpoint, poți să nu-l mai
ignori de-acum, pentru că începem să învățăm cum să-l folosim. :)

Cu punctele de întrerupere poți specifica layoutul paginii tale în funcție de
dimensiunea ecranului. Există 4 asemenea puncte de întrerupere: xs (extra
small - foarte mic), sm (small - mic), md (medium - mediu) și lg (large -
mare). Fiecare punct de întrerupere corespunde unei dimensiuni de ecran.
Xs este pentru telefoane, sm pentru tablete, md pentru laptopuri și alte
dimensiuni medii ale ecranelor, iar lg este pentru ecranele mari.
Când definești un layout într-un punct de întrerupere, layoutul va fi
păstrat pe toate dimensiunile ecranelor incluse în acel punct de
întrerupere și pe cele mai mari decât acesta. Pe fiecare ecran mai mic
decât punctul de întrerupere definit, layoutul va fi stivuit în mod automat.
De exemplu:
<div class="col-sm-6">coloana 1</div>

<div class="col-sm-6">coloana 2</div>
Copy
Acest cod va crea un layout pe tablete și pe ecrane mai mari, care se
compune din două coloane, una lângă cealaltă. Însă, pe telefoane, cele
două coloane vor fi afișate una sub cealaltă. De ce? Deoarece folosim
punctul de întrerupere sm.
<div class="col-xs-12 col-lg-6">Coloana care ține seama de

conținut</div>
Copy
Desigur, de asemenea poți combina clasele și scrie instrucțiuni specifice
folosind punctele de întrerupere. De exemplu, codul de mai sus specifică
faptul că elementul div ar trebui să ocupe până la 12 coloane pe telefoane,
tablete și ecrane de dimensiuni medii, însă numai 6 coloane pe ecrane
mari.
Acum, este momentul să-ți aplici noile cunoștințe despre sistemul de grile.
Deschide vechiul tău bin, acolo unde am practicat componentele
Bootstrap și aplică-i sistemul de grile. Dacă procedezi corect, pagina ar
trebui să fie responsivă, lucru pe care îl poți verifica prin redimensionarea
ferestrei browserului. Mult noroc! :)
Sarcină
Care breakpoint ar trebui să-l folosești dacă vrei să păstrezi layoutul corect chiar și pe
cele mai mici ecrane?
Grilele stivuite
Unul dintre lucrurile grozave despre sistemul de grile este că poate fi
imbricat (aproape la infinit). Aceasta înseamnă că poți pune un nou rând
cu coloane într-o coloană deja existentă. Știi, exact ca păpușile rusești care
sunt una în cealaltă. :)
Lipește următorul cod într-un nou bin și vezi ce se întâmplă.

<div class="row">
<div class="col-xs-8">
<div class="row">
<div class="col-xs-6">Șase în opt</div>
<div class="col-xs-6">Șase în opt</div>
</div>
</div>
<div class="col-xs-4">Patru</div>
</div>
Copy
+1 sfat: Încearcă să mărești lățimea ferestrei Output.
+1 sfat: Pentru a înțelege mai ușor, pune o margine roșie casetelor. Mergi
prin codul HTML și atașează următorul fragment de cod în tag-ul de
deschidere a div-ului, chiar lângă clasele acestuia: style="border:1px solid
red;". Ex: <div class="row" style="border:1px solid red;">. În acest fel, poți urmări
cu ușurință unde se termină fiecare div.
Sarcină
Câte rânduri există pe ecranul ferestrei Output?
Alinierea
În regulă, haide să facem o mică pauză de recapitulare. Cum te ajută mai
exact sistemul de grile să-ți poziționezi elementele pe pagină? Așa cum ai
văzut în sarcinile anterioare, acesta creează o grilă care constă în atâtea
rânduri câte dorești, având 12 coloane pe fiecare rând. Pur și simplu
trebuie să menționezi lățimea elementelor dorite, apoi să pui rândurile și
coloanele potrivite pentru a crea un layout. Ca și cum ai desena pe o
hârtie milimetrică.
Până acum, am văzut exemple de rânduri care sunt pline cu conținut, ceea
ce înseamnă că toate cele 12 coloane conțin câteva elemente HTML utile.
Dar ce se va întâmpla dacă folosești doar o parte din rând pentru conținut
și lași restul liber, precum un titlu sau o imagine centrată?
Aici intervine clasa .col-*-offset-**. Partea * semnalează punctul de
întrerupere, în timp ce partea ** este un număr care definește lățimea
coloanei spațiului liber. Cu această clasă, în principiu aliniezi conținutul
coloanelor cu X coloane, astfel încât să se schimbe. De exemplu:
<div class="col-xs-5 col-xs-offset-3 col-md-6 col-md-offset-

2">...</div>
Copy
Acest <div> va avea o lățime de 5 coloane pe telefoane și tablete și va fi
aliniat la dreapta cu 3 coloane. Pe dispozitive mai mari decât acestea însă,
el va avea o lățime de 6 coloane și va fi aliniat cu 2 coloane la dreapta.

Clasa offset îți permite să te miști în jurul conținutului dinăuntrul
rândurilor, prin urmare creând un layout complex pentru pagina ta.
Sarcină
Vrei să pui un element cu o lățime de 4 coloane în centrul rândului. Cât va trebui să fie
alinierea?
Rezumat
Este vremea practicii! :) Deschide un nou bin și aplică toate cunoștințele pe
care le-ai acumulat în ultimele câteva sarcini. Construiește o grilă cu
câteva rânduri și diferite coloane, grupează câteva rânduri și coloane,
practică metoda alinierii și, desigur, construiește totul în mod responsiv.
Distrează-te!
+1 sfat: Dacă te încurci, poți reveni la temele anterioare și, desigur, te
poți uita peste documentația Bootstrap: getbootstrap.com
Sarcină
Lipește codul URL al bin-ului tău aici:

Noțiuni introductive despre
tipografie
După cum ai văzut în lecțiile anterioare, Bootstrap are o mulțime de soluții
gata de folosit pentru lucruri precum butoane, tabele, elemente de
navigare etc.
De asemenea schimbă stilul celor mai simple elemente de pe o pagină,
precum titluri, liste și tipografie în general. În această lecție, vom vedea
toate aceste elemente, cum le modifică Bootstrap, și vom învăța și unele
dintre clasele ajutătoare.
Deschide un nou bin, include Bootstrap, construiește o grilă cu câteva
rânduri și coloane și include aceste elemente:
•un <h1>, <h2> și <h6> heading
•o listă ordonată (<ol>) și o listă neordonată (<ul>), ambele conținând
câțiva itemi (<li>)
•câteva paragrafe (<p>)
Aceasta este o pagină pentru exersare, așadar nu petrece prea mult timp
cu conținutul acesteia, ci doar construiște antete, paragrafe și liste cu
înlocuitoare generice pentru text.

Sarcină
Lipește codul URL al bin-ului tău aici:
Clase speciale
După cum poți vedea, Bootstrap aplică în mod automat CSS conținutului
tău fără a avea nevoie de clase specifice. Are un aspect predefinit pentru
fiecare element de pe pagina ta. Acesta este un lucru bun, însă uneori vrei
să faci lucrurile puțin diferit. De exemplu, încearcă să adaugi tag-
ul <small> elementului tău h2:
<h2>Acesta este un antet cu <small> text</small></h2>

Copy
Selectează unul dintre paragrafele tale <p> și atribuie-i o clasă class="lead".
Vezi ce se întâmplă. (Aceasta se folosește, de obicei, pentru rezumarea
conținutului, înainte și după un text lung.)
Alege un element care conține puțin text și atribuie-i o clasă class="text-
success". Selectează un altul și modifică-l cu clasa class="bg-info"
Acestea sunt exemplele așa-numitelor „clase contextuale” și sunt, de fapt,
aceleași cu cele pe care le-am văzut în cazul butoanelor, etichetelor și
tabelelor, doar cu tipografie. Clasele aplicabile sunt următoarele:
•danger (pericol) [roșu implicit],

•info (informație) [albastru pal],
•success (succes) [verde],
•warning (avertizare) [galben].
Există o altă clasă contextuală specială, numită primary. Aceasta este
culoarea de bază a paginii (de obicei, culoarea brandului), [în mod implicit,
este albastru închis].
Este o practică bună în industrie să folosești nume semantice pentru
clasele tale, pentru a menține mai ușor codul. În cazul clasei .text-primary,
de exemplu, numele rămâne aplicabil și în cazul în care compania își
schimbă culoarea principală.
Pe baza principiului menționat mai sus, .text-success va semnala un tip de
feedback pozitiv pentru utilizator, în timp ce clasa .bg-info va fi atribuită
unui element informațional. Încearcă pe cont propriu. Ia aceste clase și
joacă-te cu ele pe pagina ta.
Sarcină
Trimite-ne linkul și putem trece mai departe.

Poziționarea textului și
formatarea listelor
Poți poziționa elementele bazate pe text (precum antete sau paragrafe)
foarte ușor pe o pagină cu clase Bootstrap specializate.
Încearcă clasele .text-left, .text-center și .text-right în bin-ul tău.
Listele sunt utile pe un site, dar nu vrem întotdeauna să folosim bulinuțe
sau numere ca decorații. Din fericire, Bootstrap poate rezolva și asta.
Alege una dintre listele de pe pagină și adaugă-i următorul
atribut: class="list-unstyled". Acesta îndepărtează semnalele de la acea listă.
Dar dacă vrei să poziționezi itemii listei pe un singur rând pe orizontală și
nu unul sub celălalt? Poți face și asta, cu metoda class="list-inline". Încearc-o
pe lista ta recentă nestilizată.
Sarcină
Trimite-ne linkul și putem trece mai departe.
Tabelele
Ca dezvoltator, vei construi câteva tabele în HTML și CSS, îți garantăm asta.
Din fericire, Bootstrap îți poate înfrumuseța tabelele destul de ușor. :)

Deschide un bin și lipește următorul cod în el. (Nu uita să pornești
Bootstrap!)
<table>
<tr>
<th></th>
<th>Coloana 1</th>
<th>Coloana 2</th>
<th>Coloana 3</th>
</tr>
<tr>
<td>Rândul 1</td>
<td>0</td>
<td>3</td>
<td>5</td>
</tr>
<tr>
<td>Rândul 2</td>
<td>1</td>
<td>2</td>
<td>4</td>
</tr>
<tr>
<td>Rândul 3</td>
<td>2</td>
<td>2</td>
<td>7</td>
</tr>
<tr>
<td>Rândul 4</td>
<td>3</td>
<td>4</td>
<td>3</td>
</tr>
<tr>
<td>Rândul 5</td>
<td>7</td>
<td>1</td>
<td>4</td>
</tr>
</table>
Copy
Nu arată prea bine, nu-i așa? Acum, atribuie-i tag-ului tabelului o
clasă .table: <table class="table">. Pam-pam, privește magia care tocmai s-a
intamplat! :)
Aceasta este clasa de bază .table. Poți adăuga o stilizare suplimentară cu
clasele suplimentare de mai jos. Încearcă să le adaugi lângă tag-ul .table:
•.table-striped,
•.table-bordered,
•.table-hover,
•.table-condensed.
+1 sfat: Tabelele au tendința de a arăta groaznic pe ecranele mai mici sau
pot deveni chiar ilizibile. Nu în mod surprinzător, Bootstrap are o soluție
destul de elegantă și pentru asta. Dacă împachetezi tabelul tău într-
un <div> cu clasa .table-responsive, asta îl va opri din micșorare după un
anumit punct și în schimb îl va face derulabil pe orizontală.
Sarcină
Ce vezi că se întâmplă dacă folosești .table-hover?
Clasele contextuale în tabele

Poți atribui aceleași clase contextuale pe care le-am folosit la butoane și
etichete și rândurilor și celulelor din tabelul tău.
De exemplu, poți folosi linia <tr class="success"> pentru a evidenția un rând
cu un mesaj pozitiv sau <td class="warning"> pentru a atrage atenția asupra
unei valori ciudate.
Încearcă aceste clase contextuale în tabelul
tău: .active, .success, .info, .warning, .danger.
Sarcină
Care este culoarea contextului .active?
Imaginile
O pagină web fără imagini poate deveni plictisitoare foarte repede.
Deschide un nou bin, include ultima librărie Bootstrap în head și
construiește o grilă cu un rând și trei coloane de lățime egală. (Amintește-
ți că numărul magic este 12.)
Inserează o imagine în fiecare coloană. (Amintește-ți de tag-ul img.) Nu-ți
face griji dacă dimensiunile lor diferă, vom ajunge la aceasta într-o clipă.
Extinde fiecare tag img cu aceasta: class="img-responsive" și vezi ce se
întâmplă.
Clasa .img-responsive redimensionează automat imaginea, astfel încât să se
potrivească în containerul său. Încearcă să redimensionezi fereastra și
observă cum imaginea se schimbă.
În afară de acest truc grozav, există trei alte clase în Bootstrap, specifice
imaginilor, și fiecare dintre ele creează o bordură specifică:
•.img-rounded rotunjește colțurile,
•.img-circle rotunjește toată imaginea,

•.img-thumbnail adaugă o mică bordură albă imaginii.
+1 sfat: Nu uita că poți folosi clase multiple pe un singur element, doar
separă-le cu spații. De exemplu, <img class="img-responsive img-circle" ... />.
Sarcină
Folosește clasele menționate mai sus pe pagina ta și trimite-ne URL-ul bin-ului.
Clipurile video
Un alt tip interesant de elemente pe o pagină web sunt videoclipurile.
Bootstrap face ușoară includerea videoclipurilor responsive pe pagina ta.
Fă o mică excursie pe YouTube și găsește videoclipul tău preferat. Sub
player există butonul „Share” (Partajează), care conține opțiunea „Embed”
(Încorporează). Alege-o.
Copiază codul pregătit de către YouTube în bin-ul tău. (Nu uita să creezi un
rând nou și o coloană pentru el în sistemul de grile!). Dacă arunci o privire
acum la fereastra Output, poți vedea că videoclipul are o lățime fixă.
Aceasta nu este o surpriză, dat fiind că acest cod încorporat vine cu
parametri ficși:
<iframe width="560" height="315"
src="https://www.youtube.com/embed/c4itJv_DXhI" frameborder="0"
allowfullscreen></iframe>
Copy
Șterge atributelewidth și height și modifică-ți codul astfel încât să arate așa:
<div class="embed-responsive embed-responsive-16by9">

<iframe class="embed-responsive-item" src="..."></iframe>
</div>
Copy
Dacă totul a mers bine, playerul YouTube încorporat ar trebui să ocupe
dimensiunea containerului său.
Sfat pro: -16by9 definește raportul aspectului playerului și poate fi
schimbat la -4by3.
Sfat pro: Dacă ștergi atributul allowfullscreen, utilizatorul nu poate vizualiza
pe tot ecranul pe site-ul tău. Trebuie să dea clic pe YouTube pentru a
accesa versiunea de ecran complet.
Sarcină
Copiază URL-ul în bin:

Organizarea conținutului
În această sarcină vom discuta despre componentele care te pot ajuta să
poziționezi, să grupezi și să separi diferite părți ale unei pagini web.
Deschide bin-ul la care ai lucrat în ultima sarcină și adaugă-i următorul
fragment de cod:
<div class="jumbotron">
<h1>Un titlu foarte important</h1>
<p>Aici poți descrie de ce este așa de important.</p>
</div>
<p>Iar acesta este un simplu text</p>

</div>
Copy
După cum poți vedea, clasa .jumbotron creează o casetă mare și gri, care
atrage atenția asupra conținutului. În afara culorii diferite de fundal,
aceasta folosește de asemenea un text mai mare decât în mod obișnuit,
pentru a-l diferenția de alte părți de pe pagină.
Șterge tag-urile<div> din jurul blocului de cod <div class="jumbotron"> și
atribuie o clasă suplimentară .container lângă clasa .jumbotron. Ce s-a
întâmplat?
Ok, acum hai să-i dăm un titlu paginii noastre:
<div class="page-header">
<h1>Acesta va fi titlul acestei pagini</h1>
</div>
Copy
Sarcină
Evidențierea contextuală
Există momente când dorim să evidențiem ceva pe pagina noastră, dar
un .jumbotron ar fi prea exagerat.
Metoda class="well" este răspunsul la aceste cazuri, și o poți folosi pe
aproape orice element HTML.
Încearc-o pe pagina ta. Adaugă clasa .well la <p>, <h1> sau oricare dintre
elementele <div>.
Sfat pro: Poți controla padding-ul dintre bordura elementului .well și
conținutul său. class="well well-sm" creează un element cu padding mai mic,
în timp ce class="well well-lg" creează unul cu un padding mai mare decât în
mod obișnuit.
Creează un nou element pe pagina ta:
<div class="alert alert-info">

<strong>Grozav! Tocmai ai creat o cutie mică și
colorată.</strong>
</div>
Copy
Acestea se numesc alerte în Bootstrap și au câteva variații bazate pe
contextul lor presupus. Încearcă aceste clase pe pagina ta:
•.alert-success,
•.alert-warning și
•.alert-danger
Sarcină
Panourile
Există și alte modalități pentru a împărţi conținutul pe pagina ta.
Copiază acest fragment de cod în bin-ul pe care l-ai folosit în sarcinile
anterioare:
<div class="panel panel-default">

<div class="panel-heading">
<h3 class="panel-title">Titlul acestui panou</h3>
</div>
<div class="panel-body">Conținutul acestui panou</div>
<div class="panel-footer">Subsolul acestui panou</div>

</div>
Copy
Panourile sunt o modalitate grozavă pentru a organiza conținutul pe o
pagină. Ca de obicei, există câteva tipuri diferite pe lângă clasa
implicită .panel-default. Acordă-ți câteva minute și încearcă-le pe pagina ta:
•.panel-primary,
•.panel-success,
•.panel-info,
•.panel-warning și
•.panel-danger
+1 sfat: Poți alege să nu incluzi părțile .panel-heading și .panel-footer în codul
tău. Aceasta te lasă doar cu o margine gri mică, precum în exemplul de
mai jos.
<div class="panel panel-default">

<div class="panel-body">Conținutul acestui panou</div>
</div>
Copy
Sarcină
Arată-ne panoul tău! Lipește URL-ul către bin:
Grupele-listă
Avem o ultimă metodă de organizare a conținutului - așa-numitul grup-
listă.
Cu această metodă, îți poți organiza listele în mici pachete simple.
Modifică una dintre listele existente pe baza următorului bloc de cod:
<ul class="list-group">
<li class="list-group-item">Elementul 1 din listă</li>
</ul>
Copy
Arată bine, nu-i așa? :)
Sfat pro: Dacă folosești linkuri în loc de <ul>, <div> și <li>, grupul tău listă
devine clicabil. Uită-te la exemplul de mai jos.

<div class="list-group">
<a href="#" class="list-group-item">Link clicabil 1</a>
</div>
Copy
+1 sfat: Când construiești un site web și nu ai adresele URL ale linkurilor la
care vei trimite, doar folosește # în atributul href="". În felul acesta, nu vei
avea o eroare cu „pagina nu a fost găsită” când dai clic pe linkurile care nu
sunt încă funcționale.
Sarcină
Butoanele
În regulă, până acum am aprofundat Bootstrap destul de mult și ai văzut o
mulțime de instrumente grozave. În lecția următoare îți voi arăta alte
câteva metode utile în acest framework grozav. Vom avea de-a face cu
butoane, etichete și pictograme. Ești gata?

Deschide bin-ul folosit anterior și inserează un link în codul care indică
spre unul dintre bin-urile tale. Atribuie-i elementului ancoră următoarele
clase:
<a class="btn btn-primary" ... >

Copy
Tocmai ai convertit un element ancoră într-un buton, folosind
clasele .btn și .btn-primary din Bootstrap. Primul convertește linkul, în timp
ce al doilea specifică butonul pe care browserul trebuie să îl afișeze.
Ca de obicei, există o varietate de butoane adaptate contextelor specifice.
Acordă-ți câteva momente și joacă-te cu acestea în bin-ul tău:
•.btn-default,
•.btn-primary,
•.btn-success,
•.btn-info,
•.btn-warning,
•.btn-danger,
•.btn-link.
Poți schimba nu numai culoarea lor, ci și dimensiunea, folosind câteva
opțiuni familiare:
•.btn-lg,
•.btn-md,
•.btn-sm,
•.btn-xs.
Există o dimensiune unică în cazul butoanelor (button-block), care umple
tot spațiul de pe orizontală disponibil pentru el. Încearcă să introduci acest
exemplu în bin-ul tău:
<button class="btn btn-primary btn-block">Un buton bine

rotunjit</button>
Copy
Sarcină
Insignele
Un lucru frecvent utilizat pe site-uri este afișarea numerelor informative
pentru utilizator. Gândește-te la notificările de pe telefonul tău sau la cele
din antetul Facebook-ului. În Bootstrap, aceste pictograme care conțin

numere sunt foarte ușor de creat și le poți plasa virtual oriunde pe pagina
ta.
Încearcă să faci asta în propriul tău bin. Include următorul fragment de
cod în câteva dintre elementele tale. Gândește-te la titluri, grupuri-listă și
butoane. Asigură-te că lipești codul înăuntrul elementului.
<span class="badge">5</span>
Copy
După cum vezi, insigna „știe" unde este și se adaptează mediului. De
exemplu, pe butonul unei clase primare se arată cu un fundal albastru și
un text alb. În grupurile-listă se aliniază automat spre dreapta etc.
Sarcină
Etichetele
Un alt instrument grozav pentru atașarea informațiilor la anumite texte
sunt etichetele.
La fel ca în sarcina anterioară cu insignele, acum încearcă să incluzi
etichete în bin-ul tău. Introdu următorul fragment de cod în titluri, text și
orice element vrei tu:

<span class="label label-default">etichetă</span>
Copy
Etichetele – la fel ca insignele – sunt și ele conștiente de context. De
exemplu, își schimbă dimensiunea în funcție de dimensiunea fontului din
mediul lor.
Etichetele au și ele o selecție variată bazată pe contextul lor:
•.label-default,
•.label-primary,
•.label-success,
•.label-info,
•.label-warning,
•.label-danger.
Sarcină
Pictogramele
În designul web, utilizăm deseori componente vizuale pentru a sublinia
sau clarifica mesajul nostru scris. Una dintre cele mai utilizate
componente de acest fel (în afara imaginilor, bineînțeles) este pictograma.
În mod implicit, Bootstrap folosește proiectul Glyphicon pentru
pictograme: https://glyphicons.com. Mai târziu vom învăța cum să
includem alte pachete de pictograme, dar pentru moment, Glyphicon va fi
suficient.
Poți utiliza pictograme aproape oriunde în codul tău, trebuie doar să
adaugi următoarea linie de cod:
<span class="glyphicon glyphicon-NAME"></span>

Copy
Doar înlocuiește partea -NAME cu numele dorit al pictogramei și totul este
gata. De exemplu, glyphicon-print sau glyphicon-search. Lista completă a
pictogramelor și numelor acestora poate fi găsită în documentația
Bootstrap: Glyphicons.
Inserează cel puțin o pictogramă undeva în bin-ul tău.
Sarcină

Rezumat
Aici se termină elementele de bază Bootstrap. Ai văzut multe dintre
componentele și instrumentele incluse în acest framework grozav. Înainte
de a termina, ai acum șansa de a practica ce ai învățat.
Sarcina ta este următoarea:
•Realizează un site web cu o singură pagină în JSBin, folosind

framework-ul Bootstrap.
•Construiește layoutul cu sistemul de grile (container > rând >

coloană).
•Pagina ta trebuie să includă cel puțin un titlu, un paragraf, un link,

un tabel și o imagine. Mai multe sunt binevenite, bineînțeles.
•Folosește câteva componente specializate pentru organizarea

conținutului, precum acestea: panel, well, alert, jumbotron, list-
group, etc.
•Nu uita de principiul designului responsiv! Site-ul tău ar trebui să

arate grozav și pe dispozitvele mobile.
•Dacă nu ai inspirație: aceasta este o oportunitate grozavă de a

construi prima versiune a site-ului tău web personal pentru portfoliu.
Include informațiile de contact, o imagine, câteva cuvinte despre
tine, educația și proiectele tale.
Când ești gata cu prima ta pagină completă Bootstrap, uită-te și pe aceste
patru site-uri web (și amintește-ți de ele mai târziu):
•Documentația Bootstrap – aceasta ar trebui să fie prima ta oprire

dacă ai o întrebare despre Bootstrap.
•Components - subpagină a numitei documentații. Conține fiecare
element utilizabil al framework-ului cu exemple.
•Bootsnipp este un repertoriu de fragmente de coduri, scrise pentru

Bootstrap, pe care le poți folosi în propriile proiecte, cu mici
modificări sau fără.
•Ultimul, dar nu cel din urmă, WrapBootstrap este un magazin online

pentru șabloane de Bootstrap. Le poți cumpăra și de asemenea te
poți inspira în timp ce îți construiești propriul site.
Sarcină
Trimite-ne linkul după ce ai terminat de lucrat, așteptăm cu nerăbdare. :)

11 Elemente de Baza Bootstrap

Încărcat de

Informații document

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

11 Elemente de Baza Bootstrap

Încărcat de

Drepturi de autor:

Formate disponibile

Noțiuni introductive

În lecțiile anterioare am văzut cum CSS poate modifica aspectul unui

acest proces necesită foarte mult timp și de obicei necesită sensibilitate

dacă nu știi nimic despre design.

Despre framework-urile CSS

Multe persoane proiectează și construiesc site-uri web peste tot în lume.

Majoritatea dintre ele se confruntă cu probleme similare cu ale tale: de

mobile, cât și calculatoare.

Din fericire, există programatori și designeri grafici care deja au gasit o

cale de a rezolva aceste probleme cu CSS. Câțiva dintre ei încearcă să facă

aceste soluții reutilizabile, punându-le împreună si distribuindu-le într-un

mod accesibil. Aceste pachete se numesc librării sau framework-uri.

În următoarele lecții, vom discuta despre Bootstrap. Bootstrap este la

De ce framework-urile precum Bootstrap sunt atât de importante?

Gândește-te la următorul scenariu simplu: dorești să incluzi un tabel pe

CSS simplu, trebuie să testezi pagina pe o groază de dispozitive și să fii

atent la o sumedenie de capcane. În schimb, când folosești Bootstrap,

este suficient să adaugi clasa table la tabelul tău și va funcționa.

+1 sfat: Majoritatea limbajelor de programare și a framework-urilor au

o documentație online grozvă, iar Bootstrap nu face excepție. Nu

trebuie să îți amintești exact tot ce vom discuta în următoarele sarcini.

Oricând te blochezi sau nu îți amintești ceva, trebuie doar să intri

pe getbootstrap.com și să te uiți peste resursele de acolo.

În această lecție, vom discuta despre secțiunile „CSS” și „Components”.

Lipește următorul segment de cod între tag-urile <body>:

Dă clic pe Add Library (Adaugă bibliotecă) din colțul din stânga sus și

alege Bootstrap latest (Cea mai recentă versiune Bootstrap) din meniul

Pagina ta a devenit dintr-odată frumoasă. :)

+1 sfat: Trebuie să plasezi întotdeauna cursorul în secțiunea head a paginii

tale când activezi librăria Bootstrap, altfel nu va funcționa corespunzător.

Ce s-a întâmplat? Când ai dat clic pe opțiunea Bootstrap latest, JSBin a

introdus automat niște cod nou în secțiunea <head> a paginii tale. Acestea

Momentan, prima linie e cea mai importantă pentru noi:

înainte, acesta este CSS-ul care definește înfățișarea paginii tale.

Privește cum a schimbat fontul, marginile, spațiile albe și, de asemenea,

linkurile sunt acum butoane.

folosit. Observă elementele și clasele care au construit ceea ce vezi.

Caută clasa btn-primary și schimb-o cu btn-success.

Care este culoarea butonului?

Folosind CSS personalizat

bine formatată, panoul este gol. Stilizarea este gestionată de către

CSS acum gol) și îl putem folosi împreună cu Bootstrap.

Încearcă să scrii ceva CSS în panou. De exemplu, mărește dimensiunea

înlocui setările Bootstrap (în mare parte).

Schimbă un alt element de pe pagina ta cu CSS personalizat. Scrie numele elementului

pagina s-a rearanjat pentru a se adapta noului spațiu disponibil?

Redimensionează lățimea ferestrei browserului tău. Pornește cu ecranul

complet și încearcă să-i micșorezi lățimea încetul cu încetul. Observă ce se

întâmplă cu structura paginii și cum se schimbă marginile.

În ziua de astăzi, multe persoane navighează pe internet de pe multe

dispozitive diferite cu diverse dimensiuni ale ecranelor. Dacă vrei să creezi

pagini pe care oamenii vor vrea să le utilizeze, trebuie să iei în considerare

acest aspect. Așa-numitul „design responsiv” oferă o soluție usoară la

această problemă. Site-urile web realizate în acest fel pot monitoriza

Framework-ul Bootstrap este construit pe acest principiu al designului

responsiv. Dacă folosești în mod consistent logica din spatele acestuia

Lipește URL-ul la bin-ul pe care l-ai editat recent:

câteva lecții în urmă. Am spus că acesta susține ca site-urile moderne să

fie responsive, adică să arate bine pe orice ecran, de la telefoane mobile

până la ecrane gigantice. De asemenea, am stabilit că Bootstrap este un

framework CSS responsiv, care utilizează un sistem de grile pentru a

atinge acest țel.

În această lecție, vom învăța cum să utilizăm sistemul de grile în timpul