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 Mensaje en Bulma proporciona marcadores de posición de tipo cuadro de color para enfatizar ciertas partes de la página. Incluye varios otros componentes que se pueden agregar para diseñar el contenido. Estos componentes se enumeran a continuación:
- encabezado del mensaje: contiene el título del mensaje y el elemento de eliminación. Es un componente opcional.
- cuerpo-mensaje: Contiene el cuerpo del mensaje.
Ejemplo 1: Este ejemplo muestra la creación de un mensaje simple usando Bulma.
html
<!DOCTYPE html>
<html>
<head>
<title>Bulma Message</title>
<!-- Include Bulma CSS -->
<link rel='stylesheet' href=
'https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.css'>
<!-- FontAwesome Library -->
<script src=
'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/js/all.min.js'>
</script>
<!-- Custom CSS -->
<style>
div.columns {
margin-top: 70px;
}
</style>
</head>
<body>
<div class='container has-text-centered'>
<div class='columns is-mobile is-centered'>
<div class='column is-4'>
<article class="message">
<div class="message-header">
<p>GeeksforGeeks</p>
<button class="delete"
aria-label="delete">
</button>
</div>
<div class="message-body">
<strong>'GeeksforGeeks'</strong> 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.
</div>
</article>
</div>
</div>
</div>
</body>
</html>
Producción:
Ejemplo 2: Este ejemplo muestra la creación de diferentes componentes de mensaje de color usando Bulma.
html
<!DOCTYPE html>
<html>
<head>
<title>Bulma Message</title>
<!-- Include Bulma CSS -->
<link rel='stylesheet' href=
'https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.css'>
<!-- FontAwesome Library -->
<script src=
'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/js/all.min.js'>
</script>
<!-- Custom CSS -->
<style>
div.columns {
margin-top: 70px;
}
</style>
</head>
<body>
<div class='container has-text-centered'>
<div class='columns is-mobile is-centered'>
<div class='column is-4'>
<article class="message is-primary">
<div class="message-header">
<p>GeeksforGeeks</p>
<button class="delete" aria-label="delete">
</button>
</div>
<div class="message-body">
<strong>'GeeksforGeeks'</strong> 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.
</div>
</article>
</div>
<div class="column is-4">
<article class="message is-info">
<div class="message-header">
<p>GeeksforGeeks</p>
<button class="delete"
aria-label="delete">
</button>
</div>
<div class="message-body">
<strong>'GeeksforGeeks'</strong> 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.
</div>
</article>
</div>
</div>
</div>
</body>
</html>
Producción:
Ejemplo 3:
html
<!DOCTYPE html>
<html>
<head>
<title>Bulma Message</title>
<!-- Include Bulma CSS -->
<link rel='stylesheet' href=
'https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.css'>
<!-- FontAwesome Library -->
<script src=
'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/js/all.min.js'>
</script>
<!-- Custom CSS -->
<style>
div.columns {
margin-top: 70px;
}
</style>
</head>
<body>
<div class='container has-text-centered'>
<div class='columns is-mobile is-centered'>
<div class='column is-4'>
<article class="message is-link">
<div class="message-header">
<p>GeeksforGeeks</p>
<button class="delete" aria-label="delete">
</button>
</div>
<div class="message-body">
<strong>'GeeksforGeeks'</strong> 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 .
</div>
</article>
</div>
<div class="column is-4">
<article class="message is-success">
<div class="message-header">
<p>GeeksforGeeks</p>
<button class="delete"
aria-label="delete">
</button>
</div>
<div class="message-body">
<strong>'GeeksforGeeks'</strong> 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 .
</div>
</article>
</div>
</div>
</div>
</body>
</html>
Producción:
Ejemplo 4:
html
<!DOCTYPE html>
<html>
<head>
<title>Bulma Message</title>
<!-- Include Bulma CSS -->
<link rel='stylesheet' href=
'https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.css'>
<!-- FontAwesome Library -->
<script src=
'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/js/all.min.js'>
</script>
<!-- Custom CSS -->
<style>
div.columns {
margin-top: 70px;
}
</style>
</head>
<body>
<div class='container has-text-centered'>
<div class='columns is-mobile is-centered'>
<div class='column is-4'>
<article class="message is-warning">
<div class="message-header">
<p>GeeksforGeeks</p>
<button class="delete" aria-label="delete">
</button>
</div>
<div class="message-body">
<strong>'GeeksforGeeks'</strong> 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 .
</div>
</article>
</div>
<div class="column is-4">
<article class="message is-danger">
<div class="message-header">
<p>GeeksforGeeks</p>
<button class="delete" aria-label="delete">
</button>
</div>
<div class="message-body">
<strong>'GeeksforGeeks'</strong> 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 .
</div>
</article>
</div>
</div>
</div>
</body>
</html>
Producción:
Ejemplo 5: Este ejemplo muestra la creación de componentes de mensajes de diferentes tamaños usando Bulma.
html
<!DOCTYPE html>
<html>
<head>
<title>Bulma Message</title>
<!-- Include Bulma CSS -->
<link rel='stylesheet' href=
'https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.css'>
<!-- FontAwesome Library -->
<script src=
'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/js/all.min.js'>
</script>
<!-- Custom CSS -->
<style>
div.columns {
margin-top: 50px;
}
</style>
</head>
<body>
<div class='container has-text-centered'>
<div class='columns is-mobile is-centered'>
<div class='column is-4'>
<article class="message is-primary">
<div class="message-header">
<p>GeeksforGeeks</p>
<button class="delete"
aria-label="delete">
</button>
</div>
<div class="message-body">
<strong>'GeeksforGeeks'</strong> 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 .
</div>
</article>
</div>
<div class="column is-4">
<article class="message is-medium is-info">
<div class="message-header">
<p>GeeksforGeeks</p>
<button class="delete"
aria-label="delete">
</button>
</div>
<div class="message-body">
<strong>'GeeksforGeeks'</strong> 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 .
</div>
</article>
</div>
<div class="column is-4">
<article class="message is-large is-success">
<div class="message-header">
<p>GeeksforGeeks</p>
<button class="delete"
aria-label="delete">
</button>
</div>
<div class="message-body">
<strong>'GeeksforGeeks'</strong> 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 .
</div>
</article>
</div>
</div>
</div>
</body>
</html>
Producción:
Ejemplo 6: Este ejemplo crea componentes de mensaje sin encabezado usando Bulma.
html
<!DOCTYPE html>
<html>
<head>
<title>Bulma Message</title>
<!-- Include Bulma CSS -->
<link rel='stylesheet' href=
'https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.css'>
<!-- FontAwesome Library -->
<script src=
'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/js/all.min.js'>
</script>
<!-- Custom CSS -->
<style>
div.columns {
margin-top: 50px;
}
</style>
</head>
<body>
<div class='container has-text-centered'>
<div class='columns is-mobile is-centered'>
<div class='column is-4'>
<article class="message is-link">
<div class="message-body">
<strong>'GeeksforGeeks'</strong> 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 .
</div>
</article>
</div>
<div class="column is-4">
<article class="message is-success">
<div class="message-body">
<strong>'GeeksforGeeks'</strong> 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 .
</div>
</article>
</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