Escala tipográfica

Toda a grella tipográfica baséase en dúas variables Menos do noso ficheiro variables.less: @baseFontSizee @baseLineHeight. O primeiro é o tamaño da fonte base empregado en todo e o segundo é a altura da liña base.

Usamos esas variables, e algunhas matemáticas, para crear as marxes, recheos e alturas de liña de todo o noso tipo e moito máis.

Exemplo de texto do corpo

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.

Copia do corpo principal

Fai que un parágrafo destaque engadindo .lead.

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

Usando a énfase

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

Nota: non dubides en usar <b>e <i>en HTML5, pero o seu uso cambiou un pouco. <b>está destinado a resaltar palabras ou frases sen transmitir importancia adicional, mentres que <i>é principalmente para voz, termos técnicos, etc.

Enderezos de exemplo

Aquí tes dous exemplos de como <address>se pode usar a etiqueta:

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

Nome completo
[email protected]

Exemplos de abreviaturas

As abreviaturas cun titleatributo teñen un bordo inferior de puntos claros e un cursor de axuda ao pasar o cursor. Isto dálle aos usuarios unha indicación adicional que se mostrará algo ao pasar o cursor.

Engade a initialismclase a unha abreviatura para aumentar a harmonía tipográfica dándolle un tamaño de texto lixeiramente menor.

HTML é o mellor desde o pan rebanado.

Unha abreviatura da palabra atributo é attr .

Para incluír unha cita en bloque, envolve <blockquote>calquera HTML como cita. Para citas directas recomendamos un <p>.

Inclúe un elemento opcional <small>para citar a túa fonte e terás un guión —antes del para fins de estilismo.

<cota de bloque>
  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis. </p>
  <small> Alguén famoso </small>
</blockquote>

As comillas de bloque predeterminadas teñen o estilo así:

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

Alguén famoso en Body of work

Para facer flotar a túa cita de bloque á dereita, engade class="pull-right":

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

Alguén famoso en Body of work

Sen orde

<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 portttitor Lorem

Sen estilo

<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 portttitor Lorem

Ordenado

<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 portttitor Lorem

Descrición

<dl>

Listas de descricións

Unha lista de descricións é perfecta para definir termos.

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.

Descrición horizontal

<dl class="dl-horizontal">

Listas de descricións

Unha lista de descricións é perfecta para definir termos.

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.

---

Aviso! As listas de descricións horizontais truncarán os termos que son demasiado longos para caber na corrección da columna esquerda text-overflow. Nas vistas máis estreitas, cambiarán ao deseño apilado predeterminado.

En liña

Envolve fragmentos de código en liña con <code>.

Por exemplo , a sección < code> </ code > debe ser envolveda como en liña .  

Bloque básico

Use <pre>para varias liñas de código. Asegúrate de escapar de calquera corchete angular do código para unha representación correcta.

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

<pre>
  <p>Texto de mostra aquí...</p>
</pre>

Nota: Asegúrese de manter o código dentro das <pre>etiquetas o máis preto posible da esquerda; renderizará todas as pestanas.

Opcionalmente, pode engadir a .pre-scrollableclase que establecerá unha altura máxima de 350 px e proporcionará unha barra de desprazamento do eixe Y.

Google Prettify

Toma o mesmo <pre>elemento e engade dúas clases opcionais para mellorar a representación.

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

<pre class = "prettyprint 
     linenums" >
  <p>Texto de mostra aquí...</p>
</pre>

Descarga google-code-prettify e consulta o readme para saber como usalo.

Etiquetar	Descrición
<table>	Elemento de envoltura para mostrar datos en formato tabular
<thead>	Elemento contenedor para filas de cabeceira da táboa ( <tr>) para etiquetar columnas da táboa
<tbody>	Elemento contenedor para as filas da táboa ( <tr>) no corpo da táboa
<tr>	Elemento contenedor para un conxunto de celas da táboa ( <td>ou <th>) que aparece nunha soa fila
<td>	Celda da táboa predeterminada
<th>	Cela especial da táboa para as etiquetas de columnas (ou filas, dependendo do alcance e da colocación) .<thead>
<caption>	Descrición ou resumo do que contén a táboa, especialmente útil para lectores de pantalla

