Bulma es un marco CSS gratuito y de código abierto basado en Flexbox. Es rico en componentes, compatible y bien documentado. Es de naturaleza altamente receptiva. Utiliza clases para implementar su diseño.
Las pestañas en Bulma son simples pestañas de navegación horizontales sensibles con diferentes estilos. Requieren la siguiente estructura:
- Un contenedor para las pestañas.
- El elemento HTML <ul> para contener las etiquetas.
- Una lista de elementos <li> para cada etiqueta.
- Elementos de anclaje HTML <a> para cada enlace de etiqueta.
Ejemplo 1: Este ejemplo ilustra pestañas simples de Bulma.
html
<!DOCTYPE html>
<html lang="en">
<head>
<link rel='stylesheet' href=
'https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.css'>
<title>Bulma Tabs</title>
<style>
div.container {
margin-top: 80px;
}
div h1 {
margin-bottom: 20px;
color: green !important
}
</style>
</head>
<body>
<div class='container'>
<div class="columns is-centered">
<div class="column is-10">
<div class='has-text-centered'>
<h1 class='title'>Tabs</h1>
</div>
<div class="tabs">
<ul>
<li class="is-active"
><a>Home</a>
</li>
<li><a>Articles</a></li>
<li><a>Lectures</a></li>
<li><a>Documentation</a></li>
<li><a>Contact Us</a></li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
Producción:
Ejemplo 2: Este ejemplo ilustra pestañas con diferente alineación.
html
<!DOCTYPE html>
<html lang="en">
<head>
<link rel='stylesheet' href=
'https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.css'>
<title>Bulma Tabs</title>
<style>
div.container {
margin-top: 80px;
}
div h1 {
margin-bottom: 20px;
color: green !important
}
</style>
</head>
<body>
<div class='container'>
<div class='has-text-centered'>
<h1 class='title'>
Tabs
</h1>
</div>
<div class="tabs">
<ul>
<li class="is-active">
<a>Home</a>
</li>
<li><a>Articles</a></li>
<li><a>Lectures</a></li>
<li><a>Documentation</a></li>
<li><a>Contact Us</a></li>
</ul>
</div>
<!-- Tabs aligned to the center -->
<div class="tabs is-centered">
<ul>
<li class="is-active">
<a>Home</a>
</li>
<li><a>Articles</a></li>
<li><a>Lectures</a></li>
<li><a>Documentation</a></li>
<li><a>Contact Us</a></li>
</ul>
</div>
<!-- Tabs aligned to the right -->
<div class="tabs is-right">
<ul>
<li class="is-active">
<a>Home</a>
</li>
<li><a>Articles</a></li>
<li><a>Lectures</a></li>
<li><a>Documentation</a></li>
<li><a>Contact Us</a></li>
</ul>
</div>
</div>
</body>
</html>
Producción:
Ejemplo 2: Este ejemplo ilustra pestañas con diferentes tamaños.
html
<!DOCTYPE html>
<html lang="en">
<head>
<link rel='stylesheet' href=
'https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.css'>
<title>Bulma Tabs</title>
<style>
div.container {
margin-top: 80px;
}
div h1 {
margin-bottom: 20px;
color: green !important
}
</style>
</head>
<body>
<div class='container'>
<div class='has-text-centered'>
<h1 class='title'>
Tabs
</h1>
</div>
<!-- Small sized tabs -->
<div class="tabs is-small">
<ul>
<li class="is-active">
<a>Home</a>
</li>
<li><a>Articles</a></li>
<li><a>Lectures</a></li>
<li><a>Documentation</a></li>
<li><a>Contact Us</a></li>
</ul>
</div>
<!-- Medium sized tabs -->
<div class="tabs is-medium">
<ul>
<li class="is-active">
<a>Home</a>
</li>
<li><a>Articles</a></li>
<li><a>Lectures</a></li>
<li><a>Documentation</a></li>
<li><a>Contact Us</a></li>
</ul>
</div>
<!-- Large sized tabs -->
<div class="tabs is-large">
<ul>
<li class="is-active">
<a>Home</a>
</li>
<li><a>Articles</a></li>
<li><a>Lectures</a></li>
<li><a>Documentation</a></li>
<li><a>Contact Us</a></li>
</ul>
</div>
</div>
</body>
</html>
Producción:
Ejemplo 4: Este ejemplo ilustra las pestañas con el uso de íconos de fuente impresionante.
html
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Bulma CSS CDN -->
<link rel='stylesheet' href=
'https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.css'>
<!-- FontAwesome CDN -->
<script src=
'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/js/all.min.js'>
</script>
<title>Bulma Tabs</title>
<style>
div.container {
margin-top: 80px;
}
div h1 {
margin-bottom: 20px;
color: green !important
}
</style>
</head>
<body>
<div class='container'>
<div class='has-text-centered'>
<h1 class='title'>Tabs</h1>
</div>
<div class="tabs is-centered">
<ul>
<li class="is-active">
<a>
<!-- Using the home icon -->
<span class="icon is-small">
<i class="fas fa-home"
aria-hidden="true">
</i>
</span>
<span>Home</span>
</a>
</li>
<li>
<a>
<!-- Using the newspaper icon -->
<span class="icon is-small">
<i class="fas fa-newspaper"
aria-hidden="true">
</i>
</span>
<span>Articles</span>
</a>
</li>
<li>
<a>
<!-- Using the music icon -->
<span class="icon is-small">
<i class="fas fa-music"
aria-hidden="true">
</i>
</span>
<span>Music</span>
</a>
</li>
<li>
<a>
<!-- Using the film icon -->
<span class="icon is-small">
<i class="fas fa-film"
aria-hidden="true">
</i>
</span>
<span>Videos</span>
</a>
</li>
<li>
<a>
<!-- Using the file icon -->
<span class="icon is-small">
<i class="far fa-file-alt"
aria-hidden="true">
</i>
</span>
<span>Documents</span>
</a>
</li>
</ul>
</div>
</div>
</body>
</html>
Producción:
Ejemplo 5: Este ejemplo ilustra las pestañas de estilo en caja (la pestaña activa estará en caja).
html
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Bulma CSS CDN -->
<link rel='stylesheet' href=
'https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.css'>
<!-- FontAwesome CDN -->
<script src=
'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/js/all.min.js'>
</script>
<title>Bulma Tabs</title>
<style>
div.container {
margin-top: 80px;
}
div h1 {
margin-bottom: 20px;
color: green !important
}
</style>
</head>
<body>
<div class='container'>
<div class='has-text-centered'>
<h1 class='title'>Tabs</h1>
</div>
<div class="tabs is-boxed">
<ul>
<li class="is-active">
<a>
<span class="icon is-small">
<i class="fas fa-home"
aria-hidden="true">
</i>
</span>
<span>Home</span>
</a>
</li>
<li>
<a>
<span class="icon is-small">
<i class="fas fa-newspaper"
aria-hidden="true">
</i>
</span>
<span>Articles</span>
</a>
</li>
<li>
<a>
<span class="icon is-small">
<i class="fas fa-music"
aria-hidden="true">
</i>
</span>
<span>Music</span>
</a>
</li>
<li>
<a>
<span class="icon is-small">
<i class="fas fa-film"
aria-hidden="true">
</i>
</span>
<span>Videos</span>
</a>
</li>
<li>
<a>
<span class="icon is-small">
<i class="far fa-file-alt"
aria-hidden="true">
</i>
</span>
<span>Documents</span>
</a>
</li>
</ul>
</div>
<div class="tabs is-boxed">
<ul>
<li class="is-active">
<a>
<span class="icon is-small">
<i class="fas fa-home"
aria-hidden="true">
</i>
</span>
<span>Home</span>
</a>
</li>
<li>
<a>
<span class="icon is-small">
<i class="fas fa-newspaper"
aria-hidden="true">
</i>
</span>
<span>Articles</span>
</a>
</li>
<li>
<a>
<span class="icon is-small">
<i class="fas fa-music"
aria-hidden="true">
</i>
</span>
<span>Music</span>
</a>
</li>
<li class='is-active'>
<a>
<span class="icon is-small">
<i class="fas fa-film"
aria-hidden="true">
</i>
</span>
<span>Videos</span>
</a>
</li>
<li>
<a>
<span class="icon is-small">
<i class="far fa-file-alt"
aria-hidden="true">
</i>
</span>
<span>Documents</span>
</a>
</li>
</ul>
</div>
</div>
</body>
</html>
Producción:
Ejemplo 6: Este ejemplo ilustra pestañas mutuamente excluyentes.
html
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Bulma CSS CDN -->
<link rel='stylesheet' href=
'https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.css'>
<!-- FontAwesome CDN -->
<script src=
'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/js/all.min.js'>
</script>
<title>Bulma Tabs</title>
<style>
div.container {
margin-top: 80px;
}
div h1 {
margin-bottom: 20px;
color: green !important
}
</style>
</head>
<body>
<div class='container'>
<div class='has-text-centered'>
<h1 class='title'>Tabs</h1>
</div>
<div class="tabs is-toggle is-centered">
<ul>
<li class="is-active">
<a>
<span class="icon is-small">
<i class="fas fa-home"
aria-hidden="true">
</i>
</span>
<span>Home</span>
</a>
</li>
<li>
<a>
<span class="icon is-small">
<i class="fas fa-user-circle"
aria-hidden="true">
</i>
</span>
<span>Profile</span>
</a>
</li>
<li>
<a>
<span class="icon is-small">
<i class="fas fa-newspaper"
aria-hidden="true">
</i>
</span>
<span>Articles</span>
</a>
</li>
<li>
<a>
<span class="icon is-small">
<i class="fas fa-music"
aria-hidden="true">
</i>
</span>
<span>Music</span>
</a>
</li>
<li>
<a>
<span class="icon is-small">
<i class="fas fa-film"
aria-hidden="true">
</i>
</span>
<span>Videos</span>
</a>
</li>
<li>
<a>
<span class="icon is-small">
<i class="far fa-file-alt"
aria-hidden="true">
</i>
</span>
<span>Documents</span>
</a>
</li>
</ul>
</div>
</div>
</body>
</html>
Producción:
Ejemplo 7: Este ejemplo ilustra tabulaciones redondeadas mutuamente excluyentes.
html
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Bulma CSS CDN -->
<link rel='stylesheet' href=
'https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.css'>
<!-- FontAwesome CDN -->
<script src=
'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/js/all.min.js'>
</script>
<title>Bulma Tabs</title>
<style>
div.container {
margin-top: 80px;
}
div h1 {
margin-bottom: 20px;
color: green !important
}
</style>
</head>
<body>
<div class='container'>
<div class='has-text-centered'>
<h1 class='title'>Tabs</h1>
</div>
<div class="tabs is-toggle
is-toggle-rounded is-centered">
<ul>
<li class="is-active">
<a>
<span class="icon is-small">
<i class="fas fa-home"
aria-hidden="true">
</i>
</span>
<span>Home</span>
</a>
</li>
<li>
<a>
<span class="icon is-small">
<i class="fas fa-user-circle"
aria-hidden="true">
</i>
</span>
<span>Profile</span>
</a>
</li>
<li>
<a>
<span class="icon is-small">
<i class="fas fa-newspaper"
aria-hidden="true">
</i>
</span>
<span>Articles</span>
</a>
</li>
<li>
<a>
<span class="icon is-small">
<i class="fas fa-music"
aria-hidden="true">
</i>
</span>
<span>Music</span>
</a>
</li>
<li>
<a>
<span class="icon is-small">
<i class="fas fa-film"
aria-hidden="true">
</i>
</span>
<span>Videos</span>
</a>
</li>
<li>
<a>
<span class="icon is-small">
<i class="far fa-file-alt"
aria-hidden="true">
</i>
</span>
<span>Documents</span>
</a>
</li>
</ul>
</div>
</div>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por hunter__js y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA