En este artículo, veremos a Bulma Hero con Fullheight con Navbar. Para usar la barra de navegación con el componente Hero, podemos usar la clase is-fullheight-with-navbar.
Bulma Hero Fullheight con clase de barra de navegación:
- is-fullheight-with-navbar: esta clase o modificador se usa para incluir la barra de navegación dentro de la sección Héroe al reducir algo de espacio de la ventana gráfica.
Sintaxis:
<nav class="navbar">
...
</nav>
<section class="hero is-fullheight-with-navbar">
...
</section>
Ejemplo 1:
HTML
<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css"/> </head> <body> <nav class="navbar" role="navigation" aria-label="main navigation"> <div class="navbar-brand"> <a class="navbar-item has-background-success" href="#"> <h1 class="has-text-white"> GeeksforGeeks </h1> </a> <a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample"> <span aria-hidden="true"></span> <span aria-hidden="true"></span> <span aria-hidden="true"></span> </a> </div> <div id="navbarBasicExample" class="navbar-menu"> <div class="navbar-start"> <a class="navbar-item"> Home </a> <a class="navbar-item"> Blogs </a> <div class="navbar-item has-dropdown is-hoverable"> <a class="navbar-link"> More </a> <div class="navbar-dropdown"> <a class="navbar-item"> About us </a> <a class="navbar-item"> Tutorials </a> <a class="navbar-item"> Practice </a> </div> </div> </div> <div class="navbar-end"> <div class="navbar-item"> <div class="buttons"> <a class="button is-success"> <strong>Sign up</strong> </a> <a class="button is-light"> Log in </a> </div> </div> </div> </div> </nav> <section class="hero is-fullheight-with-navbar is-dark"> <div class="hero-body content columns"> <h1 class="title column"> Welcome to GeeksforGeeks </h1> <p class="subtitle column"> This is Fullheight hero with navbar that uses <code> is-fullheight-with-navbar </code> class. </p> </div> </section> </body> </html>
Producción:
Ejemplo 2:
HTML
<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css"/> </head> <body> <!-- Header including navbar --> <nav class="navbar" role="navigation" aria-label="main navigation"> <div class="navbar-brand"> <a class="navbar-item has-background-success" href="#"> <h1 class="has-text-white"> GeeksforGeeks </h1> </a> <a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample"> <span aria-hidden="true"></span> <span aria-hidden="true"></span> <span aria-hidden="true"></span> </a> </div> <div id="navbarBasicExample" class="navbar-menu"> <div class="navbar-start"> <a class="navbar-item"> Home </a> <a class="navbar-item"> Blogs </a> <div class="navbar-item has-dropdown is-hoverable"> <a class="navbar-link"> More </a> <div class="navbar-dropdown"> <a class="navbar-item"> About us </a> <a class="navbar-item"> Tutorials </a> <a class="navbar-item"> Practice </a> </div> </div> </div> <div class="navbar-end"> <div class="navbar-item"> <div class="buttons"> <a class="button is-success"> <strong>Sign up</strong> </a> <a class="button is-light"> Log in </a> </div> </div> </div> </div> </nav> <section class="hero is-fullheight-with-navbar is-light columns"> <div class="hero-body column"> <h1 class="title column"> Learn Programming Languages </h1> <div class="rows"> <div class="row has-text-white has-background-primary p-4"> Java </div> <div class="row has-text-white has-background-info p-4"> C++ </div> <div class="row has-text-dark has-background-warning p-4"> Python </div> <div class="row has-text-light has-background-dark p-4"> C# </div> </div> </div> </section> </body> </html>
Producción:
Referencia: https://bulma.io/documentation/layout/hero/#fullheight-with-navbar
Publicación traducida automáticamente
Artículo escrito por tarunsinghwap7 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA