Encapçalaments

<h1>Tots els encapçalaments HTML <h6>estan disponibles.

h1. Títol 1

h2. Títol 2

h3. Títol 3

h4. Títol 4

h5. Títol 5

h6. Títol 6

Còpia del cos

El valor predeterminat global de Bootstrap font-sizeés 14px , amb un line-heightde 20px . Això s'aplica a <body>i tots els paràgrafs. A més, <p>(paràgrafs) reben un marge inferior de la meitat de la seva alçada de línia (10 píxels per defecte).

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.

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.

Mecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

<p> ... </p>

Còpia del cos principal

Feu que un paràgraf destaqui afegint .lead.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

<p class = "plomb" > ... </p>

Construït amb menys

L'escala tipogràfica es basa en dues variables LESS en variables.less : @baseFontSizei @baseLineHeight. El primer és la mida de lletra base utilitzada a tot arreu i el segon és l'alçada de la línia base. Utilitzem aquestes variables i algunes matemàtiques senzilles per crear els marges, els farciments i les altures de línia de tot el nostre tipus i més. Personalitzeu-los i Bootstrap s'adapta.

Èmfasi

Feu servir les etiquetes d'èmfasi predeterminades d'HTML amb estils lleugers.

`<small>`

Per reduir l'èmfasi en blocs de text o en línia, utilitzeu l'etiqueta petita.

Aquesta línia de text s'ha de tractar com a lletra petita.

<p> <small> Aquesta línia de text s'ha de tractar com a lletra petita. </small> </p>

Atrevit

Per emfatitzar un fragment de text amb un pes de lletra més pesat.

El fragment de text següent es mostra com a text en negreta .

<strong> representat com a text en negreta </strong>

Cursiva

Per emfatitzar un fragment de text amb cursiva.

El fragment de text següent es mostra com a text en cursiva .

<em> representat com a text en cursiva </em>

Caps amunt!No dubteu a utilitzar-lo <b>i <i>en HTML5. <b>està destinat a ressaltar paraules o frases sense transmetre importància addicional, mentre que <i>és principalment per a veu, termes tècnics, etc.

Classes d'alineació

Realineu fàcilment el text als components amb classes d'alineació de text.

Text alineat a l'esquerra.

Text alineat al centre.

Text alineat a la dreta.

<p class = "text-left" > Text alineat a l'esquerra. </p> 
<p class = "text-center" > Text alineat al centre. </p> 
<p class = "text-right" > Text alineat a la dreta. </p>

Classes d'èmfasi

Transmet el significat a través del color amb un grapat de classes d'utilitat d'èmfasi.

Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.

Aenean eu leo quam. Pel·lentesc ornare sem lacinia quam venenatis.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

<p class = "silenciat" > Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh. </p> 
<p class = "text-warning" > Etiam porta sem malesuada magna mollis euismod. </p> 
<p class = "text-error" > Donec ullamcorper nulla non metus auctor fringilla. </p> 
<p class = "text-info" > Aenean eu leo quam. Pel·lentesc ornare sem lacinia quam venenatis. </p> 
<p class = "text-success" > Duis mollis, est non commodo luctus, nisi erat porttitor ligula. </p>

Abreviatures

Implementació estilitzada de l'element HTML <abbr>per a abreviatures i acrònims per mostrar la versió ampliada al passar el cursor. Les abreviatures amb un titleatribut tenen una vora inferior amb punts lleugers i un cursor d'ajuda al passar el cursor, proporcionant context addicional al passar el cursor.

`<abbr>`

Per al text ampliat en passar el cursor llarg d'una abreviatura, incloeu l' titleatribut.

Una abreviatura de la paraula atribut és attr .

<abbr title = "atribut" > attr </abbr>

`<abbr class="initialism">`

Afegiu .initialisma una abreviatura per a una mida de lletra una mica més petita.

HTML és el millor des del pa llescat.

<abbr title = "Llenguatge de marques d'hipertext" class = "inicialisme" > HTML </abbr>

Adreces

Presenta la informació de contacte de l'avantpassat més proper o de tot el conjunt de treballs.

`<address>`

Conserva el format acabant totes les línies amb <br>.

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

Nom complet
[email protected]

<adreça>
  <strong> Twitter, Inc. </strong><br>
  795 Folsom Ave, Suite 600 <br>
  San Francisco, CA 94107 <br>
  <abbr title = "Telèfon" > P: </abbr> (123) 456-7890 
</adreça>
 
<adreça>
  <strong> Nom complet </strong><br>
  <a href = "mailto:#" > [email protected] </a> 
</adreça>

Cites de bloc

Per citar blocs de contingut d'una altra font dins del vostre document.

Cita de bloqueig per defecte

Envolta <blockquote>qualsevol HTML com a cita. Per a cites directes, recomanem un <p>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

<quota de bloc>
  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. </p>
</blockquote>

Opcions de cotització en bloc

Canvis d'estil i contingut per a variacions senzilles d'un pressupost estàndard.

