Bootstrap4 Tutorial Básico

Bootstrap4 Tabelas Bootstrap4 Alinhamento de Texto

Bootstrap4 cores

Bootstrap 4 forneceu algumas classes de cores representativas: .text-suave, .text-primário, .text-sucesso, .text-info, .text-aviso, .text-perigo, .text-secondary, .text-white, .text-dark 和 .text-light:

示例

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap 示例</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-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">
　　<h2>代表指定意义的文本颜色</h2>
　　<p class="text-muted">柔和的文本。</p>
　　<p class="text-primary">重要的文本。</p>
　　<p class="text-success">执行成功的文本。</p>
　　<p class="text-info">代表一些提示信息的文本。</p>
　　<p class="text-warning">警告文本。</p>
　　<p class="text-danger">危险操作文本。</p>
　　<p class="text-secondary">副标题。</p>
　　<p class="text-dark">深灰色文字。</p>
　　<p class="text-light">浅灰色文本（白色背景上看不清楚）。</p>
　　<p class="text-white">白色文本（白色背景上看不清楚）。</p>
</div>
</body>
</html>

Teste Veja ‹/›

在链接中使用

示例

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap 示例</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-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">
　　<h2>文本颜色</h2>
　　<p>鼠标移动到链接。</p>
　　<a href="#" class="text-muted">柔和的链接。</a>
　　<a href="#" class="text-primary">主要链接。</a>
　　<a href="#" class="text-success">成功链接。</a>
　　<a href="#" class="text-info">信息文本链接。</a>
　　<a href="#" class="text-warning">警告链接。</a>
　　<a href="#" class="text-danger">危险链接。</a>
　　<a href="#" class="text-secondary">副标题链接。</a>
　　<a href="#" class="text-dark">深灰色链接。</a>
　　<a href="#" class="text-light">浅灰色链接。</a>
</div>
</body>
</html>

Teste Veja ‹/›

背景颜色

提供背景颜色的类有: .bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark 和 .bg-light。

注意背景颜色不会设置文本的颜色，在一些示例中你需要与 .text-* 类一起使用。

示例

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap 示例</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-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">
　　<h2>Cor de Fundo</h2>
　　<p class="bg-text primary-white">Cor de Fundo Importante.</p>
　　<p class="bg-text success-white">Cor de Fundo de Sucesso.</p>
　　<p class="bg-text info-white">Cor de Fundo de Mensagem Informativa.</p>
　　<p class="bg-text warning-white">Cor de Fundo de Aviso.</p>
　　<p class="bg-text danger-white">Cor de Fundo de Perigo.</p>
　　<p class="bg-text secondary-white">Cor de Fundo do Subtítulo.</p>
　　<p class="bg-text dark-white">Cor de Fundo Cinza Escuro.</p>
　　<p class="bg-text light-dark">Cor de Fundo Cinza Claro.</p>
</div>
</body>
</html>

Teste Veja ‹/›

Bootstrap4 Tabelas Bootstrap4 Alinhamento de Texto