CSS base

Elements HTML fonamentals estilitzats i millorats amb classes extensibles.

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.

  1. <p class = "text-left" > Text alineat a l'esquerra. </p>
  2. <p class = "text-center" > Text alineat al centre. </p>
  3. <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.

  1. <p class = "silenciat" > Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh. </p>
  2. <p class = "text-warning" > Etiam porta sem malesuada magna mollis euismod. </p>
  3. <p class = "text-error" > Donec ullamcorper nulla non metus auctor fringilla. </p>
  4. <p class = "text-info" > Aenean eu leo ​​quam. Pel·lentesc ornare sem lacinia quam venenatis. </p>
  5. <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]
  1. <adreça>
  2. <strong> Twitter, Inc. </strong><br>
  3. 795 Folsom Ave, Suite 600 <br>
  4. San Francisco, CA 94107 <br>
  5. <abbr title = "Telèfon" > P: </abbr> (123) 456-7890
  6. </adreça>
  7.  
  8. <adreça>
  9. <strong> Nom complet </strong><br>
  10. <a href = "mailto:#" > [email protected] </a>
  11. </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.

  1. <quota de bloc>
  2. <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. </p>
  3. </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
  1. <quota de bloc>
  2. <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. </p>
  3. <small> Algú famós <cite title = "Source Title" > Font Títol </cite></small>
  4. </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
  1. <blockquote class = "tirar a la dreta" >
  2. ...
  3. </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
  1. <ul>
  2. <li> ... </li>
  3. </ul>

Ordenat

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

  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
  1. <ol>
  2. <li> ... </li>
  3. </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
  1. <ul class = "sense estil" >
  2. <li> ... </li>
  3. </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
  1. <ul class = "en línia" >
  2. <li> ... </li>
  3. </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.
  1. <dl>
  2. <dt> ... </dt>
  3. <dd> ... </dd>
  4. </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.
  1. <dl class = "dl-horitzontal" >
  2. <dt> ... </dt>
  3. <dd> ... </dd>
  4. </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.
  1. 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>
  1. <pre>
  2. <p>Mostra de text aquí...</p>
  3. </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
  1. <table class = "taula" >
  2. </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
  1. <table class = "taula amb ratlles de taula" >
  2. </taula>

.table-bordered

Afegiu vores i cantonades arrodonides a la taula.

# Nom Cognom Nom d'usuari
1 senyal Otto @mdo
senyal Otto @getbootstrap
2 Jacob Thornton @greix
3 Larry l'ocell @twitter
  1. <table class = "taula amb vores de taula" >
  2. </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
  1. <table class = "taula-taula-hover" >
  2. </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
  1. <table class = "taula condensada per taula" >
  2. </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
  1. ...
  2. < tr class = "èxit" >
  3. <td> 1 < /td>
  4. <td>TB - Mensual</ td >
  5. < td > 01/04/2012 < / td >
  6. <td>Aprovat</ td >
  7. </ tr >
  8. ...

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
  1. <taula>
  2. <caption> ... </caption>
  3. <cap>
  4. <tr>
  5. <th> ... </th>
  6. <th> ... </th>
  7. </tr>
  8. </thead>
  9. <tbody>
  10. <tr>
  11. <td> ... </td>
  12. <td> ... </td>
  13. </tr>
  14. </tbody>
  15. </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.

