Bootstrap proporciona muchas clases para establecer el color de fondo de un elemento. Podemos establecer fácilmente el fondo de un elemento en cualquier clase contextual. Los componentes de anclaje se oscurecerán al pasar el mouse, al igual que las clases de texto. Algunas clases de colores de fondo se enumeran a continuación.
Podemos agregar color de fondo a un div simplemente agregando la clase «bg-primary», «bg-success», «bg-danger», «bg-info» y muchas más, como se muestra en los siguientes ejemplos.
Guía paso a paso para la implementación:
Paso 1: Incluya Bootstrap y jQuery CDN en la etiqueta <head> antes que todas las demás hojas de estilo para cargar nuestro CSS.
<enlace rel=”hoja de estilo” href=”https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css”>
<script src=”https://ajax.googleapis.com/ ajax/libs/jquery/3.3.1/jquery.min.js”></script>
<script src=”https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/ popper.min.js”></script>
<script src=”https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js”></script>
Paso 2: agregue la etiqueta <div> en el cuerpo HTML con el contenedor de clase .
Paso 3: agregue la etiqueta <li> con clases .bg-primary, .bg-success , etc. en la etiqueta <body> .
Ejemplo 1: El siguiente ejemplo muestra diferentes clases de color de fondo para establecer el color de fondo de un contenido.
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script> <script src= "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"> </script> <script src= "https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"> </script> </head> <body> <div class="container"> <ul> <li class="bg-primary">.bg-primary class</li> <li class="bg-success">.bg-success class</li> <li class="bg-info">.bg-info class</li> <li class="bg-warning">.bg-warning class</li> <li class="bg-danger">.bg-danger class</li> </ul> </div> </body> </html>
Producción:
ejemplo de diferentes colores de fondo
Ejemplo 2: El siguiente ejemplo muestra cómo agregar color de fondo y otras clases a HTML div.
- Primero, busque el div en su código HTML y agregue una clase predefinida a la etiqueta de apertura.
- Agregue una clase predefinida de Bootstrap al div que le gustaría cambiar.
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script> <script src= "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"> </script> <script src= "https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"> </script> </head> <body> <div class="p-3 mb-2 bg-primary text-white">.bg-primary</div> <div class="p-3 mb-2 bg-secondary text-white">.bg-secondary</div> <div class="p-3 mb-2 bg-success text-white">.bg-success</div> <div class="p-3 mb-2 bg-danger text-white">.bg-danger</div> <div class="p-3 mb-2 bg-warning text-dark">.bg-warning</div> <div class="p-3 mb-2 bg-info text-white">.bg-info</div> </body> </html>
Producción:
color de fondo de la etiqueta div (estos espacios entre cada div son relleno)
Publicación traducida automáticamente
Artículo escrito por saksham894954 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA