Història

En els primers dies de Twitter, els enginyers utilitzaven gairebé qualsevol biblioteca que estaven familiaritzats per complir els requisits del front-end. Bootstrap va començar com una resposta als reptes que es van presentar i el desenvolupament es va accelerar ràpidament durant la primera Hackweek de Twitter.

Amb l'ajuda i els comentaris de molts enginyers de Twitter, Bootstrap ha crescut significativament per incloure no només estils bàsics, sinó patrons de disseny frontal més elegants i duradors.

Més informació a dev.twitter.com ›

Suport del navegador

Bootstrap es prova i és compatible amb els principals navegadors moderns com Chrome, Safari, Internet Explorer i Firefox.

• Últim Safari
• Google Chrome més recent
• Firefox 4+
• Internet Explorer 7+

Què inclou

Bootstrap ve complet amb CSS compilat, no compilat i plantilles d'exemple.

• Tots els fitxers .less originals
• CSS completament compilat i minificat
• Documentació completa de la guia d'estil
• Exemple de plantilla de pàgina (en breu més)

Quadrícula per defecte

El sistema de quadrícula predeterminat que es proporciona com a part de Bootstrap és una quadrícula de 16 columnes de 940 píxels d'ample. És un sabor del popular sistema de graella 960, però sense el marge / farciment addicional als costats esquerre i dret.

Exemple de marcatge de quadrícula

Com es mostra aquí, es pot crear un disseny bàsic amb dues "columnes", cadascuna abastant un nombre de les 16 columnes fonamentals que hem definit com a part del nostre sistema de quadrícula. Vegeu els exemples següents per obtenir més variacions.

<div class="fila"> class = "fila" >
  <div class = "span6 columns" > 
    ...
  </div>
  <div class = "span10 columns" > 
    ...
  </div>
</div>

Disseny fix

Un disseny bàsic de contenidors centrat de 940 píxels d'ample per a gairebé qualsevol lloc o pàgina.

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

Distribució de fluids

Una estructura de pàgina fluida o líquida flexible amb amplades mínimes i màximes i una barra lateral esquerra. Genial per a aplicacions.

<cos>
  <div class = "container-fluid" > 
    <div class = "barra lateral" > 
      ...
    </div>
    <div class = "contingut" > 
      ...
    </div>
  </div>
</cos>

Encapçalaments i còpia

Una jerarquia tipogràfica estàndard per estructurar les vostres pàgines web.

h1. Títol 1

h2. Títol 2

h3. Títol 3

h4. Títol 4

h5. Títol 5

h6. Títol 6

Exemple de paràgraf

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Encapçalament d'exemple Té un subtítol...

Misc. elements

Utilitzant èmfasi, adreces i abreviatures

<strong> <em> <address> <abbr>

Quan s'ha d'utilitzar

Les etiquetes d'èmfasi ( <strong>i <em>) s'han d'utilitzar per indicar la importància o l'èmfasi addicional d'una paraula o frase en relació amb la còpia que l'envolta. Utilitzeu -lo <strong>per a la importància i <em>l' èmfasi .

Èmfasi en un paràgraf

Fusce dapibus , tellus ac cursus commodo , torttor mauris condimentum nibh , ut fermentum massa justo sit amet risus. Mecenas faucibus mollis interdum. Nulla vitae elit libero, a pharetra augue.

Nota: encara està bé utilitzar <b>i <i>etiquetar a HTML5, però ja no inclouen estils inherents. <b>està pensat per ressaltar paraules o frases sense transmetre importància addicional, mentre que <i>és principalment per a veu, termes tècnics, etc.

Adreces

L' <address>element s'utilitza per a la informació de contacte del seu avantpassat més proper o de tot el conjunt de treballs. Així és com es veu:

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890

Nota: Cada línia d'un <address>ha d'acabar amb un salt de línia ( <br />) o estar embolicat en una etiqueta a nivell de bloc (per exemple, <p>) per estructurar correctament el contingut.

Abreviatures

Per a abreviatures i acrònims, utilitzeu l' <abbr>etiqueta ( <acronym>està obsolet a HTML5 ). Col·loqueu el formulari d'abreviatura dins de l'etiqueta i establiu un títol per al nom complet.

Cites de bloc

<blockquote> <p> <small>

Com citar

<blockquote>Per incloure una cita de bloc, embolcalleu <p>i <small>etiqueteu. Utilitzeu l' <small>element per citar la vostra font i obtindreu un guió em —abans.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.

Dr Julius Hibbert

No ordenat<ul>

