Escala tipogràfica

Tota la graella tipogràfica es basa en dues variables Less del nostre fitxer 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, per crear els marges, els farciments i les altures de línia de tot el nostre tipus i més.

Exemple de text del cos

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.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui.

Utilitzant l'èmfasi

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

Nota: no dubteu a utilitzar-lo <b>en <i>HTML5, però el seu ús ha canviat una mica. <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.

Adreces d'exemple

Aquí teniu dos exemples de com <address>es pot utilitzar l'etiqueta:

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

Nom complet
[email protected]

Exemples d'abreviatures

Les abreviatures amb un titleatribut tenen una vora inferior amb punts clars i un cursor d'ajuda al passar el cursor. Això dóna als usuaris una indicació addicional que es mostrarà alguna cosa al passar el cursor.

Afegiu la initialismclasse a una abreviatura per augmentar l'harmonia tipogràfica donant-li una mida de text una mica més petita.

HTML és el millor des del pa llescat.

Una abreviatura de la paraula atribut és attr .

Per incloure una cita de bloc, <blockquote>envolta qualsevol HTML com a cita. Per a cites directes, recomanem un <p>.

Incloeu un <small>element opcional per citar la vostra font i obtindreu un guió em —abans per a finalitats d'estil.

<quota de bloc>
  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis. </p>
  <small> Algú famós </small>
</blockquote>

Les quotes de bloc predeterminades tenen l'estil següent:

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

Algú famós a Body of work

Per fer flotar la vostra cita de bloqueig a la dreta, afegiu class="pull-right":

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

Algú famós a Body of work

No ordenat

<ul>

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

Sense estil

<ul class="unstyled">

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

Ordenat

<ol>

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

Descripció

<dl>

Llistes de descripció

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

Euismod

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

Donec id elit non mi porta gravida at eget metus.

Malesuada porta

Etiam porta sem malesuada magna mollis euismod.

Descripció horitzontal

<dl class="dl-horizontal">

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.

---

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 , la secció < code> </ 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>

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

Google Prettify

Agafeu el mateix <pre>element i afegiu dues classes opcionals per millorar la representació.

<p> Exemple de text aquí... </p>

<pre class = "prettyprint 
     linenums" >
  <p>Mostra de text aquí...</p>
</pre>

Baixeu google-code-prettify i consulteu el readme per saber com utilitzar-lo.

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ó) S'ha d'utilitzar dins d'un<thead>
<caption>	Descripció o resum del que conté la taula, especialment útil per als lectors de pantalla

<taula>
  <cap>
    <tr>
      <th> … </th>
      <th> … </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td> … </td>
      <td> … </td>
    </tr>
  </tbody>
</taula>

Les taules s'estilen automàticament amb només unes quantes vores per garantir la llegibilitat i mantenir l'estructura. Amb 2.0, la .tableclasse és obligatòria.

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

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

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

Nota: Les taules en ratlles utilitzen el :nth-childselector CSS i no estan disponibles a IE7-IE8.

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

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

Afegiu vores al voltant de tota la taula i cantonades arrodonides amb finalitats estètiques.

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

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

Feu que les vostres taules siguin més compactes afegint la .table-condensedclasse per tallar el farciment de les cel·les de la taula per la meitat (de 8 px a 4 px).

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

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

No dubteu a combinar qualsevol de les classes de taula per aconseguir diferents aspectes utilitzant qualsevol de les classes disponibles.

<table class = "taula amb ratlles de taula amb vores de taula condensada" > 
  ...
</taula>

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

HTML i CSS flexibles

La millor part dels formularis a Bootstrap és que totes les vostres entrades i controls tenen un aspecte fantàstic, independentment de com els creeu al vostre marcatge. No es requereix HTML superflu, però proporcionem els patrons per a aquells que ho necessitin.

Els dissenys més complicats inclouen classes succintes i escalables per facilitar l'estil i l'enquadernació d'esdeveniments, de manera que esteu cobert en cada pas.

Quatre dissenys inclosos

Bootstrap inclou quatre tipus de dissenys de formularis:

• Vertical (per defecte)
• Cerca
• En linia
• Horitzontal

