Skip to content

Aștern cuvinte deștepte

Despre una, despre alta.

Bootstrap

Sistemul de grid bootstrap

Posted on 16/11/201406/02/2016 By claudiu No Comments on Sistemul de grid bootstrap

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>
Pentru Webmasteri, Programare Tags:bootstrap, css, html, javascript

Post navigation

Previous Post: Rugaciunea serii
Next Post: Oferte black friday 2014 la F64

Related Posts

QR Code Ce este un cod QR si cum poti sa generezi unul Pentru Webmasteri
Domenii personalizate. Adio.com Domenii personalizate de internet Pentru Webmasteri
Bootstrap de la twitter Bootstrap Pentru Webmasteri
Construieste corect o pagina web Cum sa creezi corect o pagina web din punct de vedere semantic Pentru Webmasteri
Introducere in Bootstrap Primul pas cu bootstrap Pentru Webmasteri
Write less, do more Cum sa adaugi jQuery la site-ul tau Pentru Webmasteri

Leave a Reply Cancel 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.

Recent Comments

  • anonim on UEFA Champions League 2014 – 2015, colectia online
  • anonim on UEFA Champions League 2014 – 2015, colectia online
  • anonim on UEFA Champions League 2014 – 2015, colectia online
  • anonim on UEFA Champions League 2014 – 2015, colectia online
  • anonim on UEFA Champions League 2014 – 2015, colectia online

Categories

Pages

  • Colectii de carti
    • Psihologie Practica – Editura Trei
  • Despre blog
    • Ce postez pe blog?
  • Sport
    • EURO 2016
      • Componenta Grupelor si rezultate
      • Lotul Romaniei
      • Situatia Cartonaselor
    • Europa League 2014
    • Tenis – Singapore 2014

Archives

Tags

2014 abilitate adezive alegeri prezidentiale angajare bootstrap cariere colinde comunicare css de sarbatori de vizitat divertisment euro 2016 f64 FOTBAL guma turbo html interviu intrebari javascript liga 1 romania nu ma lua in seama oferte foto olanda panini parc poze-guma-turbo-2014 preliminarii cm2014 restante romania simona halep simona halep 2015 steaua bucuresti sticker-e succes TENIS tenis 2014 tenis 2015 the-west ucl ucl 2013 2014 uefa cl urari de anul nou wta-finals

Copyright © 2025 Aștern cuvinte deștepte.

Powered by PressBook Grid Blogs theme