Bulma tiene muchas facilidades de clases para diseñar fácilmente elementos en HTML. Incluye varias clases de margen y relleno sensibles para modificar la apariencia de los elementos. Las utilidades de espaciado no tienen símbolos de puntos de interrupción para aplicar a los puntos de interrupción.
La sintaxis siguiente se utiliza en las diversas clases para agregar espacios.
- (propiedad)(lados)-(tamaño) para xs
- (propiedad)(lados)-(punto de interrupción)-(tamaño) para sm, md, lg y xl.
Propiedad: Hay dos formas de agregar espaciado a los elementos.
- m: Esta propiedad define el margen . Margen proporciona un borde o borde.
- p: Esta propiedad define el relleno . Las propiedades de relleno se utilizan para generar espacio alrededor del contenido.
Lados de configuración: esto permite a los usuarios agregar espaciado en el contenido a un lado específico donde sea necesario.
- t : margen-superior/relleno-superior.
- b : margen-inferior/relleno-inferior.
- l : margen-izquierda/relleno-izquierda.
- r : margen derecho/relleno derecho.
- x : para padding-left y padding-right/margin-left y margin-right.
- y : para padding-top y padding-bottom/margin-top y margin-bottom.
- en blanco: margen/relleno en todos los lados del elemento.
Lista de todos los tamaños: esto permite a los usuarios agregar una cantidad específica de espacio a un nivel.
- 0 – 0 rem margen/relleno.
- 1 – margen/relleno de 0,25 rem.
- 2 – margen/relleno de 0,5 rem.
- 3 – margen/relleno de 0,75 rem.
- 4 – 1 rem de margen/relleno.
- 5 – margen/relleno de 1,5 rem.
- 6 – margen/relleno de 3 rem.
- automático: margen automático.
Punto de interrupción: los puntos de interrupción son puntos donde el contenido del sitio web puede ajustarse según el dispositivo y permitir mostrar el mejor diseño para el usuario.
Ejemplo 1:
HTML
<!DOCTYPE html>
<html>
<head>
<title>Bulma Panel</title>
<link rel='stylesheet' href=
'https://cdn.jsdelivr.net/npm/bulma@0.9.0/css/bulma.min.css'>
<style>
p {
border: 2px solid green;
}
</style>
</head>
<body>
<h1 class="is-size-2">
GeeksforGeeks
</h1>
<b>Bulma Space Class</b>
<br>
<div class="container">
<p class="mr-0 pt-3 has-text-light
has-background-success">
GeeksforGeeks
</p>
<br>
<p class="ml-5 has-text-light
has-background-success">
GeeksforGeeks
</p>
<br>
<p class="pb-5 has-text-light
has-background-success">
GeeksforGeeks
</p>
</div>
</body>
</html>
Producción:
Clase espacial Bulma
Ejemplo 2: En el siguiente código, haremos uso de las clases ml y mr.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Bulma Panel</title>
<link rel='stylesheet' href=
'https://cdn.jsdelivr.net/npm/bulma@0.9.0/css/bulma.min.css'>
<style>
p {
border: 2px solid green;
}
</style>
</head>
<body>
<center>
<h1 class="is-size-2">
GeeksforGeeks
</h1>
<b>Bulma Space Class</b>
<br>
<div class="container">
<p class="ml-1 mr-1 has-text-light
has-background-success">
GeeksforGeeks
</p>
<br>
<p class="ml-2 mr-2 has-text-light
has-background-success">
GeeksforGeeks
</p>
<br>
<p class="ml-3 mr-3 has-text-light
has-background-success">
GeeksforGeeks
</p>
<br>
<p class="ml-4 mr-4 has-text-light
has-background-success">
GeeksforGeeks
</p>
<br>
<p class="ml-5 mr-5 has-text-light
has-background-success">
GeeksforGeeks
</p>
</div>
</center>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por skyridetim y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA