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, reusesc sa inteleg si ce este …

Bootstrap este folosit in paginile web (pentru exemplificare voi alege cel mai populat tip de pagina web, HTML), si primul pas pentru a-l folosi este sa descarci foaia de stil bootstrap. In continuare, un link catre aceasta trebuie inclus in pagina ta HTML. Cel mai usor este sa incluzi link-ul dintr-un CDN:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">

Aceasta abordare poate aduce si un plus de viteza site-ului tau. Si anume, daca un alt site care include aceelasi fisier a fost incarcat in browser-ul vizitatorului, atunci fisierul bootstrap este deja in cache-ul browser-ului.

Pentru ca bootstrap foloseste HTML 5, pagina ta trebuie sa inceapa cu declaratia de document HTML 5:

<!DOCTYPE html>

Pagina ta trebuie sa se afle intr-un div ce contine atributul class cu valoarea container (daca pagina ta are o lungime fixa) sau container-fluid (daca vrei ca pagina ta sa ocupa intreaga lungime a ecranului).

Introducerea etichetei viewport este deasemenea recomandata, in special daca este folosit div-ul container-fluid:

<meta name="viewport" content="width=device-width, initial-scale=1">

Acestea fiind spune, o pagina bootstrap ar trebui sa arate asa:

<!DOCTYPE html>
<html>
<head>
    <title>A bootstrap example</title>
    
	<link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
</head>
 
<body>
	<div class="container">
	
	</div>  
</body>
</html>

Cateva elemente bootstrap :

<h1>In boootstrap tag-ul h1 are 36 pixeli</h1>
<h2>In boootstrap tag-ul h2 are 32 pixeli</h2>
<h3>In boootstrap tag-ul h3 are 24 pixeli</h3>
<h4>In boootstrap tag-ul h4 are 18 pixeli</h4>
<h5>In boootstrap tag-ul h5 are 14 pixeli</h5>
<h6>In boootstrap tag-ul h6 are 12 pixeli</h6>

Fiecare element din HTML are un stil predefinit in bootstrap. Printre cele mai interesante as alege abbr, kbd si mark. Testeaza-l pe fiecare.

Similalare

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

Add a Comment

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