Bootstrap

Començant

Visió general del projecte, el seu contingut i com començar amb una plantilla senzilla.

1. Descarregar

Abans de descarregar, assegureu-vos de tenir un editor de codi (recomanem Sublime Text 2 ) i alguns coneixements d'HTML i CSS. No repassarem els fitxers font aquí, però estan disponibles per a la seva baixada. Ens centrarem a començar amb els nostres fitxers Bootstrap compilats.

Descàrrega compilada

La manera més ràpida de començar: obteniu les versions compilades i minificades dels nostres CSS, JS i imatges. No hi ha documents ni fitxers font originals.

Descarrega Bootstrap

Font de descàrrega

Obteniu els fitxers originals per a tots els CSS i Javasript, juntament amb una còpia local dels documents, baixant la versió més recent directament des de GitHub.

Baixeu la font Bootstrap

2. Estructura de fitxers

Dins de la descàrrega, trobareu l'estructura i el contingut de fitxers següents, agrupant lògicament els actius comuns i proporcionant variacions tant compilades com minimitzades.

Un cop descarregat, descomprimiu la carpeta comprimida per veure l'estructura de (el compilat) Bootstrap. Veureu alguna cosa com això:

  bootstrap / ├── css / │ ├── bootstrap . css
   │ ├── bootstrap . min . css
   ├── js / │ ├── bootstrap . js
   │ ├── bootstrap . min . js
   ├── img / │ ├── glificons - halflings . png
   │ ├── glificons - halflings - blanc . png
  
  
        
        
        └── LLEGIUME . md

Aquesta és la forma més bàsica de Bootstrap: fitxers compilats per a un ús ràpid en gairebé qualsevol projecte web. Oferim CSS i JS compilats ( bootstrap.*), així com CSS i JS compilats i minificats ( bootstrap.min.*). Els fitxers d'imatge es comprimeixen mitjançant ImageOptim , una aplicació per a Mac per comprimir PNG.

3. Què inclou

Bootstrap ve equipat amb HTML, CSS i JS per a tot tipus de coses, però es poden resumir amb un grapat de categories visibles a la part superior de la documentació de Bootstrap .

Seccions de documents

Bastida

Estils globals per al cos per restablir el tipus i el fons, estils d'enllaç, sistema de quadrícula i dos dissenys senzills.

CSS base

Estils per a elements HTML habituals com la tipografia, el codi, les taules, els formularis i els botons. També inclou Glyphicons , un petit conjunt d'icones fantàstic.

Components

Estils bàsics per a components d'interfície habituals, com ara pestanyes i píndoles, barra de navegació, alertes, capçaleres de pàgines i molt més.

Connectors de Javascript

De manera semblant a Components, aquests connectors de Javascript són components interactius per a coses com ara informació sobre eines, popovers, modals i molt més.

Llista de components

En conjunt, les seccions Components i complements de Javascript proporcionen els elements d'interfície següents:

  • Grups de botons
  • Botons desplegables
  • Pestanyes de navegació, píndoles i llistes
  • Barra de navegació
  • Etiquetes
  • Insígnies
  • Capçaleres de pàgina i unitat d'heroi
  • Miniatures
  • Alertes
  • Barres de progrés
  • Modals
  • Desplegables
  • Consells d'eines
  • Popovers
  • Acordió
  • Carrusel
  • Endavant

En guies futures, podem recórrer aquests components individualment amb més detall. Fins aleshores, cerqueu cadascun d'ells a la documentació per obtenir informació sobre com utilitzar-los i personalitzar-los.

4. Plantilla HTML bàsica

Amb una breu introducció al contingut fora del camí, podem centrar-nos en utilitzar Bootstrap. Per fer-ho, utilitzarem una plantilla HTML bàsica que inclou tot el que hem esmentat a l' estructura de fitxers .

Ara, aquí teniu una ullada a un fitxer HTML típic :

  1. <html>
  2.   <cap>
  3.     <title> Plantilla Bootstrap 101 </title>
  4.   </cap>
  5.   <cos>
  6.     <h1> Hola, món! </h1>
  7.   </cos>
  8. </html>

Per convertir-la en una plantilla Bootstrapped , només cal incloure els fitxers CSS i JS adequats:

  1. <html>
  2.   <cap>
  3.     <title> Plantilla Bootstrap 101 </title>
  4.     <!-- Bootstrap -->
  5.     <link href = "css/bootstrap.min.css" rel = "full d'estil" >  
  6.   </cap>
  7.   <cos>
  8.     <h1> Hola, món! </h1>
  9.     <script src = "js/bootstrap.min.js" ></script> 
  10.   </cos>
  11. </html>

I ja estàs! Amb aquests dos fitxers afegits, podeu començar a desenvolupar qualsevol lloc o aplicació amb Bootstrap.

5. Exemples

Aneu més enllà de la plantilla base amb uns quants exemples de dissenys. Animem la gent a repetir aquests exemples i no simplement utilitzar-los com a resultat final.

  • Lloc de màrqueting bàsic

    Amb una unitat d'heroi per a un missatge principal i tres elements de suport.

  • Distribució de fluids

    Utilitza el nostre nou sistema de graella fluid i sensible per crear un disseny líquid perfecte.

  • Plantilla d'inici

    Un document HTML senzill amb tot el CSS Bootstrap i javascript inclosos.

Què després?

Dirigiu-vos als documents per obtenir informació, exemples i fragments de codi, o feu el següent salt i personalitzeu Bootstrap per a qualsevol projecte proper.

Visiteu els documents de Bootstrap Personalitza Bootstrap