Twitter Bootstrap: un dar pentru webmasteri


Despre Twitter sigur aţi auzit. Dar despre Twitter Bootstrap? Probabil mulţi – webmasterii în special – au auzit, dar poate nu toţi, aşa că haideţi să vedem despre ce este vorba. Cândva prin august 2011 doi angajaţi de la Twitter lansau prima versiune a acestei colecţii de instrumente pentru webmasteri, colecţie dezvoltată desigur mult înainte, ca instrument intern, căutându-se o uniformizare a elementelor de interfaţă. Cu alte cuvinte au luat ceva de la ei şi au dăruit lumii webmasterilor. Şi ce cadou minunat!

imagine

Ce permite pe scurt această colecţie de instrumente? Să porneşti mult mai rapid o webaplicaţie. Dacă veţi studia meniul din pagina proiectului veţi vedea tot felul de ingrediente pentru paginile web care sunt oferite de-a gata, folosirea lor fiind o bagatelă. Aţi dorit formulare care să arate bine? Butoane, taburi, ferestre? Organizarea pe coloană uşoară? Toate acestea şi multe altele sunt oferite de Bootstrap. Nu e de mirare că pe Github este cel mai popular proiect. Foarte mulţi webmasteri îl folosesc în proiectele lor. De ce nu şi Dvs?

imagine

La descărcare se poate lua totul sau – dacă ţineţi să aveţi fişierele la minim ca greutate – se poate “împacheta” o versiune personalizată, optând doar pentru ceea ce folosiţi din toate instrumentele colecţiei. Oricum ar fi, vom avea trei foldere: CSS, IMG şi JS, iar numele ne dau o idee despre ce conţin. În folderele CSS şi JS avem câte un fişier, dar şi în versiune minimizată şi normală. În fişierul imagini avem iconiţele oferite de Glyphicons, care ne permit să decorăm butoanele de exemplu.

Şi ca să avem şi ceva concret, vă propun un schelet simplu care totuşi face ceva: foloseşte structura de grid oferită de Bootstrap. Detalii în documentaţie, dar câteva cuvinte voi spune: se merge pe 12 coloane, pe care le putem folosi cu flexibilitate.  În codul de mai jos vedeţi că folosim primele 3 pentru o bară laterală, în stânga, iar celelalte 9 pentru conţinutul principal. Iar în conţinutul principal, la finalul, mai folosim o structură de trei coloane, fiecare de 3 (pentru că, da, 3×3 face 9). Mai jos vedeţi codul simplificat – care vă arată şi structura generală a unei pagini cu Twitter Bootstrap – dar dacă mergeţi aici veţi vedea codul cu text de umplutură, mai elocvent vizual (dar şi codul în sine).

Înainte să închei aş mai spune ceva: Twitter Bootstrap, nu chiar magic (trebuie să umbli în cod să indici explicit unele clase) permite şi layout-uri responsive, ceea ce îl face ideal pentru webaplicaţii care vrem să ruleze bine şi pe desktop şi pe tabletă şi pe telefon…

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Test cu Twitter Bootstrap</title>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
</head>
<body>
<div class="container">
    <div class="row" style="background-color: #cccccc;">
        <div class="span12">
            Antet
            <div class="row" style="background-color: #aaaaaa;">
                <div class="span3"  style="background-color: #999999;">Coloana stânga</div>
                <div class="span9" style="background-color: #888888;">
                    Textul principal
                    <div class="row" style="background-color: #aaaaaa;">
                        <div class="span3"  style="background-color: #999999;">Subcoloana 1</div>
                        <div class="span3"  style="background-color: #999999;">Subcoloana 2</div>
                        <div class="span3"  style="background-color: #999999;">Subcoloana 3</div>
                    </div>
                </div>
            </div>
            Subsol
        </div>
    </div>
</div>
</body>
</html>


Apreciază articolul:

1 stea2 stea3 stea4 stea5 stea (5 evaluări, media: 5,00 din 5)
Loading...Loading...

5 comentarii

  1. ValsiS spune:

    Il folosesc de la inceputul lui 2012. Foarte foarte util si practic in mai toate proiectele pe care le-am avut… Felicitari pentru articol.

    Am observat ca ai facut cateva articole pentru aplicatii mobile bazate pe HTML5/JS… Ar fi foarte interesant daca ai lua in calcul sa ne arati cum am putea folosi si PHP in acele aplicatii… Cum pot folosi acele aplicatii „API” de pe anumite site-uri/json output facut prin php… *(cu sau fara ajutorul librariei jQuery Mobile).

  2. radu.capan spune:

    Mulţumesc mult pentru resursa indicată în comentariul al doilea.
    Legat de dezvoltarea de aplicaţii mobile folosind PHP aş vrea să înţeleg mai bine:
    – folosirea PHP-ului pentru a genera un pachet HTML (pentru webaplicaţii HTML împachetate ca aplicaţii mobile) sau
    – folosirea PHP-ului pentru a genera aplicaţii native pentru mobile; ceva gen Zend Studio, versiunea 10 încă în beta, ce permite să scrii aplicaţii native ştiind PHP
    http://www.zend.com/en/products/studio/studio-10-beta
    La care anume te gândeai?

  3. ValsiS spune:

    Ma bucur,

    Lucrez la un proiect la care trebuie sa folosesc API de la Salesforce impreuna cu login-ul de la Boonex.
    Pentru a extrage acele date am nevoie de PHP *( merge si cu java :( dar nu stiu ).
    Folosesc jQuery Mobile si alte librarii js + fisiere css .
    De aceea mi se pare ca se incarca destul de greu aplicatia. *(eu ii zic aplicatie pentru ca am integrat site-ul intr-o aplicatie mobile de la Boonex.)

    Exista vreo posibilitate sa pun fisierele js/xml/css in acea aplicatie, iar cand aplicatia porneste si acceseze de pe server doar fisierele php ?

    Sper ca ai inteles ceva din ceea ce am zis,

  4. lemonthirst spune:

    Ce pot spune este ca, arata bine! Ma amuzat un pic partea de la sfarsit cu „nu chiar magic”, nimic nu este usor :).
    Referito la bootstrap in sine inca nu ma vad folosindu-l in vreo tema, imi pare destul de mare bataia de cap pentru cateva lucruri in plus. Cred ca ar mai trebui luat in considerare ca majoritatea temelor au incluse deja incluse foarte multe functii similare.
    Ramane de vazut, doar in cazul in care voi incepe de la zero un template imi pare o solutie destul de buna.


Lasă un răspuns

Adresa ta de email nu va fi publicată. Câmpurile necesare sunt marcate *