Bootstrap - Tipografia
O Bootstrap usa Helvetica Neue, Helvetica, Arial e sans-serif em sua pilha de fontes padrão. Usando o recurso de tipografia do Bootstrap, você pode criar títulos, parágrafos, listas e outros elementos embutidos. Vamos ver aprender cada um deles nas seções a seguir.
Títulos
Todos os cabeçalhos HTML (h1 a h6) são estilizados no Bootstrap. Um exemplo é mostrado abaixo -
<h1>I'm Heading1 h1</h1>
<h2>I'm Heading2 h2</h2>
<h3>I'm Heading3 h3</h3>
<h4>I'm Heading4 h4</h4>
<h5>I'm Heading5 h5</h5>
<h6>I'm Heading6 h6</h6>O segmento de código acima com Bootstrap produzirá o seguinte resultado -
Subtítulos embutidos
Para adicionar um subtítulo inline a qualquer um dos títulos, basta adicionar <small> ao redor de qualquer um dos elementos ou adicionar .small classe e você obterá um texto menor em uma cor mais clara, conforme mostrado no exemplo abaixo -
<h1>I'm Heading1 h1. <small>I'm secondary Heading1 h1</small></h1>
<h2>I'm Heading2 h2. <small>I'm secondary Heading2 h2</small></h2>
<h3>I'm Heading3 h3. <small>I'm secondary Heading3 h3</small></h3>
<h4>I'm Heading4 h4. <small>I'm secondary Heading4 h4</small></h4>
<h5>I'm Heading5 h5. <small>I'm secondary Heading5 h5</small></h5>
<h6>I'm Heading6 h6. <small>I'm secondary Heading1 h6</small></h6>O segmento de código acima com Bootstrap produzirá o seguinte resultado -
Cópia do corpo principal
Para adicionar alguma ênfase a um parágrafo, adicione class = "lead". Isso lhe dará um tamanho de fonte maior, peso mais leve e uma altura de linha mais alta, como no exemplo a seguir -
<h2>Lead Example</h2>
<p class = "lead">This is an example paragraph demonstrating
the use of lead body copy. This is an example paragraph
demonstrating the use of lead body copy.This is an example
paragraph demonstrating the use of lead body copy.This is an
example paragraph demonstrating the use of lead body copy.
This is an example paragraph demonstrating the use of lead body copy.</p>Ênfase
As tags de ênfase padrão do HTML, como <small>, define o texto em 85% do tamanho do pai, <strong> enfatiza um texto com maior espessura de fonte e <em> enfatiza um texto em itálico.
O Bootstrap oferece algumas classes que podem ser usadas para dar ênfase aos textos, como visto no exemplo a seguir -
<small>This content is within tag</small><br>
<strong>This content is within tag</strong><br>
<em>This content is within tag and is rendered as italics</em><br>
<p class = "text-left">Left aligned text.</p>
<p class = "text-center">Center aligned text.</p>
<p class = "text-right">Right aligned text.</p>
<p class = "text-muted">This content is muted</p>
<p class = "text-primary">This content carries a primary class</p>
<p class = "text-success">This content carries a success class</p>
<p class = "text-info">This content carries a info class</p>
<p class = "text-warning">This content carries a warning class</p>
<p class = "text-danger">This content carries a danger class</p>Abreviações
O elemento HTML <abbr> fornece marcação para abreviações ou acrônimos, como WWW ou HTTP. O bootstrap estiliza os elementos <abbr> com uma borda pontilhada clara na parte inferior e revela o texto completo ao pairar (contanto que você adicione esse texto ao atributo de título <abbr>). Para obter um tamanho de fonte um pouco menor, adicione .initialism a <abbr>.
<abbr title = "World Wide Web">WWW</abbr><br>
<abbr title = "Real Simple Syndication" class = "initialism">RSS</abbr>Endereços
Usando a tag <address>, você pode exibir as informações de contato em sua página da web. Uma vez que o padrão de <address> é exibir: block; você precisará usar
Marcas para adicionar quebras de linha ao texto de endereço incluído.
<address>
<strong>Some Company, Inc.</strong><br>
007 street<br>
Some City, State XXXXX<br>
<abbr title = "Phone">P:</abbr> (123) 456-7890
</address>
<address>
<strong>Full Name</strong><br>
<a href = "mailto:#">[email protected]</a>
</address>Citações em bloco
Você pode usar o <blockquote> padrão ao redor de qualquer texto HTML. Outras opções incluem adicionar uma tag <small> para identificar a fonte da cotação e alinhar à direita a blockquote usando a classe .pull-right . O exemplo a seguir demonstra todos esses recursos -
<blockquote>
<p>This is a default blockquote example. This is a default
blockquote example. This is a default blockquote
example.This is a default blockquote example. This is a
default blockquote example.</p>
</blockquote>
<blockquote>
This is a blockquote with a source title.
<small>Someone famous in <cite title = "Source Title">Source Title</cite></small>
</blockquote>
<blockquote class = "pull-right">This is a blockquote aligned to the right.
<small>Someone famous in <cite title = "Source Title">Source Title</cite></small>
</blockquote>Listas
Bootstrap oferece suporte a listas ordenadas, listas não ordenadas e listas de definição.
Ordered lists - Uma lista ordenada é uma lista que se enquadra em algum tipo de ordem sequencial e é precedida por números.
Unordered lists- Uma lista não ordenada é uma lista que não possui uma ordem específica e é tradicionalmente estilizada com marcadores. Se você não quiser que os marcadores apareçam, pode remover o estilo usando a classe .list-unstyled . Você também pode colocar todos os itens da lista em uma única linha usando a classe .list-inline .
Definition lists- Neste tipo de lista, cada item da lista pode consistir nos elementos <dt> e <dd>. <dt> significa termo de definição e, como um dicionário, este é o termo (ou frase) que está sendo definido. Posteriormente, o <dd> é a definição de <dt>. Você pode fazer termos e descrições em linha <dl> lado a lado usando a classe dl-horizontal .
O exemplo a seguir demonstra cada um desses tipos -
<h4>Example of Ordered List</h4>
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ol>
<h4>Example of UnOrdered List</h4>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
<h4>Example of Unstyled List</h4>
<ul class = "list-unstyled">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
<h4>Example of Inline List</h4>
<ul class = "list-inline">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
<h4>Example of Definition List</h4>
<dl>
<dt>Description 1</dt>
<dd>Item 1</dd>
<dt>Description 2</dt>
<dd>Item 2</dd>
</dl>
<h4>Example of Horizontal Definition List</h4>
<dl class = "dl-horizontal">
<dt>Description 1</dt>
<dd>Item 1</dd>
<dt>Description 2</dt>
<dd>Item 2</dd>
</dl>