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 archivo se utiliza para cargar una entrada de archivo personalizada. El componente ‘archivo’ se compone de varios subelementos que tenemos que agregar exclusivamente para diseñar bien nuestro contenido. Estos elementos se enumeran a continuación.
-
- etiqueta de archivo : es la parte real interactiva y en la que se puede hacer clic del elemento del archivo.
- entrada de archivo : es la entrada de archivo nativa, oculta para fines de estilo.
- file-cta: es la llamada a la acción de carga.
- file-icon- Es un icono de carga opcional
- etiqueta de archivo : el texto «Elegir un archivo…»
- file-name: un contenedor para el nombre de archivo elegido.
Ejemplo 1: Este ejemplo muestra la entrada simple del archivo Bulma.
<!DOCTYPE html>
<html>
<head>
<title>Bulma File</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: 100px;
}
</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="file">
<label class="file-label">
<input class="file-input"
type="file"
name="image">
<span class="file-cta">
<span class="file-icon">
<i class="fas fa-upload"></i>
</span>
<span class="file-label">
Choose a file…
</span>
</span>
</label>
</div>
</div>
</div>
</div>
</body>
</html>
Producción:
Entrada de archivo simple
Ejemplo 2: este ejemplo muestra la entrada de un archivo con el nombre de archivo seleccionado envuelto en un contenedor de caja.
<!DOCTYPE html>
<html>
<head>
<title>Bulma File</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: 100px;
}
</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="file has-name">
<label class="file-label">
<input class="file-input"
type="file" name="image">
<span class="file-cta">
<span class="file-icon">
<i class="fas fa-upload"></i>
</span>
<span class="file-label">
Choose a file…
</span>
</span>
<span class="file-name">
Nature-at-its-best.png
</span>
</label>
</div>
</div>
</div>
</div>
</body>
</html>
Producción:
Entrada de archivo con el nombre de archivo seleccionado
Ejemplo 3: este ejemplo muestra la entrada del archivo y el nombre del archivo seleccionado con una alineación diferente.
<!DOCTYPE html>
<html>
<head>
<title>Bulma File</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: 100px;
}
div.file{
margin-bottom: 15px;
}
.file.is-right {
justify-content:flex-start;
}
</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="file has-name">
<label class="file-label">
<input class="file-input"
type="file" name="image">
<span class="file-cta">
<span class="file-icon">
<i class="fas fa-upload"></i>
</span>
<span class="file-label">
Choose a file…
</span>
</span>
<span class="file-name">
Nature-at-its-best.png
</span>
</label>
</div>
<div class="file has-name is-right">
<label class="file-label">
<input class="file-input"
type="file"
name="image">
<span class="file-cta">
<span class="file-icon">
<i class="fas fa-upload"></i>
</span>
<span class="file-label">
Choose a file…
</span>
</span>
<span class="file-name">
Nature-at-its-best.png
</span>
</label>
</div>
</div>
</div>
</div>
</body>
</html>
Producción:
Entrada de archivo de alineación diferente
Ejemplo 4: Este ejemplo muestra diferentes entradas de archivos de color.
<!DOCTYPE html>
<html>
<head>
<title>Bulma File</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: 100px;
}
div.file{
margin-bottom: 15px;
}
.file.is-right {
justify-content:flex-start;
}
</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="file has-name is-primary">
<label class="file-label">
<input class="file-input"
type="file" name="image">
<span class="file-cta">
<span class="file-icon">
<i class="fas fa-upload"></i>
</span>
<span class="file-label">
Choose a file…
</span>
</span>
<span class="file-name">
Nature-at-its-best.png
</span>
</label>
</div>
<div class="file has-name is-link">
<label class="file-label">
<input class="file-input"
type="file"
name="image">
<span class="file-cta">
<span class="file-icon">
<i class="fas fa-upload"></i>
</span>
<span class="file-label">
Choose a file…
</span>
</span>
<span class="file-name">
Nature-at-its-best.png
</span>
</label>
</div>
<div class="file has-name is-info">
<label class="file-label">
<input class="file-input"
type="file"
name="image">
<span class="file-cta">
<span class="file-icon">
<i class="fas fa-upload"></i>
</span>
<span class="file-label">
Choose a file…
</span>
</span>
<span class="file-name">
Nature-at-its-best.png
</span>
</label>
</div>
<div class="file has-name is-success">
<label class="file-label">
<input class="file-input"
type="file"
name="image">
<span class="file-cta">
<span class="file-icon">
<i class="fas fa-upload"></i>
</span>
<span class="file-label">
Choose a file…
</span>
</span>
<span class="file-name">
Nature-at-its-best.png
</span>
</label>
</div>
<div class="file has-name is-warning">
<label class="file-label">
<input class="file-input"
type="file"
name="image">
<span class="file-cta">
<span class="file-icon">
<i class="fas fa-upload"></i>
</span>
<span class="file-label">
Choose a file…
</span>
</span>
<span class="file-name">
Nature-at-its-best.png
</span>
</label>
</div>
<div class="file has-name is-danger">
<label class="file-label">
<input class="file-input"
type="file"
name="image">
<span class="file-cta">
<span class="file-icon">
<i class="fas fa-upload"></i>
</span>
<span class="file-label">
Choose a file…
</span>
</span>
<span class="file-name">
Nature-at-its-best.png
</span>
</label>
</div>
</div>
</div>
</div>
</body>
</html>
Producción:
Entradas de archivos de diferentes colores
Ejemplo 5: Este ejemplo muestra la entrada de archivos de diferentes tamaños.
<!DOCTYPE html>
<html>
<head>
<title>Bulma File</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: 100px;
}
div.file{
margin-bottom: 15px;
}
.file.is-right {
justify-content:flex-start;
}
</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-6'>
<div class="file has-name is-small">
<label class="file-label">
<input class="file-input"
type="file"
name="image">
<span class="file-cta">
<span class="file-icon">
<i class="fas fa-upload"></i>
</span>
<span class="file-label">
Small file...
</span>
</span>
<span class="file-name">
Nature-at-its-best.png
</span>
</label>
</div>
<div class="file has-name">
<label class="file-label">
<input class="file-input"
type="file"
name="image">
<span class="file-cta">
<span class="file-icon">
<i class="fas fa-upload"></i>
</span>
<span class="file-label">
Normal file...
</span>
</span>
<span class="file-name">
Nature-at-its-best.png
</span>
</label>
</div>
<div class="file has-name is-medium">
<label class="file-label">
<input class="file-input"
type="file"
name="image">
<span class="file-cta">
<span class="file-icon">
<i class="fas fa-upload"></i>
</span>
<span class="file-label">
Medium file…
</span>
</span>
<span class="file-name">
Nature-at-its-best.png
</span>
</label>
</div>
<div class="file has-name is-large">
<label class="file-label">
<input class="file-input"
type="file"
name="image">
<span class="file-cta">
<span class="file-icon">
<i class="fas fa-upload"></i>
</span>
<span class="file-label">
Large file…
</span>
</span>
<span class="file-name">
Nature-at-its-best.png
</span>
</label>
</div>
</div>
</div>
</div>
</body>
</html>
Producción:
Entrada de archivo de diferentes tamaños
Ejemplo 6: este ejemplo muestra la entrada de bloque en caja
<!DOCTYPE html>
<html>
<head>
<title>Bulma File</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: 100px;
}
div.file{
margin-bottom: 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'>
<div class='columns is-mobile is-centered'>
<div class='column is-3'>
<div class="file has-name is-boxed is-primary">
<label class="file-label">
<input class="file-input"
type="file" name="image">
<span class="file-cta">
<span class="file-icon">
<i class="fas fa-upload"></i>
</span>
<span class="file-label">
Choose file...
</span>
</span>
<span class="file-name">
Nature-at-its-best.png
</span>
</label>
</div>
<div class="file has-name is-boxed is-link">
<label class="file-label">
<input class="file-input"
type="file" name="image">
<span class="file-cta">
<span class="file-icon">
<i class="fas fa-upload"></i>
</span>
<span class="file-label">
Choose file...
</span>
</span>
<span class="file-name">
Nature-at-its-best.png
</span>
</label>
</div>
<div class="file has-name is-boxed is-info">
<label class="file-label">
<input class="file-input"
type="file" name="image">
<span class="file-cta">
<span class="file-icon">
<i class="fas fa-upload"></i>
</span>
<span class="file-label">
Choose file...
</span>
</span>
<span class="file-name">
Nature-at-its-best.png
</span>
</label>
</div>
</div>
<div class='column is-3'>
<div class="file has-name is-boxed is-success">
<label class="file-label">
<input class="file-input"
type="file" name="image">
<span class="file-cta">
<span class="file-icon">
<i class="fas fa-upload"></i>
</span>
<span class="file-label">
Choose file...
</span>
</span>
<span class="file-name">
Nature-at-its-best.png
</span>
</label>
</div>
<div class="file has-name is-boxed is-warning">
<label class="file-label">
<input class="file-input"
type="file" name="image">
<span class="file-cta">
<span class="file-icon">
<i class="fas fa-upload"></i>
</span>
<span class="file-label">
Choose file...
</span>
</span>
<span class="file-name">
Nature-at-its-best.png
</span>
</label>
</div>
<div class="file has-name is-boxed is-danger">
<label class="file-label">
<input class="file-input"
type="file" name="image">
<span class="file-cta">
<span class="file-icon">
<i class="fas fa-upload"></i>
</span>
<span class="file-label">
Choose file...
</span>
</span>
<span class="file-name">
Nature-at-its-best.png
</span>
</label>
</div>
</div>
</div>
</div>
</body>
</html>
Producción:
entrada de bloque en caja
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