Anomenament d'una font

Afegeix <small>una etiqueta per identificar la font. Emboliqui el nom de l'obra font en <cite>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Algú famós a Source Title

<quota de bloc>
  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. </p>
  <small> Algú famós <cite title = "Source Title" > Font Títol </cite></small> 
</blockquote>

Visualitzacions alternatives

Utilitzeu .pull-right-lo per a una cita de bloc flotant i alineada a la dreta.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Algú famós a Source Title

<blockquote class = "tirar a la dreta" > 
  ...
</blockquote>

Llistes

No ordenat

Una llista d'elements en què l'ordre no importa explícitament.

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

<ul>
  <li> ... </li>
</ul>

Ordenat

Una llista d'elements en què l'ordre importa explícitament.

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem at massa
Facilisis in pretium nisl aliquet
Nulla volutpat aliquam velit
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem

<ol>
  <li> ... </li>
</ol>

Sense estil

Elimineu el farciment predeterminat list-stylei esquerre dels elements de la llista (només fills immediats).

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

<ul class = "sense estil" > 
  <li> ... </li>
</ul>

En linia

Col·loqueu tots els elements de la llista en una sola línia amb inline-blockun farcit lleuger.

Lorem ipsum
Phasellus iaculis
Nulla volutpat

<ul class = "en línia" > 
  <li> ... </li>
</ul>

Descripció

Una llista de termes amb les seves descripcions associades.

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.

<dl>
  <dt> ... </dt>
  <dd> ... </dd>
</dl>

Descripció horitzontal

Feu els termes i les descripcions en <dl>línia al costat de l'altre.

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.
Felis euismod sempre eget lacinia: Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

<dl class = "dl-horitzontal" > 
  <dt> ... </dt>
  <dd> ... </dd>
</dl>

Caps amunt!Les llistes de descripcions horitzontals truncaran els termes massa llargs per cabre a la correcció de la columna de l'esquerra text-overflow. A les finestres més estretes, canviaran al disseny apilat predeterminat.

En linia

Emboliqui fragments de codi en línia amb <code>.

Per exemple, <section>s'hauria d'embolicar en línia.

Per exemple , <codi> & lt ; la secció & gt ;</ code > s'hauria d'embolicar com a en línia .

Bloc bàsic

S'utilitza <pre>per a diverses línies de codi. Assegureu-vos d'escapar els claudàtors angulars del codi per a una representació adequada.

<p>Text de mostra aquí...</p>

<pre>
  <p>Mostra de text aquí...</p>
</pre>

Caps amunt!Assegureu-vos de mantenir el codi dins de <pre>les etiquetes el més a prop de l'esquerra possible; representarà totes les pestanyes.

Opcionalment, podeu afegir la .pre-scrollableclasse que establirà una alçada màxima de 350 px i proporcionarà una barra de desplaçament de l'eix y.

Estils per defecte

Per a un estil bàsic (encoixinat lleuger i només divisors horitzontals), afegiu la classe base .tablea qualsevol <table>.

#	Nom	Cognom	Nom d'usuari
1	senyal	Otto	@mdo
2	Jacob	Thornton	@greix
3	Larry	l'ocell	@twitter

<table class = "taula" > 
  …
</taula>

Classes opcionals

Afegiu qualsevol de les classes següents a la .tableclasse base.

`.table-striped`

Afegeix ratlles de zebra a qualsevol fila de la taula a <tbody>través del :nth-childselector CSS (no disponible a IE7-8).

#	Nom	Cognom	Nom d'usuari
1	senyal	Otto	@mdo
2	Jacob	Thornton	@greix
3	Larry	l'ocell	@twitter

<table class = "taula amb ratlles de taula" > 
  …
</taula>

`.table-bordered`

Afegiu vores i cantonades arrodonides a la taula.

#	Nom	Cognom	Nom d'usuari
1	senyal	Otto	@mdo
1	senyal	Otto	@getbootstrap
2	Jacob	Thornton	@greix
3	Larry l'ocell		@twitter

<table class = "taula amb vores de taula" > 
  …
</taula>

`.table-hover`

Habiliteu l'estat de flotació a les files de la taula dins d'un fitxer <tbody>.

#	Nom	Cognom	Nom d'usuari
1	senyal	Otto	@mdo
2	Jacob	Thornton	@greix
3	Larry l'ocell		@twitter

<table class = "taula-taula-hover" > 
  …
</taula>

`.table-condensed`

Fa que les taules siguin més compactes tallant el farciment cel·lular per la meitat.

#	Nom	Cognom	Nom d'usuari
1	senyal	Otto	@mdo
2	Jacob	Thornton	@greix
3	Larry l'ocell		@twitter

<table class = "taula condensada per taula" > 
  …
</taula>

Classes de fila opcionals

Utilitzeu classes contextuals per acolorir les files de les taules.

