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 notificación es un simple bloque de color que llama la atención del usuario sobre algo. Se puede usar como una notificación anclada en la esquina de la ventana gráfica. Admite el uso del elemento de eliminación.
Ejemplo 1: Este ejemplo usa a Bulma para crear un cuadro de notificación simple.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Bulma Notification</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: 70px;
}
h1 {
color: green !important
}
p {
font-size: 20px;
}
button {
float: right
}
</style>
</head>
<body>
<div class='container has-text-centered'>
<div class='columns is-mobile is-centered'>
<div class='column is-6'>
<div class='notification'>
<h1 class='title'>
Geek for Geeks
<button class="delete"></button>
</h1>
<p class='is-family-monospace'>
'GeeksforGeeks' is a computer science
portal. It was created with a goal in
mind to provide well written, well
thought and well explained solutions
for selected questions. The core team
of five super geeks constituting of
technology lovers and computer science
enthusiasts have been constantly working
in this direction.
</p>
</div>
</div>
</div>
</div>
</body>
</html>
Producción:
Ejemplo 2: este ejemplo crea un bloque de notificación con colores usando Bulma.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Bulma Notification</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: 70px;
}
h1 {
color: green !important
}
p {
font-size: 20px;
}
button {
float: right
}
</style>
</head>
<body>
<div class='container has-text-centered'>
<div class='columns is-mobile is-centered'>
<div class='column is-5'>
<div class='notification is-primary'>
<h1 class='title'>
Geek for Geeks
<button class="delete"></button>
</h1>
<p class='is-family-monospace'>
'GeeksforGeeks' is a computer science
portal.it was created with a goal in
mind to provide well written, well
thought and well explained solutions
for selected questions. The core team
of five super geeks constituting of
technology lovers and computer science
enthusiasts have been constantly working
in this direction.
</p>
</div>
</div>
<div class='column is-5'>
<div class='notification is-link'>
<h1 class='title'>
Geek for Geeks
<button class="delete"></button>
</h1>
<p class='is-family-monospace'>
'GeeksforGeeks' is a computer science
portal.it was created with a goal in
mind to provide well written, well
thought and well explained solutions
for selected questions. The core team
of five super geeks constituting of
technology lovers and computer science
enthusiasts have been constantly working
in this direction.
</p>
</div>
</div>
</div>
</div>
</body>
</html>
Ejemplo 3: este ejemplo crea un bloque de notificación con colores usando Bulma.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Bulma Notification</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: 70px;
}
h1 {
color: green !important
}
p {
font-size: 20px;
}
button {
float: right
}
</style>
</head>
<body>
<div class='container has-text-centered'>
<div class='columns is-mobile is-centered'>
<div class='column is-5'>
<div class='notification is-info'>
<h1 class='title'>
Geek for Geeks
<button class="delete"></button>
</h1>
<p class='is-family-monospace'>
'GeeksforGeeks' is a computer science
portal.it was created with a goal in
mind to provide well written, well
thought and well explained solutions
for selected questions. The core team
of five super-geeks constituting of
technology lovers and computer science
enthusiasts have been constantly working
in this direction.
</p>
</div>
</div>
<div class='column is-5'>
<div class='notification is-success'>
<h1 class='title'>
Geek for Geeks
<button class="delete"></button>
</h1>
<p class='is-family-monospace'>
'GeeksforGeeks' is a computer science
portal.it was created with a goal in
mind to provide well written, well
thought and well explained solutions
for selected questions. The core team
of five super geeks constituting of
technology lovers and computer science
enthusiasts have been constantly working
in this direction.
</p>
</div>
</div>
</div>
</div>
</body>
</html>
Producción:
Ejemplo 4: Este ejemplo crea un bloque de notificación con colores usando Bulma.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Bulma Notification</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: 70px;
}
h1 {
color: green !important
}
p {
font-size: 20px;
}
button {
float: right
}
</style>
</head>
<body>
<div class='container has-text-centered'>
<div class='columns is-mobile is-centered'>
<div class='column is-5'>
<div class='notification is-warning'>
<h1 class='title'>
Geek for Geeks
<button class="delete"></button>
</h1>
<p class='is-family-monospace'>
'GeeksforGeeks' is a computer science
portal.it was created with a goal in
mind to provide well written, well
thought and well explained solutions
for selected questions. The core team
of five super geeks constituting of
technology lovers and computer science
enthusiasts have been constantly working
in this direction.
</p>
</div>
</div>
<div class='column is-5'>
<div class='notification is-danger'>
<h1 class='title'>
Geek for Geeks
<button class="delete"></button>
</h1>
<p class='is-family-monospace'>
'GeeksforGeeks' is a computer science
portal.it was created with a goal in
mind to provide well written, well
thought and well explained solutions
for selected questions. The core team
of five super geeks constituting of
technology lovers and computer science
enthusiasts have been constantly working
in this direction.
</p>
</div>
</div>
</div>
</div>
</body>
</html>
Producción:
Ejemplo 5: este ejemplo crea una interfaz de mensajes de texto (usando la clase ‘notificación’).
HTML
<!DOCTYPE html>
<html>
<head>
<title>Bulma Notification</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: 10px;
}
p {
font-size: 20px;
}
div.sender {
float: left
}
div.receiver {
float: right
}
div.notification {
padding: 8px
}
.table td {
border: none;
padding: 0.4em
}
</style>
</head>
<body>
<div class='container has-text-centered'>
<div class='columns is-mobile is-centered'>
<div class='column is-6'>
<table class='table is-fullwidth'>
<tr>
<td>
<div class='sender notification is-success'>
<p>Hi, How are you?</p>
</div>
</td>
</tr>
<tr>
<td>
<div class='receiver notification is-white'>
<p>I'm good, how are you?</p>
</div>
</td>
</tr>
<tr>
<td>
<div class='sender notification is-success'>
<p>well, me too!!</p>
</div>
</td>
</tr>
<tr>
<td>
<div class='sender notification is-success'>
<p>How, your study going on?</p>
</div>
</td>
</tr>
<tr>
<td>
<div class='receiver notification is-white'>
<p>Its quite well!!</p>
</div>
</td>
</tr>
<tr>
<td>
<div class='receiver notification is-white'>
<p>
well, i guess you started
to learn javascript
</p>
</div>
</td>
</tr>
<tr>
<td>
<div class='receiver notification is-white'>
<p>is it going on?</p>
</div>
</td>
</tr>
<tr>
<td>
<div class='sender notification is-success'>
<p>Yeah!! its going on!!</p>
</div>
</td>
</tr>
<tr>
<td>
<div class='sender notification is-success'>
<p>infact i do some projects too!!</p>
</div>
</td>
</tr>
<tr>
<td>
<div class='receiver notification is-white'>
<p>wooo!! thats really cool!</p>
</div>
</td>
</tr>
</table>
</div>
</div>
</div>
</body>
</html>
Producción:
Nota: Aquí, en todos los ejemplos anteriores, usamos algunas clases adicionales de Bulma como contenedor, columna, tabla, etc. para diseñar bien el 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