<táboa>
  <cabeza>
    <tr>
      <th> ... </th>
      <th> ... </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td> … </td>
      <td> … </td>
    </tr>
  </tbody>
</táboa>

As táboas teñen un estilo automaticamente con só algúns bordos para garantir a lexibilidade e manter a estrutura. Con 2.0, a .tableclase é necesaria.

<table class = "table" > 
  …
</táboa>

#	Nome	Apelido	Nome de usuario
1	Marcos	Oto	@mdo
2	Xacobe	Thornton	@graxas
3	Larry	o paxaro	@twitter

Déixate un pouco coas túas táboas engadindo raias de cebra; só tes que engadir a .table-stripedclase.

Nota: As táboas con franxas usan o :nth-childselector CSS e non están dispoñibles en IE7-IE8.

<table class = "table table-striped" > 
  …
</táboa>

#	Nome	Apelido	Nome de usuario
1	Marcos	Oto	@mdo
2	Xacobe	Thornton	@graxas
3	Larry	o paxaro	@twitter

Engade bordos ao redor de toda a mesa e esquinas redondeadas con fins estéticos.

<table class = "táboa con bordes de táboa" > 
  …
</táboa>

#	Nome	Apelido	Nome de usuario
1	Marcos	Oto	@mdo
	Marcos	Oto	@getbootstrap
2	Xacobe	Thornton	@graxas
3	Larry o paxaro		@twitter

Fai as túas táboas máis compactas engadindo a .table-condensedclase para cortar o recheo das celas da táboa á metade (de 8px a 4px).

<table class = "table table-condensed" > 
  …
</táboa>

#	Nome	Apelido	Nome de usuario
1	Marcos	Oto	@mdo
2	Xacobe	Thornton	@graxas
3	Larry o paxaro		@twitter

Non dubides en combinar calquera das clases da táboa para conseguir diferentes looks utilizando calquera das clases dispoñibles.

<table class = "táboa con raias de táboa con bordes de táboa condensada" > 
  ...
</táboa>

	Nome completo
#	Nome	Apelido	Nome de usuario
1	Marcos	Oto	@mdo
2	Xacobe	Thornton	@graxas
3	Larry o paxaro		@twitter

HTML e CSS flexibles

A mellor parte dos formularios en Bootstrap é que todas as túas entradas e controis teñen un aspecto estupendo sen importar como os constrúas no teu marcado. Non é necesario HTML superfluo, pero fornecemos os patróns para aqueles que o precisen.

Os deseños máis complicados inclúen clases sucintas e escalables para facilitar o estilo e a vinculación de eventos, polo que estás cuberto en cada paso.

Catro esquemas incluídos

Bootstrap inclúe catro tipos de deseños de formularios:

• Vertical (predeterminado)
• Busca
• En liña
• Horizontal

Os distintos tipos de deseños de formularios requiren algúns cambios no marcado, pero os propios controis permanecen e se comportan igual.

Controla estados e moito máis

Os formularios de Bootstrap inclúen estilos para todos os controis do formulario base, como entrada, área de texto e selección que esperarías. Pero tamén inclúe unha serie de compoñentes personalizados, como entradas anexas e antepostas e soporte para listas de caixas de verificación.

Inclúense estados como erro, aviso e éxito para cada tipo de control de formulario. Tamén se inclúen estilos para controis desactivados.

Forma básica

Valores predeterminados intelixentes e lixeiros sen marcado adicional.

Nome da etiqueta

Exemplo de texto de axuda a nivel de bloque aquí.

Comprobe-me Enviar

<form class = "ben" > 
  <label> Nome da etiqueta </label>
  <input type = "text" class = "span3" placeholder = "Escriba algo..." >   
  <span class = "help-block" > Exemplo de texto de axuda a nivel de bloque aquí. </span> 
  <label class = "caixa de verificación" > 
    <input type = "checkbox" > Comprobe-me 
  </label>
  <button type = "submit" class = "btn" > Enviar </button>  
</form>

Formulario de busca

Engadir .form-searchao formulario e .search-queryao input.

Busca

