Grid system

postat acum 11 luni de Stefanescu Mihai in categorie Bootstrap

Ce este acest grid de fapt?

Grid-ul bootstrap ne permite sa construim rapid layout-ul unui website responsive. Spre deosebire de grid-ul din Bootstrap 2, grid-ul din Bootstrap 3 este mobile first si vine cu 12 coloane ce se modifica in functie de marimea viewport-ului.

Bootstrap vine cu clase predefinite pentru grid ce corespund anumitor tipuri de dispozitive (ex: telefoane, tablete, desktop-uri, etc). De exemplu, putem folosim clasele de genul “col-xs-“ pentru dispozitive xtra small pentru a crea o grila pentru telefoane, folosim clasele de genul “col-sm-” pentru discpozitivele cu ecrane medii precum tabletele, folosim clasele de genul “col-md” pentur dispozitive cu ecrane mai mari ca tabletele (ex: desktop-uri cumonitoare nu foarte mari) si clasele de genul “col-lg-” pentru dispozitive cu display-uri foarte mari (monitoare foarte mari).

Layout pe 2 coloane

In acest exemplu am sa va arat cum puteti face un layout pe 2 coloane pentru toate tipurile de dispozitive, iar pe mobil coloanele se vor aseza una sub alta.

<div class=”container”>
	<div class=”row”>
		<div class=”col-sm-6”></div>
                <div class=”col-sm-6”></div>
</div>
</div>	

Layout pe 3 coloane

La fel ca si in cazul layout-ului pe 2 coloane, vom face un layout pe 3 coloane de aceasta data ce va fi afisat asa pe desktop si pe tablete in modul landscape (de fapt pe orice ecran cu o rezolutiemai mare sau egala cu 992px).

<div class=”container”>    
	<div class="row">
	        <div class="col-md-4"><!—Coloana stanga--></div>
	        <div class="col-md-4"><!--Coloana centru--></div>
	        <div class="col-md-4"><!—Coloana dreapta--></div>
       </div>
</div>

Layout flexibil in functie de viewport

Acum vom face un layout ceva mai flexibil, ce isi va schimba numarul de coloane in functie de viewport.In urmatorul exemplu facem un layout pe 3 coloane pe dispozitivele medii (laptop-uri/desktop-uri/tablete), iar pe mobil sau pe tablete in mod portrait vor fi 2 coloane, iar a 3-a coloana se va muta sub ele.

Offset

In bootstrap putem seta ca o coloana sa aiba un offset pentru a alinia o coloana.

Pentru offset putem folosi clase de genul “col-md—offset-” sau “col-sm-offset-”, etc.

Aceste clase de tip offset day un margin left coloanei pe care sunt setate de dimensiunea unei coloane de numarul setat. De exemplu, daca folosim “col-md-offset-4” pe o coloana de tip “col-md-8” va muta aceasta coloana mai in dreapta cu dimensiunea unei coloane de “col-md-4”.

<div class=”container”>    
	<div class="row">
	        <div class="col-md-8 col-md-offset-4"><!--Coloana care are offset--></div>
	    </div>
</div>

Diverse clase

Bootstrap ne pune la dispozitie urmatoarele clase pentru a ascunde anumite elemente pe diverse  rezolutii. Incepand cu Bootstrap 3.2 putem folosi clasa “.visible-xx-xx” pentru a afisa sau nu un element pe un anumit viewport.

  • .visible-xs-*  vizibil pe rezolutii mai mici de 768px
  • .visible-sm-* vizibil pe rezolutii intre 768px si 992px
  • .visible-md-* vizibil pe rezolutii intre 992px si 1200px
  • .visible-lg-* vizibil pe rezolutii mai mari de 1200px

In acelasi mod putem folosi si clasele “.hidden-xx-xx”

  • .hidden-xs-*  ascuns pe rezolutii mai mici de 768px
  • .hidden-sm-* ascuns pe rezolutii intre 768px si 992px
  • .hidden-md-* ascuns pe rezolutii intre 992px si 1200px
  • .hidden-lg-* ascuns pe rezolutii mai mari de 1200px
Sunt un tanar programator din Bucuresti ce lucreaza in PHP/Mysql (MySqli/PDO), Laravel, CodeIgniter, MySQL, PostgreSQL, Wordpress, HTML5/CSS3, Sass, Photoshop si multe altele.
Google+ Community Facebook Group