Bastida

Bootstrap es basa en una graella sensible de 12 columnes. També hem inclòs dissenys d'amplada fixa i fluida basats en aquest sistema.

Requereix un tipus de document HTML5

Bootstrap fa ús d'elements HTML i propietats CSS que requereixen l'ús del tipus de document HTML5. Assegureu-vos d'incloure-lo al principi de cada pàgina Bootstrapped del vostre projecte.

<!DOCTYPE html>
<html lang = "ca" > 
  ...
</html>

Tipografia i enllaços

Dins del fitxer scaffolding.less , establim estils bàsics de visualització global, tipografia i enllaços. Concretament, nosaltres:

Traieu el marge del cos
Situada background-color: white;a labody
Utilitzeu els atributs @baseFontFamily, @baseFontSize, i @baseLineHeightcom a base tipogràfica
Estableix el color de l'enllaç global mitjançant @linkColori aplica només subratllats a l'enllaç:hover

Restableix mitjançant Normalitza

A partir de Bootstrap 2, el restabliment CSS tradicional ha evolucionat per fer ús d'elements de Normalize.css , un projecte de Nicolas Gallagher que també alimenta l' HTML5 Boilerplate .

El nou restabliment encara es pot trobar a reset.less , però amb molts elements eliminats per a la brevetat i la precisió.

El sistema de quadrícula predeterminat que es proporciona com a part de Bootstrap és una quadrícula de 940 píxels d'ample i 12 columnes .

També té quatre variacions sensibles per a diversos dispositius i resolucions: telèfon, tauleta vertical, taula horitzontal i escriptoris petits i escriptoris de pantalla ampla.

<div class = "fila" > 
  <div class = "span4" > ... </div> 
  <div class = "span8" > ... </div> 
</div>

Com es mostra aquí, es pot crear un disseny bàsic amb dues "columnes", cadascuna abastant un nombre de les 12 columnes fonamentals que hem definit com a part del nostre sistema de quadrícula.

Columnes de compensació

4 compensació 4

3 desplaçament 3

8 compensació 4

<div class = "fila" > 
  <div class = "span4" > ... </div> 
  <div class = "span4 offset4" > ... </div> 
</div>

Nidificació de columnes

Amb el sistema de quadrícula estàtica (no fluida) a Bootstrap, la nidificació és fàcil. Per niuar el vostre contingut, només cal que afegiu un .rowconjunt de columnes noves dins d'una columna .span*existent ..span*

Exemple

Les files imbricades han d'incloure un conjunt de columnes que sumen el nombre de columnes del seu pare. Per exemple, dues columnes imbricades .span3s'han de col·locar dins d'un fitxer .span6.

Nivell 1 de columna

Nivell 2

<div class = "fila" > 
  <div class = "span12" > 
    Nivell 1 de columna
    <div class = "fila" > 
      <div class = "span6" > Nivell 2 </div> 
      <div class = "span6" > Nivell 2 </div> 
    </div>
  </div>
</div>

Columnes fluides

Percentatges, no píxels

El sistema de quadrícula fluida utilitza percentatges per a l'amplada de columnes en lloc de píxels fixos. També té les mateixes variacions de resposta que el nostre sistema de graella fixa, assegurant les proporcions adequades per a les resolucions clau de la pantalla i els dispositius.

Files fluides

Feu que qualsevol fila sigui fluida simplement canviant .rowa .row-fluid. Les columnes es mantenen exactament iguals, cosa que fa que sigui molt senzill canviar entre dissenys fixos i fluids.

Marcatge

<div class = "fila-fluid" > 
  <div class = "span4" > ... </div> 
  <div class = "span8" > ... </div> 
</div>

Nidificació fluida

La nidificació amb quadrícules fluides és una mica diferent: el nombre de columnes imbricades no cal que coincideixi amb el pare. En canvi, les columnes es restableixen a cada nivell perquè cada fila ocupa el 100% de la columna principal.

Fluid 12

Fluid 6

<div class = "fila-fluid" > 
  <div class = "span12" > 
    Nivell 1 de columna
    <div class = "fila-fluid" > 
      <div class = "span6" > Nivell 2 </div> 
      <div class = "span6" > Nivell 2 </div> 
    </div>
  </div>
</div>

Variable	Valor per defecte	Descripció
`@gridColumns`	12	Nombre de columnes
`@gridColumnWidth`	60 píxels	Amplada de cada columna
`@gridGutterWidth`	20 píxels	Espai negatiu entre columnes
`@siteWidth`	Suma calculada de totes les columnes i canalons	Compta el nombre de columnes i canalons per establir l'amplada de la `.container-fixed()`barreja

Variables en MENYS

A Bootstrap hi ha un grapat de variables per personalitzar el sistema de quadrícula predeterminat de 940 px, documentat anteriorment. Totes les variables de la graella s'emmagatzemen a variables.less.

Com personalitzar

Modificar la graella significa canviar les tres @grid*variables i recompilar Bootstrap. Canvieu les variables de la graella a variables.less i utilitzeu una de les quatre maneres documentades per recompilar . Si esteu afegint més columnes, assegureu-vos d'afegir el CSS per a les de grid.less.

Mantenir-se sensible

