Bootstrap4 颜色

Bootstrap 4 fornisce alcune classi di colori con significato:.text-muted, .text-primary, .text-success, .text-info, .text-warning, .text-danger, .text-secondary, .text-white, .text-dark e .text-light:

Esempio

<!DOCTYPE html>
<html>
<head>
　　<title>Esempio 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>Colori del testo che rappresentano significati specifici</h2>
　　<p class="text-muted">Testo tenue.</p>
　　<p class="text-primary">Testo importante.</p>
　　<p class="text-success">Testo di successo dell'esecuzione.</p>
　　<p class="text-info">Testo che rappresenta alcune informazioni di suggerimento.</p>
　　<p class="text-warning">Testo di avviso.</p>
　　<p class="text-danger">Testo di operazione pericolosa.</p>
　　<p class="text-secondary">Sottotitolo.</p>
　　<p class="text-dark">Testo grigio scuro.</p>
　　<p class="text-light">Testo grigio chiaro (difficile da leggere sullo sfondo bianco).</p>
　　<p class="text-white">Testo bianco (difficile da leggere sullo sfondo bianco).</p>
</div>
</body>
</html>

测试看看 ‹/›

Usato nei link

Esempio

<!DOCTYPE html>
<html>
<head>
　　<title>Esempio 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>Colori del testo</h2>
　　<p>Passa il mouse sul link.</p>
　　<a href="#" class="text-muted">Link tenue.</a>
　　<a href="#" class="text-primary">Link principale.</a>
　　<a href="#" class="text-success">Link di successo.</a>
　　<a href="#" class="text-info">Testo del link informativo.</a>
　　<a href="#" class="text-warning">Link avviso.</a>
　　<a href="#" class="text-danger">Link pericolo.</a>
　　<a href="#" class="text-secondary">Link sottotitolo.</a>
　　<a href="#" class="text-dark">Link grigio scuro.</a>
　　<a href="#" class="text-light">Link grigio chiaro.</a>
</div>
</body>
</html>

测试看看 ‹/›

Colore di sfondo

Le classi che forniscono il colore di sfondo sono: .bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark e .bg-light.

Attenzione: il colore di sfondo non imposta il colore del testo, in alcuni esempi è necessario usarlo insieme alla classe .text-*.

Esempio

<!DOCTYPE html>
<html>
<head>
　　<title>Esempio 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>Colore di sfondo</h2>
　　<p class="bg-primary text-white">Colorlo di sfondo importante.</p>
　　<p class="bg-success text-white">Colorlo di sfondo successo.</p>
　　<p class="bg-info text-white">Colorlo di sfondo avviso informazioni.</p>
　　<p class="bg-warning text-white">Colorlo di sfondo avviso.</p>
　　<p class="bg-danger text-white">Colorlo di sfondo pericolo.</p>
　　<p class="bg-secondary text-white">Colorlo di sfondo sottotitolo.</p>
　　<p class="bg-dark text-white">Colorlo di sfondo scuro.</p>
　　<p class="bg-light text-dark">Colorlo di sfondo chiaro.</p>
</div>
</body>
</html>

测试看看 ‹/›

Bootstrap4 表格 Bootstrap4 文字排版

Tutorial di Bootstrap4

Bootstrap4 颜色

Colore di sfondo