• Lorem ipsum dolor sit amet
• Consectetur adipiscing elit
• Integer molestie lorem at massa
• Facilisis in pretium nisl aliquet
• Nulla volutpat aliquam velit
  • Phasellus iaculis neque
  • Purus sodales ultricies
  • Vestibulum laoreet porttitor sem
  • Ac tristique libero volutpat at
• Faucibus porta lacus fringilla vel
• Aenean sit amet erat nunc
• Eget porttitor lorem

Sense estil<ul.unstyled>

• Lorem ipsum dolor sit amet
• Consectetur adipiscing elit
• Integer molestie lorem at massa
• Facilisis in pretium nisl aliquet
• Nulla volutpat aliquam velit
  • Phasellus iaculis neque
  • Purus sodales ultricies
  • Vestibulum laoreet porttitor sem
  • Ac tristique libero volutpat at
• Faucibus porta lacus fringilla vel
• Aenean sit amet erat nunc
• Eget porttitor lorem

Ordenat<ol>

1. Lorem ipsum dolor sit amet
2. Consectetur adipiscing elit
3. Integer molestie lorem at massa
4. Facilisis in pretium nisl aliquet
5. Nulla volutpat aliquam velit
6. Faucibus porta lacus fringilla vel
7. Aenean sit amet erat nunc
8. Eget porttitor lorem

Descripciódl

Llistes de descripció

Una llista de descripció és perfecta per definir termes.

Euismod

Vestibulum id ligula porta felis euismod sempre eget lacinia odio sem nec elit.

Donec id elit non mi porta gravida at eget metus.

Malesuada porta

Etiam porta sem malesuada magna mollis euismod.

Construcció de taules

<table> <thead> <tbody> <tr> <th> <td> <colspan> <caption>

Les taules són genials, per a moltes coses. Les taules excel·lents, però, necessiten una mica d'amor de marcatge per ser útils, escalables i llegibles (a nivell de codi). Aquí teniu alguns consells per ajudar-vos.

Embolcalleu sempre les capçaleres de les columnes de <thead>manera que la jerarquia sigui <thead>> <tr>> <th>.

De manera semblant a les capçaleres de les columnes, tot el contingut del cos de la taula s'hauria d'embolicar en un de <tbody>manera que la vostra jerarquia sigui <tbody>> <tr>> <td>.

Exemple: estils de taula per defecte

Totes les taules s'estilitzaran automàticament amb només les vores essencials per garantir la llegibilitat i mantenir l'estructura. No cal afegir classes o atributs addicionals.

#	Nom	Cognom	Llenguatge
1	Alguns	Un	Anglès
2	Joe	Abdominals	Anglès
3	Stu	Dent	Codi

<table class="common-table"> class = "taula comuna" >
  ...
</taula>

Exemple: ratlles de zebra

Fes una mica de luxe amb les teves taules afegint ratlles de zebra; només has d'afegir la .zebra-stripedclasse.

#	Nom	Cognom	Llenguatge
1	Alguns	Un	Anglès
2	Joe	Abdominals	Anglès
3	Stu	Dent	Codi

Nota: el zebra-striping és una millora progressiva que no està disponible per a navegadors antics com IE8 i anteriors.

<table class="common-table zebra-striped"> class = "taula comuna amb ratlles de zebra" >
...
</taula>

Exemple: ratlles de zebra amb TableSorter.js

Prenent l'exemple anterior, millorem la utilitat de les nostres taules proporcionant una funcionalitat d'ordenació mitjançant jQuery i el connector Tablesorter . Feu clic a la capçalera de qualsevol columna per canviar l'ordenació.

#	Nom	Cognom	Llenguatge
1	El teu	Un	Anglès
2	Joe	Abdominals	Anglès
3	Stu	Dent	Codi

<script src="js/jquery/jquery.tablesorter.min.js"></script> src = "js/jquery/jquery.tablesorter.min.js" ></script>
<script > 
  $ ( funció () { 
    $ ( "taula#sortTableExample" ). classificador de taules ({ sortList : [[ 1 , 0 ]] });  
  });
</script>
<table class = "taula comuna amb ratlles de zebra" > 
  ...
</taula>

Estils per defecte

Tots els formularis reben estils predeterminats per presentar-los d'una manera llegible i escalable. Es proporcionen estils per a les entrades de text, llistes de selecció, àrees de text, botons d'opció i caselles de selecció i botons.

Exemple de llegenda del formulari

Entrada X-Large

Seleccioneu

1 2 3 4 5

Seleccioneu

1 2 3 4 5

Entrada no editable

Alguns valors aquí

Entrada desactivada

Entrada X-Large

Petit fragment de text d'ajuda

Exemple de llegenda del formulari

Text adjunt

@

Casilla de verificació anteposada

Casilla de verificació adjunta

Entrada de fitxer

Exemple de llegenda del formulari

Llista d'Opcions

• La primera opció és això i allò; assegureu-vos d'incloure per què és fantàstic
• La segona opció també es pot comprovar i incloure als resultats del formulari
• L'opció tres, sí, ho heu endevinat, també es pot comprovar i incloure als resultats del formulari
• La quarta opció no es pot comprovar perquè està desactivada.

Nota: les etiquetes envolten totes les opcions per a àrees de clic molt més grans i una forma més utilitzable.

Interval de dates

a Totes les hores es mostren com a hora estàndard del Pacífic (GMT -08:00).

Àrea de text

Bloc de text d'ajuda per descriure el camp anterior si cal.

Llista d'Opcions

• La primera opció és això i allò; assegureu-vos d'incloure per què és fantàstic
• La segona opció també es pot comprovar i incloure als resultats del formulari

Guardar canvis  Cancel · lar

Formes apilades

Afegiu .form-stacked-lo a l'HTML del vostre formulari i tindreu etiquetes a la part superior dels seus camps en comptes de no a la seva esquerra. Això funciona molt bé si els vostres formularis són curts o teniu dues columnes d'entrada per a formularis més pesats.

Exemple de llegenda del formulari

Entrada X-Large

Seleccioneu

1 2 3 4 5

Exemple de llegenda del formulari

Entrada X-Large

Petit fragment de text d'ajuda

Llista d'Opcions

• La primera opció és això i allò; assegureu-vos d'incloure per què és fantàstic
• La segona opció també es pot comprovar i incloure als resultats del formulari

Nota: les etiquetes envolten totes les opcions per a àrees de clic molt més grans i una forma més utilitzable.

Guardar canvis  Cancel · lar

Botons

Com a convenció, els botons s'utilitzen per a accions mentre que els enllaços s'utilitzen per als objectes. Per exemple, "Baixa" podria ser un botó i "activitat recent" podria ser un enllaç.

Tots els botons tenen un estil gris clar per defecte, però .primaryhi ha disponible una classe blava. A més, enrotllar els vostres propis estils és fàcil.

Botons d'exemple

Els estils de botons es poden aplicar a qualsevol cosa amb l' .btnaplicació. Normalment, voldreu aplicar-los només als elements <a>, <button>, i seleccionats <input>. Així és com es veu:

Mides alternatives

Voleu botons més grans o més petits? Teniu-ho!

Estat desactivat

Per als botons que no estan actius o estan desactivats per l'aplicació per un motiu o un altre, utilitzeu l'estat desactivat. Això és .disabledper als enllaços i :disabledper als <button>elements.

Enllaços

Botons

Què es

La nostra barra superior és una barra fixa que allotja el logotip o el nom d'un lloc web, la navegació principal i el formulari de cerca.

Personalitzable

Tots els elements dins, i tota la barra superior també, són opcionals. Podeu triar incloure un logotip/nom, navegació, cerca i un navegador secundari, o qualsevol combinació d'això.

Desplegables inclosos

Com a part de la navegació principal, hem inclòs la possibilitat d'afegir menús desplegables al vostre navegador. Consulteu la navegació secundària de dalt (alineada a la dreta) per veure com es fa.

Pastilles i pastilles

Creeu una navegació secundària senzilla amb un fitxer <ul>. Canvia entre pastilles o pastilles afegint la classe adequada.

Ideal per a subseccions de contingut com les pàgines de configuració del nostre compte i les cronologies d'usuari per canviar entre pàgines de contingut semblant. Disponible en estils amb pestanyes o pastilles.

• Casa
• Perfil
• Missatges
• Configuració
• Contacte

<ul class="tabs"> class = "pestanyes" >
  <li class = "active" ><a href = "#" > Inici </a></li>  
  <li><a href = "#" > Perfil </a></li> 
  <li><a href = "#" > Missatges </a></li> 
  <li><a href = "#" > Configuració </a></li> 
  <li><a href = "#" > Contacte </a></li> 
</ul>

• Casa
• Perfil
• Missatges
• Configuració
• Contacte

<ul class="pills"> classe = "píndoles" >
  <li class = "active" ><a href = "#" > Inici </a></li>  
  <li><a href = "#" > Perfil </a></li> 
  <li><a href = "#" > Missatges </a></li> 
  <li><a href = "#" > Configuració </a></li> 
  <li><a href = "#" > Contacte </a></li> 
