Bootstrap

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.

Estils globals per a restabliment de CSS, tipografia i enllaços

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.

  1. <!DOCTYPE html>
  2. <html lang = "ca" > 
  3.   ...
  4. </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ó.

Sistema de graella predeterminat de 12 columnes amb un gir sensible

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

El sistema de quadrícula predeterminat proporcionat a Bootstrap utilitza 12 columnes que es mostren amb amplades de 724 px, 940 px (per defecte sense CSS responsiu inclòs) i 1170 px. Per sota de les finestres de 767 píxels, les columnes es tornen fluides i s'apilen verticalment.

  1. <div class = "fila" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span8" > ... </div> 
  4. </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
4 compensació 4
3 desplaçament 3
3 desplaçament 3
8 compensació 4 
  1. <div class = "fila" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span4 offset4" > ... </div> 
  4. </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
Nivell 2 
  1. <div class = "fila" > 
  2.   <div class = "span6" > 
  3.     Columna de nivell 1
  4.     <div class = "fila" > 
  5.       <div class = "span3" > Nivell 2 </div> 
  6.       <div class = "span3" > Nivell 2 </div> 
  7.     </div>
  8.   </div>
  9. </div>

Sistema de quadrícula fluida 12 columnes sensibles, basades en percentatges

Columnes fluides

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

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

  1. <div class = "fila-fluid" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span8" > ... </div> 
  4. </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
Fluid 6 
  1. <div class = "fila-fluid" > 
  2.   <div class = "span12" > 
  3.     Nivell 1 de columna
  4.     <div class = "fila-fluid" > 
  5.       <div class = "span6" > Nivell 2 </div> 
  6.       <div class = "span6" > Nivell 2 </div> 
  7.     </div>
  8.   </div>
  9. </div>

Personalització de la graella

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

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.

Dissenys Plantilles bàsiques per crear pàgines web

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

  1. <cos>
  2.   <div class = "contenidor" > 
  3.     ...
  4.   </div>
  5. </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.

  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 Consultes de mitjans per a diversos dispositius i resolucions

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.

  1. <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:

  1. Utilitzeu la versió responsive compilada, bootstrap-responsive.css
  2. Afegiu @import "responsive.less" i torneu a compilar Bootstrap
  3. 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.

  1.   /* Telèfons en paisatge i cap avall */
  2.   @media ( amplada màxima : 480 píxels ) { ... }     
  3.  
  4.   /* Telèfon horitzontal a tauleta vertical */
  5.   @media ( amplada màxima : 767 píxels ) { ... }     
  6.  
  7.   /* Tauleta vertical a horitzontal i escriptori */
  8.   @media ( amplada mínima : 768 píxels ) i ( amplada màxima : 979 píxels ) { ... }        
  9.  
  10.   /* Escriptori gran */
  11.   @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
.visible-tablet Visible
.visible-desktop Visible
.hidden-phone Visible Visible
.hidden-tablet Visible Visible
.hidden-desktop Visible Visible

Cas de prova

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