TechBlogSD - Todo para WordPress y desarrollo WEB
Instrucciones de WEB y WordPress, noticias, reseñas de temas y complementos

¿Cómo crear Bootstrap 5 Jumbotron?

12

Bootstrap es un marco que incluye CSS, JavaScript, personalización y componentes. Los componentes se utilizan para agregar elementos predefinidos en cualquier lugar de la plantilla Bootstrap. Los estilos requeridos para los componentes se definen dentro del CSS principal y algunos componentes también necesitan el script del archivo JavaScript precompilado. Esto ayuda a agregar varias instancias del mismo componente en cualquier lugar del sitio con un aspecto uniforme. En este artículo, analicemos cómo agregar el componente jumbotron Bootstrap en su sitio.

¿Qué es Jumbotron?

Jumbotron es un componente Bootstrap que ocupa todo el ancho del puerto de visualización del navegador y se utiliza para crear fácilmente secciones de héroe de ancho completo. Es como un cuadro de llamada a la acción para mostrar contenido importante y atraer usuarios. Aunque jumbotron se extiende a todo el ancho, puede desactivar el ancho completo colocándolo dentro de un elemento contenedor.

Características del componente Jumbotron

  • Por defecto ocupa todo el ancho del diseño, también puede restringir al ancho definido
  • Componente totalmente sensible en todos los dispositivos
  • Tiene radio de borde (oculto cuando se usa con ancho completo)
  • El color de fondo predeterminado es #eee
  • Cualquier componente de Bootstrap como alertas e insignias se puede agregar dentro de jumbotron
  • Se usa como una sección de llamada a la acción en las plantillas de Bootstrap
  • Se puede insertar en cualquier lugar de las plantillas Bootstrap usando la clase CSS ".jumbotron"
  • Jumbotron usa estilos predeterminados del “bootstrap.min.css" principal y se puede personalizar usando estilos en línea.

Jumbotron de ancho completo

Jumbotron se agrega usando la clase CSS ".jumbotron" y cualquier componente se puede agregar dentro de jumbotron. El siguiente ejemplo contiene un encabezado H2, un párrafo y un botón con una sección de ancho completo.

¿Cómo crear Bootstrap 5 Jumbotron?

Jumbotron Bootstrap de ancho completo

El código completo para el jumbotron de ancho completo se proporciona a continuación. Como puede ver el código, la clase ".jumbotron-fluid" se usa para el ancho completo junto con el ".container".

<!DOCTYPE html> <html lang="en"> <head> <!-- Meta Tags for Bootstrap 5 --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Bootstrap 5 CSS --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous"> </head> <body> <!-- Start of Jumbotron --> <div class="jumbotron jumbotron-fluid"> <div class="container"> <h2>WebNots Web Consulting Services</h2> <p>WebNots Web Consulting Services company offers site building, migration and SEO services on WordPress and Weebly platforms. We also share our experience and knowledge through free articles, demos, eBooks, videos and glossary terms for the benefit of bloggers and webmasters community.</p> <p><a href="https://www.webnots.com/free-ebooks-for-bloggers-and-webmasters/" target="_blank" class="btn btn-primary btn-lg">Get Free eBooks for Bloggers</a></p> </div> </div> <!-- End of Jumbotron --> <!-- Bootstrap 5 Scripts --> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script> </body> </html>

El código jumbotron anterior usa enlaces CDN precompilados Bootstrap CSS y archivos JS. Pero si desea alojar los archivos en su servidor, descargue y cargue los archivos requeridos desde el sitio oficial. Consulte la plantilla de inicio para comenzar con Bootstrap.

Bootstrap Jumbotron – Sin ancho completo

Si no desea el ancho completo, simplemente use la clase ".jumbotron" sin las clases ".container" y ".jumbotron-fluid". De esta manera, puede desactivar el ancho completo y el ancho del jumbotron será el ancho del

envase.

¿Cómo crear Bootstrap 5 Jumbotron?

Bootstrap Jumbotron dentro del contenedor

Tenga en cuenta que cuando el componente jumbotron no ocupa todo el ancho, el radio del borde será visible. A continuación se muestra el código completo para el ejemplo de jumbotron anterior sin ancho completo:

<div class="jumbotron"> <h2 style="padding-bottom: 50px">This is an example of jumbotron component inside container.</h2> <a href="https://www.webnots.com/" class="btn btn-warning btn-lg btn-block">Go to Home Page</a> </div>

Personalización del componente Jumbotron

Puede usar CSS simple para personalizar el color de fuente y el color de fondo del jumbotron como se muestra a continuación:

¿Cómo crear Bootstrap 5 Jumbotron?

Jumbotron Bootstrap personalizado

El código completo para el jumbotron personalizado anterior se proporciona a continuación:

<!DOCTYPE html> <html> <head> <title>Custom Full width Bootstrap Jumbotron</title> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous"> <style type="text/css"> .jumbotron{ margin-top: 15px; padding: 17px; color: #990000; background-color: #FFFFCC; } </style> </head> <body> <div class="jumbotron jumbotron-fluid"> <div class="container"> <h1>Custom Jumbotron Component</h1> <p>This is a custom jumbotron using H1, paragraph and full width button. You can add any other elements and customize the color, margins and paddings as you need.</p> <p><a href="https://www.webnots.com/" class="btn btn-warning btn-lg btn-block">Go to Home Page</a></p> </div> </div> </body> </html>

Aprenda Bootstrap 5 (índice )


Fuente de grabación: webnots.com
Deja una respuesta

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More