Bootstrap es un marco CSS utilizado para diseñar páginas web. Es el marco CSS más utilizado debido a su simplicidad y facilidad de implementación. Bootstrap se usa junto con HTML y JavaScript para hacer que las páginas web sean interactivas. Los banners son secciones en la página web que requieren atención adicional. Puede haber varios banners en una página web y se pueden colocar en cualquier lugar de la página web. Los banners en Bootstrap están representados por la clase jumbotron. Los jumbotrons tienen estilos predefinidos y se pueden usar como pancartas. La otra forma de crear un banner es un contenedor con estilo personalizado. La clase de contenedor de Bootstrap también se puede usar para crear pancartas de cualquier altura y ancho. Este artículo trata sobre la creación de un banner de dos tonos, lo que significa que el banner consta de dos colores diferentes. Los siguientes ejemplos muestran cómo crear un banner con dos tonos.
Ejemplo 1: en este ejemplo, hemos creado el banner utilizando una clase de contenedor con estilo personalizado. La clase de contenedor se divide a su vez en filas y columnas. La fila consta de dos columnas de tamaño 2 unidades y 10 unidades respectivamente. A la columna de tamaño 2 unidades se le da un color ya la otra columna se le da un color de fondo diferente. Se agrega un icono en la primera columna y se muestra un mensaje de advertencia en la segunda columna. En este ejemplo, usamos CSS en línea. Este es un ejemplo de banner vertical de dos tonos.
Implementación de código:
HTML
<!DOCTYPE html> <html> <head> <title>Banner</title> <link rel="stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity= "sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <script src="https://kit.fontawesome.com/136b4fde49.js" crossorigin="anonymous"> </script> </head> <body> <div class="container-fluid" style= "background:#FF3244;height: 170px;"> <div class="row"> <div class="col-2" style= "background:#C60012;height:170px;"> <i class="fas fa-exclamation-triangle fa-10x py-1" style="color: #1C2833;"> </i> </div> <div class="col-10"> <h1 class="display-4">Action Required</h1> <p class="lead"> Your password is about to expire in 7 days. Please set a new password. </p> </div> </div> </div> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity= "sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"> </script> <script src= "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity= "sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"> </script> <script src= "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity= "sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"> </script> </body> </html>
Producción:
Ejemplo 2: En el segundo ejemplo, hemos hecho uso de una clase jumbotron. La altura y el ancho del banner es equivalente al del jumbotron. El jumbotron se divide en dos contenedores. Los contenedores son de diferentes alturas pero del mismo ancho. El contenedor superior tiene un color diferente en comparación con el contenedor inferior. Para este ejemplo, hemos definido los estilos CSS dentro de la etiqueta <style> en la sección de encabezado del documento HTML. Este es un ejemplo de banner horizontal de dos tonos.
Implementación de código
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity=
"sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous">
<style type="text/css">
#upper {
background-color: yellow;
height: 100px;
padding-bottom: 20px;
padding-left: 10px;
}
#lower {
background-color: pink;
height: 80px;
padding: 10px;
}
</style>
</head>
<body>
<div class="jumbotron-fluid">
<div class="container-fluid" id="upper">
<h2 class="display-4">Hello World!</h2>
<p class="lead" id="upper_lead">
Welcome to GeeksForGeeks.
</p>
</div>
<div class="container-fluid" id="lower">
<p class="lead">
Explore our range of courses.
Avail the exclusive offers!
</p>
</div>
</div>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por Shreyasi_Chakraborty y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA