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.
El componente de lista en los proyectos se puede diseñar para que se vea atractivo con las clases de Bulma.
Ejemplo 1: Este ejemplo crea una lista de artículos usando Bulma.
html
<!DOCTYPE html>
<html>
<head>
<title>Bulma List</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: 80px;
}
h1 {
width: 100%;
margin-top: 70px;
color: green !important
}
div.columns {
margin-top: 20px;
}
</style>
</head>
<body>
<div class='container'>
<div>
<h1 class='title
has-text-centered'>Todo List</h1>
</div>
<div class='columns is-mobile is-centered'>
<div class='column is-5'>
<div class='list'>
<ul>
<div class='list-item'>
<li>
Design a custom database
to store your daily activity
</li>
</div>
<div class='list-item'>
<li>
Start your E-commerce
project to build
</li>
</div>
<div class='list-item'>
<li>
Take pictures of
beautiful flowers
</li>
</div>
<div class='list-item'>
<li>
Ride to a horse and
write your experience
</li>
</div>
<div class='list-item'>
<li>
Watch movie 'Godfather'
at night
</li>
</div>
<div class='list-item'>
<li>
Go for a trip with bike
</li>
</div>
<div class='list-item'>
<li>
Buy a sumsung headset
</li>
</div>
<div class='list-item'>
<li>
Listen music for one hour
</li>
</div>
<div class='list-item'>
<li>
Go for a Night
out on bicycle
</li>
</div>
<div class='list-item'>
<li>
Go for a morning walk
</li>
</div>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
Producción:
Ejemplo 2: Este ejemplo usa Bulma para mostrar los elementos activos actuales.
html
<html>
<head>
<title>Bulma List</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: 80px;
}
h1 {
width: 100%;
margin-top: 70px;
color: green !important
}
div.columns {
margin-top: 20px;
}
</style>
</head>
<body>
<div class='container'>
<div>
<h1 class='title has-text-centered'>
Todo List
</h1>
</div>
<div class='columns is-mobile is-centered'>
<div class='column is-5'>
<div class='list'>
<ul>
<div class='list-item'>
<li>
Design a custom
database to store
your daily activity
</li>
</div>
<div class='list-item'>
<li>
Start your E-commerce
project to build
</li>
</div>
<div class='list-item is-active'>
<li>
Take pictures of
beautiful flowers
</li>
</div>
<div class='list-item'>
<li>
Ride to a horse and
write your experience
</li>
</div>
<div class='list-item'>
<li>
Watch movie 'Godfather'
at night
</li>
</div>
<div class='list-item'>
<li>
Go for a trip with bike
</li>
</div>
<div class='list-item'>
<li>
Buy a sumsung headset
</li>
</div>
<div class='list-item'>
<li>
Listen music
for one hour
</li>
</div>
<div class='list-item'>
<li>
Go for a Night
out on bicycle
</li>
</div>
<div class='list-item'>
<li>
Go for a morning walk
</li>
</div>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
Producción:
Ejemplo 3: Este ejemplo crea una lista coloreada de artículos usando Bulma.
html
<html>
<head>
<title>Bulma List</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: 80px;
}
h1 {
width: 100%;
margin-top: 70px;
color: green !important
}
div.columns {
margin-top: 20px;
}
.list-item {
color: black !important;
}
</style>
</head>
<body>
<div class='container'>
<div>
<h1 class='title has-text-centered'>
Todo List
</h1>
</div>
<div class='columns is-mobile is-centered'>
<div class='column is-5'>
<div class='list has-background-info'>
<ul>
<div class='list-item'>
<li>
Design a custom
database to store
your daily activity
</li>
</div>
<div class='list-item'>
<li>
Start your E-commerce
project to build
</li>
</div>
<div class='list-item'>
<li>
Take pictures of
beautiful flowers
</li>
</div>
<div class='list-item'>
<li>
Ride to a horse and
write your experience
</li>
</div>
<div class='list-item'>
<li>
Watch movie 'Godfather'
at night
</li>
</div>
<div class='list-item'>
<li>
Go for a trip
with bike
</li>
</div>
<div class='list-item'>
<li>
Buy a sumsung headset
</li>
</div>
<div class='list-item'>
<li>
Listen music
for one hour
</li>
</div>
<div class='list-item'>
<li>
Go for a Night
out on bicycle
</li>
</div>
<div class='list-item'>
<li>
Go for a morning walk
</li>
</div>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
Producción:
Ejemplo 4: Este ejemplo crea elementos de diferentes colores.
html
<!DOCTYPE html>
<html>
<head>
<title>Bulma List</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: 80px;
}
h1 {
width: 100%;
margin-top: 70px;
color: green !important
}
div.columns {
margin-top: 20px;
}
.list-item {
color: black !important;
}
</style>
</head>
<body>
<div class='container'>
<div>
<h1 class='title has-text-centered'>
Todo List
</h1>
</div>
<div class='columns is-mobile is-centered'>
<div class='column is-5'>
<div class='list'>
<ul>
<div class='list-item
has-background-primary'>
<li>
Design a custom
database to store
your daily activity
</li>
</div>
<div class='list-item
has-background-info'>
<li>
Start your E-commerce
project to build
</li>
</div>
<div class='list-item
has-background-success'>
<li>
Take pictures of
beautiful flowers
</li>
</div>
<div class='list-item
has-background-warning'>
<li>
Ride to a horse and
write your experience
</li>
</div>
<div class='list-item
has-background-light'>
<li>
Watch movie 'Godfather'
at night
</li>
</div>
<div class='list-item
has-background-dark'>
<li>
Go for a trip with bike
</li>
</div>
<div class='list-item
has-background-danger'>
<li>
Buy a sumsung headset
</li>
</div>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
Producción:
Ejemplo 5: este ejemplo crea un Todo con un enlace de eliminación.
html
<!DOCTYPE html>
<html>
<head>
<title>Bulma List</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: 80px;
}
h1 {
width: 100%;
margin-top: 70px;
color: green !important
}
div.columns {
margin-top: 20px;
}
.list-item {
color: black !important;
}
.tag {
float: right;
}
</style>
</head>
<body>
<div class='container'>
<div>
<h1 class='title has-text-centered'>
Todo List
</h1>
</div>
<div class='columns is-mobile is-centered'>
<div class='column is-6'>
<div class='list'>
<ul>
<div class='list-item'>
<li>
Design a custom database to store
your daily activity
<a class="tag is-delete is-danger"></a>
</li>
</div>
<div class='list-item'>
<li>Start your E-commerce project to build
<a class="tag is-delete is-danger"></a>
</li>
</div>
<div class='list-item'>
<li>Take pictures of beautiful flowers
<a class="tag is-delete is-danger"></a>
</li>
</div>
<div class='list-item'>
<li>Ride to a horse and write your experience
<a class="tag is-delete is-danger"></a>
</li>
</div>
<div class='list-item'>
<li>Watch movie 'Godfather' at night
<a class="tag is-delete is-danger"></a>
</li>
</div>
<div class='list-item'>
<li>Go for a trip with bike
<a class="tag is-delete is-danger"></a>
</li>
</div>
<div class='list-item'>
<li>Buy a sumsung headset
<a class="tag is-delete is-danger"></a>
</li>
</div>
<div class='list-item'>
<li>Listen music for one hour
<a class="tag is-delete is-danger"></a>
</li>
</div>
<div class='list-item'>
<li>Go for a Night out on bicycle
<a class="tag is-delete is-danger"></a>
</li>
</div>
<div class='list-item'>
<li>Go for a morning walk
<a class="tag is-delete is-danger"></a>
</li>
</div>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
Ejemplo 6: este ejemplo crea una lista de elementos con un símbolo y elimina un enlace.
html
<!DOCTYPE html>
<html>
<head>
<title>Bulma List</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: 80px;
}
h1 {
width: 100%;
margin-top: 70px;
color: green !important
}
div.columns {
margin-top: 20px;
}
.list-item {
color: black !important;
}
.tags {
margin-bottom: 0px !important;
}
.tag {
float: left;
}
.tag.is-delete {
float: right
}
</style>
</head>
<body>
<!-- font-awesome cdn -->
<script src=
'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/js/all.min.js'>
</script>
<div class='container'>
<div>
<h1 class='title has-text-centered'>
Todo List
</h1>
</div>
<div class='columns is-mobile is-centered'>
<div class='column is-6'>
<div class='list'>
<ul>
<div class='list-item tags'>
<span class='tag is-white'>
<i class="fas fa-database"></i>
</span>
<li>
Design a custom database
to store your daily activity
<a class="tag is-delete
is-danger"></a>
</li>
</div>
<div class='list-item tags'>
<span class='tag is-white'>
<i class="fas fa-camera"></i>
</span>
<li>
Take pictures of
beautiful flowers
<a class="tag is-delete
is-danger"></a>
</li>
</div>
<div class='list-item tags'>
<span class='tag is-white'>
<i class="fas fa-horse"></i>
</span>
<li>
Ride to a horse and
write your experience
<a class="tag is-delete
is-danger"></a>
</li>
</div>
<div class='list-item tags'>
<span class='tag is-white'>
<i class="fas fa-motorcycle"></i>
</span>
<li>
Go for a trip with bike
<a class="tag is-delete
is-danger"></a>
</li>
</div>
<div class='list-item tags'>
<span class='tag is-white'>
<i class="fas fa-headphones"></i>
</span>
<li>
Buy a sumsung headset
<a class="tag is-delete
is-danger"></a>
</li>
</div>
<div class='list-item tags'>
<span class='tag is-white'>
<i class="fas fa-music"></i>
</span>
<li>
Listen music for one hour
<a class="tag is-delete
is-danger"></a>
</li>
</div>
<div class='list-item'>
<span class='tag is-white'>
<i class="fas fa-walking"></i>
</span>
<li>
Go for a morning walk
<a class="tag is-delete
is-danger"></a>
</li>
</div>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
Nota: Aquí, en todos los ejemplos anteriores, usamos algunas clases bulma adicionales como contenedor, columna, título, botón, etiquetas, etc. para diseñar bien nuestro contenido.
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