Rezumat Bootstrap 3

 ce este un grid
o in designul grafic, o structura de grid (de obicei 2-
dimensionala) este facuta dintr-o serie de linii
intersectate pentru a structura continutul
o in web-design, este o metoda efectiva de a creea
layout consistent rapid folosind HTML si CSS
o gridurile in web design organizeaza si structureaza
continutul, facand website-urile usor de citit
 ce este Bootstrap Grid System
o Gridul Bootstrap reprezinta o grila respsponsive,
fluida, mobile-first
o codul in Bootstrap targeteaza dispozitive cu ecran mic
: telefon, tableta
o componentele se extind pentru grile mai mari :
laptop, desktop

 Strategia Mobile First

o Continut : determina ce este cel mai important
o Asezare(layout)
 desenam pentru latimi mai mici la inceput
 CSS de baza se adreseaza in primul rand
dispozitivelor mobile
 o Crestere progresiva
 adaugam elemente pe masura ce dimensiunea
creste
 Lucrul cu Bootstrap Grid System
o randurile trebuie puse in interiorul unei clase
.container pentru aliniere si padding
o se folosesc randuri pentru a creea grupuri orizontale
de elemente
o continutul trebuie plasat in coloane, si doar coloanele
pot fi copii imediati ai randurilor
o coloanele creeaza santuri(gutter - spatii intre
continutul coloanelor) prin intermediul proprietatii
padding
o clase predefinite precum .row si .col-xs-4 sunt
disponibile pentru a face rapid layout-uri bazate pe
grile
o acel padding este deplasarea pentru prima si ultima
coloana prin marginile negative din .rows
 Media Queries
o ne ofera posibilitatea sa mutam, sa afisam sau sa
ascundem elemente in functie de dimensiunea
ferestrei
 o Urmatoarele media-query sunt folosite in LESS pentru
a creea puncte cheie
/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */

/* Small devices (tablets, 768px and up) */

@media (min-width: @screen-sm-min) { ... }

/* Medium devices (desktops, 992px and up) */

@media (min-width: @screen-md-min) { ... }

/* Large devices (large desktops, 1200px and up) */

@media (min-width: @screen-lg-min) { ... }

 Optiuni de grila(grid)

o
 o

 Structura grilei de baza

<div class = "container">
<div class = "row">
<div class = "col-*-*"></div>
<div class = "col-*-*"></div>
</div>
<div class = "row">...</div>
</div>
<div class = "container">
</div>

 Exemplu 1
o div-ul cu clasa container (<div class =
"container">...</div>) este adaugat pentru a ne
asigura ca site-ul este centrat si are latime maxima
pentru layout
o odata ce containerul este adaugat, mai departe
trebuie sa gandim in termeni de randuri si coloane
<div class = "row">...</div>
<div class = "col-md-6"></div>
 o exemplul curent este un layout simplu, 2 coloane, 2
paragrafe pe coloana
<div class = "container">
<h1>Hello, world!</h1>

<div class = "row">

<div class = "col-md-6" style = "background-color: #dedef8;

box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do

eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat.</p>

<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem

accusantium doloremque laudantium, totam rem aperiam, eaque ipsa
quae ab illo inventore veritatis et quasi architecto beatae vitae
dicta sunt explicabo.</p>
</div>

<div class = "col-md-6" style = "background-color: #dedef8;

box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">

<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem

accusantium doloremque laudantium.</p>

<p> Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet,
consectetur, adipisci velit, sed quia non numquam eius modi
tempora incidunt ut labore et dolore magnam aliquam quaerat
voluptatem.</p>
</div>

</div>
</div>
 Exemplu 2
o <div class = "col-sm-3 col-md-6 col-lg-4">....</div>
o <div class = "col-sm-9 col-md-6 col-lg-8">....</div>
o pentru cele 2 div-uri cu clasele de mai sus, avem
rapoartele
 25% 75% pe telefom
 50% 50% pe tableta si laptop
 33% 67% pe ecrane mari
<div class = "container">
<h1>Hello, world!</h1>

<div class = "row">

<div class = "col-sm-3 col-md-6 col-lg-8" style = "background-color: #dedef8;
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do

eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat.</p>

<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem

 accusantium doloremque laudantium, totam rem aperiam, eaque ipsa
quae ab illo inventore veritatis et quasi architecto beatae vitae
dicta sunt explicabo.</p>
</div>

<div class = "col-sm-9 col-md-6 col-lg-4" style = "background-color: #dedef8;

box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">

<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem

accusantium doloremque laudantium.</p>

<p>Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet,
consectetur, adipisci velit, sed quia non numquam eius modi tempora
incidunt ut labore et dolore magnam aliquam quaerat voluptatem.</p>
</div>

</div>
</div>

 Pentru a nu avea probleme cu intersectarea div-urilor cand

avem mai multe coloane si apar gresit, folosim urmatorul
div :
 <div class = "clearfix visible-xs"></div>

 Offset-urile
 o sunt proprietati pentru layout-uri specializate.
o pot fi folosite pentru a impinge coloane pentru mai
mult spatiu
o pentru a folosi offset-uri pe ecrane mari, folosim
.col-md-offset-* (versiunea 3 bootstrap)

<div class = "container">

<h1>Hello, world!</h1>

<div class = "row" >

<div class = "col-xs-6 col-md-offset-3" style = "background-color:
#dedef8;
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>

</div>

</div>

</div>

 Ordinea coloanelor
o se poate schimba ordinea coloanelor cu proprietatea
.col-md-push-*/.col-md-pull-* unde * este in
multimea 1..11