Classe	Descripció
`.success`	Indica una acció reeixida o positiva.
`.error`	Indica una acció perillosa o potencialment negativa.
`.warning`	Indica un avís que pot necessitar atenció.
`.info`	S'utilitza com a alternativa als estils predeterminats.

#	Producte	Pagament rebut	Estat
1	TB - Mensual	01/04/2012	Aprovat
2	TB - Mensual	02/04/2012	Declinat
3	TB - Mensual	03/04/2012	Pendents
4	TB - Mensual	04/04/2012	Truca per confirmar

...
  < tr class = "èxit" >
    <td> 1 < /td>
    <td>TB - Mensual</ td >
    < td > 01/04/2012 < / td >
    <td>Aprovat</ td >
  </ tr >
...

Marcat de taula compatible

Llista d'elements HTML de taula compatibles i com s'han d'utilitzar.

Etiqueta	Descripció
`<table>`	Element d'embolcall per mostrar dades en format tabular
`<thead>`	Element de contenidor per a files de capçalera de taula ( `<tr>`) per etiquetar columnes de taula
`<tbody>`	Element contenidor per a les files de la taula ( `<tr>`) al cos de la taula
`<tr>`	Element contenidor per a un conjunt de cel·les de taula ( `<td>`o `<th>`) que apareixen en una sola fila
`<td>`	Cel·la per defecte de la taula
`<th>`	Cel·la de taula especial per a etiquetes de columna (o fila, segons l'abast i la ubicació).
`<caption>`	Descripció o resum del que conté la taula, especialment útil per als lectors de pantalla

<taula>
  <caption> ... </caption>
  <cap>
    <tr>
      <th> ... </th>
      <th> ... </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td> ... </td>
      <td> ... </td>
    </tr>
  </tbody>
</taula>

Estils per defecte

Els controls de formulari individuals reben estil, però sense cap classe base necessària <form>ni canvis importants en el marcatge. Resulta en etiquetes apilades i alineades a l'esquerra a la part superior dels controls del formulari.

<formulari>
  <conjunt de camps>
    <legend> Llegenda </legend>
    <label> Nom de l'etiqueta </label>
    <input type = "text" placeholder = "Escriu alguna cosa..." >  
    <span class = "help-block" > Exemple de text d'ajuda a nivell de bloc aquí. </span> 
    <label class = "casella de verificació" > 
      <input type = "checkbox" > Fes una ullada 
    </label>
    <button type = "submit" class = "btn" > Envia </button>  
  </fieldset>
</form>

Dissenys opcionals

Amb Bootstrap s'inclouen tres dissenys de formularis opcionals per a casos d'ús habituals.

Formulari de cerca

Afegiu .form-search-lo al formulari i .search-querya l' <input>entrada de text extra arrodonit.

<form class = "form-search" > 
  <input type = "text" class = "entrada-mitjana de cerca-consulta" >  
  <button type = "submit" class = "btn" > Cerca </button>  
</form>

Formulari en línia

Afegiu .form-inlineper a etiquetes alineades a l'esquerra i controls de blocs en línia per a un disseny compacte.

<form class = "form-inline" > 
  <input type = "text" class = "input-small" placeholder = "Correu electrònic" >   
  <input type = "contrasenya" class = "input-small" placeholder = "Contrasenya" >   
  <label class = "casella de verificació" > 
    <input type = "checkbox" > Recorda'm 
  </label>
  <button type = "submit" class = "btn" > Inicieu la sessió </button>  
</form>

Forma horitzontal

Alineeu les etiquetes a la dreta i feu-les flotar cap a l'esquerra perquè apareguin a la mateixa línia que els controls. Requereix la majoria de canvis de marcatge d'un formulari predeterminat:

Afegeix .form-horizontalal formulari
Emboliqui les etiquetes i els controls.control-group
Afegeix .control-labela l'etiqueta
Emboliqui tots els controls associats .controlsper a una alineació adequada

<form class = "form-horitzontal" > 
  <div class = "grup de control" > 
    <label class = "control-label" for = "inputEmail" > Correu electrònic </label>  
    <div class = "controls" > 
      <input type = "text" id = "inputEmail" placeholder = "Correu electrònic" >   
    </div>
  </div>
  <div class = "grup de control" > 
    <label class = "control-label" for = "inputPassword" > Contrasenya </label>  
    <div class = "controls" > 
      <input type = "contrasenya" id = "inputPassword" placeholder = "Contrasenya" >   
    </div>
  </div>
  <div class = "grup de control" > 
    <div class = "controls" > 
      <label class = "casella de verificació" > 
        <input type = "checkbox" > Recorda'm 
      </label>
      <button type = "submit" class = "btn" > Inicieu la sessió </button>  
    </div>
  </div>
</form>

Controls de formulari compatibles

Exemples de controls de formulari estàndard compatibles amb un disseny de formulari d'exemple.

Entrades

Control de formulari més habitual, camps d'entrada basats en text. Inclou suport per a tots els tipus d'HTML5: text, contrasenya, datahora, datatime-local, data, mes, hora, setmana, número, correu electrònic, URL, cerca, tel i color.

Requereix l'ús d'un especificat typeen tot moment.

<input type = "text" placeholder = "Entrada de text" >

Àrea de text

Control de formulari que admet diverses línies de text. Canvieu rowsl'atribut segons sigui necessari.

<textarea rows = "3" ></textarea>

Caselles de selecció i ràdios

Les caselles de selecció serveixen per seleccionar una o diverses opcions en una llista, mentre que les ràdios serveixen per seleccionar una opció entre moltes.

Per defecte (apilat)

<label class = "casella de verificació" > 
  <input type = "checkbox" value = "" >  
  La primera opció és això i allò; assegureu-vos d'incloure per què és fantàstic
</label>
 
<label class = "ràdio" > 
  <input type = "radio" name = "optionsRadios" id = "optionsRadios1" value = "option1" marcada >     
  La primera opció és això i allò; assegureu-vos d'incloure per què és fantàstic
</label>
<label class = "ràdio" > 
  <input type = "radio" name = "optionsRadios" id = "optionsRadios2" value = "option2" >    
  La segona opció pot ser una altra cosa i seleccionar-la deseleccionarà l'opció una
</label>

Caselles de selecció en línia

Afegiu la .inlineclasse a una sèrie de caselles de selecció o ràdios perquè els controls apareguin a la mateixa línia.

<label class = "casilla de verificació en línia" > 
  <input type = "checkbox" id = "inlineCheckbox1" value = "option1" > 1   
</label>
<label class = "casilla de verificació en línia" > 
  <input type = "checkbox" id = "inlineCheckbox2" value = "option2" > 2   
</label>
<label class = "casilla de verificació en línia" > 
  <input type = "checkbox" id = "inlineCheckbox3" value = "option3" > 3   
</label>

Selecciona

Utilitzeu l'opció predeterminada o especifiqueu a multiple="multiple"per mostrar diverses opcions alhora.

<seleccioneu>
  <opció> 1 </opció>
  <opció> 2 </opció>
  <opció> 3 </opció>
  <opció> 4 </opció>
  <opció> 5 </opció>
</select>
 
<select multiple = "múltiple" > 
  <opció> 1 </opció>
  <opció> 2 </opció>
  <opció> 3 </opció>
  <opció> 4 </opció>
  <opció> 5 </opció>
</select>

Ampliació dels controls de formulari

A més dels controls del navegador existents, Bootstrap inclou altres components de formulari útils.

Entrades adjuntes i adjuntes

Afegiu text o botons abans o després de qualsevol entrada basada en text. Tingueu en compte que selectels elements no s'admeten aquí.

Opcions per defecte

Emboliqui un .add-oni un inputamb una de les dues classes per anteposar o afegir text a una entrada.

<div class = "input-prepend" > 
  <span class = "complement" > @ </span> 
  <input class = "span2" id = "prependedInput" type = "text" placeholder = "Nom d'usuari" >    
</div>
<div class = "input-append" > 
  <input class = "span2" id = "appendedInput" type = "text" >   
  <span class = "add-on" > , 00 </span> 
</div>

Combinat

Utilitzeu les dues classes i dues instàncies de .add-onper anteposar i afegir una entrada.

<div class = "input-prepend input-append" > 
  <span class = "complement" > $ </span> 
  <input class = "span2" id = "appendedPrependedInput" type = "text" >   
  <span class = "add-on" > , 00 </span> 
</div>

Botons en lloc de text

En lloc d'a <span>amb text, utilitzeu a .btnper adjuntar un botó (o dos) a una entrada.

<div class = "input-append" > 
  <input class = "span2" id = "appendedInputButton" type = "text" >   
  <button class = "btn" type = "button" > Aneu! </button>  
</div>

<div class = "input-append" > 
  <input class = "span2" id = "appendedInputButtons" type = "text" >   
  <button class = "btn" type = "button" > Cerca </button>  
  <button class = "btn" type = "button" > Opcions </button>  
</div>

Botons desplegables

<div class = "input-append" > 
  <input class = "span2" id = "appendedDropdownButton" type = "text" >   
  <div class = "btn-group" > 
    <button class = "btn dropdown-toggle" data-toggle = "menjador desplegable" >  
      Acció
      <span class = "caret" ></span> 
    </button>
    <ul class = "menú desplegable" > 
      ...
    </ul>
  </div>
</div>

<div class = "input-prepend" > 
  <div class = "btn-group" > 
    <button class = "btn dropdown-toggle" data-toggle = "menjador desplegable" >  
      Acció
      <span class = "caret" ></span> 
    </button>
    <ul class = "menú desplegable" > 
      ...
    </ul>
  </div>
  <input class = "span2" id = "prependedDropdownButton" type = "text" >   
</div>

<div class = "input-prepend input-append" > 
  <div class = "btn-group" > 
    <button class = "btn dropdown-toggle" data-toggle = "menjador desplegable" >  
      Acció
      <span class = "caret" ></span> 
    </button>
    <ul class = "menú desplegable" > 
      ...
    </ul>
  </div>
  <input class = "span2" id = "appendedPrependedDropdownButton" type = "text" >   
  <div class = "btn-group" > 
    <button class = "btn dropdown-toggle" data-toggle = "menjador desplegable" >  
      Acció
      <span class = "caret" ></span> 
    </button>
    <ul class = "menú desplegable" > 
      ...
    </ul>
  </div>
</div>

Grups desplegables segmentats

<formulari>
  <div class = "input-prepend" > 
    <div class = "btn-group" > ... </div> 
    < tipus d'entrada = "text" > 
  </div>
  <div class = "input-append" > 
    < tipus d'entrada = "text" > 
    <div class = "btn-group" > ... </div> 
  </div>
</form>

Formulari de cerca

<form class = "form-search" > 
  <div class = "input-append" > 
    <input type = "text" class = "span2 search-query" >  
    <button type = "submit" class = "btn" > Cerca </button>  
  </div>
  <div class = "input-prepend" > 
    <button type = "submit" class = "btn" > Cerca </button>  
    <input type = "text" class = "span2 search-query" >  
  </div>
</form>

Control de mida

Utilitzeu classes de mida relativa com .input-largeles vostres entrades o coincideixen amb les mides de les columnes de la quadrícula mitjançant .span*classes.

Entrades a nivell de bloc

Feu que qualsevol element <input>o <textarea>element es comporti com un element a nivell de bloc.

<input class = "input-block-level" type = "text" placeholder = ".input-block-level" >

Mida relativa

<input class = "input-mini" type = "text" placeholder = ".input-mini" >   
<input class = "input-small" type = "text" placeholder = ".input-small" >   
<input class = "input-medium" type = "text" placeholder = ".input-medium" >   
<input class = "input-large" type = "text" placeholder = ".input-large" >   
<input class = "input-xlarge" type = "text" placeholder = ".input-xlarge" >   
<input class = "input-xxlarge" type = "text" placeholder = ".input-xxlarge" >

Caps amunt!En futures versions, alterarem l'ús d'aquestes classes d'entrada relatives perquè coincideixin amb les mides dels nostres botons. Per exemple, .input-largeaugmentarà el farciment i la mida del tipus de lletra d'una entrada.

Mida de la graella

Utilitzeu .span1per .span12a les entrades que coincideixen amb les mateixes mides de les columnes de la quadrícula.

<input class = "span1" type = "text" placeholder = ".span1" >   
<input class = "span2" type = "text" placeholder = ".span2" >   
<input class = "span3" type = "text" placeholder = ".span3" >   
<select class = "span1" > 
  ...
</select>
<select class = "span2" > 
  ...
</select>
<select class = "span3" > 
  ...
</select>

Per a diverses entrades de quadrícula per línia, utilitzeu la .controls-rowclasse modificadora per a l'espaiat adequat . Flota les entrades per col·lapsar els espais en blanc, estableix els marges adequats i esborra el flotant.

<div class = "controls" > 
  <input class = "span5" type = "text" placeholder = ".span5" >   
</div>
<div class = "controls controls-row" > 
  <input class = "span4" type = "text" placeholder = ".span4" >   
  <input class = "span1" type = "text" placeholder = ".span1" >   
</div>
...

Entrades no editables

Presenta les dades en un formulari que no es pugui editar sense utilitzar l'etiquetatge real del formulari.

<span class = "input-xlarge uneditable-input" > Alguns valors aquí </span>

Forma accions

Finalitzar un formulari amb un grup d'accions (botons). Quan es col·loquen dins d'un .form-actions, els botons es sagnaran automàticament per alinear-se amb els controls del formulari.

<div class = "form-actions" > 
  <button type = "submit" class = "btn btn-primary" > Desa els canvis </button>  
  <button type = "button" class = "btn" > Cancel·la </button>  
</div>

Text d'ajuda

Compatibilitat en línia i a nivell de bloc per al text d'ajuda que apareix al voltant dels controls de formulari.

Ajuda en línia

<input type = "text" ><span class = "help-inline" > Text d'ajuda en línia </span>

Ajuda de bloqueig

<input type = "text" ><span class = "help-block" > Un bloc més llarg de text d'ajuda que es trenca en una línia nova i pot estendre's més enllà d'una línia. </span>

Estats de control de formularis

Proporcioneu comentaris als usuaris o visitants amb estats bàsics de comentaris sobre controls de formulari i etiquetes.

Enfocament d'entrada

outlineSuprimim els estils predeterminats d'alguns controls de formulari i apliquem una box-shadowal seu lloc per a :focus.

<input class = "input-xlarge" id = "focusedInput" type = "text" value = "Això està enfocat..." >

Entrades no vàlides

Entrades d'estil mitjançant la funcionalitat predeterminada del navegador amb :invalid. Especifiqueu un type, afegiu l' requiredatribut si el camp no és opcional i (si escau) especifiqueu un pattern.

Això no està disponible a les versions d'Internet Explorer 7-9 a causa de la manca de suport per als pseudoselectors CSS.

<input class = "span3" type = "correu electrònic" necessari >

Entrades desactivades

Afegiu l' disabledatribut a una entrada per evitar l'entrada de l'usuari i activar un aspecte lleugerament diferent.

<input class = "input-xlarge" id = "disabledInput" type = "text" placeholder = "Entrada desactivada aquí..." desactivada >

Estats de validació

Bootstrap inclou estils de validació per a missatges d'error, advertència, informació i èxit. Per utilitzar-lo, afegiu la classe adequada a l'entorn .control-group.

<div class = "advertència del grup de control" > 
  <label class = "control-label" for = "inputWarning" > Entrada amb avís </label>  
  <div class = "controls" > 
    <input type = "text" id = "inputWarning" >  
    <span class = "help-inline" > Pot ser que alguna cosa hagi anat malament </span> 
  </div>
</div>
 
<div class = "error del grup de control" > 
  <label class = "control-label" for = "inputError" > Entrada amb error </label>  
  <div class = "controls" > 
    <input type = "text" id = "inputError" >  
    <span class = "help-inline" > Corregiu l'error </span> 
  </div>
</div>
 
<div class = "informació del grup de control" > 
  <label class = "control-label" for = "inputInfo" > Entrada amb informació </label>  
  <div class = "controls" > 
    <input type = "text" id = "inputInfo" >  
    <span class = "help-inline" > El nom d' usuari ja s'ha pres </span> 
  </div>
</div>
 
<div class = "èxit del grup de control" > 
  <label class = "control-label" for = "inputSuccess" > Entrada amb èxit </label>  
  <div class = "controls" > 
    <input type = "text" id = "inputSuccess" >  
    <span class = "help-inline" > Woohoo! </span> 
  </div>
</div>

Botons per defecte

Els estils de botons es poden aplicar a qualsevol cosa amb la .btnclasse aplicada. Tanmateix, normalment voldreu aplicar-los només a elements <a>i <button>per obtenir la millor representació.

Botó	classe=""	Descripció
	`btn`	Botó gris estàndard amb degradat
	`btn btn-primary`	Proporciona un pes visual addicional i identifica l'acció principal en un conjunt de botons
	`btn btn-info`	S'utilitza com a alternativa als estils predeterminats
	`btn btn-success`	Indica una acció reeixida o positiva
	`btn btn-warning`	Indica que cal tenir precaució amb aquesta acció
	`btn btn-danger`	Indica una acció perillosa o potencialment negativa
	`btn btn-inverse`	Botó alternatiu gris fosc, no vinculat a una acció o ús semàntic
	`btn btn-link`	Reduïu l'accent a un botó fent-lo semblar a un enllaç mantenint el comportament del botó

Compatibilitat entre navegadors

IE9 no retalla els degradats de fons a les cantonades arrodonides, de manera que l'eliminem. Relacionat, IE9 modifica els buttonelements desactivats, fent que el text sigui gris amb una ombra de text desagradable que no podem solucionar.

Mides de botons

Voleu botons més grans o més petits? Afegiu .btn-large, .btn-small, o .btn-miniper a mides addicionals.

<p>
  <button class = "btn btn-large btn-primary" type = "button" > Botó gran </button>  
  <button class = "btn btn-large" type = "button" > Botó gran </button>  
</p>
<p>
  <button class = "btn btn-primary" type = "button" > Botó per defecte </button>  
  <button class = "btn" type = "button" > Botó per defecte </button>  
</p>
<p>
  <button class = "btn btn-small btn-primary" type = "button" > Botó petit </button>  
  <button class = "btn btn-small" type = "button" > Botó petit </button>  
</p>
<p>
  <button class = "btn btn-mini btn-primary" type = "button" > Mini botó </button>  
  <button class = "btn btn-mini" type = "button" > Mini botó </button>  
</p>

Creeu botons de nivell de bloc, els que abasten tota l'amplada d'un pare, afegint .btn-block.

<button class = "btn btn-large btn-block btn-primary" type = "button" > Botó de nivell de bloc </button>  
<button class = "btn btn-large btn-block" type = "button" > Botó de nivell de bloc </button>

Estat desactivat

Feu que els botons semblin incliquables tornant-los a esvair un 50%.

Element d'ancoratge

Afegeix la .disabledclasse als <a>botons.

Enllaç principal Enllaç

<a href = "#" class = "btn btn-large btn-primary disabled" > Enllaç principal </a>  
<a href = "#" class = "btn btn-large disabled" > Enllaç </a>

Caps amunt!Aquí fem servir .disabledcom a classe d'utilitat, semblant a la .activeclasse comuna, de manera que no es requereix cap prefix. A més, aquesta classe és només per a estètica; heu d'utilitzar JavaScript personalitzat per desactivar els enllaços aquí.

Element botó

Afegiu l' disabledatribut als <button>botons.

<button type = "button" class = "btn btn-large btn-primary disabled" disabled = "disabled" > Botó principal </button>   
<button type = "button" class = "btn btn-large" desactivat > Botó </button>

Una classe, diverses etiquetes

Utilitzeu la .btnclasse en un element <a>, <button>, o .<input>

<a class = "btn" href = "" > Enllaç </a>  
<button class = "btn" type = "submit" > Botó </button>  
<input class = "btn" type = "button" value = "Entrada" >   
<input class = "btn" type = "submit" value = "Envia" >

Com a pràctica recomanada, intenteu fer coincidir l'element amb el vostre context per assegurar-vos que la representació entre navegadors coincideixi. Si teniu un input, utilitzeu un <input type="submit">per al vostre botó.

Afegiu classes a un <img>element per estilitzar fàcilment les imatges en qualsevol projecte.

<img src = "..." class = "img-arrodonida" >  
<img src = "..." class = "img-cercle" >  
<img src = "..." class = "img-polaroid" >

Caps amunt! .img-roundedi .img-circleno funcionen a IE7-8 per manca de border-radiussuport.

Glifs d'icones

140 icones en forma de sprite, disponibles en gris fosc (per defecte) i blanc, proporcionades per Glyphicons .

icona-vidre
icona-música
cerca d'icones
icona-sobre
icona-cor
icona-estrella
icona-estrella-buida
icona-usuari
icona-pel·lícula
icona-th-gran
icona-è
icona-th-lista
icona-ok
icona-eliminar
icona-apropa
icona-ampliar-reduir
icona apagada
icona-senyal
icona-cog
icona-paperera
icona-casa
fitxer-icona
icona-hora
icona-carretera
icona-descàrrega-alt
icona-descàrrega
icona de càrrega
icona-safata d'entrada
icona-juga-cercle
icona-repetició
actualització d'icones
icon-list-alt
icona de bloqueig
icona-bandera
icona-auriculars
icona-volum apagat
icona-abaix el volum
icona-augment de volum
icona-qrcode
icona-codi de barres
icona-etiqueta
etiquetes d'icones
llibre d'icones
icona-marcador
icona-impressió
icona-càmera
font-icona
icona en negreta
icona-cursiva
icona-alçada-text
icona-amplada-text
icona-alinear-esquerra
icon-align-center
icona-alinear-dreta
icon-align-justify
llista d'icones
icona-sagnat-esquerra
icona-sagnat-dreta
icona-facetime-vídeo
imatge-icona
icona-llapis
icona-mapa-marcador
icona-ajust
icona-tint
icona-editar
icon-share
icona de verificació
icona-moviment
icona-pas enrere
icona-enrere ràpid
icona-enrere
joc d'icones
icona-pausa
icona-stop
icona-endavant
icona-avançament ràpid
icona-pas endavant
icona-expulsió
icona-chevron-esquerra
icona-chevron-dreta
signe més-icona
icona-signe-menys
icona-eliminar-signe
icona-signe d'acord
icona-signe-pregunta
icona-signe d'informació
icona-captura de pantalla
icona-elimina-cercle
icona-ok-cercle
icona-ban-cercle
icona-fletxa-esquerra
icona-fletxa-dreta
icona-fletxa amunt
icona-fletxa avall
icon-share-alt
icon-size-full
icona-canviar la mida-petita
icona més
icona-menys
icona-asterisc
icona-signe d'exclamació
icona-regal
icona-fulla
icona-foc
icona-ull obert
icona-ull-tancar
icona-senyal-advertència
icona-pla
icona-calendari
icona-aleatori
icona-comentari
icona-imant
icona-chevron-up
icona-chevron-avall
icona-retuitejar
icona-carretó de la compra
icona-carpeta-tancar
icona-carpeta-obert
icona-canvi de mida-vertical
icona-canviar la mida-horitzontal
icona-hdd
icona-bulorn
icona-campana
icona-certificat
icona-polze cap amunt
icona-polze cap avall
icona-man-dreta
icona-mà-esquerra
icona-man amunt
icona-man avall
icona-cercle-fletxa-dreta
icona-cercle-fletxa-esquerra
icona-cercle-fletxa amunt
icona-cercle-fletxa avall
icona-globus
icona-clau anglesa
icones-tasques
icona-filtre
icona-maletí
icona-pantalla completa

Atribució de glificons

Els Halflings de Glyphicons normalment no estan disponibles de forma gratuïta, però un acord entre Bootstrap i els creadors de Glyphicons ho ha fet possible sense cap cost per als desenvolupadors. Com a agraïment, us demanem que inclogueu un enllaç opcional a Glyphicons sempre que sigui pràctic.

Com utilitzar

Totes les icones requereixen una <i>etiqueta amb una classe única, amb el prefix icon-. Per utilitzar-lo, col·loqueu el codi següent gairebé a qualsevol lloc:

<i class = "cerca d'icones" ></i>

També hi ha estils disponibles per a icones invertides (blanques), preparats amb una classe addicional. Aplicarem aquesta classe específicament als estats de navegació i actius per als enllaços de navegació i desplegables.

<i class = "icona-cerca icona-blanc" ></i>

Caps amunt!Quan utilitzeu cadenes de text al costat, com en botons o enllaços de navegació, assegureu-vos de deixar un espai després de l' <i>etiqueta per a un espai adequat.

Exemples d'icones

Utilitzeu-los en botons, grups de botons per a una barra d'eines, navegació o entrades de formularis afegides.

Botons

Grup de botons en una barra d'eines de botons

<div class = "btn-toolbar" > 
  <div class = "btn-group" > 
    <a class = "btn" href = "#" ><i class = "icon-align-left" ></i></a>   
    <a class = "btn" href = "#" ><i class = "icon-align-center" ></i></a>   
    <a class = "btn" href = "#" ><i class = "icon-align-right" ></i></a>   
    <a class = "btn" href = "#" ><i class = "icon-align-justify" ></i></a>   
  </div>
</div>

Menú desplegable en un grup de botons

Usuari

<div class = "btn-group" > 
  <a class = "btn btn-primary" href = "#" ><i class = "icona-usuari icona-blanc" ></i> Usuari </a>   
  <a class = "btn btn-primary dropdown-toggle" data-toggle = "dropdown" href = "#" ><span class = "caret" ></span></a>    
  <ul class = "menú desplegable" > 
    <li><a href = "#" ><i class = "icona-llapis" ></i> Edita </a></li>  
    <li><a href = "#" ><i class = "icon-trash" ></i> Suprimeix </a></li>  
    <li><a href = "#" ><i class = "icon-ban-circle" ></i> Prohibició </a></li>  
    <li class = "divisor" ></li> 
    <li><a href = "#" ><i class = "i" ></i> Fer administrador </a></li>  
  </ul>
</div>

Mides de botons

Estrella Estrella Estrella

<a class = "btn btn-large" href = "#" ><i class = "icon-star" ></i> Estrella </a>   
<a class = "btn btn-small" href = "#" ><i class = "icon-star" ></i> Estrella </a>   
<a class = "btn btn-mini" href = "#" ><i class = "icon-star" ></i> Estrella </a>

Navegació

<ul class = "llista de navegació de navegació" > 
  <li class = "active" ><a href = "#" ><i class = "icon-home icon-white" ></i> Inici </a></li>   
  <li><a href = "#" ><i class = "icon-book" ></i> Biblioteca </a></li>  
  <li><a href = "#" ><i class = "icon-pencil" ></i> Aplicacions </a></li>  
  <li><a href = "#" ><i class = "i" ></i> Diversos </a></li>  
</ul>

Camps de formulari

<div class = "grup de control" > 
  <label class = "control-label" for = "inputIcon" > Adreça de correu electrònic </label>  
  <div class = "controls" > 
    <div class = "input-prepend" > 
      <span class = "complement" ><i class = "icona-sobre" ></i></span>  
      <input class = "span2" id = "inputIcon" type = "text" >   
    </div>
  </div>
</div>

Tipografia

Encapçalaments

h1. Títol 1

h2. Títol 2

h3. Títol 3

h4. Títol 4

h5. Títol 5

h6. Títol 6

Còpia del cos

Còpia del cos principal

Construït amb menys

Èmfasi

<small>

Atrevit

Cursiva

Classes d'alineació

Classes d'èmfasi

Abreviatures

<abbr>

<abbr class="initialism">

Adreces

<address>

Cites de bloc

Cita de bloqueig per defecte

Opcions de cotització en bloc

Anomenament d'una font

Visualitzacions alternatives

Llistes

No ordenat

Ordenat

Sense estil

En linia

Descripció

Descripció horitzontal

Codi

En linia

Bloc bàsic

Taules

Estils per defecte

Classes opcionals

.table-striped

.table-bordered

.table-hover

.table-condensed

Classes de fila opcionals

Marcat de taula compatible

Formes

Estils per defecte

Dissenys opcionals

Formulari de cerca

Formulari en línia

Forma horitzontal

Controls de formulari compatibles

Entrades

Àrea de text

Caselles de selecció i ràdios

Per defecte (apilat)

Caselles de selecció en línia

Selecciona

Ampliació dels controls de formulari

Entrades adjuntes i adjuntes

Opcions per defecte

Combinat

Botons en lloc de text

Botons desplegables

Grups desplegables segmentats

Formulari de cerca

Control de mida

Entrades a nivell de bloc

Mida relativa

Mida de la graella

Entrades no editables

Forma accions

Text d'ajuda

Ajuda en línia

Ajuda de bloqueig

Estats de control de formularis

Enfocament d'entrada

Entrades no vàlides

Entrades desactivades

`<small>`

`<abbr>`

`<abbr class="initialism">`

`<address>`

`.table-striped`

`.table-bordered`

`.table-hover`

`.table-condensed`