Bootstrap

Començant

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

Caps amunt! Aquests documents són per a la v2.3.2, que ja no és compatible oficialment. Fes una ullada a la darrera versió de Bootstrap!

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 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 JavaScript, 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 / ├── glyphicons - halflings . png
       └── glificons - halflings - blanc . png

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.

Tingueu en compte que tots els connectors de JavaScript requereixen que s'inclogui jQuery.

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 a 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. <!DOCTYPE html>
  2. <html>
  3.   <cap>
  4.     <title> Plantilla Bootstrap 101 </title>
  5.     <meta name = "viewport" content = "width=device-width, initial-scale=1.0" >  
  6.   </cap>
  7.   <cos>
  8.     <h1> Hola, món! </h1>
  9.     <script src = "https://code.jquery.com/jquery.js" ></script> 
  10.   </cos>
  11. </html>

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

  1. <!DOCTYPE html>
  2. <html>
  3.   <cap>
  4.     <title> Plantilla Bootstrap 101 </title>
  5.     <meta name = "viewport" content = "width=device-width, initial-scale=1.0" >  
  6.     <!-- Bootstrap -->
  7.     <link href = "css/bootstrap.min.css" rel = "stylesheet" media = "pantalla" >   
  8.   </cap>
  9.   <cos>
  10.     <h1> Hola, món! </h1>
  11.     <script src = "https://code.jquery.com/jquery.js" ></script> 
  12.     <script src = "js/bootstrap.min.js" ></script> 
  13.   </cos>
  14. </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.

  • Plantilla d'inici

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

  • 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.

  • Màrqueting estret

    Plantilla de màrqueting fina i lleugera per a projectes o equips petits.

  • Navegació justificada

    Pàgina de màrqueting amb enllaços de navegació d'amplada igual en una barra de navegació modificada.

  • Inicia sessió

    Formulari d'inici de sessió de Barebones amb controls de formulari personalitzats i més grans i un disseny flexible.

  • Peu de pàgina enganxós

    Fixeu un peu de pàgina d'alçada fixa a la part inferior de la finestra gràfica de l'usuari.

  • Carrusel jumbotron

    Un riff més interactiu al lloc de màrqueting bàsic amb un carrusel destacat.

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