Bootstrap4 Cores Bootstrap4 Sistema de Grades

Bootstrap4 文字排版

Bootstrap 4 默认设置

Bootstrap 4 默认的 font-size 为 16px, line-height 为 1.5。

默认的 font-family 为 "Helvetica Neue", Helvetica, Arial, sans-serif。

此外，所有的 <p> 元素 margin-- 116

<h1> - <h6>

1 6,

exemplo

!DOCTYPE html>
<html>
<head>
　　<title>Exemplo Bootstrap</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="largura=device-largura, inicial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h1>h1　Título Bootstrap (2.5rem =　40px)</h1>
　　<h2>h2　Título Bootstrap (2rem =　32px)</h2>
　　<h2>h2　Título Bootstrap (1.75rem =　28px)</h2>
　　<h4>h4　Título Bootstrap (1.5rem =　24px)</h4>
　　<h5>h5　Título Bootstrap (1.25rem =　20px)</h5>
　　<h6>h6　Título Bootstrap (1rem =　16px)</h6>
</div>
</body>
</html>

teste e veja ‹/›

Classe de título Display

O Bootstrap também oferece quatro classes Display para controlar o estilo dos títulos: .display-1, .display-2, .display-3, .display-4。

exemplo

!DOCTYPE html>
<html>
<head>
　　<title>Exemplo Bootstrap</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="largura=device-largura, inicial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h1>Título Display</h1>
　　<p>Os títulos Display podem output uma fonte maior e mais grossa.</<p>
　　<h1　class="display-1">Exibir　1</h1>
　　<h1　class="display-2">Exibir　2</h1>
　　<h1　class="display-3">Exibir　3</h1>
　　<h1　class="display-4">Exibir　4</h1>
</div>
</body>
</html>

teste e veja ‹/›

<small>

No Bootstrap 4 No HTML, o elemento <small> é usado para criar texto de tamanho menor e cor mais clara:

exemplo

!DOCTYPE html>
<html>
<head>
　　<title>Exemplo Bootstrap</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="largura=device-largura, inicial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h1>Título de texto menor</h1>
　　<p>Elemento small é usado para texto de tamanho menor e cor mais clara:/<p>　　　　　　　
　　<h1>h1　Título <small>Subtítulo</small></h1>
　　<h2>h2　Título <small>Subtítulo</small></h2>
　　<h2>h2　Título <small>Subtítulo</small></h2>
　　<h4>h4　Título <small>Subtítulo</small></h4>
　　<h5>h5　Título <small>Subtítulo</small></h5>
　　<h6>h6　Título <small>Subtítulo</small></h6>
</div>
</body>
</html>

teste e veja ‹/›

<mark>

Bootstrap 4 Definir <mark> como fundo amarelo e com uma margem interna específica:

exemplo

!DOCTYPE html>
<html>
<head>
　　<title>Exemplo Bootstrap</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="largura=device-largura, inicial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h1>Texto realçado</h1>　　　　
　　<p>Use o elemento mark para <mark>realçar</mark> texto:/mark> texto.</<p>
</div>
</body>
</html>

teste e veja ‹/›

<abbr>

Bootstrap 4 Definir o estilo do elemento HTML <abbr> como uma linha tracejada no fundo do texto:

exemplo

!DOCTYPE html>
<html>
<head>
　　<title>Exemplo Bootstrap</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="largura=device-largura, inicial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h1>Abreviações</h1>
　　<p>Elemento abbr é usado para marcar abreviações ou siglas:</<p>
　　<p><abbr title="Organização Mundial da Saúde">OMS</abbr> foi fundado1948ano.</<p>
</div>
</body>
</html>

teste e veja ‹/›

<blockquote>

Para adicionar a classe .blockquote ao conteúdo citado, use <blockquote> :

exemplo

!DOCTYPE html>
<html>
<head>
　　<title>Exemplo Bootstrap</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="largura=device-largura, inicial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h1>Blockquotes</h1>
　　<p>Elemento blockquote é usado para apresentar conteúdo de outras fontes:</<p>
　　<blockquote class="blockquote">
　　　　<p>5Ao longo de 0 anos, a Fundação Mundial para a Natureza (WWF) tem estado a proteger o futuro da natureza. A Fundação Mundial para a Natureza (WWF) é a organização líder em conservação natural, em100 países/trabalhando em várias regiões,
　　　　recebeu apoio dos Estados Unidos120 mil membros e quase500 mil membros de apoio.</<p>
　　　　<footer class="blockquote-footer">Do site da WWF</footer>
　　</blockquote>
</div>
</body>
</html>

