Bootstrap

Bastida

Bootstrap es basa en graelles, dissenys i components sensibles de 12 columnes.

Configuració global

Requereix un tipus de document HTML5

Bootstrap fa ús de determinats elements HTML i propietats CSS que requereixen l'ús del tipus de document HTML5. Incloeu-lo al principi de tots els vostres projectes.

  1. <!DOCTYPE html>
  2. <html lang = "ca" > 
  3.   ...
  4. </html>

Tipografia i enllaços

Bootstrap estableix estils bàsics de visualització global, tipografia i enllaços. Concretament, nosaltres:

  • Retirar marginal 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

Aquests estils es poden trobar a scaffolding.less .

Restableix mitjançant Normalitza

Amb Bootstrap 2, l'antic bloc de restabliment s'ha abandonat a favor de Normalize.css , un projecte de Nicolas Gallagher i Jonathan Neal que també alimenta el Boilerplate HTML5 . Tot i que fem servir gran part de Normalize dins del nostre reset.less , hem eliminat alguns elements específicament per a Bootstrap.

Sistema de graella per defecte

Exemple de graella en directe

El sistema de quadrícula Bootstrap predeterminat utilitza 12 columnes , la qual cosa permet un contenidor de 940 píxels d'ample sense les funcions de resposta activades. Amb el fitxer CSS responsiu afegit, la quadrícula s'adapta a 724 px i 1170 px d'ample segons la vostra finestra gràfica. Per sota de les finestres de 767 píxels, les columnes es tornen fluides i s'apilen verticalment.

1
1
1
1
1
1
1
1
1
2
3
4
4
5
9

HTML bàsic de quadrícula

Per a un disseny senzill de dues columnes, creeu un .rowi afegiu el nombre adequat de .span*columnes. Com que es tracta d'una quadrícula de 12 columnes, cadascuna .span*abasta un nombre d'aquestes 12 columnes i sempre hauria de sumar 12 per a cada fila (o el nombre de columnes del pare).

  1. <div class = "fila" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span8" > ... </div> 
  4. </div>

Donat aquest exemple, tenim .span4i .span8, per a un total de 12 columnes i una fila completa.

Columnes de compensació

Mou les columnes cap a la dreta amb .offset*classes. Cada classe augmenta el marge esquerre d'una columna en una columna sencera. Per exemple, .offset4es mou .span4sobre quatre columnes.

4
3 desplaçament 2
3 desplaçament 1
3 desplaçament 2
6 desplaçament 3 
  1. <div class = "fila" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span3 offset2" > ... </div> 
  4. </div>

Nidificació de columnes

Per niuar el contingut amb la quadrícula predeterminada, afegiu un .rowconjunt de columnes noves dins d'una columna .span*existent . .span*Les files imbricades han d'incloure un conjunt de columnes que sumen el nombre de columnes del seu pare.

Columna de nivell 1
Nivell 2
Nivell 2 
  1. <div class = "fila" > 
  2.   <div class = "span9" > 
  3.     Columna de nivell 1
  4.     <div class = "fila" > 
  5.       <div class = "span6" > Nivell 2 </div> 
  6.       <div class = "span3" > Nivell 2 </div> 
  7.     </div>
  8.   </div>
  9. </div>

Sistema de reixeta de fluids

Exemple de quadrícula fluida en viu

El sistema de quadrícula fluida utilitza percentatges en lloc de píxels per a l'amplada de columna. Té les mateixes capacitats de resposta que el nostre sistema de graella fixa, garantint les proporcions adequades per a les resolucions clau de la pantalla i els dispositius.

1
1
1
1
1
1
1
1
1
1
1
1
4
4
4
4
8
6
6
12

HTML bàsic de quadrícula fluida

Feu que qualsevol fila sigui "fluida" canviant .rowa .row-fluid. Les classes de columnes es mantenen exactament iguals, de manera que és fàcil canviar entre quadrícules fixes i fluides.

  1. <div class = "fila-fluid" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span8" > ... </div> 
  4. </div>

Compensació de fluids

Funciona de la mateixa manera que la compensació del sistema de quadrícula fixa: afegeix .offset*a qualsevol columna per compensar-les amb tantes columnes.

4
4 compensació 4
3 desplaçament 3
3 desplaçament 3
6 desplaçament 6 
  1. <div class = "fila-fluid" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span4 offset2" > ... </div> 
  4. </div>

Nidificació fluida

