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.
La etiqueta Bulma es un pequeño elemento muy útil para adjuntar información a un bloque u otro componente.
Ejemplo 1: elementos de etiqueta simple
<html>
<head>
<title>Bulma Tag</title>
<link rel='stylesheet'
href=
'https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.css'>
<!-- custom css -->
<style>
div.columns{
margin-top: 50px;
}
h1{
color:green !important;
margin-bottom: 20px;
}
span{
margin-right:5px;
}
</style>
</head>
<body>
<div class='container has-text-centered'>
<div class='columns is-mobile is-centered'>
<div class='column is-8'>
<div>
<h1 class='title'>Tag Elements</h1>
<hr>
</div>
<div>
<span class="tag">
Tag1
</span>
<span class="tag">
Tag2
</span>
<span class="tag">
Tag3
</span>
<span class="tag">
Tag4
</span>
<span class="tag">
Tag5
</span>
<span class="tag">
Tag6
</span>
<span class="tag">
Tag7
</span>
<span class="tag">
Tag8
</span>
<span class="tag">
Tag9
</span>
<span class="tag">
Tag10
</span>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Producción:
Ejemplo 2: Elementos de etiquetas de colores
<html>
<head>
<title>Bulma Tag</title>
<link rel='stylesheet' href=
'https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.css'>
<!-- custom css -->
<style>
div.columns{
margin-top: 50px;
}
h1{
color:green !important;
margin-bottom: 20px;
}
span{
margin-right:5px;
}
</style>
</head>
<body>
<div class='container has-text-centered'>
<div class='columns is-mobile is-centered'>
<div class='column is-8'>
<div>
<h1 class='title'>Coloured Tag Elements</h1>
<hr>
</div>
<div>
<span class="tag is-primary">
Primary
</span>
<span class="tag is-info">
Info
</span>
<span class="tag is-link">
Link
</span>
<span class="tag is-success">
Success
</span>
<span class="tag is-black">
Black
</span>
<span class="tag is-dark">
Dark
</span>
<span class="tag is-light">
Light
</span>
<span class="tag is-white">
White
</span>
<span class="tag is-warning">
Warning
</span>
<span class="tag is-danger">
Danger
</span>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Producción:
Ejemplo 3: Elementos de etiqueta de diferentes tamaños
<html>
<head>
<title>Bulma Tag</title>
<link rel='stylesheet' href=
'https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.css'>
<!-- custom css -->
<style>
div.columns{
margin-top: 50px;
}
h1{
color:green !important;
margin-bottom: 20px;
}
span{
margin-right:5px;
}
</style>
</head>
<body>
<div class='container has-text-centered'>
<div class='columns is-mobile is-centered'>
<div class='column is-8'>
<div>
<h1 class='title'>
Different sizes Tag Elements
</h1>
<hr>
</div>
<div>
<span class="tag is-primary is-normal">
Normal
</span>
<span class="tag is-info is-medium">
Medium
</span>
<span class="tag is-link is-large">
Large
</span>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Producción:
Ejemplo 4: elementos de etiqueta redondeados
<html>
<head>
<title>Bulma Tag</title>
<link rel='stylesheet' href=
'https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.css'>
<!-- custom css -->
<style>
div.columns{
margin-top: 50px;
}
h1{
color:green !important;
margin-bottom: 20px;
}
span{
margin-right:5px;
}
</style>
</head>
<body>
<div class='container has-text-centered'>
<div class='columns is-mobile is-centered'>
<div class='column is-8'>
<div>
<h1 class='title'>Rounded Tag Elements</h1>
<hr>
</div>
<div>
<span class="tag is-primary is-rounded">
Primary
</span>
<span class="tag is-info is-rounded">
Info
</span>
<span class="tag is-link is-rounded">
Link
</span>
<span class="tag is-success is-rounded">
Success
</span>
<span class="tag is-black is-rounded">
Black
</span>
<span class="tag is-warning is-rounded">
Warning
</span>
<span class="tag is-danger is-rounded">
Danger
</span>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Producción:
Ejemplo 5: elemento de etiqueta de texto con elemento de etiqueta de eliminación
<html>
<head>
<title>Bulma Tag</title>
<link rel='stylesheet' href=
'https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.css'>
<!-- custom css -->
<style>
div.columns{
margin-top: 50px;
}
h1{
color:green !important;
margin-bottom: 20px;
}
div.tags{
display:flex;
float:left;
margin-right:10px;
}
</style>
</head>
<body>
<div class='container has-text-centered'>
<div class='columns is-mobile is-centered'>
<div class='column is-8'>
<div>
<h1 class='title'>
Text Tag Element with Delete Tag Element
</h1>
<hr>
</div>
<div>
<div class="tags has-addons">
<span class="tag is-link">Javascript</span>
<a class="tag is-delete"></a>
</div>
<div class="tags has-addons">
<span class="tag is-link">Node.Js</span>
<a class="tag is-delete"></a>
</div>
<div class="tags has-addons">
<span class="tag is-link">Angular</span>
<a class="tag is-delete"></a>
</div>
<div class="tags has-addons">
<span class="tag is-link">React</span>
<a class="tag is-delete"></a>
</div>
<div class="tags has-addons">
<span class="tag is-link">Vue</span>
<a class="tag is-delete"></a>
</div>
<div class="tags has-addons">
<span class="tag is-link">Bulma Css</span>
<a class="tag is-delete"></a>
</div>
<div class="tags has-addons">
<span class="tag is-link">Mongo DB</span>
<a class="tag is-delete"></a>
</div>
<div class="tags has-addons">
<span class="tag is-link">Python</span>
<a class="tag is-delete"></a>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Ejemplo 6: las etiquetas se unen
<html>
<head>
<title>Bulma Tag</title>
<link rel='stylesheet' href=
'https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.css'>
<!-- custom css -->
<style>
div.columns{
margin-top: 50px;
}
h1{
color:green !important;
margin-bottom: 20px;
}
div.tags{
display:flex;
float:left;
margin-right:10px;
}
</style>
</head>
<body>
<div class='container has-text-centered'>
<div class='columns is-mobile is-centered'>
<div class='column is-8'>
<div>
<h1 class='title'>Tags attach together</h1>
<hr>
</div>
<div class="control">
<div class="tags has-addons">
<span class="tag is-success">Yes</span>
<span class="tag is-danger">No</span>
</div>
<div class="tags has-addons">
<span class="tag is-info">Show</span>
<span class="tag is-warning">Hide</span>
</div>
<div class="tags has-addons">
<span class="tag is-success">Node.Js</span>
<span class="tag is-danger">NPM</span>
</div>
<div class="tags has-addons">
<span class="tag is-primary">CSS</span>
<span class="tag is-info">Bulma</span>
</div>
<div class="tags has-addons">
<span class="tag is-warning">Javascript</span>
<span class="tag is-danger">Angular</span>
</div>
<div class="tags has-addons">
<span class="tag is-warning">Javascript</span>
<span class="tag is-primary">React</span>
</div>
</div>
</div>
</div>
</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