Bulma es un marco CSS de código abierto que se utiliza para crear sitios web hermosos y receptivos para dispositivos con una variedad de tamaños de pantalla. En este artículo, veremos las clases de estilo de Bulma Tabs que se utilizan para establecer el estilo de las pestañas. Las pestañas de Bulma vienen en cuatro estilos diferentes: en caja, de palanca, de palanca redondeada y de ancho completo. El estilo de pestaña se puede configurar usando las clases CSS proporcionadas por Bulma.
Clases de estilo de pestaña de Bulma:
- is-boxed: esta clase se usa para establecer el estilo de las pestañas en boxed.
- is-toggle: esta clase se usa para configurar el estilo de las pestañas para alternar.
- is-toggle-rounded with is-toggle: estas clases se utilizan para configurar el estilo de las pestañas para alternar con el primer y último elemento redondeado.
- is-fullwidth: esta clase se usa para establecer el estilo de las pestañas en ancho completo. Las pestañas tomarán todo el ancho disponible cuando se aplique esta clase.
Sintaxis:
<div class="tabs Tab-Style-Classes"> ... </div>
El siguiente ejemplo ilustra los estilos de pestañas de Bulma:
Ejemplo: El siguiente ejemplo muestra todos los diferentes estilos de pestañas en Bulma.
HTML
<!DOCTYPE html>
<html>
<head>
<link rel='stylesheet'
href=
'https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css'>
<link rel="stylesheet"
href=
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" />
<style>
.container>p {
margin-top: 30px;
}
.container>.tabs {
margin-top: 30px;
}
</style>
</head>
<body class="has-text-centered">
<h1 class="is-size-2 has-text-success">
GeeksforGeeks
</h1>
<b class="is-size-4">Bulma Tab Styles</b>
<div class="container">
<p><b>Normal Tabs:</b></p>
<div class="tabs is-centered">
<ul>
<li class="is-active">
<a>
<span class="icon is-small">
<i class="fas fa-home"></i>
</span>
<span>Home</span>
</a>
</li>
<li>
<a>
<span class="icon is-small">
<i class="fas fa-film"></i>
</span>
<span>Videos</span>
</a>
</li>
<li>
<a>
<span class="icon is-small">
<i class="fas fa-camera"></i>
</span>
<span>Pictures</span>
</a>
</li>
</ul>
</div>
<p><b>Boxed Tabs:</b></p>
<div class="tabs is-centered is-boxed">
<ul>
<li class="is-active">
<a>
<span class="icon is-small">
<i class="fas fa-home"></i>
</span>
<span>Home</span>
</a>
</li>
<li>
<a>
<span class="icon is-small">
<i class="fas fa-film"></i>
</span>
<span>Videos</span>
</a>
</li>
<li>
<a>
<span class="icon is-small">
<i class="fas fa-camera"></i>
</span>
<span>Pictures</span>
</a>
</li>
</ul>
</div>
<p><b>Toggle Tabs:</b></p>
<div class="tabs is-centered is-toggle">
<ul>
<li class="is-active">
<a>
<span class="icon is-small">
<i class="fas fa-home"></i>
</span>
<span>Home</span>
</a>
</li>
<li>
<a>
<span class="icon is-small">
<i class="fas fa-film"></i>
</span>
<span>Videos</span>
</a>
</li>
<li>
<a>
<span class="icon is-small">
<i class="fas fa-camera"></i>
</span>
<span>Pictures</span>
</a>
</li>
</ul>
</div>
<p><b>Rounded Toggle Tabs:</b></p>
<div class="tabs is-centered is-toggle is-toggle-rounded">
<ul>
<li class="is-active">
<a>
<span class="icon is-small">
<i class="fas fa-home"></i>
</span>
<span>Home</span>
</a>
</li>
<li>
<a>
<span class="icon is-small">
<i class="fas fa-film"></i>
</span>
<span>Videos</span>
</a>
</li>
<li>
<a>
<span class="icon is-small">
<i class="fas fa-camera"></i>
</span>
<span>Pictures</span>
</a>
</li>
</ul>
</div>
<p><b>Fullwidth Tabs:</b></p>
<div class="tabs is-centered is-fullwidth">
<ul>
<li class="is-active">
<a>
<span class="icon is-small">
<i class="fas fa-home"></i>
</span>
<span>Home</span>
</a>
</li>
<li>
<a>
<span class="icon is-small">
<i class="fas fa-film"></i>
</span>
<span>Videos</span>
</a>
</li>
<li>
<a>
<span class="icon is-small">
<i class="fas fa-camera"></i>
</span>
<span>Pictures</span>
</a>
</li>
</ul>
</div>
</div>
</body>
</html>
Producción:
Estilos de pestañas de Bulma
Referencia: https://bulma.io/documentation/components/tabs/#styles