Category Archives: Programare

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>
Published by:

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.

Published by:

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 anume consistenta in cadrul aplicatiilor interne. Cu timpul, ei (impreuna cu ceilalti colegi ai echipei) au dezoltat ceva mai bun pentru a folosi in cadrul companiei, iar in august 2010, Twitter a lansat Bootstrap ca proiect open-source.

Bootstrap poate fi descarcat de pe site-ul getbootstrap.com, iar probabil cel mai bun tutorial pentru incepatori este cel de pe w3schools.

Bootstrap a ajuns acum la versiunea 3.3 si este compatibil cu ultimele versiuni ale celor mai importante browser-e.

Ce trebuie sa stii pentru a lucra cu bootstrap ?

Clasicele … HTML/HTML 5,  CSS/CSS3 si Java Script.

Published by:

Cum sa adaugi jQuery la site-ul tau

Ma plictisesc, atat de tare incat week-end-ul asta m-am apucat sa invat jQuery. Pentru aceasta, in perioada urmatoare mai multe tutoriale si articole despre jQuery (si java script) vor aparea pe blog.

Pentru inceput voi atinge urmatoarele doua puncte:

  • Ce este jQuery;
  • Cum sa adaugi jQuery la site-ul tau.

Se spune ca pentru a invata jQuery trebuie sa stii HTML, CSS si Java Script. HTML am invatat in urma cu 10 ani, in perioada liceului si putin in facultate, iar cu CSS ma descurc. Sper sa mearga si fara JavaScript.

Definitie: jQuery este o librarie JavaScript care simplifica programarea in JavaScript. In alta ordine de idei, jQuery “incapsuleaza” task-urile comune din JavaScript, si astfel scrii mai putine linii de cod pentru ele.

Cum adaugi jQuery la site-ul tau ?

Pentru a adauga si folosi jQuery in site-ul tau exista doua modalitati:

  1. download-ezi jQuery de pe jQuery.com;
  2. adaugi jQuery dintr-un Content Develivery Network (CDN) cum ar fi google cdn. Pentru asta adaugi urmatoarea linie intre tag-urile head :

<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js”></script>

Avantajul evident al celei de-a doua abordari este “rapiditatea” prin care jQuery este adaugat site-ului tau. Pe langa acesta, un avantaj “mai practic” exista: majoritatea utilizatorilor de internet au vizitat google (astfel jquery exista in cache). jQuery va fi incarcat din cache, rezultand intr-o incarcare mai rapida a site-ului tau.

Acum poti folosi jQuery in site-ul tau. Success!

Published by: