Bootstrap

Noțiuni de bază

Prezentare generală a proiectului, conținutul acestuia și cum să începeți cu un șablon simplu.

1. Descărcați

Înainte de a descărca, asigurați-vă că aveți un editor de cod (recomandăm Sublime Text 2 ) și câteva cunoștințe de lucru despre HTML și CSS. Nu vom parcurge fișierele sursă aici, dar sunt disponibile pentru descărcare. Ne vom concentra pe începerea cu fișierele noastre Bootstrap compilate.

Descărcare compilată

Cel mai rapid mod de a începe: obțineți versiunile compilate și reduse ale CSS, JS și imaginilor noastre. Fără documente sau fișiere sursă originale.

Descărcați Bootstrap

Sursa de descărcare

Obțineți fișierele originale pentru toate CSS și Javasript, împreună cu o copie locală a documentelor, descărcând cea mai recentă versiune direct de pe GitHub.

Descărcați sursa Bootstrap

2. Structura fișierului

În cadrul descărcării, veți găsi următoarea structură și conținut de fișiere, grupând în mod logic activele comune și oferind atât variante compilate, cât și minimizate.

Odată descărcat, dezarhivați folderul comprimat pentru a vedea structura Bootstrap (compilat). Veți vedea ceva de genul acesta:

  bootstrap / ├── css / │ ├── bootstrap . css
   │ ├── bootstrap . min . css
   ├── js / │ ├── bootstrap . js
   │ ├── bootstrap . min . js
   ├── img / │ ├── glificonuri - halflings . png
   │ ├── glificonuri - halflings - alb . png
  
  
        
        
        └── CITEȘTE- MĂ . md

Aceasta este cea mai de bază formă de Bootstrap: fișiere compilate pentru utilizare rapidă în aproape orice proiect web. Oferim CSS și JS compilate ( bootstrap.*), precum și CSS și JS ( bootstrap.min.*) compilate și minimizate. Fișierele imagine sunt comprimate folosind ImageOptim , o aplicație pentru Mac pentru comprimarea PNG-urilor.

3. Ce este inclus

Bootstrap este echipat cu HTML, CSS și JS pentru tot felul de lucruri, dar pot fi rezumate cu câteva categorii vizibile în partea de sus a documentației Bootstrap .

Secțiunile de documente

Schele

Stiluri globale pentru corp pentru a reseta tipul și fundalul, stilurile de link, sistemul de grilă și două aspecte simple.

CSS de bază

Stiluri pentru elemente HTML comune, cum ar fi tipografie, cod, tabele, formulare și butoane. Include , de asemenea, Glyphicons , un mic set de pictograme grozav.

Componente

Stiluri de bază pentru componentele comune ale interfeței, cum ar fi file și pastile, bara de navigare, alerte, anteturi de pagină și multe altele.

Pluginuri Javascript

Similar cu Componentele, aceste plugin-uri Javascript sunt componente interactive pentru lucruri precum sfaturi cu instrumente, popovers, modali și multe altele.

Lista componentelor

Împreună, secțiunile Componente și pluginuri Javascript oferă următoarele elemente de interfață:

  • Grupuri de butoane
  • Butoane derulante
  • File de navigare, pastile și liste
  • Bara de navigare
  • Etichete
  • Ecusoane
  • Antetele paginii și unitatea eroului
  • Miniaturi
  • Alerte
  • Bare de progres
  • Modale
  • Mențiuni derulante
  • Sfaturi instrumente
  • Popovers
  • Acordeon
  • Carusel
  • Tastați înainte

În ghidurile viitoare, putem parcurge aceste componente individual, mai detaliat. Până atunci, căutați fiecare dintre acestea în documentație pentru informații despre cum să le utilizați și să le personalizați.

4. Șablon HTML de bază

Cu o scurtă introducere în conținut, ne putem concentra pe utilizarea Bootstrap. Pentru a face asta, vom folosi un șablon HTML de bază care include tot ceea ce am menționat în Structura fișierului .

Acum, iată o privire la un fișier HTML tipic :

  1. <html>
  2.   <cap>
  3.     <title> Șablon Bootstrap 101 </title>
  4.   </cap>
  5.   <corp>
  6.     <h1> Bună, lume! </h1>
  7.   </corp>
  8. </html>

Pentru a face din acesta un șablon Bootstrapped , trebuie doar să includeți fișierele CSS și JS corespunzătoare:

  1. <html>
  2.   <cap>
  3.     <title> Șablon Bootstrap 101 </title>
  4.     <!-- Bootstrap -->
  5.     <link href = "css/bootstrap.min.css" rel = "foaia de stil" >  
  6.   </cap>
  7.   <corp>
  8.     <h1> Bună, lume! </h1>
  9.     <script src = "js/bootstrap.min.js" ></script> 
  10.   </corp>
  11. </html>

Și ești gata! Cu aceste două fișiere adăugate, puteți începe să dezvoltați orice site sau aplicație cu Bootstrap.

5. Exemple

Treceți dincolo de șablonul de bază cu câteva exemple de machete. Îi încurajăm pe oameni să repete aceste exemple și să nu le folosească pur și simplu ca rezultat final.

  • Site de marketing de bază

    Dispunând de o unitate de erou pentru un mesaj principal și trei elemente de susținere.

  • Dispunerea fluidului

    Utilizează noul nostru sistem de rețea fluid și receptiv pentru a crea un aspect lichid perfect.

  • Șablon de pornire

    Un document HTML simplu cu toate CSS Bootstrap și Javascript incluse.

Ce urmează?

Accesați documentele pentru informații, exemple și fragmente de cod sau faceți următorul salt și personalizați Bootstrap pentru orice proiect viitor.

Vizitați documentele Bootstrap Personalizați Bootstrap