</ul>

Paginació

Paginació ultra simplista i d'estil mínim inspirada en Rdio. El bloc gran és difícil de perdre, fàcilment escalable i ofereix grans àrees de clic.

<div class="paginació"> class = "paginació" >
  <ul>
    <li class = "anterior desactivat" ><a href = "#" > ← Anterior </a></li>  
    <li class = "active" ><a href = "#" > 1 </a></li>  
    <li><a href = "#" > 2 </a></li> 
    <li><a href = "#" > 3 </a></li> 
    <li><a href = "#" > 4 ​​</a></li> 
    <li><a href = "#" > 5 </a></li> 
    <li class = "següent" ><a href = "#" > Següent → </a></li>  
  </ul>
</div>

Alertes bàsiques

Missatges d'una línia per destacar el fracàs, el possible fracàs o l'èxit d'una acció. Especialment útil per a formularis.

Bloquejar missatges

Per als missatges que requereixen una mica d'explicació, tenim alertes d'estil de paràgraf. Aquests són perfectes per enviar missatges d'error més llargs, advertir un usuari d'una acció pendent o simplement presentar informació per donar més èmfasi a la pàgina.

Modals

Els modals (diàlegs o caixes de llum) són ideals per a accions contextuals en situacions en què és important que es mantingui el context de fons.

Consells d'eines

Els twipsies són molt útils per ajudar un usuari confús i apuntar-los en la direcció correcta.

Popovers

Utilitzeu finestres emergents per proporcionar informació subtextual a una pàgina sense afectar el disseny.

Bootstrap es va crear amb Preboot , un paquet de codi obert de mixins i variables que s'utilitzarà juntament amb Less , un preprocessador CSS per a un desenvolupament web més ràpid i senzill.

Comproveu com hem utilitzat Preboot a Bootstrap i com podeu fer-ne ús si decidiu executar Less al vostre proper projecte.

Com utilitzar-lo

Utilitzeu aquesta opció per fer un ús complet de les variables, mixins i nidificació de Less de Bootstrap en CSS mitjançant javascript al vostre navegador.

<link rel="stylesheet/less" href="less/bootstrap.less" media="all" /> rel = "full d'estil/menys" href = "menys/bootstrap.less" media = "tot" />   
<script src = "js/less-1.0.41.min.js" ></script> 

No sents la solució .js? Proveu l'aplicació Less Mac o utilitzeu Node.js per compilar quan implementeu el codi.

Què inclou

Aquests són alguns dels aspectes més destacats del que s'inclou a Twitter Bootstrap com a part de Bootstrap. Aneu al lloc web de Bootstrap o a la pàgina del projecte Github per descarregar i obtenir més informació.

Variables de color

Les variables de Less són perfectes per mantenir i actualitzar el vostre CSS sense mal de cap. Quan vulgueu canviar un valor de color o un valor d'ús freqüent, actualitzeu-lo en un sol lloc i ja està.

// Enllaços
@linkColor : #8b59c2;         
@linkColorHover :     enfosquir ( @linkColor , 10 ); 
// Grises
@negre : #000;             
@grayDark :           aclarir ( @negre , 25 %); 
@gris :               aclarir ( @negre , 50 %); 
@grayLight :          alleugerir ( @negre , 70 %); 
@grayLighter :        alleugerir ( @negre , 90 %); 
@blanc : #fff;             
// Colors d'accent
@blau : #08b5fb;              
@verd : #46a546;             
@vermell : #9d261d;               
@groc : #ffc40d;            
@taronja : #f89406;            
@rosa : #c3325f;              
@violet : #7a43b6;            
// Línia de base
@baseline : 20px ;          

Comentant

/* ... */Less també proporciona un altre estil de comentari a més de la sintaxi normal de CSS .

// Això és un comentari
/* Això també és un comentari */

Barreja el wazoo

Els mixins són bàsicament inclusions o parcials per a CSS, cosa que us permet combinar un bloc de codi en un de sol. Són excel·lents per a propietats amb prefix de proveïdors combox-shadow , degradats entre navegadors, piles de tipus de lletra i molt més. A continuació es mostra una mostra dels mixins que s'inclouen amb Bootstrap.

Piles de fonts

