Sistemul de grid bootstrap

Bootstrap
Pentru Webmasteri

Grid, este un cuvant care nustiu cum s-ar traduce in limba romana. Ar putea fi tradus prin retea, grila, gratar, insa niciuna dintre aceste traduceri nu-si are locul in web. Probabil tabel ar fi celmai potrivit. Si oricum ar fi, voi continua sa folosesc cuvantul grid.

In web, grid-ul este folosit pentru a proiecta si structura continutul unei pagini web. El este defapt o “structura”, compusa din linii orizontale si verticale (il puteti privi ca pe un tabel), care este utilizata pentru a structura continut. Folosind aceasta tehnica, bootstrap creaza un layout eficient folosing HTML si CSS.

Sistemul de grid din bootstrap este structurat pe 12 coloane. El este mobile-first si responsive. Aceasta inseamna ca atunci cand pagina web este vizualizata pe ecrane cu dimensiuni diferite, coloanele “se vor re-aranja de unele singure”.

Cateva reguli :

  1. Pentru ca vorbim de bootstrap, gridul trebuie sa se gaseasca intr-un div cu atributul class = container sau container-fluid;
  2. In interiorul acestui div, va fi plasat in alt div cu atributul class = row;
  3. In interiorul acestui div, vor fi plasate div-uri cu atributul class = col-sm-x sau col-md-x. Unde x este un numar cuprins intre 1 si 12. Suma numerelor x trebuie sa fie 12 (12 coloane are grid-ul de bootstrap).
<!DOCTYPE html>
<html>
<head>
    <title>A simple bootstrap grid example</title>
    
    <meta charset="utf-8">
  	<meta name="viewport" content="width=device-width, initial-scale=1">
    
    <!-- add the Bootstrap CDN and a link to jQuery. See the last imported script -->
	<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
 
<body>
	<div class="container">
		<div class="row">
		    <div class="col-md-3">
		      	<p>This example creates a three-column layout where the column in the middle is wider than the first and last column.</p>
		    </div>
		    <div class="col-md-6"> 
		      	<p>This is the second column. It has class = col-md-6</p>
		      	<p>This is a new paragraph in the second column.</p>
		    </div>
		    <div class="col-md-3"> 
		      	<p>Notice how the three column has an x = 3 + 6 + 3. A total of 12 grid columns.</p>
		    </div>
	  	</div>
 	</div>
	
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  	<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 
</body>
</html>
Spread the love
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
No Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Construieste corect o pagina web
Pentru Webmasteri
3
Cum sa creezi corect o pagina web din punct de vedere semantic

In calatorii, cand esti pierdut, sa ai harta la tine ajuta mereu. Acest lucru este valabil in general, chiar si atunci cand scrii o pagina web. Ma gandesc cum ar trebui sa arate aceasta din punct de vedere SEO si incerc in continuare sa fac o lista a celor mai …

Spread the love
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
Introducere in Bootstrap
Pentru Webmasteri
Primul pas cu bootstrap

Nustiu cat de coerent am fost in primul post despre bootstrap, si cat de bine am definit ce este bootstrap. Asta pentru ca nici eu nu am inteles foarte bine ce este, dar asta nu ma impiedica sa lucrez cu el. Intai vreau sa inteleg cum functioneaza, dupa care, poate, …

Spread the love
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
Bootstrap de la twitter
Pentru Webmasteri
1
Bootstrap

La momentul scrierii articolului, bootstrap este cel mai popular framework HTML, CSS si JavaScript pentru dezvoltarea site-urilor si a aplicatiilor web. Totodata poate fi folosit pentru a dezvolta interfete web responsive. Initial, Bootstrap a fost dezoltat de Mark Otto si Jacob Thornton pentru Twitter. Scopul a fost acela de a pastra o …

Spread the love
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •