Grid system

postat acum 3 ani 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

Comentariu postate de minecraft free download pc la data de 14.05.2019
Hi! This is kind of off topic but I need some help from an established blog. Is it difficult to set up your own blog? I'm not very techincal but I can figure things out pretty fast. I'm thinking about making my own but I'm not sure where to begin. Do you have any tips or suggestions? Thanks
Comentariu postate de mojang minecraft download la data de 15.05.2019
You really make it seem so easy with your presentation but I find this matter to be really something which I think I would never understand. It seems too complex and very broad for me. I am looking forward for your next post, I'll try to get the hang of it!
Comentariu postate de minecraft free download pc la data de 15.05.2019
Wow, this piece of writing is nice, my sister is analyzing these kinds of things, therefore I am going to convey her.
Comentariu postate de download minecraft for free la data de 17.05.2019
Thanks for finally writing about >Grid system - Invata-Programare : Tutoriale gratuite de PHP, HTML5, CSS3, jQuery si multe altele - Tutoriale gratuite de PHP, HTML5, CSS, JavaScript, jQuery, Java, C++, Python si mutle aletele