<form class = "ben busca de formularios" > 
  <input type = "text" class = "input-medium search-query" >  
  <button type = "submit" class = "btn" > Busca </button>  
</form>

Formulario en liña

Engade .form-inlinepara perfeccionar o aliñamento vertical e o espazamento dos controis do formulario.

Lémbrame Rexístrate

<form class = "ben formulario en liña" > 
  <input type = "text" class = "input-small" placeholder = "Correo electrónico" >   
  <input type = "contrasinal" class = "input-small" placeholder = "Contrasinal" >   
  <label class = "caixa de verificación" > 
    <input type = "checkbox" > Lémbrame 
  </label>
  <button type = "submit" class = "btn" > Iniciar sesión </button>  
</form>

Á dereita móstranse todos os controis de formulario predeterminados que admitimos. Aquí está a lista con viñetas:

• entradas de texto (texto, contrasinal, correo electrónico, etc.)
• caixa de verificación
• radio
• seleccionar
• selección múltiple
• entrada de ficheiro
• área de texto

Entrada de texto

Ademais do texto de forma libre, calquera entrada baseada en texto HTML5 aparece así.

Caixa de verificación

A primeira opción é isto e aquilo; asegúrate de incluír por que é xenial

Seleccione lista

algo 2 3 4 5

Selección múltiple

1 2 3 4 5

Entrada de ficheiro

Área de texto

Gardar cambios Cancelar

Exemplo de marcado

Tendo en conta o deseño do formulario de exemplo anterior, aquí está o marcado asociado ao primeiro grupo de entrada e control. As clases .control-group, .control-label, e .controlsson todas necesarias para estilizar.

<form class = "form-horizontal" > 
  <conxunto de campos>
    <legend> Texto da lenda </legend>
    <div class = "grupo de control" > 
      <label class = "control-label" for = "input01" > Entrada de texto </label>  
      <div class = "controis" > 
        <input type = "text" class = "input-xlarge" id = "input01" >   
        <p class = "help-block" > Texto de axuda compatible </p> 
      </div>
    </div>
  </fieldset>
</form>

disabledBootstrap presenta estilos para estados e enfocados compatibles co navegador . Eliminamos o Webkit predeterminado outlinee aplicamos un box-shadowno seu lugar para :focus.

---

Validación de formularios

Tamén inclúe estilos de validación de erros, avisos e éxito. Para usalo, engade a clase de erro ao .control-group.

<fieldset
  class = "erro do grupo de control" >
  …
</fieldset>

Entrada enfocada

Entrada non editable

Algún valor aquí

Entrada desactivada

Casilla de verificación desactivada

Esta é unha caixa de verificación desactivada

Entrada con aviso

Algo puido ir mal

Entrada con erro

Corrixe o erro

Entrada con éxito

Woohoo!

Selecciona con éxito

1 2 3 4 5 Woohoo!

Gardar cambios Cancelar

Anteponer e engadir entradas

Os grupos de entrada (con texto anexado ou anteposto) ofrecen un xeito sinxelo de dar máis contexto ás túas entradas. Exemplos excelentes inclúen o signo @ para os nomes de usuario de Twitter ou $ para as finanzas.

---

Caixas de verificación e radios

Ata a versión 1.4, Bootstrap requiría un marcado adicional nas caixas de verificación e nas radios para apilalas. Agora, é unha simple cuestión de repetir o <label class="checkbox">que envolve o <input type="checkbox">.

Tamén se admiten caixas de verificación e radios en liña. Só ten que engadir .inlinea calquera .checkboxou .radioe xa está.

---

Formularios en liña e anexar/antes

Para usar entradas de antecedentes ou anexas nun formulario en liña, asegúrate de colocar .add-one inputna mesma liña, sen espazos.

---

Formulario de texto de axuda

Para engadir texto de axuda para as entradas do formulario, inclúa texto de axuda en liña <span class="help-inline">ou un bloque de texto de axuda con <p class="help-block">despois do elemento de entrada.

Formatos de cuadrícula

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

Use as mesmas .span*clases do sistema de cuadrícula para os tamaños de entrada.

Tamaños alternativos

