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 elemento de caja es simplemente un contenedor con una sombra, un borde, un radio y algo de relleno. Podemos usar esto en muchos lugares en el diseño de nuestro proyecto. Da un aspecto interactivo a nuestro proyecto.
Ejemplo 1: este ejemplo crea un contenedor de caja usando Bulma.
<!DOCTYPE html>
<html>
<head>
<title>Bulma Box</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;
}
.buttons {
margin-top: 15px;
}
</style>
</head>
<body>
<div class='container has-text-centered'>
<div class='columns is-mobile is-centered'>
<div class='column is-5'>
<div class='box'>
<h1 class='title'
style='color:green'>
Geek for Geeks
</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 class='buttons'>
<button class='button
is-fullwidth'>
Know more about GfG
</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Producción:
Ejemplo 2: Este ejemplo crea un cuadro de entrada usando Bulma.
<!DOCTYPE html>
<html>
<head>
<title>Bulma Box</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;
}
.buttons {
margin-top: 12px;
}
</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 class='columns is-mobile is-centered'>
<div class='column is-5'>
<div class="box">
<div>
<h1 class='title
has-text-centered'>
Login
</h1>
</div>
<form action='#' method='post'>
<div class='field'>
<label class='label'
id='username'>Username</label>
<div class='control has-icons-left'>
<input class='input' type='text'
for='username'
placeholder='Username'>
<span class="icon is-small is-left">
<i class="fas fa-user"></i>
</span>
</div>
</div>
<div class='field'>
<label class='label' id='password'>
Password
</label>
<div class='control has-icons-left'>
<input class='input' type='password'
for='password'
placeholder='Password'>
<span class="icon is-small is-left">
<i class="fas fa-lock"></i>
</span>
</div>
<div class='buttons'>
<button class='button is-link'>
Login
</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</body>
</html>
Producción:
Ejemplo 3: Este ejemplo crea un cuadro de mensaje usando Bulma.
<html>
<head>
<title>Bulma Box</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;
}
.buttons {
margin-top: 15px;
}
</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 has-text-centered'>
<div class='columns is-mobile is-centered'>
<div class='column is-5'>
<div class="box">
<article class="media">
<div class="media-left">
<figure class="image is-64x64">
<img
src=
"https://media.geeksforgeeks.org/wp-content/uploads/20200611151025/gfg202.png">
</figure>
</div>
<div class="media-content">
<div class="content">
<p>
<strong>GeeksforGeeks</strong>
<small>@geeks</small>
<br>
Welcome to GeeksforGeeks
</br>
'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>
<nav class="level is-mobile">
<div class="level-left">
<a class="level-item">
<span class="icon is-small">
<i class="fas fa-reply"></i>
</span>
</a>
<a class="level-item">
<span class="icon is-small">
<i class="fas fa-retweet"></i>
</span>
</a>
<a class="level-item">
<span class="icon is-small">
<i class="fas fa-heart"></i>
</span>
</a>
</div>
</nav>
</div>
</article>
</div>
</div>
</div>
</div>
</body>
</html>
Producción:
Nota: Aquí, en todos los ejemplos anteriores, usamos algunas clases adicionales de Bulma como contenedor, columna, título, botón, medios, imagen, entrada, etiqueta, 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