Bootstrap's Default Settings
Bootstrap's padrão font-size global é 14px, com um line-height de 1.428.
Esta é aplicada ao <body> e todos os parágrafos.
Além disso, todos <p> elementos têm uma margem inferior igual a metade do seu computadorizada line-height (10px por padrão).
Bootstrap padrões do navegador vs.
Neste capítulo, vamos olhar para alguns elementos HTML que serão decorados um pouco diferente por Bootstrap de padrões do navegador.
<h1> - <h6>
Por padrão, Bootstrap irá denominar os títulos HTML ( <h1> para <h6> ) da seguinte maneira:
Exemplo
h1 Bootstrap heading (36px)
h2 Bootstrap heading (30px)
h3 Bootstrap heading (24px)
h4 Bootstrap heading (18px)
h5 Bootstrap heading (14px)
h6 Bootstrap heading (12px)
Tente você mesmo " <small>
Em Bootstrap o HTML <small> elemento é usado para criar um texto secundário mais leves em qualquer posição:
Exemplo
h1 heading secondary text
h2 heading secondary text
h3 heading secondary text
h4 heading secondary text
h5 heading secondary text
h6 heading secondary text
Tente você mesmo " <mark>
Bootstrap será o estilo do HTML <mark> elemento da seguinte maneira:
<abbr>
Bootstrap será o estilo do HTML <abbr> elemento da seguinte maneira:
<blockquote>
Bootstrap será o estilo do HTML <blockquote> elemento da seguinte maneira:
Exemplo
For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.
Tente você mesmo " Para mostrar a citação à direita, utilize o .blockquote-reverse classe:
Exemplo
For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.
Tente você mesmo " <dl>
Bootstrap será o estilo do HTML <dl> elemento da seguinte maneira:
<code>
Bootstrap será o estilo do HTML <code> elemento da seguinte maneira:
Exemplo
The following HTML elements: span , section , and div defines a section in a document.
Tente você mesmo " <kbd>
Bootstrap será o estilo do HTML <kbd> elemento da seguinte maneira:
<pre>
Bootstrap será o estilo do HTML <pre> elemento da seguinte maneira:
Exemplo
Text in a pre element
is displayed in a fixed-width
font, and it preserves
both spaces and
line breaks.
Tente você mesmo " Contextuais cores e fundos
Bootstrap também tem algumas classes contextuais que podem ser usados para fornecer "significado através de cores".
As classes de cores de texto são: .text-muted , .text-primary , .text-success , .text-info , .text-warning , e .text-danger :
Exemplo
This text is muted.
This text is important.
This text indicates success.
This text represents some information.
This text represents a warning.
This text represents danger.
Tente você mesmo " As classes de cores do fundo são: .bg-primary , .bg-success , bg-info , bg-warning , e .bg-danger :
Exemplo
This text is important.
This text indicates success.
This text represents some information.
This text represents a warning.
This text represents danger.
Tente você mesmo " Mais Classes Tipografia
As classes Bootstrap abaixo podem ser adicionados a elementos de estilo HTML adicionais:
| Classe | Descrição | Exemplo |
|---|---|---|
.lead | Faz um parágrafo se destacam | Tente |
.small | Indica o texto mais pequeno (definido como 85% do tamanho do pai) | Tente |
.text-left | Indica o texto alinhado à esquerda | Tente |
.text-center | Indica o texto alinhado ao centro | Tente |
.text-right | Indica texto alinhado à direita | Tente |
.text-justify | Indica texto justificado | Tente |
.text-nowrap | Indica nenhum texto envoltório | Tente |
.text-lowercase | Indica o texto em minúsculas | Tente |
.text-uppercase | Indica o texto uppercased | Tente |
.text-capitalize | Indica o texto capitalizado | Tente |
.initialism | Exibe o texto dentro de um <abbr> elemento em um tamanho de fonte ligeiramente menor | Tente |
.list-unstyled | Remove o padrão list-style e margem esquerda em itens da lista (funciona tanto em <ul> e <ol> ). Esta classe aplica-se apenas aos itens da lista de filhos imediatos (para remover o padrão list-style de quaisquer listas aninhadas, aplicar esta classe para quaisquer listas aninhadas também) | Tente |
.list-inline | Coloca todos os itens da lista em uma única linha | Tente |
.dl-horizontal | Alinha os termos ( <dt> ) e descrições ( <dd> ) em <dl> elementos side-by-side. Começa como padrão <dl> s, mas quando a janela do navegador se expande, ele vai alinhar lado a lado | Tente |
.pre-scrollable | Faz um <pre> elemento de rolagem | Tente |
Conclua Bootstrap Tipografia Referência
Para uma referência completa de todos os tipografia elementos / aulas, ir para a nossa completa Bootstrap Tipografia Referência .
Também olhar para o nosso Bootstrap Helper Classes de Referência para obter mais informações sobre classes contextuais.