Les quadrícules fluides utilitzen la nidificació de manera diferent: cada nivell de columnes imbricades hauria de sumar fins a 12 columnes. Això es deu al fet que la quadrícula fluida utilitza percentatges, no píxels, per establir amplades.

Fluid 12
Fluid 6
Fluid 6
Fluid 6
Fluid 6 
  1. <div class = "fila-fluid" > 
  2.   <div class = "span12" > 
  3.     Fluid 12
  4.     <div class = "fila-fluid" > 
  5.       <div class = "span6" > 
  6.         Fluid 6
  7.         <div class = "fila-fluid" > 
  8.           <div class = "span6" > Fluid 6 </div> 
  9.           <div class = "span6" > Fluid 6 </div> 
  10.         </div>
  11.       </div>
  12.       <div class = "span6" > Fluid 6 </div> 
  13.     </div>
  14.   </div>
  15. </div>

Dissenys

Disseny fix

Proporciona un disseny comú d'amplada fixa (i opcionalment sensible) amb només <div class="container">requerit.

  1. <cos>
  2.   <div class = "contenidor" > 
  3.     ...
  4.   </div>
  5. </cos>

Distribució de fluids

Creeu una pàgina fluida de dues columnes amb: <div class="container-fluid">ideal per a aplicacions i documents.

  1. <div class = "container-fluid" > 
  2.   <div class = "fila-fluid" > 
  3.     <div class = "span2" > 
  4.       <!--Contingut de la barra lateral-->
  5.     </div>
  6.     <div class = "span10" > 
  7.       <!--Contingut corporal-->
  8.     </div>
  9.   </div>
  10. </div>

Disseny responsive

Habilitació de funcions de resposta

Activeu el CSS responsiu al vostre projecte incloent l'etiqueta meta adequada i el full d'estil addicional dins <head>del vostre document. Si heu compilat Bootstrap des de la pàgina Personalitza, només cal que inclogueu la metaetiqueta.

  1. <meta name = "viewport" content = "width=device-width, initial-scale=1.0" >  
  2. <link href = "assets/css/bootstrap-responsive.css" rel = "full d'estil" >

Caps amunt!Bootstrap no inclou funcions de resposta de manera predeterminada en aquest moment, ja que no tot ha de ser responsiu. En lloc d'animar els desenvolupadors a eliminar aquesta funció, pensem que és millor habilitar-la segons sigui necessari.

Sobre Bootstrap responsive

Dispositius sensibles

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
Pantalla gran 1200 píxels i més 70 píxels 30 píxels
Per defecte 980 píxels i més 60 píxels 20 píxels
Tauletes retratades 768 píxels i més 42 píxels 20 píxels
De telèfons a tauletes 767 píxels i menys Columnes fluides, sense amplades fixes
Telèfons 480 píxels i per sota Columnes fluides, sense amplades fixes 
  1. /* Escriptori gran */
  2. @media ( amplada mínima : 1200 px ) { ... }     
  3.  
  4. /* Tauleta vertical a horitzontal i escriptori */
  5. @media ( amplada mínima : 768 píxels ) i ( amplada màxima : 979 píxels ) { ... }        
  6.  
  7. /* Telèfon horitzontal a tauleta vertical */
  8. @media ( amplada màxima : 767 píxels ) { ... }     
  9.  
  10. /* Telèfons en paisatge i cap avall */
  11. @media ( amplada màxima : 480 píxels ) { ... }

Classes d'utilitat responsives

Per a un desenvolupament més ràpid per a mòbils, utilitzeu aquestes classes d'utilitat per mostrar i amagar contingut per dispositiu. A continuació es mostra una taula de les classes disponibles i el seu efecte en un disseny de consulta de mitjans donat (etiquetat per dispositiu). Es poden trobar a responsive.less.

Classe Telèfons767 píxels i menys TauletesDe 979 a 768 píxels EscriptorisPer defecte
.visible-phone Visible
.visible-tablet Visible
.visible-desktop Visible
.hidden-phone Visible Visible
.hidden-tablet Visible Visible
.hidden-desktop Visible Visible

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. Les utilitats responsives no s'han d'utilitzar amb taules i, per tant, no s'admeten.

Cas de prova d'utilitats sensibles

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

Visible a...

Les marques de verificació verdes indiquen que la classe és visible a la finestra actual.

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

Amagat a...

Aquí, les marques de verificació verdes indiquen que la classe està amagada a la vostra finestra gràfica actual.

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