Twitter Bootstrap 101 Introducere

Bootstrap-ul Twitter este un set excelent de elemente de interfață cu utilizatori atent proiectate, layout-uri și instrumente de javascript, disponibile gratuit pentru a fi utilizate în următorul proiect de web design. Această serie video urmărește să vă prezinte Bootstrap; luându-vă tot drumul de la descărcarea resurselor, la construirea unui website complet bazat pe Bootstrap.

Când Mark Otto (@mdo) și Jacob Thornton (@fat) au lansat Twitter Bootstrap către lume în august 2011, anunțul lor a explicat care ar fi valoarea sa: împuternicirea dezvoltatorilor din front-end să lanseze proiecte mai eficient și mai eficient.

Foaia de stil Bootstrap oferă o rețea 960 ușor de implementat pentru un aspect eficient, precum și stiluri special create pentru tipografie, navigație, tabele, formulare, butoane și multe altele. Pentru a avea grijă de atingerile JavaScript de zi cu zi, Bootstrap oferă un set bine construit de pluginuri jQuery pentru meniurile drop-down, tab-uri, casete modale, tooltips, mesaje de alertă și multe altele.

Împreună, aceste elemente de interfață oferă toate capabilitățile unui website HTML5 construit profesional, ușor de utilizat, construit conform standardelor. Ca @mdo a pus-o în postul inițial:

Bootstrap este o modalitate foarte simplă de a promova aplicații rapide, curate și extrem de utilizabile ... oferind o soluție curată și uniformă celor mai frecvente sarcini de interfață de zi cu zi pe care dezvoltatorii le întâlnesc.

Și totuși, nimic din ele nu împiedică personalizarea. Din nou, în cuvintele lui @mdo, în timp ce Twitter Bootstrap "este foarte extins", rămâne totuși "suficient de flexibil pentru a lucra pentru multe nevoi de design unice". Prin urmare,

Puteți utiliza Bootstrap pentru a arunca împreună prototipuri rapide sau pentru a ghida execuția unor modele mai sofisticate și eforturi mai mari de inginerie.

Termenii liberali de licențiere, în baza licenței Apache 2.0, oferă o mare libertate creativă. Atâta timp cât îi dai pe cei buni la Twitter datorită muncii lor, ești liber să iei, să optimizezi și să personalizezi totul pentru a-ți însuși conținutul, apoi să te întorci și să lansezi site-ul pentru tine sau pentru un client gratuit sau pentru profit. (Pentru citirea ulterioară, verificați acest subiect de discuție, unde cei de la Twitter au explicat cum să rămână în conformitate cu licența în timp ce personalizați codul.)

Având în vedere valoarea evidentă a ceea ce oferă și termenii liberali ai licenței sale, nu este de mirare că atât de mulți dezvoltatori au început să profite din plin de aceasta. Site-ul Tumblr, "Construit cu Bootstrap", a documentat un număr de site-uri construite de Bootstrap, printre care:

  • CodeAcademy.com
  • CodeCards.com
  • Codesprint
  • Magazinul de biciclete Hub
  • Concerte în Clearing
  • Și chiar noul site al lui MSNBC: BreakingNews.com

În toate aceste exemple, veți observa o rețea curată și o interfață care implică profesionalism. De asemenea, veți observa o mare varietate de detalii. Și s-ar putea să fiți lovit de faptul că dezvoltatorii de la echipamente respectate cum ar fi Code Academy și MSNBC au optat să construiască cu Bootstrap.

Dacă ești ceva de genul meu, vei fi foarte tentat să-l verifici singur - și ar trebui!

De fapt, am verificat-o recent. Lasă-mă să te arăt în jur.

În cele două videoclipuri scurte de mai jos, vă prezint baza de pornire a Twitter Bootstrap, vă umblu prin descărcarea codului, după care o vom deschide și vom începe să organizăm lucruri pentru a pregăti propriul nostru site Bootstrap.


Obțineți codul

  • Du-te la Twitter Bootstrap Homepage
  • Descărcați Bootstrap v. 1.4.0 (folosit în acest tutorial)

Video 1: Introducere

Alternativ, descărcați videoclipul sau abonați la programele Webdesigntuts + prin intermediul iTunes!

Pașii vizați în acest videoclip:

  1. Vizitați pagina de pornire Bootstrap a documentației online
  2. Vedeți câteva site-uri construite cu Bootstrap
  3. Descărcați codul de la Github
  4. Dezarhivează-l

Videoclipul 2: Despachetați și organizați

Alternativ, descărcați videoclipul sau abonați la programele Webdesigntuts + prin intermediul iTunes!

Pașii vizați în acest videoclip:

Vom face următoarele, dar nu exact în această ordine:

  1. Organizați CSS
  2. Organizați JavaScript
  3. Îndepărtați fișierele care nu sunt necesare (salvând mai puțin pentru o altă zi)
  4. Păstrați fișierul de licență Apache 2.0, conform cerințelor termenilor de licențiere ai Twitter Bootstrap
  5. Pregătiți-vă să dezvoltați propriul site construit de Bootstrap

Pasii urmatori?

În tutorialele viitoare, vă voi trece prin caracteristicile principale ale Bootstrap și vă voi ajuta să utilizați Bootstrap pentru a vă crea propriul depozit personalizat de fragmente Bootstrap. În acest sens, vom cunoaște Bootstrap, vom câștiga experiență folosind-o și vom personaliza și vom pregăti să lucrăm cu o eficiență și mai mare asupra viitoarelor noastre proiecte construite de Bootstrap.