Tamén podes usar clases estáticas que non se asignen á grade, que non se adapten aos estilos CSS sensibles ou que teñan en conta distintos tipos de controis (por exemplo, inputcontra select).

Texto anteposto

@

Aquí tes un texto de axuda

Texto anexo

.00

Aquí tes máis texto de axuda

Engadir e antepoñer

$ .00

Engadir co botón

Vaia!

Anexo de dous botóns

Busca Opcións

Caixas de verificación en liña

1 2 3

Casillas de verificación

A primeira opción é isto e aquilo; asegúrate de incluír por que é xenial A segunda opción tamén se pode comprobar e incluír nos resultados do formulario A opción tres tamén se pode comprobar e incluír nos resultados do formulario, si, adiviñaches

Nota: As etiquetas rodean todas as opcións para áreas de clic moito máis grandes e un formulario máis utilizable.

Botóns de radio

A primeira opción é isto e aquilo; asegúrate de incluír por que é xenial A segunda opción pode ser outra cousa e se a selecciona anulará a opción un

Gardar cambios Cancelar

Botóns para accións

Como convención, os botóns só deben usarse para accións mentres que os hipervínculos deben usarse para os obxectos. Por exemplo, "Descargar" debería ser un botón mentres que "Actividade recente" debería ser unha ligazón.

Os estilos de botón pódense aplicar a calquera cousa coa .btnclase aplicada. Non obstante, normalmente quererás aplicar estes só a elementos <a>e <button>.

Compatibilidade entre navegadores

IE9 non recorta os degradados de fondo nas esquinas redondeadas, polo que o eliminamos. Relacionado, IE9 modifica os buttonelementos desactivados, convertendo o texto en gris cunha sombra de texto desagradable que non podemos corrixir.

Varios tamaños

Queres botóns máis grandes ou pequenos? Engade .btn-large, .btn-small, ou .btn-minipara dous tamaños adicionais.

Acción primaria Acción

Acción primaria Acción

Acción primaria Acción

Estado desactivado

Para os botóns desactivados, engade a .disabledclase ás ligazóns e o disabledatributo para os <button>elementos.

Ligazón principal Ligazón

Botón principal Botón

Aviso! Aquí usamos .disabledcomo clase de utilidade, semellante á clase común .active, polo que non se require ningún prefixo.

Unha clase, varias etiquetas

Usa a .btnclase nun elemento <a>, <button>, ou <input>.

Ligazón Botón

<a class = "btn" href = "" > Ligazón </a>  
<button class = "btn" type = "enviar" >  
  Botón
</button>
<input class = "btn" type = "botón"  
         valor = "Entrada" >
<input class = "btn" type = "submit"  
         valor = "Enviar" >

Como mellor práctica, intente facer coincidir o elemento para o seu contexto para garantir a representación entre navegadores coincidentes. Se tes un input, utiliza un <input type="submit">para o teu botón.

• icona-vidro
• icona-música
• busca de iconas
• icona-sobre
• icona-corazón
• icona-estrela
• icona-estrela-baleiro
• icona-usuario
• icona-película
• icona-th-grande
• icona-th
• icona-th-lista
• icona-ok
• icona-eliminar
• icona-ampliar
• icon-zoom-out
• icona desactivada
• sinal-icona
• icona-cog
• icona-lixo
• icona-casa
• arquivo-icona
• icona-tempo
• icona-estrada
• icona-descarga-alt
• icona-descarga
• carga de iconas
• icona-box de entrada
• icon-play-circle
• icona-repetir
• icon-refresh
• icon-list-alt
• icona-bloqueo
• icona-bandeira
• icona-auriculares

• icon-volume-off
• icona-baixa o volume
• icona-subir volume
• icona-qrcode
• icona-código de barras
• icona-etiqueta
• etiquetas de iconas
• libro de iconas
• icona-marcador
• icona-impresión
• icona-cámara
• icona-fonte
• icona-negriña
• icona-cursiva
• icona-texto-altura
• icon-text-width
• icon-align-left
• icon-align-center
• icona-alinear-dereita
• icon-align-justify
• lista de iconas
• icona-sangrado-esquerda
• icona-sangrado-dereita
• icon-facetime-video
• imaxe-icona
• icona-lapis
• icono-mapa-marcador
• axuste da icona
• tinte de iconas
• icona-editar
• icon-share
• icon-check
• icona-mover
• icona-paso-atrás
• icona-retroceso rápido

