Tipografía
Documentación e exemplos para a tipografía Bootstrap, incluíndo configuración global, títulos, texto do corpo, listas e moito máis.
Configuración global
Bootstrap establece estilos básicos de visualización global, tipografía e ligazón. Cando necesites máis control, consulta as clases de utilidade textuais .
- Use unha pila de fontes nativas que seleccione o mellor
font-family
para cada sistema operativo e dispositivo. - Para unha escala de tipos máis inclusiva e accesible, asumimos a raíz predeterminada do navegador
font-size
(normalmente 16 px) para que os visitantes poidan personalizar os valores predeterminados do navegador segundo sexa necesario. - Use os atributos
$font-family-base
,$font-size-base
, e$line-height-base
como a nosa base tipográfica aplicada ao<body>
. - Establece a cor da ligazón global mediante
$link-color
e aplique subliñado da ligazón só en:hover
. - Utilíceo
$body-bg
para configurar un (background-color
por defecto).<body>
#fff
Estes estilos pódense atopar dentro _reboot.scss
de , e as variables globais defínense en _variables.scss
. Asegúrate de $font-size-base
configurar rem
.
Títulos
Todos os títulos HTML, <h1>
a través <h6>
de , están dispoñibles.
Título | Exemplo |
---|---|
|
h1. Título de bootstrap |
|
h2. Título de bootstrap |
|
h3. Título de bootstrap |
|
h4. Título de bootstrap |
|
h5. Título de bootstrap |
|
h6. Título de bootstrap |
.h1
a través .h6
de clases tamén están dispoñibles, para cando quere combinar o estilo de fonte dun título pero non pode usar o elemento HTML asociado.
h1. Título de bootstrap
h2. Título de bootstrap
h3. Título de bootstrap
h4. Título de bootstrap
h5. Título de bootstrap
h6. Título de bootstrap
Personalización de títulos
Use as clases de utilidade incluídas para recrear o pequeno texto do título secundario de Bootstrap 3.
Encabezado de visualización elegante Con texto secundario esvaecido
Mostrar títulos
Os elementos de título tradicionais están deseñados para funcionar mellor na carne do contido da túa páxina. Cando necesites un título para destacar, considera usar un título de visualización , un estilo de título máis grande e un pouco máis obstinado. Teña en conta que estes títulos non responden por defecto, pero é posible activar tamaños de fonte sensibles .
Pantalla 1 |
Pantalla 2 |
Pantalla 3 |
Pantalla 4 |
Chumbo
Fai que un parágrafo destaque engadindo .lead
.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
Elementos de texto en liña
Estilo para elementos HTML5 en liña comúns.
Podes usar a etiqueta mark paradestacartexto.
Esta liña de texto está destinada a ser tratada como texto eliminado.
Esta liña de texto está destinada a ser tratada como xa non precisa.
Esta liña de texto está destinada a ser tratada como unha adición ao documento.
Esta liña de texto mostrarase como subliñada
Esta liña de texto está destinada a ser tratada como letra pequena.
Esta liña mostrouse como texto en negra.
Esta liña mostrouse como texto en cursiva.
.mark
e .small
clases tamén están dispoñibles para aplicar os mesmos estilos que <mark>
e <small>
evitando as implicacións semánticas non desexadas que traerían as etiquetas.
Aínda que non se mostra arriba, non dubide en usar <b>
e <i>
en HTML5. <b>
está destinado a resaltar palabras ou frases sen transmitir importancia adicional, mentres que <i>
é principalmente para voz, termos técnicos, etc.
Utilidades de texto
Cambia o aliñamento do texto, transforma, estilo, peso e cor coas nosas utilidades de texto e cores .
Abreviaturas
Implementación estilizada do <abbr>
elemento HTML para abreviaturas e acrónimos para mostrar a versión ampliada ao pasar o cursor. As abreviaturas teñen un subliñado predeterminado e gañan un cursor de axuda para proporcionar contexto adicional ao pasar o cursor e aos usuarios de tecnoloxías de asistencia.
Engadir .initialism
a unha abreviatura para un tamaño de letra lixeiramente menor.
atr
HTML
Citas de bloque
Para citar bloques de contido doutra fonte dentro do seu documento. Envolve <blockquote class="blockquote">
calquera HTML como cita.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Nomear unha fonte
Engade un <footer class="blockquote-footer">
para identificar a fonte. Envolve o nome da obra de orixe en <cite>
.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Aliñación
Use as utilidades de texto segundo sexa necesario para cambiar o aliñamento da súa cita de bloque.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Listas
Sen estilo
list-style
Elimina a marxe predeterminada e esquerda dos elementos da lista (só fillos inmediatos). Isto só se aplica aos elementos de lista fillos inmediatos , o que significa que tamén terás que engadir a clase para calquera lista aniñada.
- 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
En liña
Elimina as viñetas dunha lista e aplica un pouco de luz margin
cunha combinación de dúas clases, .list-inline
e .list-inline-item
.
- Lorem ipsum
- Phasellus iaculis
- Nulla volutpat
Aliñación da lista de descricións
Aliñe os termos e as descricións horizontalmente usando as clases predefinidas do noso sistema de cuadrícula (ou mixins semánticos). Para termos máis longos, pode engadir opcionalmente unha .text-truncate
clase para truncar o texto cun punto suspensivo.
- 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.
- O termo truncado está truncado
- Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
- Aniñación
-
- Lista de definicións anidadas
- Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.
Tamaños de letra sensibles
A partir da versión 4.3.0, Bootstrap inclúe a opción de activar tamaños de fonte sensibles, o que permite que o texto se escale de forma máis natural nos tamaños do dispositivo e das vistas. Pódese activar RFS$enable-responsive-font-sizes
cambiando a variable Sass true
e recompilando Bootstrap.
Para soportar RFS , usamos un mixin Sass para substituír as nosas font-size
propiedades normais. Os tamaños de fontes sensibles compilaranse en calc()
funcións cunha mestura de rem
unidades e vistas para habilitar o comportamento de escala receptivo. Pódese atopar máis información sobre RFS e a súa configuración no seu repositorio de GitHub .