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.
delete es un elemento que se puede utilizar en diferentes contextos. Este es un enlace o un botón que se usa para abrir una página, un cuadro, un modelo en la página. Parte del código JavaScript se activa cuando alguien hace clic en el botón Eliminar y ese código JavaScript hace que se elimine ese modelo (Bulma es un marco CSS puro, solo es responsable de la parte de diseño).
Ejemplo 1: este ejemplo crea diferentes tamaños para eliminar una opción de elemento.
html
<!DOCTYPE html>
<html>
<head>
<title>Bulma Delete</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: 10px;
}
div.column {
text-align: center;
}
.custom {
margin-bottom: 10px;
}
</style>
</head>
<body>
<div class='container'>
<div>
<h1 class='title has-text-centered'>
Delete Elements
</h1>
</div>
<div class='columns is-mobile is-centered'>
<div class='column is-5'>
<div class='custom'>
<strong>Small : </strong>
<a class="delete is-small"></a>
</div>
<div class='custom'>
<strong>Default : </strong>
<a class="delete"></a>
</div>
<div class='custom'>
<strong>Medium : </strong>
<a class="delete is-medium"></a>
</div>
<div class='custom'>
<strong>Large : </strong>
<a class="delete is-large"></a>
</div>
</div>
</div>
</div>
</body>
</html>
Producción:
Ejemplo 2: este ejemplo crea un elemento de eliminación con color de fondo.
html
<!DOCTYPE html>
<html>
<head>
<title>Bulma Delete</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: 10px;
}
div.column {
text-align: center;
}
.custom {
margin-bottom: 10px;
}
</style>
</head>
<body>
<div class='container'>
<div>
<h1 class='title has-text-centered'>
Delete Elements
</h1>
</div>
<div class='columns is-mobile is-centered'>
<div class='column is-5'>
<div class='custom'>
<strong>Small : </strong>
<a class="delete is-small
has-background-danger"></a>
</div>
<div class='custom'>
<strong>Default : </strong>
<a class="delete
has-background-danger"></a>
</div>
<div class='custom'>
<strong>Medium : </strong>
<a class="delete is-medium
has-background-danger"></a>
</div>
<div class='custom'>
<strong>Large : </strong>
<a class="delete is-large
has-background-danger"></a>
</div>
</div>
</div>
</div>
</body>
</html>
Producción:
Ejemplo 3:
html
<html>
<head>
<title>Bulma Delete</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 {
margin-top: 10px;
margin-bottom: 20px;
}
div.columns {
margin-top: 10px;
}
div.column {
text-align: center;
}
.custom {
margin-bottom: 10px;
}
p {
font-size: 20px;
font-family: calibri;
text-align: left;
}
p button.delete {
float: right;
margin-top: 5px;
}
span {
font-size: 25px;
font-family: calibri;
}
#challenge {
font-size: 25px;
font-family: calibri;
}
</style>
</head>
<body>
<div class='container'>
<div class='columns
is-mobile is-centered'>
<!-- Start of DO -->
<div class='column is-5'>
<div>
<h1 class='title has-text-centered'
style='color:green'>TODO</h1>
</div>
<div class='notification is-success'>
<button class="delete"></button>
<div class='list'>
<div class='list-item'>
<p>
Explore yourself in a
particular language.
<button class="delete
has-background-success">
</button>
</p>
</div>
<div class='list-item'>
<p>
Refer API documentation
for new things.
<button class="delete
has-background-success">
</button>
</p>
</div>
<div class='list-item'>
<p>
Dont follow DRY principle.
<button class="delete
has-background-success">
</button>
</p>
</div>
<div class='list-item'>
<p>
write comments while coding.
<button class="delete
has-background-success">
</button>
</p>
</div>
<div class='list-item'>
<p>
Keep your code clean
as possible.
<button class="delete
has-background-success">
</button>
</p>
</div>
<div class='list-item'>
<p>
Use inline css styling.
<button class="delete
has-background-success">
</button>
</p>
</div>
<div class='list-item'>
<p>
Create your own projects.
<button class="delete
has-background-success">
</button>
</p>
</div>
</div>
</div>
</div>
<!-- Start of DONT -->
<div class='column is-5 '>
<div>
<h1 class='title has-text-centered'
style='color:red'>TODONT</h1>
</div>
<div class='notification is-danger'>
<button class="delete"></button>
<div class='list'>
<div class='list-item'>
<p>
Use Nesting loops as possible.
<button class="delete
has-background-danger">
</button>
</p>
</div>
<div class='list-item'>
<p>
Use Promises in place
of callbacks.
<button class="delete
has-background-danger">
</button>
</p>
</div>
<div class='list-item'>
<p>
Learn to code in isolation
<button class="delete
has-background-danger">
</button>
</p>
</div>
<div class='list-item'>
<p>
Use online Platforms to
practice.
<button class="delete
has-background-danger">
</button>
</p>
</div>
<div class='list-item'>
<p>
Don't follow KISS
principle of coding.
<button class="delete
has-background-danger">
</button>
</p>
</div>
<div class='list-item'>
<p>
works on others project.
<button class="delete
has-background-danger">
</button>
</p>
</div>
<div class='list-item'>
<p>
Always go for
premature-optimization.
<button class="delete
has-background-danger">
</button>
</p>
</div>
</div>
</div>
</div>
</div>
<!-- challenge -->
<div class='has-text-centered'>
<strong id='challenge'>Challenge: </strong>
<span>
Cross out the instructions
exist in wrong column.
</span>
</div>
</div>
</body>
</html>
Producción:
Nota: Aquí, en todos los ejemplos anteriores, usamos algunas clases adicionales de Bulma como contenedor, columna, título, lista, 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