• icona cara atrás
• xogo de iconas
• icona-pausa
• icona-parada
• icona cara adiante
• icona-avance rápido
• icona-paso-adelante
• icona-expulsar
• icona-chevron-esquerda
• icona-chevron-dereita
• icona-máis-signo
• icona-signo-menos
• icona-eliminar-sinal
• icona-sinal-ok
• icona-sinal-pregunta
• icona-sinal de información
• icona-captura de pantalla
• icona-eliminar-círculo
• icona-ok-círculo
• icona-ban-círculo
• icona-frecha-esquerda
• icona-frecha-dereita
• icona-frecha-arriba
• icona-frecha-abaixo
• icon-share-alt
• icon-size-full
• icon-size-small
• icon-plus
• icona-menos
• icona-asterisco
• icona-signo-de-exclamación
• icona-agasallo
• icona-folla
• icona-lume
• icona-ollo aberto

• icona-ollo-pecha
• icona-sinal-de-advertencia
• plano-icona
• icona-calendario
• icona-aleatoria
• icona-comentario
• icona-imán
• icon-chevron-up
• icon-chevron-down
• icona-retweet
• icona-carro da compra
• icona-carpeta-pechar
• icona-carpeta-aberto
• icon-size-vertical
• icon-size-horizontal
• icona-hdd
• icona-bulchorn
• icona-campá
• icono-certificado
• icona-pulgar cara arriba
• icona-polgares abaixo
• icona-man-dereita
• icona-man-esquerda
• icona-man arriba
• icona-man abaixo
• icona-círculo-frecha-dereita
• icona-círculo-frecha-esquerda
• icona-círculo-frecha-arriba
• icona-círculo-frecha abaixo
• icona-globo
• chave inglesa
• iconas-tarefas
• icona-filtro
• icona-maletín
• icona-pantalla completa

Construído como un sprite

En lugar de facer que cada icona sexa unha solicitude adicional, recompilámolas nun sprite: un montón de imaxes nun ficheiro que usa CSS para situar as imaxes con background-position. Este é o mesmo método que usamos en Twitter.com e funcionounos ben.

Todas as clases de iconas teñen como prefixo .icon-un espazo de nomes e un alcance axeitados, ao igual que os nosos outros compoñentes. Isto axudará a evitar conflitos con outras ferramentas.

Glyphicons concedeunos o uso do conxunto de Halflings no noso conxunto de ferramentas de código aberto sempre que proporcionemos unha ligazón e un crédito aquí nos documentos. Considera facer o mesmo nos teus proxectos.

Como empregar

Bootstrap usa unha <i>etiqueta para todas as iconas, pero non teñen clase de caso, só un prefixo compartido. Para usalo, coloque o seguinte código en calquera lugar:

<i class = "busca de iconas" ></i> 

Tamén hai estilos dispoñibles para iconas invertidas (brancas), preparadas cunha clase adicional:

<i class = "icona-busca icona-branca" ></i> 

Hai 140 clases para escoller para as túas iconas. Só ten que engadir unha <i>etiqueta coas clases correctas e xa está. Podes atopar a lista completa en sprites.less ou aquí mesmo neste documento.

Aviso! Cando uses cadeas de texto ao lado, como nos botóns ou nas ligazóns de navegación, asegúrate de deixar un espazo despois da <i>etiqueta para un espazo adecuado.

Casos de uso

As iconas son xeniais, pero onde se usarían? Aquí tes algunhas ideas:

• Como elementos visuais para a súa navegación na barra lateral
• Para unha navegación puramente guiada por iconas
• Para botóns para axudar a transmitir o significado dunha acción
• Con ligazóns para compartir contexto no destino dun usuario

Esencialmente, en calquera lugar onde poidas poñer unha <i>etiqueta, podes poñer unha icona.

Actualizar Comprobar Eliminar

Comenta Configuración Máis información

Enderezo electrónico