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 :
- Pentru ca vorbim de bootstrap, gridul trebuie sa se gaseasca intr-un div cu atributul class = container sau container-fluid;
- In interiorul acestui div, va fi plasat in alt div cu atributul class = row;
- 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>