teste e veja ‹/›

<dl>

Bootstrap 4 Definir o estilo do elemento HTML <dl> da seguinte forma:

exemplo

!DOCTYPE html>
<html>
<head>
　　<title>Exemplo Bootstrap</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="largura=device-largura, inicial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h1>Lista de descrições</h1>　　　　
　　<p>Elemento dl representa lista de descrições:</<p>
　　<dl>
　　　　<dt>Café</dt>
　　　　<dd>-　Bebida quente</dd>
　　　　<dt>Leite</dt>
　　　　<dd>-　Bebida fria</dd>
　　</dl>　　　　　
</div>
</body>
</html>

teste e veja ‹/›

<code>

Bootstrap 4 Definir o estilo do elemento HTML <code> da seguinte forma:

exemplo

!DOCTYPE html>
<html>
<head>
　　<title>Exemplo Bootstrap</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="largura=device-largura, inicial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h1>fragmento de código</h1>
　　<p>Pode-se colocar alguns elementos de código dentro do elemento <code>:</<p>
　　<p>Os seguintes elementos HTML: <code>span</, <code>section</, <code>div</code> usado para definir parte do conteúdo do documento.</<p>
</div>
</body>
</html>

teste e veja ‹/›

<kbd>

Bootstrap 4 Defina o estilo do elemento HTML <kbd> da seguinte forma:

exemplo

!DOCTYPE html>
<html>
<head>
　　<title>Exemplo Bootstrap</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="largura=device-largura, inicial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h1>/h1>
　　>entrada de teclado</<p>
　　<p>Para indicar entrada geralmente digitada pelo teclado, use o elemento kbd:<　+　<p>/kbd>abrir a janela de "imprimir".</<p>
</div>
</body>
</html>

teste e veja ‹/›

<pre>

Bootstrap 4 Defina o estilo do elemento HTML <pre> da seguinte forma:

exemplo

!DOCTYPE html>
<html>
<head>
　　<title>Exemplo Bootstrap</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="largura=device-largura, inicial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h1>código multilinha</h1>
<p>Para código multilinha, use o elemento pre:</<p>
<pre>
texto do elemento inicial
exibição com largura fixa
fonte, mantendo
espaço e
quebra de linha.
</pre>
</div>
</body>
</html>

teste e veja ‹/›

mais classes de formatação

A tabela fornece mais classes de formatação do Bootstrap4 mais exemplos de formatação:

nome da classe	descrição	exemplo
.font-peso-negrito	texto em negrito	Experimente
.font-peso-normal	texto normal	Experimente
.font-peso-light	texto mais fino	Experimente
.font-italico	texto em itálico	Experimente
.lead	destaque o parágrafo	Experimente
.small	especificar texto menor (do elemento pai 85% )	Experimente
.text-esquerda	alinhamento à esquerda	Experimente
.text-center	Centralizado	Experimente
.text-right	Alinhamento à direita	Experimente
.text-justify	Definir alinhamento de texto, quando o texto ultrapassa o tamanho da tela, o texto automaticamente quebra as linhas	Experimente
.text-nowrap	Não quebra linhas no meio do parágrafo quando ultrapassa o tamanho da tela	Experimente
.text-lowercase	Definir texto em minúsculas	Experimente
.text-uppercase	Definir texto em maiúsculas	Experimente
.text-capitalize	Definir a primeira letra de uma palavra em maiúscula	Experimente
.initialism	Exibe o texto dentro do elemento <abbr> em fonte pequena e pode converter letras minúsculas em maiúsculas	Experimente
.list-unstyled	Remove a estilização padrão da lista, alinha à esquerda os itens da lista (em <ul> e <ol>). Essa classe aplica-se apenas aos itens de sublistas diretas 　　(Se precisar remover itens aninhados da lista, você precisa usar essa estilização na lista aninhada)	Experimente
.list-inline	Coloca todos os itens da lista na mesma linha	Experimente
.pre-rolável	Torna o elemento <pre> rolagem, a área de código máximo altura é340px, uma vez que ultrapasse essa altura,会出现滚动条 na eixo Y	Experimente

Bootstrap4 Cores Bootstrap4 Sistema de Grades

Bootstrap4 Tutoriais Básicos

Bootstrap4 文字排版

Bootstrap 4 默认设置

<h1> - <h6>

Classe de título Display

<small>

<mark>

<abbr>

<blockquote>

<dl>

<code>

<kbd>

<pre>

mais classes de formatação