Els diferents tipus de dissenys de formulari requereixen alguns canvis en l'etiquetatge, però els controls es mantenen i es comporten igual.

Controla els estats i molt més

Els formularis de Bootstrap inclouen estils per a tots els controls de formulari bàsics com l'entrada, l'àrea de text i la selecció que espereu. Però també inclou una sèrie de components personalitzats, com ara entrades adjuntes i anteposades i suport per a llistes de caselles de selecció.

S'inclouen estats com error, advertència i èxit per a cada tipus de control de formulari. També s'inclouen estils per als controls desactivats.

Forma bàsica

Valors predeterminats intel·ligents i lleugers sense marques addicionals.

Nom de l'etiqueta

Exemple de text d'ajuda a nivell de bloc aquí.

Mireu-me Presentar

<form class = "bé" > 
  <label> Nom de l'etiqueta </label>
  <input type = "text" class = "span3" 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>  
</form>

Formulari de cerca

Afegiu .form-searchal formulari i .search-queryal input.

Cerca

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

Formulari en línia

Afegiu .form-inlineper refinar l'alineació vertical i l'espaiat dels controls de formulari.

Recorda'm Inicia sessió

<form class = "ben formulari en línia" > 
  <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>

A la dreta es mostren tots els controls de formulari predeterminats que admetem. Aquí teniu la llista amb vinyetes:

• entrades de text (text, contrasenya, correu electrònic, etc.)
• casella de selecció
• ràdio
• seleccionar
• selecció múltiple
• entrada de fitxer
• àrea de text

Entrada de text

A més del text de forma lliure, qualsevol entrada basada en text HTML5 apareix així.

casella de selecció

La primera opció és això i allò; assegureu-vos d'incloure per què és fantàstic

Seleccioneu la llista

alguna cosa 2 3 4 5

Multicon-selecció

1 2 3 4 5

Entrada de fitxer

Àrea de text

Guardar canvis Cancel · lar

Exemple de marcatge

Tenint en compte el disseny del formulari d'exemple anterior, aquí teniu l'etiquetatge associat al primer grup d'entrada i control. Les classes .control-group, .control-label, i són totes necessàries per a l'estil..controls

<form class = "form-horitzontal" > 
  <conjunt de camps>
    <legend> Text de la llegenda </legend>
    <div class = "grup de control" > 
      <label class = "control-label" for = "input01" > Entrada de text </label>  
      <div class = "controls" > 
        <input type = "text" class = "input-xlarge" id = "input01" >   
        <p class = "help-block" > Text d'ajuda compatible </p> 
      </div>
    </div>
  </fieldset>
</form>

disabledBootstrap inclou estils per als estats i enfocats compatibles amb el navegador . Suprimim el Webkit predeterminat outlinei apliquem una box-shadowal seu lloc per a :focus.

---

Validació de formularis

També inclou estils de validació d'errors, advertències i èxit. Per utilitzar-lo, afegiu la classe d'error al fitxer .control-group.

<conjunt de camps
  class = "error del grup de control" >
  …
</fieldset>

Entrada enfocada

Entrada no editable

Algun valor aquí

Entrada desactivada

Casilla de selecció desactivada

Aquesta és una casella de selecció desactivada

Entrada amb avís

Alguna cosa pot haver anat malament

Entrada amb error

Si us plau, corregiu l'error

Entrada amb èxit

Woohoo!

Seleccioneu amb èxit

1 2 3 4 5 Woohoo!

Guardar canvis Cancel · lar

Afegiu i anteposeu entrades

Els grups d'entrada (amb text adjunt o anteposat) proporcionen una manera senzilla de donar més context a les vostres entrades. Exemples excel·lents inclouen el signe @ per als noms d'usuari de Twitter o $ per a les finances.

---

Caselles de selecció i ràdios

Fins a la v1.4, Bootstrap requeria un marcatge addicional al voltant de les caselles de selecció i les ràdios per apilar-les. Ara, és una simple qüestió de repetir el <label class="checkbox">que embolica el <input type="checkbox">.

Les caselles de selecció i les ràdios en línia també són compatibles. Només has d'afegir .inlinea qualsevol .checkboxo .radioi ja està.

