Bulma es un framework CSS de código abierto desarrollado por Jeremy Thomas. Este marco se basa en la propiedad CSS Flexbox. Es altamente receptivo, minimizando el uso de consultas de medios para un comportamiento receptivo. Los dos tipos de clases auxiliares de la barra de navegación son el espaciado y el sombreado, y ambos se analizan a continuación con sus ejemplos.
Clases de ayudante de Bulma Navbar:
- is-spaced: esta clase se usa para agregar relleno en el componente de la barra de navegación. Establece el relleno de la barra de navegación desde la parte superior e inferior con 1 rem y en izquierda y derecha con tamaños de 2 rem .
- has-shadow: esta clase se usa para agregar una sombra alrededor del componente de la barra de navegación.
Sintaxis:
<nav class="navbar is-spaced">
...
</nav>
Ejemplo 1: el siguiente ejemplo ilustra la clase de ayudante Navbar is-spaced . Observe el espacio alrededor del componente de la barra de navegación en la salida.
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content= "width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css" /> </head> <body> <div class="container"> <!-- Navbar Starts here --> <nav class="navbar is-light is-spaced" role="navigation" aria-label="main navigation" > <!-- Navbar Brand containing the Heading --> <div class="navbar-brand"> <a class="navbar-item has-background-success" href="#"> <h1 class="has-text-white">GeeksforGeeks</h1> </a> <!-- Burger Icons for responsive navbar --> <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> <!-- Navbar Menu containing a list of items --> <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> <!-- Navbar End containing Sign Up and Sign In Buttons --> <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> </div> </body> </html>
Producción:
Ejemplo 2: El siguiente ejemplo ilustra la clase auxiliar Navbar has-shadow .
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content= "width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css" /> </head> <body> <div class="container"> <!-- Navbar Starts here --> <nav class="navbar is-light has-shadow" role="navigation" aria-label="main navigation"> <!-- Navbar Brand containing the Heading --> <div class="navbar-brand"> <a class="navbar-item has-background-success" href="#"> <h1 class="has-text-white">GeeksforGeeks</h1> </a> <!-- Burger Icons for responsive navbar --> <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> <!-- Navbar Menu containing a list of items --> <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> <!-- Navbar End containing Sign Up and Sign In Buttons --> <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> </div> </body> </html>
Producción:
Referencia: https://bulma.io/documentation/components/navbar/#navbar-helper-classes
Publicación traducida automáticamente
Artículo escrito por tarunsinghwap7 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA