Despre Twitter Bootstrap

Twitter Bootstrap este un framework web creat de Mark Otto si Jacob Thornton. Acestia au fost angajati la Twitter si de aici vine si numele framework-ului. Este folosit pentru a crea site-uri.  Bootstrap este foarte important pentru noi, pentru ca sunt foarte multe teme WordPress construite cu aceasta unealta. Si temele altor sisteme de management sunt construite cu Bootstrap. 

Bootstrap poate fi descarcat de la https://getbootstrap.com/. Este un framework bazat pe tabele. La aceeasi adresa web poti sa citesti si documentatia, dar si alte informatii utile.

Sunt valabile trei versiuni:

  1. una pentru aplicatii;
  2. una pentru marketing;
  3. una pentru panouri de control.

Poti sa folosesti framework-ul fie doar pentru partea din fata a site-ului, partea pe care o viziteaza toata lumea, fie ca si o tema integrata cu un panou de control. Panoul poate fi al unei platforme de management al continutului sau unul creat separat. 

Bootstrap este perfect pentru landing page-uri. 

Bootstrap este gratuit si open source. Acesta foloseste un sistem de unelte si este in totalitate responsive. Este folosit pentru aplicatii si site-uri care au in codul sursa HTML, CSS si JavaScript. Este primul proiect de pe GitHub care se bucura de o asemenea popularitate si este folosit chiar si de cei de la NASA.

Functionalitati

Cu Bootstrap poti sa:

  • creezi design-uri;
  • folosesti randuri si coloane;
  • creezi elemente responsive;
  • stilizezi coloane;
  • folosesti campul de cautare;
  • ordonezi coloane si randuri;
  • stilizezi formulare;
  • creezi popup-uri;
  • creezi taburi;
  • creezi slidere;
  • folosesti carusele;
  • folosesti sistemul de firmituri;
  • folosesti paginatie cu butoane;
  • creezi campuri;
  • creezi miniaturi;
  • creezi liste;
  • creezi meniuri.

Instalare

Prima metoda

  1. Pentru inceput ar trebui sa te familiarizezi cu HTML. Poti folosi platforma https://www.w3schools.com, pentru a studia si cerceta tot ce este legat de HTML. Tot aici poti sa si practici.
  2. Creaza un fisier initial.html.
  3. Du-te la http://getbootstrap.com/getting-started/ de unde copiezi codul Bootstrap CDN in fisierul creat la pasul 2, in sectiunea head, iar codul Javascript in sectiunea body.
  4. Pentru libraria Jquery, trebuie sa mergi la http://jquery.com/download/ de unde copiezi link-ul ultimei librarii si il introduci in fisierul initial.html.

Folosind aceasta metoda, nu trebuie sa descarci Bootstrap complet. Ai nevoie doar de o conexiune la internet care sa trimita cereri catre serverele Jquery si Bootstrap pentru a primi scripturile CSS, Javascript si Jquery. Codul HTML il realizezi tu cum doresti in initial.html.

A doua metoda

  1. Descarca direct Bootstrap de la link-ul prezentat mai sus. Ai nevoie de pachetul intreg.  Vei vedea ca in directorul descarcat ai fisierele CSS si Javascript.
  2. Pentru a avea o tema de baza trebuie sa:
    1. creezi un fisier nou;
    2. sa copiezi codul de la Basic Template HTML de la http://getbootstrap.com/getting-started/;
    3. salveaza fisierul in radacina Bootstrap cu extensia .html

Daca rulezi aceasta tema, ar trebui sa vezi mesajul Hello, world. Asta inseamna ca ai instalat cu succes Bootstrap.

Chiar si in aceasta versiunea, ai mai multe cereri catre scripturi externe pe care poate mai bine le descarci pentru a scade viteza de incarcare a site-ului.

Urmeaza pasii:

  • Cauta si descarca scriptul html5shiv si respond;
  • extrage din arhiva directorul;
  • copiaza html5shiv.js si pune-l in radacina Bootstrap;
  • refa pasul anterior si pentru scriptul respond;
  • editeaza link-urile din fisierele pe care le ai astfel incat sa redirectioneze catre fisierele tocmai descarcate.

Sistemul de cadre

Containerul

Daca vrei sa inveti mai multe despre sistemul de cadre, deschide fisierul main.html. Ar trebuie sa existe un div cu clasa container. Inauntru, vei gasi un alt div unde poti sa scrii text si apoi sa vezi in browser modificarile. Pentru a edita fisierele foloseste Notepad++, iar pentru a urca fisierele pe gazduirea ta foloseste Filezilla.  Tocmai ai creat primul container.

La acest al doilea div, poti sa ii pui clasa „well” si apoi reincarca pagina din browser. Acum poti sa vezi noul efect.

Poti sa stilizezi mai mult acest div folosind:

  • extra clase sau fisierele CSS externe sau interne;
  • clasele Bootstrap.

Containerul este responsive in totalitate in mod automat, impreuna cu tot ceea ce crezi inauntrul sau.

Randuri

In fisierul main.html, intr-un div cu clasa „container” poti sa creezi elemente de tip div cu clasa „row”. Poti sa folosesti un element extra div caruia ii dai clasa „well”. Aceste randuri te ajuta sa structurezi continutul de pe site.

Coloane

Pentru coloane, trebuie sa creezi un div in div-ul cu clasa „row”. Foloseste, de exemplu, clasa „col-lg-6” pentru 6 celule. Poti crea un div cu clasa „well” si aici. Nu poti sa creezi coloane cu mai mult de 12 celule. Pentru a schimba numarul de celule, inlocuieste cifra 6 din clasa precedenta cu numarul dorit.

Daca creezi o a doua coloana, vei vedea design-ul coloanelor schimbat. Trebuie sa ai grija, pentru ca nu poti sa creezi mai mult de 12 coloane. Prin urmare, poti sa:

  • fie creezi 4 coloane, unde prima are 6 celule si restul cate 2 celule;
  • fie creezi 3 coloane cu cate 4 celule.

Cum sa controlezi cadrul

Intr-un div cu clasa „container”, urmeaza pasii de mai jos:

  • creaza un div cu clasa „row” ;
  • inauntrul sau, creaza un div cu clasa „col-lg-6”;
  • creaza inauntrul sau, un div cu clasa „well”;
  • multiplica div-ul coloana inca odata.

Mai departe, ar trebui  sa editezi clasa coloanelor unde „lg” vine de la large si „md” de la medium pentru a testa design-ul. Uita-te unde se afla breakpoint-ul. Breakpoint-ul este punctul unde coloanele tale se vor lati prea mult si se vor aseza una sub alta.

Pentru a testa acest concept, poti  sa schimbi dimensiunea ferestrei browser-ului tau folosind mouse-ul. Folosind  modificarile la clasa de tip large, extra small (xs), small (sm) sau medium, poti sa vezi diferentele. De asemenea, breakpoint-ul este dependent de numarul de coloane si celule.

Daca folosesti extra small pentru coloane, adica clasa „col-xs-3”, breakpoint-ul va fi inexistent.

Folosind acest concept, te poti juca sa vezi cum raspunde design-ul site-ului tau la diverse dispozitive. In plus, poti folosi o a alta clasa pentru coloane, pentru a testa design-ul, cum ar fi:

  • „col-md-3” pentru toate coloanele tale;
  • „col-xs-6” impreuna cu „col-md-3” pentru a vedea 4 coloane.

Daca creezi un div cu clasa „clearfix” dupa doua coloane, vei vedea ca spatiul dintre coloane dispare, dar in acelasi timp design-ul responsive are de suferit si trebuie sa adaugi mai multe clase pentru a repara asta. Clasele care te pot ajuta ar fi „hidden-md” si „hidden-lg”.

Daca vrei un spatiu intre doua coloane, ar trebui sa folosesti la a doua coloana clasa „col-md-offset-4”.

Chiar daca lucrurile par complicate, ar trebui sa stim cum au aparut unele teme WordPress. Cu Twitter Boostrap poti realiza foarte multe si rapid pagini web simple, mai ales daca stii bazele.

Bootstrap

Leave a Reply

Call Now ButtonSUNA