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

També podeu afegir subtítols amb <strong>i<em>

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 afegir una distinció visual entre una paraula o frase i la còpia que l'envolta. Utilitzeu <strong>-lo per a una atenció senzilla i <em>per a l' atenció i els títols.

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

Adreces

L' addresselement s'utilitza per a adreces, ho heu endevinat. 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 addressha d'acabar amb un salt de línia ( <br />) per estructurar correctament el contingut tal com es llegeix a la vida real sense aplicar cap estil.

Abreviatures

Per a abreviatures i acrònims, utilitzeu l' abbretiqueta ( acronymestà 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> <cite>

Assegureu-vos d'embolicar-vos blockquotei paragraphetiquetar cite. Quan cites una font, fes servir l' citeelement. El CSS prefacirà automàticament un nom amb un guió em (—).

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua...

Dr Julius Hibbert

No ordenat<ul>

• Jeremy Bixby
• Robert Dezure
• Josh Washington
• Anton Capresi
• Els meus companys d'equip
  • Jordi Castanza
  • Jerry Seinfeld
  • Cosmo Kramer
  • Elaine Bennis
  • Home nou
• Joan Jacob
• Paul Pierce
• Kevin Garnett

Sense estil<ul.unstyled>

• Jeremy Bixby
• Robert Dezure
• Josh Washington
• Anton Capresi
• Els meus companys d'equip
  • Jordi Castanza
  • Jerry Seinfeld
  • Cosmo Kramer
  • Elaine Bennis
  • Home nou
• Joan Jacob
• Paul Pierce
• Kevin Garnett

Ordenat<ol>

1. Jeremy Bixby
2. Robert Dezure
3. Josh Washington
4. Anton Capresi
5. Els meus companys d'equip
   1. Jordi Castanza
   2. Jerry Seinfeld
   3. Cosmo Kramer
   4. Elaine Bennis
   5. Home nou
6. Joan Jacob
7. Paul Pierce
8. Kevin Garnett

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 theadmanera 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 tbodymanera 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

<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 type="text/javascript" src="js/jquery/jquery.tablesorter.min.js"></script> tipus = "text/javascript" src = "js/jquery/jquery.tablesorter.min.js" ></script> 
<script type = "text/javascript" > 
  $ ( document ). llest ( 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

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

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

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" type = "text/css" href = "less/bootstrap.less" media = "all" />     
<script type = "text/javascript" 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ïdor com ara box-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 ;          
}