---

Formularis en línia i afegiu/anteposa

Per utilitzar les entrades d'anterior o d'afegir en un formulari en línia, assegureu-vos de col·locar .add-oni inputa la mateixa línia, sense espais.

---

Formulari de text d'ajuda

Per afegir text d'ajuda per a les entrades del formulari, incloeu text d'ajuda en línia amb <span class="help-inline">o un bloc de text d'ajuda amb <p class="help-block">després de l'element d'entrada.

Formeu mides de quadrícula

1 2 3 4 5 1 2 3 4 5 1 2 3 4 5

Utilitzeu les mateixes .span*classes del sistema de quadrícula per a les mides d'entrada.

Mides alternatives

També podeu utilitzar classes estàtiques que no s'adapten a la quadrícula, que s'adaptin als estils CSS responsius o que tinguin en compte diferents tipus de controls (p. ex., inputvs. select).

Text adjunt

@

Aquí teniu un text d'ajuda

Text adjunt

.00

Aquí teniu més text d'ajuda

Afegeix i anteposa

$ .00

Afegiu amb el botó

Va!

Adjunt de dos botons

Cerca Opcions

Caselles de selecció en línia

1 2 3

Caselles de verificació

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

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

Botons de ràdio

La primera opció és això i allò; assegureu-vos d'incloure per què és fantàstic L'opció dos pot és una altra cosa i seleccionar-la deseleccionarà l'opció una

Guardar canvis Cancel · lar

Botons per a accions

Com a convenció, els botons només s'han d'utilitzar per a accions mentre que els hiperenllaços s'han d'utilitzar per als objectes. Per exemple, "Baixa" hauria de ser un botó mentre que "activitat recent" hauria de ser un enllaç.

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

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.

Múltiples mides

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

Acció primària Acció

Acció primària Acció

Acció primària Acció

Estat desactivat

Per als botons desactivats, afegiu la .disabledclasse als enllaços i l' disabledatribut per als <button>elements.

Enllaç principal Enllaç

Botó principal Botó

Caps amunt! Aquí fem servir .disabledcom a classe d'utilitat, semblant a la .activeclasse comuna, de manera que no es requereix cap prefix.

Una classe, diverses etiquetes

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

Enllaç Botó

<a class = "btn" href = "" > Enllaç </a>  
<button class = "btn" type = "enviar" >  
  Botó
</button>
<input class = "btn" type = "botó"  
         valor = "Entrada" >
<input class = "btn" type = "envia"  
         valor = "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ó.

• 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

Construït com un sprite

En lloc de fer que cada icona sigui una sol·licitud addicional, les hem compilat en un sprite: un munt d'imatges en un fitxer que utilitza CSS per posicionar les imatges amb background-position. Aquest és el mateix mètode que fem servir a Twitter.com i ens ha funcionat bé.

Totes les classes d'icones tenen el prefix .icon-per a l'espai de noms i l'abast adequats, igual que els nostres altres components. Això ajudarà a evitar conflictes amb altres eines.

Glyphicons ens ha concedit l'ús del conjunt Halflings al nostre conjunt d'eines de codi obert sempre que proporcionem un enllaç i un crèdit aquí als documents. Penseu en fer el mateix en els vostres projectes.

Com utilitzar

Bootstrap utilitza una <i>etiqueta per a totes les icones, però no tenen classe de cas, només un prefix compartit. 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:

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

Hi ha 120 classes per triar per a les vostres icones. Només cal que afegiu una <i>etiqueta amb les classes adequades i ja està. Podeu trobar la llista completa a sprites.less o aquí mateix en aquest document.

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.

Casos d'ús

Les icones són genials, però on les utilitzaria? Aquí teniu algunes idees:

• Com a elements visuals per a la navegació de la barra lateral
• Per a una navegació purament basada en icones
• Per als botons que ajuden a transmetre el significat d'una acció
• Amb enllaços per compartir context a la destinació d'un usuari

Bàsicament, a qualsevol lloc on pugueu posar una <i>etiqueta, podeu posar una icona.

Actualització Pagament Suprimeix

Comenta Configuració Més informació

Correu electrònic