Llegenda Exemple de text d'ajuda a nivell de bloc aquí.
  1. <formulari>
  2. <conjunt de camps>
  3. <legend> Llegenda </legend>
  4. <label> Nom de l'etiqueta </label>
  5. <input type = "text" placeholder = "Escriu alguna cosa..." >
  6. <span class = "help-block" > Exemple de text d'ajuda a nivell de bloc aquí. </span>
  7. <label class = "casella de verificació" >
  8. <input type = "checkbox" > Fes una ullada
  9. </label>
  10. <button type = "submit" class = "btn" > Envia </button>
  11. </fieldset>
  12. </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.

  1. <form class = "form-search" >
  2. <input type = "text" class = "entrada-mitjana de cerca-consulta" >
  3. <button type = "submit" class = "btn" > Cerca </button>
  4. </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.

  1. <form class = "form-inline" >
  2. <input type = "text" class = "input-small" placeholder = "Correu electrònic" >
  3. <input type = "contrasenya" class = "input-small" placeholder = "Contrasenya" >
  4. <label class = "casella de verificació" >
  5. <input type = "checkbox" > Recorda'm
  6. </label>
  7. <button type = "submit" class = "btn" > Inicieu la sessió </button>
  8. </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
  1. <form class = "form-horitzontal" >
  2. <div class = "grup de control" >
  3. <label class = "control-label" for = "inputEmail" > Correu electrònic </label>
  4. <div class = "controls" >
  5. <input type = "text" id = "inputEmail" placeholder = "Correu electrònic" >
  6. </div>
  7. </div>
  8. <div class = "grup de control" >
  9. <label class = "control-label" for = "inputPassword" > Contrasenya </label>
  10. <div class = "controls" >
  11. <input type = "contrasenya" id = "inputPassword" placeholder = "Contrasenya" >
  12. </div>
  13. </div>
  14. <div class = "grup de control" >
  15. <div class = "controls" >
  16. <label class = "casella de verificació" >
  17. <input type = "checkbox" > Recorda'm
  18. </label>
  19. <button type = "submit" class = "btn" > Inicieu la sessió </button>
  20. </div>
  21. </div>
  22. </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.

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

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


  1. <label class = "casella de verificació" >
  2. <input type = "checkbox" value = "" >
  3. La primera opció és això i allò; assegureu-vos d'incloure per què és fantàstic
  4. </label>
  5.  
  6. <label class = "ràdio" >
  7. < tipus d'entrada = "ràdio" name = "optionsRadios" id = "optionsRadios1" value = "option1" marcada >
  8. La primera opció és això i allò; assegureu-vos d'incloure per què és fantàstic
  9. </label>
  10. <label class = "ràdio" >
  11. < tipus d'entrada = "ràdio" name = "optionsRadios" id = "optionsRadios2" value = "option2" >
  12. La segona opció pot ser una altra cosa i seleccionar-la deseleccionarà l'opció una
  13. </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.

  1. <etiqueta class = "casilla de verificació en línia" >
  2. <input type = "checkbox" id = "inlineCheckbox1" value = "option1" > 1
  3. </label>
  4. <etiqueta class = "casilla de verificació en línia" >
  5. <input type = "checkbox" id = "inlineCheckbox2" value = "option2" > 2
  6. </label>
  7. < classe d'etiquetes = "casilla de verificació en línia" >
  8. <input type = "checkbox" id = "inlineCheckbox3" valor = "option3" > 3
  9. </label>

Selecciona

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


  1. <seleccioneu>
  2. <opció> 1 </opció>
  3. <opció> 2 </opció>
  4. <opció> 3 </opció>
  5. <opció> 4 </opció>
  6. <opció> 5 </opció>
  7. </select>
  8.  
  9. <select multiple = "múltiple" >
  10. <opció> 1 </opció>
  11. <opció> 2 </opció>
  12. <opció> 3 </opció>
  13. <opció> 4 </opció>
  14. <opció> 5 </opció>
  15. </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.

@

.00
  1. <div class = "input-prepend" >
  2. <span class = "complement" > @ </span>
  3. <input class = "span2" id = "prependedInput" type = "text" placeholder = "Nom d'usuari" >
  4. </div>
  5. <div class = "input-append" >
  6. <input class = "span2" id = "appendedInput" type = "text" >
  7. <span class = "add-on" > , 00 </span>
  8. </div>

Combinat

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

$ .00
  1. <div class = "input-prepend input-append" >
  2. <span class = "complement" > $ </span>
  3. <input class = "span2" id = "appendedPrependedInput" type = "text" >
  4. <span class = "add-on" > , 00 </span>
  5. </div>

Botons en lloc de text

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

  1. <div class = "input-append" >
  2. <input class = "span2" id = "appendedInputButton" type = "text" >
  3. <button class = "btn" type = "button" > Aneu! </button>
  4. </div>
  1. <div class = "input-append" >
  2. <input class = "span2" id = "appendedInputButtons" type = "text" >
  3. <button class = "btn" type = "button" > Cerca </button>
  4. <button class = "btn" type = "button" > Opcions </button>
  5. </div>