#Font {
  . abreviatura ( @pes : normal , @mida : 14px , @lineHeight : 20px ) {     
    font - size : @size ; 
    font - pes : @pes ; 
    line - height : @lineHeight ; 
  }
  . sans - serif ( @pes : normal , @mida : 14px , @Alçada de línia : 20px ) {     
família de tipus de     lletra : "Helvetica Neue " , ​​Helvetica , Arial , sans serif ;   
    font - size : @size ; 
    font - pes : @pes ; 
    line - height : @lineHeight ; 
  }
  . serif ( @pes : normal , @mida : 14px , @lineHeight : 20px ) {     
família de tipus de     lletra : "Geòrgia" , Times New Roman , Times , sans - serif ;     
    font - size : @size ; 
    font - pes : @pes ; 
    line - height : @lineHeight ; 
  }
  . monoespai ( @pes : normal , @mida : 12px , @lineHeight : 20px ) {     
família de tipus de     lletra : "Monaco" , Courier New , monoespai ;   
    font - size : @size ; 
    font - pes : @pes ; 
    line - height : @lineHeight ; 
  }
}

Gradients

#gradient {
  . horitzontal ( @startColor : #555, @endColor: #333) { 
    fons - color : @endColor ; 
    fons - repetició : repetició - x ;
    fons - imatge : - khtml - degradat ( lineal , esquerra superior , dreta superior , de ( @startColor ), a ( @endColor )); // Konqueror   
    fons - imatge : - moz - lineal - degradat ( esquerra , @startColor , @endColor ); // FF 3.6+    
    fons - imatge : - ms - lineal - degradat ( esquerra , @startColor , @endColor ); // IE10    
    fons - imatge : - webkit - degradat ( lineal , esquerra superior , dreta superior , color - stop ( 0 %, @startColor ), color - stop ( 100 %, @endColor )); // Safari 4+, Chrome 2+    
    fons - imatge : - webkit - lineal - degradat ( esquerra , @startColor , @endColor ); // Safari 5.1+, Chrome 10+    
    fons - imatge : - o - lineal - degradat ( esquerra , @startColor , @endColor ); // Opera 11.10    
    - ms - filtre : %( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)" , @startColor , @endColor ); // IE8+  
    filtre : e (%( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)" , @startColor , @endColor )); // IE6 i IE7 
    fons - imatge : lineal - degradat ( esquerra , @startColor , @endColor ); // L'estàndard   
  }
  . vertical ( @startColor : #555, @endColor: #333) { 
    fons - color : @endColor ; 
    fons - repetició : repetició - x ;
    fons - imatge : - khtml - degradat ( lineal , esquerra superior , esquerra inferior , de ( @startColor ), a ( @endColor )); // Konqueror   
    fons - imatge : - moz - lineal - degradat ( @startColor , @endColor ); // FF 3.6+   
    fons - imatge : - ms - lineal - degradat ( @startColor , @endColor ); // IE10   
    fons - imatge : - webkit - degradat ( lineal , esquerra superior , esquerra inferior , color - stop ( 0 %, @startColor ), color - stop ( 100 %, @endColor )); // Safari 4+, Chrome 2+    
    fons - imatge : - webkit - lineal - degradat ( @startColor , @endColor ); // Safari 5.1+, Chrome 10+   
    fons - imatge : - o - lineal - degradat ( @startColor , @endColor ); // Opera 11.10   
    - ms - filtre : %( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)" , @startColor , @endColor ); // IE8+  
    filtre : e (%( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)" , @startColor , @endColor )); // IE6 i IE7 
    fons - imatge : lineal - degradat ( @startColor , @endColor ); // L'estàndard  
  }
  . direccional ( @startColor : #555, @endColor: #333, @deg: 45deg) { 
    ...
  }
  . vertical - tres - colors ( @startColor : #00b3ee, @midColor: #7a43b6, @colorStop: 0,5, @endColor: #c3325f) { 
    ...
  }
}

Operacions i sistema de xarxa

Posa't de moda i fes algunes matemàtiques per generar mixins flexibles i potents com el següent.

// Grillitud
@gridColumns : 16 ;       
@gridColumnWidth : 40px ;   
@gridGutterWidth : 20px ;   
 
// Sistema de graella
. contenidor {
  amplada : @siteWidth ; 
  marge : 0 automàtic ;  
  . clearfix ();
}
. columnes ( @columnSpan : 1 ) {  
  pantalla : en línia ; 
  flotar : esquerra ;
  amplada : ( @gridColumnWidth * @columnSpan ) + ( @gridGutterWidth * ( @columnSpan - 1 ));         
  marge - esquerre : @gridGutterWidth ; 
  &: primer - fill {
    marge - esquerre : 0 ; 
  }
}
. desplaçament ( @columnOffset : 1 ) {  
  marge - esquerre : ( @gridColumnWidth * @columnOffset ) + ( @gridGutterWidth * ( @columnOffset - 1 )) ! important ;          
}