Bootstrap4 Tutoriales básicos

Bootstrap4 Tablas Bootstrap4 Formateo de texto

Bootstrap4 color

Bootstrap 4 proporcionó algunas clases de colores representativas: .text-desaturado, .text-primario, .text-éxito, .text-información, .text-advertencia, .text-peligroso, .text-secundario, .text-blanco, .text-oscuro y .text-claro:

ejemplo

!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>representa colores de texto específicos</h2>
　　<p　class="text-suave">texto suave.</p>
　　<p　class="text-principal">texto importante.</p>
　　<p　class="text-éxito">texto que representa una acción ejecutada con éxito.</p>
　　<p　class="text-información">texto que representa algún tipo de información de sugerencia.</p>
　　<p　class="text-advertencia">texto de advertencia.</p>
　　<p　class="text-peligroso">texto de acción peligrosa.</p>
　　<p　class="text-secundario">subtítulo.</p>
　　<p　class="text-oscuro">texto oscuro.</p>
　　<p　class="text-claro">texto claro (difícil de ver contra un fondo blanco).</p>
　　<p　class="text-blanco">texto en blanco (difícil de ver contra un fondo blanco).</p>
</div>
</body>
</html>

Prueba aquí ‹/›

usar en los enlaces

ejemplo

!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>color de texto</h2>
　　<p>al pasar el ratón sobre el enlace.</p>
　　<a　href="#"　class="text-suave">enlaces suaves.</a>
　　<a　href="#"　class="text-principal">enlaces principales.</a>
　　<a　href="#"　class="text-éxito">enlaces de éxito.</a>
　　<a　href="#"　class="text-información">enlaces de texto informativo.</a>
　　<a　href="#"　class="text-advertencia">enlaces de advertencia.</a>
　　<a　href="#"　class="text-peligroso">enlaces peligrosos.</a>
　　<a　href="#"　class="text-secundario">enlaces de subtítulo.</a>
　　<a　href="#"　class="text-oscuro">enlaces de color oscuro.</a>
　　<a　href="#"　class="text-claro">enlaces de color claro.</a>
</div>
</body>
</html>

Prueba aquí ‹/›

colores de fondo

Las clases que proporcionan colores de fondo son: .bg-principal, .bg-éxito, .bg-información, .bg-advertencia, .bg-peligroso, .bg-secundario, .bg-oscuro y .bg-claro.

Tenga en cuenta que el color de fondo no establece el color del texto, en algunos ejemplos necesitará usar .text-* usar clases juntas.

ejemplo

!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>Color de fondo</h2>
　　<p class="bg-text primary-white">Color de fondo importante.</p>
　　<p class="bg-text success-white">Color de fondo de éxito.</p>
　　<p class="bg-text info-white">Color de fondo de información.</p>
　　<p class="bg-text warning-white">Color de fondo de advertencia</p>
　　<p class="bg-text danger-white">Color de fondo peligroso.</p>
　　<p class="bg-text secondary-white">Color de fondo de subtítulo.</p>
　　<p class="bg-text dark-white">Color de fondo oscuro.</p>
　　<p class="bg-text light-dark">Color de fondo claro.</p>
</div>
</body>
</html>

Prueba aquí ‹/›

Bootstrap4 Tablas Bootstrap4 Formateo de texto