Bulma es un marco receptivo de código abierto para CSS basado en Flexbox y es completamente gratuito. Las características principales de este marco son que es muy compatible, está bien documentado y es rico en componentes. Para propósitos de diseño, Bulma usa clases.
El elemento del panel es simplemente un contenedor para controles compactos. Podemos usar esto en muchos lugares en el diseño del proyecto. Proporciona una interfaz de usuario interactiva para el proyecto. El componente Panel incluye varios otros componentes que tenemos que agregar exclusivamente para diseñar bien nuestro contenido. Estos componentes se enumeran a continuación.
- encabezado del panel: es el primer elemento secundario del panel y responsable del estilo del encabezado del panel.
- panel-tabs: Se encarga de crear las pestañas del panel.
- panel-block: Panel-block es un tipo de contenedor que puede contener otros elementos como controles de entrada, botones, íconos, formularios, etc.
Ejemplo 1:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel='stylesheet' href=
'https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.css'>
<style>
div.container {
margin-top: 80px;
}
</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-centered">
<div class="column is-5">
<nav class="panel">
<p class="panel-heading">
<span class='title is-4'>Movies</span>
</p>
<div class="panel-block">
<p class="control has-icons-left">
<input class="input"
type="text" placeholder="Search">
<span class="icon is-left">
<i class="fas fa-search"
aria-hidden="true"></i>
</span>
</p>
</div>
<p class="panel-tabs">
<a class="is-active">All</a>
<a>Romentic</a>
<a>Comedy</a>
<a>Action</a>
<a>Drama</a>
</p>
<a class="panel-block is-active">
M.S.Dhoni The Untold story
</a>
<a class="panel-block">
Rabta
</a>
<a class="panel-block">
Shuddh Desi Romance
</a>
<a class="panel-block">
URI The Surgical Strike
</a>
<a class="panel-block">
P.K.
</a>
<a class="panel-block">
3 Idiots
</a>
<a class="panel-block">
Kai Po Che
</a>
<div class="panel-block">
<button class="button
is-link is-fullwidth">
Sort By IMDB Ratings
</button>
</div>
</nav>
</div>
</div>
</div>
</body>
</html>
Producción:
Ejemplo 2: Panel con imágenes.
<!DOCTYPE html>
<html lang="en">
<head>
<link rel='stylesheet' href=
'https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.css'>
<style>
div.container {
margin-top: 80px;
}
.image {
margin-right: 10px;
position: relative;
bottom: 4px;
}
</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-centered">
<div class="column is-5">
<nav class="panel">
<p class="panel-heading">
<span class='title is-4'>
Movies
</span>
</p>
<div class="panel-block">
<p class="control has-icons-left">
<input class="input"
type="text" placeholder="Search">
<span class="icon is-left">
<i class="fas fa-search"
aria-hidden="true"></i>
</span>
</p>
</div>
<p class="panel-tabs">
<a class="is-active">All</a>
<a>Romentic</a>
<a>Comedy</a>
<a>Action</a>
<a>Drama</a>
</p>
<a class="panel-block is-active">
<figure class='image is-24x24'>
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20200622154925/M.S._Dhoni_-_The_Untold_Story_poster.jpg" alt="">
</figure>
M.S.Dhoni The Untold story
</a>
<a class="panel-block">
<figure class='image is-24x24'>
<img src="https://media.geeksforgeeks.org/wp-content/uploads/20200622155044/Raabta_poster.jpg" alt="">
</figure>
Rabta
</a>
<a class="panel-block">
<figure class='image is-24x24'>
<img src="https://media.geeksforgeeks.org/wp-content/uploads/20200622155118/Shuddh_Desi_Romance.jpg"
alt="">
</figure>
Shuddh Desi Romance
</a>
<a class="panel-block">
<figure class='image is-24x24'>
<img src="https://media.geeksforgeeks.org/wp-content/uploads/20200622155201/URI_-_New_poster.jpg" alt="">
</figure>
URI The Surgical Strike
</a>
<a class="panel-block">
<figure class='image is-24x24'>
<img src="https://media.geeksforgeeks.org/wp-content/uploads/20200622155006/pk-poster.jpg" alt="">
</figure>
P.K.
</a>
<a class="panel-block">
<figure class='image is-24x24'>
<img src="https://media.geeksforgeeks.org/wp-content/uploads/20200622154621/220px-3_idiots_poster.jpg"
alt="">
</figure>
3 Idiots
</a>
<a class="panel-block">
<figure class='image is-24x24'>
<img src="https://media.geeksforgeeks.org/wp-content/uploads/20200622154805/Kai_Poche_film_poster.jpg"
alt="">
</figure>
Kai Po Che
</a>
<div class="panel-block">
<button class="button is-link is-fullwidth">
Sort By IMDB Ratings
</button>
</div>
</nav>
</div>
</div>
</div>
</body>
</html>
Producción:
Ejemplo 3: componentes de panel de colores.
<!DOCTYPE html>
<html lang="en">
<head>
<link rel='stylesheet' href=
'https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.css'>
<style>
div.container {
margin-top: 80px;
}
.image {
margin-right: 10px;
position: relative;
bottom: 4px;
}
</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-centered">
<div class="column is-5">
<article class="panel">
<p class="panel-heading
has-background-info">
<span class='title is-4'>Movies</span>
</p>
<div class="panel-block">
<p class="control has-icons-left">
<input class="input is-info"
type="text" placeholder="Search">
<span class="icon is-left">
<i class="fas fa-search"
aria-hidden="true"></i>
</span>
</p>
</div>
<p class="panel-tabs">
<a class="is-active">All</a>
<a>Romentic</a>
<a>Comedy</a>
<a>Action</a>
<a>Drama</a>
</p>
<a class="panel-block is-active">
<figure class='image is-24x24'>
<img
src=
"https://media.geeksforgeeks.org/wp-content/uploads/20200622154925/M.S._Dhoni_-_The_Untold_Story_poster.jpg"
alt="">
</figure>
M.S.Dhoni The Untold story
</a>
<a class="panel-block">
<figure class='image is-24x24'>
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20200622155044/Raabta_poster.jpg" alt="">
</figure>
Rabta
</a>
<a class="panel-block">
<figure class='image is-24x24'>
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20200622155118/Shuddh_Desi_Romance.jpg"
alt="">
</figure>
Shuddh Desi Romance
</a>
<a class="panel-block">
<figure class='image is-24x24'>
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20200622155201/URI_-_New_poster.jpg" alt="">
</figure>
URI The Surgical Strike
</a>
<a class="panel-block">
<figure class='image is-24x24'>
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20200622155006/pk-poster.jpg" alt="">
</figure>
P.K.
</a>
<a class="panel-block">
<figure class='image is-24x24'>
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20200622154621/220px-3_idiots_poster.jpg"
alt="">
</figure>
3 Idiots
</a>
<a class="panel-block">
<figure class='image is-24x24'>
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20200622154805/Kai_Poche_film_poster.jpg"
alt="">
</figure>
Kai Po Che
</a>
<div class="panel-block">
<button class="button is-info is-fullwidth">
Sort By IMDB Ratings
</button>
</div>
</article>
</div>
<div class="column is-5">
<article class="panel">
<p class="panel-heading has-background-success">
<span class='title is-4'>Movies</span>
</p>
<div class="panel-block">
<p class="control has-icons-left">
<input class="input is-success"
type="text" placeholder="Search">
<span class="icon is-left">
<i class="fas fa-search"
aria-hidden="true"></i>
</span>
</p>
</div>
<p class="panel-tabs">
<a class="is-active">All</a>
<a>Romentic</a>
<a>Comedy</a>
<a>Action</a>
<a>Drama</a>
</p>
<a class="panel-block is-active">
<figure class='image is-24x24'>
<img
src=
"https://media.geeksforgeeks.org/wp-content/uploads/20200622154925/M.S._Dhoni_-_The_Untold_Story_poster.jpg"
alt="">
</figure>
M.S.Dhoni The Untold story
</a>
<a class="panel-block">
<figure class='image is-24x24'>
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20200622155044/Raabta_poster.jpg" alt="">
</figure>
Rabta
</a>
<a class="panel-block">
<figure class='image is-24x24'>
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20200622155118/Shuddh_Desi_Romance.jpg"
alt="">
</figure>
Shuddh Desi Romance
</a>
<a class="panel-block">
<figure class='image is-24x24'>
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20200622155201/URI_-_New_poster.jpg" alt="">
</figure>
URI The Surgical Strike
</a>
<a class="panel-block">
<figure class='image is-24x24'>
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20200622155006/pk-poster.jpg" alt="">
</figure>
P.K.
</a>
<a class="panel-block">
<figure class='image is-24x24'>
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20200622154621/220px-3_idiots_poster.jpg"
alt="">
</figure>
3 Idiots
</a>
<a class="panel-block">
<figure class='image is-24x24'>
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20200622154805/Kai_Poche_film_poster.jpg"
alt="">
</figure>
Kai Po Che
</a>
<div class="panel-block">
<button class="button
is-success is-fullwidth">
Sort By IMDB Ratings
</button>
</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