Tipografia
Estilos de tipografia em geral, tal como: cabeçalhos, texto geral, elementos do texto em linha, listas e outros.
Conteúdo
- Conteúdo
- Cabeçalhos
- Texto geral (corpo)
- Elementos do texto em linha
- Classes de alinhamento
- Classes de transformação
- Abreviações
- Endereços
- Blockquotes (bloco de citações)
- Listas
Cabeçalhos
Todos os cabeçalhos HTML, <h1> até <h6>, estão disponíveis. Classes .h1 até .h6 também estão disponíveis.
h1. Cabeçalho
h2. Cabeçalho
h3. Cabeçalho
h4. Cabeçalho
h5. Cabeçalho
h6. Cabeçalho
<h1>h1. Cabeçalho</h1>
<h2>h2. Cabeçalho</h2>
<h3>h3. Cabeçalho</h3>
<h4>h4. Cabeçalho</h4>
<h5>h5. Cabeçalho</h5>
<h6>h6. Cabeçalho</h6>Crie textos secundários em alguns cabeçalhos com uma tag genérica <small> ou a classe .small.
h1. Cabeçalho Texto secundário
h2. Cabeçalho Texto secundário
h3. Cabeçalho Texto secundário
h4. Cabeçalho Texto secundário
h5. Cabeçalho Texto secundário
h6. Cabeçalho Texto secundário
<h1>h1. Cabeçalho <small>Texto secundário</small></h1>
<h2>h2. Cabeçalho <small>Texto secundário</small></h2>
<h3>h3. Cabeçalho <small>Texto secundário</small></h3>
<h4>h4. Cabeçalho <small>Texto secundário</small></h4>
<h5>h5. Cabeçalho <small>Texto secundário</small></h5>
<h6>h6. Cabeçalho <small>Texto secundário</small></h6>Texto geral (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.
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.
Maecenas 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>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.</p>
<p>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.</p>
<p>Maecenas 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>Texto destacado
Faça um paragrafo em destaque adicionado .lead.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
<p class="lead">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.</p>Elementos do texto em linha
Texto marcado
Para destacar um pedaço de texto devido sua relevancia em outro contexto, use a tag <mark>.
Você pode usar a tag mark para destacar um texto.
<p>Você pode usar a tag mark para <mark>destacar</mark> um texto.</p>Texto deletado
Para indicar blocos de texto que foram deletados use a tag <del>.
Esta linha de texto é para ser tratada como texto excluído.
<p><del>Esta linha de texto é para ser tratada como texto excluído.</del></p>Texto tachado
Para indicar blocos de texto que não são mais relevantes use a tag <s>.
Esta linha de texto é destinada a ser tratada como não precisa.
<p><s>Esta linha de texto é destinada a ser tratada como não precisa.</s></p>Texto inserido
Para indicar adições ao documento use a tag <isn>.
<ins>Essa linha de texto é destinada a ser tratada como uma adição para o documento.</ins>Texto sublinhado
Para sublinhar o texto use a tag <u>.
Essa linha de texto se tornará sublinhada
<p><u>Essa linha de texto se tornará sublinhada</u></p>Faça o uso de padrões HTML destacando tags com estilos leves.
Texto pequeno
Para e enfatização em linha ou blocos de texto, use a tag <small> para definir texto perto de 85% do manho do pai. Elementos de cabeçalho recebem sua própria font-size (tamanho de fonte) para aninhar elementos <small>.
Você pode alternativamente usar um elemento em linha com .small no lugar de algum <mark>.
Essa linha de texto é destinada a ser tratada como impressão fina.
<p><small>Essa linha de texto é destinada a ser tratada como impressão fina.</small></p>Negrito
Para enfatizar um trecho de texto com uma font-weight (peso de fonte) mais pesada.
<strong>renderiza como texto em negrito</strong>Itálico
Para enfatizar um trecho de texto em itálico.
<em>renderizado como texto em itálico</em>Elementos alternativos
Sinta-se livre para usar <b> e <i> em HTML5. <b> é destinado para destacar palavras ou frases sem transmitir importância adicional enquanto <i> é principalmente para voz, termos técnicos, etc.
Classes de alinhamento
Realinhe texto facilmente para componentes com classes de alinhamento de texto.
Texto alinhado à esquerda.
Texto alinhado ao centro.
Texto alinhado à direita.
Texto justificado.
Texto sem alinhamento.
<p class="text-left">Texto alinhado à esquerda.</p>
<p class="text-center">Texto alinhado ao centro.</p>
<p class="text-right">Texto alinhado à direita.</p>
<p class="text-justify">Texto justificado.</p>
<p class="text-nowrap">Texto sem alinhamento.</p>Classes de transformação
Transforme textos em componentes com classes capitalização de texto.
Texto em minúsculo.
Texto em maiúsculo.
Texto capitalizado.
<p class="text-lowercase">Texto em minúsculo.</p>
<p class="text-uppercase">Texto em maiúsculo.</p>
<p class="text-capitalize">Texto capitalizado.</p>Abreviações
Implementação estilizada de HTML do elemento <abbr> para abreviações e siglas para mostrar a versão expandida em hover. Abreviação com um atributo title tem uma clara borda inferior pontilhada e um cursor de ajuda no hover, fornecendo contexto adicional no hover e para usuários de tecnologias assistivas.
Abreviação básica
<abbr title="número">num</abbr>Iniciais
Adicione .initialism para uma abreviação com font-size ligeiramente menor.
<abbr title="HyperText Markup Language" class="initialism">HTML</abbr>Endereços
Informações de contato presentes para o ancestral mais próximo ou o corpo inteiro de trabalho. Preserve formatação ao finalizar todas as linhas com <br>.
1355 Market Street, Suite 900
San Francisco, CA 94103
P: (123) 456-7890 Nome completo
first.last@example.com
<address>
<strong>Twitter, Inc.</strong><br>
1355 Market Street, Suite 900<br>
San Francisco, CA 94103<br>
<abbr title="Phone">P:</abbr> (123) 456-7890
</address>
<address>
<strong>Nome completo</strong><br>
<a href="mailto:#">first.last@example.com</a>
</address>Blockquotes (bloco de citações)
Para blocos de citações de conteúdo de outra fonte dentro de seu documento.
Blockquote padrão
Envolva <blockquote> ao redor de qualquer HTML como uma citação. Para citações diretas, nós recomendamos um <p>.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>Opções de blockquote
Estilo e mudanças de conteúdo para variações simples em um norma <blockquote>.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>Alguém famoso em <cite title="Título da fonte">Título da fonte</cite></footer>
</blockquote>Exibição alternativa
Adicione .blockquote-reverse para uma caixa de citação (blockquote) com conteúdo alinhado à direita.
...
<blockquote class="blockquote-reverse">
...
</blockquote>Listas
Não-ordenada
Uma lista de itens em que a ordem não tem importância expor.
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Integer molestie lorem at massa
<ul>
<li>Lorem ipsum dolor sit amet</li>
<li>Consectetur adipiscing elit</li>
<li>Integer molestie lorem at massa</li>
</ul>Ordenada
Uma lista de itens em que a ordem tem importância em expor.
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Integer molestie lorem at massa
<ol>
<li>Lorem ipsum dolor sit amet</li>
<li>Consectetur adipiscing elit</li>
<li>Integer molestie lorem at massa</li>
</ol>Não estilizado
Remova o padrão da list-style (estilo da lista) e margem esquerda na lista de itens (Apenas para filhos imediatos). Isso apenas se aplica a filhos imediatos na lista de itens, isso significa que você precisará adicionar a classe para qualquer lista alinhada também.
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Integer molestie lorem at massa
<ul class="list-unstyled">
<li>Lorem ipsum dolor sit amet</li>
<li>Consectetur adipiscing elit</li>
<li>Integer molestie lorem at massa</li>
</ul>Em linha
Coloque todos os itens da lista em uma única linha com display: inline-block; e algum espaçamento aparente.
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Integer molestie lorem at massa
<ul class="list-inline">
<li>Lorem ipsum dolor sit amet</li>
<li>Consectetur adipiscing elit</li>
<li>Integer molestie lorem at massa</li>
</ul>Descrição
Uma lista de termos como suas descrições associadas.
- Lista de descrição
- Uma lista de descrição é perfeita para definição de termos.
- Euismod
- Vestibulum id ligula porta felis euismod semper 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>Lista de descrição</dt>
<dd>Uma lista de descrição é perfeita para definição de termos.</dd>
<dt>Euismod</dt>
<dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
<dd>Donec id elit non mi porta gravida at eget metus.</dd>
<dt>Malesuada porta</dt>
<dd>Etiam porta sem malesuada magna mollis euismod.</dd>
</dl>Descrição horizontal
Faça termos e descrições em <dl> alinhando lado a lado. Comece empilhando como padrão <dl>s, mas quando a navbar (barra de navegação) aumentar, assim como estes.
- Listas de descrição
- Uma lista descrição é perfeita para definição de termos.
- Euismod
- Vestibulum id ligula porta felis euismod semper 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 semper eget lacinia
- Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
<dl class="dl-horizontal">
<dt>Listas de descrição</dt>
<dd>Uma lista descrição é perfeita para definição de termos.</dd>
<dt>Euismod</dt>
<dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
<dd>Donec id elit non mi porta gravida at eget metus.</dd>
<dt>Malesuada porta</dt>
<dd>Etiam porta sem malesuada magna mollis euismod.</dd>
<dt>Felis euismod semper eget lacinia</dt>
<dd>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</dd>
</dl>Auto-truncado
Descrição listas horizontais truncarão termos que são que são muito grandes para caber na coluna esquerda com text-overflow. Em janelas de exibição mais estreitas, eles mudarão para o layout de empilhamento padrão.