La personalització de la quadrícula només funciona al nivell predeterminat, la quadrícula de 940 px. Per mantenir els aspectes sensibles de Bootstrap, també haureu de personalitzar les graelles a responsive.less.

Disseny fix

El disseny predeterminat i senzill de 940 píxels d'ample i centrat per a gairebé qualsevol lloc web o pàgina proporcionada per un únic fitxer <div class="container">.

<cos>
  <div class = "contenidor" > 
    ...
  </div>
</cos>

Distribució de fluids

<div class="container-fluid">ofereix una estructura de pàgina flexible, amplades mínimes i màx. i una barra lateral esquerra. És ideal per a aplicacions i documents.

<div class = "container-fluid" > 
  <div class = "fila-fluid" > 
    <div class = "span2" > 
      <!--Contingut de la barra lateral-->
    </div>
    <div class = "span10" > 
      <!--Contingut corporal-->
    </div>
  </div>
</div>

Dispositius sensibles

El que fan

Les consultes de mitjans permeten un CSS personalitzat en funció d'una sèrie de condicions (ràtios, amplades, tipus de visualització, etc.), però normalment se centren al voltant de min-widthi max-width.

Modifiqueu l'amplada de la columna a la nostra quadrícula
Apila els elements en lloc de flotar sempre que sigui necessari
Canvia la mida dels encapçalaments i del text perquè siguin més adequats per als dispositius

Utilitzeu les consultes de mitjans de manera responsable i només com a principi per al vostre públic mòbil. Per a projectes més grans, tingueu en compte bases de codi dedicades i no capes de consultes multimèdia.

Dispositius compatibles

Bootstrap admet un bon nombre de consultes multimèdia en un sol fitxer per ajudar-vos a fer que els vostres projectes siguin més adequats en diferents dispositius i resolucions de pantalla. Aquí teniu el que s'inclou:

Etiqueta	Amplada del disseny	Amplada de la columna	Amplada del canal
Telèfons intel·ligents	480 píxels i per sota	Columnes fluides, sense amplades fixes
De telèfons intel·ligents a tauletes	767 píxels i menys	Columnes fluides, sense amplades fixes
Tauletes retratades	768 píxels i més	42 píxels	20 píxels
Per defecte	980 píxels i més	60 píxels	20 píxels
Pantalla gran	1200 píxels i més	70 píxels	30 píxels

Requereix metaetiqueta

Per garantir que els dispositius mostrin pàgines responsives correctament, incloeu la metaetiqueta de la finestra gràfica.

<meta name = "viewport" content = "width=device-width, initial-scale=1.0" >

Utilitzant les consultes de mitjans

Bootstrap no inclou automàticament aquestes consultes multimèdia, però comprendre-les i afegir-les és molt fàcil i requereix una configuració mínima. Teniu algunes opcions per incloure les funcions de resposta de Bootstrap:

Utilitzeu la versió responsive compilada, bootstrap-responsive.css
Afegiu @import "responsive.less" i torneu a compilar Bootstrap
Modifiqueu i recompileu responsive.less com a fitxer independent

Per què no només incloure-ho? La veritat és que no tot ha de respondre. En lloc d'animar els desenvolupadors a eliminar aquesta funció, pensem que és millor habilitar-la.

  // Paisatge telèfons i cap avall
  @media ( amplada màxima : 480 píxels ) { ... }     
 
  // Telèfon horitzontal a tauleta vertical
  @media ( amplada màxima : 768 píxels ) { ... }     
 
  // Tauleta vertical a horitzontal i escriptori
  @media ( amplada mínima : 768 píxels ) i ( amplada màxima : 980 píxels ) { ... }        
 
  // Escriptori gran
  @media ( amplada mínima : 1200 px ) { .. }

Classes d'utilitat responsives

Que són ells

Per a un desenvolupament més ràpid per a mòbils, utilitzeu aquestes classes d'utilitat bàsiques per mostrar i amagar contingut per dispositiu.

Quan s'ha d'utilitzar

Utilitzeu-lo de forma limitada i eviteu crear versions completament diferents del mateix lloc. En comptes d'això, utilitzeu-los per complementar la presentació de cada dispositiu.

Per exemple, podeu mostrar un <select>element per a la navegació en dissenys mòbils, però no a tauletes o ordinadors.

Classes de suport

Aquí es mostra una taula de les classes que admetem i el seu efecte en un disseny de consulta multimèdia determinat (etiquetat per dispositiu). Es poden trobar a responsive.less.

Classe	Telèfons480 píxels i per sota	Tauletes767 píxels i menys	Escriptoris768 píxels i més
`.visible-phone`	Visible	Ocult	Ocult
`.visible-tablet`	Ocult	Visible	Ocult
`.visible-desktop`	Ocult	Ocult	Visible
`.hidden-phone`	Ocult	Visible	Visible
`.hidden-tablet`	Visible	Ocult	Visible
`.hidden-desktop`	Visible	Visible	Ocult

Cas de prova

Canvieu la mida del vostre navegador o carregueu-lo en diferents dispositius per provar les classes anteriors.

Visible a...

Telèfon✔ Telèfon
Tauleta✔ Tauleta
Escriptori✔ Escriptori

Amagat a...

Telèfon✔ Telèfon
Tauleta✔ Tauleta
Escriptori✔ Escriptori