Bulma es un marco CSS de código abierto rico en componentes basado en flexbox. En este artículo, veremos los diferentes tamaños del elemento Archivo que podemos usar en Bulma. El elemento Archivo viene en 4 tamaños diferentes: pequeño, normal, mediano y grande . El tamaño normal es el tamaño predeterminado del elemento de archivo.
Clases de tamaño de archivo Bulma:
- is-small: esta clase se utiliza para hacer que el elemento File sea de tamaño pequeño.
- is-normal: esta clase se utiliza para hacer que el elemento File tenga un tamaño normal.
- is-medium: esta clase se utiliza para hacer que el elemento File sea de tamaño medio.
- is-large: esta clase se utiliza para hacer que el elemento File sea de gran tamaño.
Sintaxis:
<div class="file is-small">
...
</div>
Ejemplo: El siguiente ejemplo ilustra el uso de clases de tamaño de archivo Bulma.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Bulma File Sizes</title>
<link rel='stylesheet' href=
'https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css'>
<link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" />
<style>
.file{
margin-top: 25px;
}
</style>
</head>
<body class="has-text-centered">
<h1 class="is-size-2 has-text-success">
GeeksforGeeks
</h1>
<b class="is-size-4">Bulma File Sizes</b>
<div class="container">
<!-- Small Sized File -->
<div class="file has-name is-centered
is-info is-small">
<label class="file-label">
<input class="file-input" type="file"
name="selected-image">
<span class="file-cta">
<span class="file-icon">
<i class="fas fa-upload"></i>
</span>
<span class="file-label">
Small Sized File
</span>
</span>
<span class="file-name">
No Image Selected.
</span>
</label>
</div>
<!-- Normal Sized File -->
<div class="file has-name is-centered
is-info is-normal">
<label class="file-label">
<input class="file-input" type="file"
name="selected-image">
<span class="file-cta">
<span class="file-icon">
<i class="fas fa-upload"></i>
</span>
<span class="file-label">
Normal Sized File
</span>
</span>
<span class="file-name">
No Image Selected.
</span>
</label>
</div>
<!-- Medium Sized file -->
<div class="file has-name is-centered
is-info is-medium">
<label class="file-label">
<input class="file-input" type="file"
name="selected-image">
<span class="file-cta">
<span class="file-icon">
<i class="fas fa-upload"></i>
</span>
<span class="file-label">
Medium Sized File
</span>
</span>
<span class="file-name">
No Image Selected.
</span>
</label>
</div>
<!-- Larged Sized File -->
<div class="file has-name is-centered
is-info is-large">
<label class="file-label">
<input class="file-input" type="file"
name="selected-image">
<span class="file-cta">
<span class="file-icon">
<i class="fas fa-upload"></i>
</span>
<span class="file-label">
Large Sized File
</span>
</span>
<span class="file-name">
No Image Selected.
</span>
</label>
</div>
</div>
</body>
</html>
Producción:
Tamaños de archivo de Bulma
Referencia: https://bulma.io/documentation/form/file/#sizes