Botons desplegables

  1. <div class = "input-append" >
  2. <input class = "span2" id = "appendedDropdownButton" type = "text" >
  3. <div class = "btn-group" >
  4. <button class = "btn dropdown-toggle" data-toggle = "menjador desplegable" >
  5. Acció
  6. <span class = "caret" ></span>
  7. </button>
  8. <ul class = "menú desplegable" >
  9. ...
  10. </ul>
  11. </div>
  12. </div>
  1. <div class = "input-prepend" >
  2. <div class = "btn-group" >
  3. <button class = "btn dropdown-toggle" data-toggle = "menjador desplegable" >
  4. Acció
  5. <span class = "caret" ></span>
  6. </button>
  7. <ul class = "menú desplegable" >
  8. ...
  9. </ul>
  10. </div>
  11. <input class = "span2" id = "prependedDropdownButton" type = "text" >
  12. </div>
  1. <div class = "input-prepend input-append" >
  2. <div class = "btn-group" >
  3. <button class = "btn dropdown-toggle" data-toggle = "menjador desplegable" >
  4. Acció
  5. <span class = "caret" ></span>
  6. </button>
  7. <ul class = "menú desplegable" >
  8. ...
  9. </ul>
  10. </div>
  11. <input class = "span2" id = "appendedPrependedDropdownButton" type = "text" >
  12. <div class = "btn-group" >
  13. <button class = "btn dropdown-toggle" data-toggle = "menjador desplegable" >
  14. Acció
  15. <span class = "caret" ></span>
  16. </button>
  17. <ul class = "menú desplegable" >
  18. ...
  19. </ul>
  20. </div>
  21. </div>

Grups desplegables segmentats

  1. <formulari>
  2. <div class = "input-prepend" >
  3. <div class = "btn-group" > ... </div>
  4. < tipus d'entrada = "text" >
  5. </div>
  6. <div class = "input-append" >
  7. < tipus d'entrada = "text" >
  8. <div class = "btn-group" > ... </div>
  9. </div>
  10. </form>

Formulari de cerca

  1. <form class = "form-search" >
  2. <div class = "input-append" >
  3. <input type = "text" class = "span2 search-query" >
  4. <button type = "submit" class = "btn" > Cerca </button>
  5. </div>
  6. <div class = "input-prepend" >
  7. <button type = "submit" class = "btn" > Cerca </button>
  8. <input type = "text" class = "span2 search-query" >
  9. </div>
  10. </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.

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

Mida relativa

  1. <input class = "input-mini" type = "text" placeholder = ".input-mini" >
  2. <input class = "input-small" type = "text" placeholder = ".input-small" >
  3. <input class = "input-medium" type = "text" placeholder = ".input-medium" >
  4. <input class = "input-large" type = "text" placeholder = ".input-large" >
  5. <input class = "input-xlarge" type = "text" placeholder = ".input-xlarge" >
  6. <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.

  1. <input class = "span1" type = "text" placeholder = ".span1" >
  2. <input class = "span2" type = "text" placeholder = ".span2" >
  3. <input class = "span3" type = "text" placeholder = ".span3" >
  4. <select class = "span1" >
  5. ...
  6. </select>
  7. <select class = "span2" >
  8. ...
  9. </select>
  10. <select class = "span3" >
  11. ...
  12. </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.

  1. <div class = "controls" >
  2. <input class = "span5" type = "text" placeholder = ".span5" >
  3. </div>
  4. <div class = "controls controls-row" >
  5. <input class = "span4" type = "text" placeholder = ".span4" >
  6. <input class = "span1" type = "text" placeholder = ".span1" >
  7. </div>
  8. ...

Entrades no editables

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

Algun valor aquí
  1. <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.

  1. <div class = "form-actions" >
  2. <button type = "submit" class = "btn btn-primary" > Desa els canvis </button>
  3. <button type = "button" class = "btn" > Cancel·la </button>
  4. </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

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

Ajuda de bloqueig

Un bloc més llarg de text d'ajuda que es trenca en una línia nova i que es pot estendre més enllà d'una línia.
  1. <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 que 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.

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

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

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

Alguna cosa pot haver anat malament
Si us plau, corregiu l'error
El nom d'usuari està agafat
Woohoo!
  1. <div class = "advertència del grup de control" >
  2. <label class = "control-label" for = "inputWarning" > Entrada amb avís </label>
  3. <div class = "controls" >
  4. <input type = "text" id = "inputWarning" >
  5. <span class = "help-inline" > Pot ser que alguna cosa hagi anat malament </span>
  6. </div>
  7. </div>
  8.  
  9. <div class = "error del grup de control" >
  10. <label class = "control-label" for = "inputError" > Entrada amb error </label>
  11. <div class = "controls" >
  12. <input type = "text" id = "inputError" >
  13. <span class = "help-inline" > Corregiu l'error </span>
  14. </div>
  15. </div>
  16.  
  17. <div class = "informació del grup de control" >
  18. <label class = "control-label" for = "inputInfo" > Entrada amb informació </label>
  19. <div class = "controls" >
  20. <input type = "text" id = "inputInfo" >
  21. <span class = "help-inline" > El nom d' usuari ja s'ha pres </span>
  22. </div>
  23. </div>
  24.  
  25. <div class = "èxit del grup de control" >
  26. <label class = "control-label" for = "inputSuccess" > Entrada amb èxit </label>
  27. <div class = "controls" >
  28. <input type = "text" id = "inputSuccess" >
  29. <span class = "help-inline" > Woohoo! </span>
  30. </div>
  31. </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.

  1. <p>
  2. <button class = "btn btn-large btn-primary" type = "button" > Botó gran </button>
  3. <button class = "btn btn-large" type = "button" > Botó gran </button>
  4. </p>
  5. <p>
  6. <button class = "btn btn-primary" type = "button" > Botó per defecte </button>
  7. <button class = "btn" type = "button" > Botó per defecte </button>
  8. </p>
  9. <p>
  10. <button class = "btn btn-small btn-primary" type = "button" > Botó petit </button>
  11. <button class = "btn btn-small" type = "button" > Botó petit </button>
  12. </p>
  13. <p>
  14. <button class = "btn btn-mini btn-primary" type = "button" > Mini botó </button>
  15. <button class = "btn btn-mini" type = "button" > Mini botó </button>
  16. </p>

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

  1. <button class = "btn btn-large btn-block btn-primary" type = "button" > Botó de nivell de bloc </button>
  2. <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ç

  1. <a href = "#" class = "btn btn-large btn-primary disabled" > Enllaç principal </a>
  2. <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.

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

Una classe, diverses etiquetes

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

Enllaç
  1. <a class = "btn" href = "" > Enllaç </a>
  2. <button class = "btn" type = "submit" > Botó </button>
  3. <input class = "btn" type = "button" value = "Entrada" >
  4. <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.

140 x 140 140 x 140 140 x 140
  1. <img src = "..." class = "img-arrodonida" >
  2. <img src = "..." class = "img-cercle" >
  3. <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
  • icon-check
  • 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
  • globus-icona
  • 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:

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

  1. <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
  1. <div class = "btn-toolbar" >
  2. <div class = "btn-group" >
  3. <a class = "btn" href = "#" ><i class = "icon-align-left" ></i></a>
  4. <a class = "btn" href = "#" ><i class = "icon-align-center" ></i></a>
  5. <a class = "btn" href = "#" ><i class = "icon-align-right" ></i></a>
  6. <a class = "btn" href = "#" ><i class = "icon-align-justify" ></i></a>
  7. </div>
  8. </div>
Menú desplegable en un grup de botons
  1. <div class = "btn-group" >
  2. <a class = "btn btn-primary" href = "#" ><i class = "icona-usuari icona-blanc" ></i> Usuari </a>
  3. <a class = "btn btn-primary dropdown-toggle" data-toggle = "dropdown" href = "#" ><span class = "caret" ></span></a>
  4. <ul class = "menú desplegable" >
  5. <li><a href = "#" ><i class = "icona-llapis" ></i> Edita </a></li>
  6. <li><a href = "#" ><i class = "icon-trash" ></i> Suprimeix </a></li>
  7. <li><a href = "#" ><i class = "icon-ban-circle" ></i> Prohibició </a></li>
  8. <li class = "divisor" ></li>
  9. <li><a href = "#" ><i class = "i" ></i> Fer administrador </a></li>
  10. </ul>
  11. </div>
Mides de botons
  1. <a class = "btn btn-large" href = "#" ><i class = "icon-star" ></i> Estrella </a>
  2. <a class = "btn btn-small" href = "#" ><i class = "icon-star" ></i> Estrella </a>
  3. <a class = "btn btn-mini" href = "#" ><i class = "icon-star" ></i> Estrella </a>

Navegació

  1. <ul class = "llista de navegació de navegació" >
  2. <li class = "active" ><a href = "#" ><i class = "icon-home icon-white" ></i> Inici </a></li>
  3. <li><a href = "#" ><i class = "icon-book" ></i> Biblioteca </a></li>
  4. <li><a href = "#" ><i class = "icon-pencil" ></i> Aplicacions </a></li>
  5. <li><a href = "#" ><i class = "i" ></i> Diversos </a></li>
  6. </ul>

Camps de formulari

  1. <div class = "grup de control" >
  2. <label class = "control-label" for = "inputIcon" > Adreça de correu electrònic </label>
  3. <div class = "controls" >
  4. <div class = "input-prepend" >
  5. <span class = "complement" ><i class = "icona-sobre" ></i></span>
  6. <input class = "span2" id = "inputIcon" type = "text" >
  7. </div>
  8. </div>
  9. </div>