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 héroe es un estandarte de héroe imponente para mostrar algo.
El componente héroe le permite agregar un banner de ancho completo a su página web, que opcionalmente también puede cubrir la altura completa de la página. El componente Hero incluye varios otros componentes que tenemos que agregar exclusivamente para diseñar bien nuestro contenido. Estos componentes se enumeran a continuación.
- héroe: Es el contenedor principal.
- hero-body: Es donde puedes poner todos tus contenidos.
Ejemplo 1: Este ejemplo ilustra el elemento Hero simple.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Bulma Hero</title>
<link rel='stylesheet' href=
'https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.css'>
<!-- custom css -->
<style>
div.adjust {
margin-top: 50px;
}
</style>
</head>
<body>
<div class='container adjust'>
<section class="hero">
<div class="hero-body">
<div class="container">
<h1 class="title">
GeeksforGeeks
</h1>
<h2 class="subtitle">
Prior knowledge of DS and Algo:
If you are already well versed
with the basic data structures
like Arrays, Linked Lists etc.
and some of the basic algorithms
like Sorting, Searching etc. then
you will comparatively take much
less time than a complete newbie
as you already know the basics.
</h2>
</div>
</div>
</section>
</div>
</body>
</html>
Producción:
Elemento de héroe simple
Ejemplo 2: Este ejemplo ilustra elementos coloridos de Hero Bulma.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Bulma Hero</title>
<link rel='stylesheet' href=
'https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.css'>
<!-- custom css -->
<style>
div.adjust {
margin-top: 10px;
}
div.column.is-6 {
padding: 2px;
}
</style>
</head>
<body>
<div class='container adjust'>
<div class='columns'>
<div class='column is-6'>
<section class="hero is-primary">
<div class="hero-body">
<div class="container">
<h1 class="title">
GeeksforGeeks
</h1>
<h2 class="subtitle">
Prior knowledge of DS and
Algo: If you are already
well versed with the basic
data structures like Arrays,
Linked Lists etc.
</h2>
</div>
</div>
</section>
</div>
<div class='column is-6'>
<section class="hero is-info">
<div class="hero-body">
<div class="container">
<h1 class="title">
GeeksforGeeks
</h1>
<h2 class="subtitle">
Prior knowledge of DS and
Algo: If you are already
well versed with the basic
data structures like Arrays,
Linked Lists etc.
</h2>
</div>
</div>
</section>
</div>
</div>
<div class='columns'>
<div class='column is-6'>
<section class="hero is-link">
<div class="hero-body">
<div class="container">
<h1 class="title">
GeeksforGeeks
</h1>
<h2 class="subtitle">
Prior knowledge of DS and
Algo: If you are already
well versed with the basic
data structures like Arrays,
Linked Lists etc.
</h2>
</div>
</div>
</section>
</div>
<div class='column is-6'>
<section class="hero is-success">
<div class="hero-body">
<div class="container">
<h1 class="title">
GeeksforGeeks
</h1>
<h2 class="subtitle">
Prior knowledge of DS and
Algo: If you are already
well versed with the basic
data structures like Arrays,
Linked Lists etc.
</h2>
</div>
</div>
</section>
</div>
</div>
<div class='columns'>
<div class='column is-6'>
<section class="hero is-warning">
<div class="hero-body">
<div class="container">
<h1 class="title">
GeeksforGeeks
</h1>
<h2 class="subtitle">
Prior knowledge of DS and
Algo: If you are already
well versed with the basic
data structures like Arrays,
Linked Lists etc.
</h2>
</div>
</div>
</section>
</div>
<div class='column is-6'>
<section class="hero is-danger">
<div class="hero-body">
<div class="container">
<h1 class="title">
GeeksforGeeks
</h1>
<h2 class="subtitle">
Prior knowledge of DS and
Algo: If you are already
well versed with the basic
data structures like Arrays,
Linked Lists etc.
</h2>
</div>
</div>
</section>
</div>
</div>
</div>
</body>
</html>
Producción:
elementos coloridos del héroe bulma
Ejemplo 3: Este ejemplo ilustra elementos de héroe con efecto degradado (Agregar modificador en negrita).
HTML
<!DOCTYPE html>
<html>
<head>
<title>Bulma Hero</title>
<link rel='stylesheet' href=
'https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.css'>
<!-- custom css -->
<style>
div.adjust {
margin-top: 10px;
}
div.column.is-6 {
padding: 2px;
}
</style>
</head>
<body>
<div class='container adjust'>
<div class='columns'>
<div class='column is-6'>
<section class="hero is-primary is-bold">
<div class="hero-body">
<div class="container">
<h1 class="title">
GeeksforGeeks
</h1>
<h2 class="subtitle">
Prior knowledge of DS and Algo:
If you are already well versed
with the basic data structures
like Arrays, Linked Lists etc.
</h2>
</div>
</div>
</section>
</div>
<div class='column is-6'>
<section class="hero is-info is-bold">
<div class="hero-body">
<div class="container">
<h1 class="title">
GeeksforGeeks
</h1>
<h2 class="subtitle">
Prior knowledge of DS and Algo:
If you are already well versed
with the basic data structures
like Arrays, Linked Lists etc.
</h2>
</div>
</div>
</section>
</div>
</div>
<div class='columns'>
<div class='column is-6'>
<section class="hero is-link is-bold">
<div class="hero-body">
<div class="container">
<h1 class="title">
GeeksforGeeks
</h1>
<h2 class="subtitle">
Prior knowledge of DS and Algo:
If you are already well versed
with the basic data structures
like Arrays, Linked Lists etc.
</h2>
</div>
</div>
</section>
</div>
<div class='column is-6'>
<section class="hero is-success is-bold">
<div class="hero-body">
<div class="container">
<h1 class="title">
GeeksforGeeks
</h1>
<h2 class="subtitle">
Prior knowledge of DS and Algo:
If you are already well versed
with the basic data structures
like Arrays, Linked Lists etc.
</h2>
</div>
</div>
</section>
</div>
</div>
<div class='columns'>
<div class='column is-6'>
<section class="hero is-warning is-bold">
<div class="hero-body">
<div class="container">
<h1 class="title">
GeeksforGeeks
</h1>
<h2 class="subtitle">
Prior knowledge of DS and Algo:
If you are already well versed
with the basic data structures
like Arrays, Linked Lists etc.
</h2>
</div>
</div>
</section>
</div>
<div class='column is-6'>
<section class="hero is-danger is-bold">
<div class="hero-body">
<div class="container">
<h1 class="title">
GeeksforGeeks
</h1>
<h2 class="subtitle">
Prior knowledge of DS and Algo:
If you are already well versed
with the basic data structures
like Arrays, Linked Lists etc.
</h2>
</div>
</div>
</section>
</div>
</div>
</div>
</body>
</html>
Producción:
Elemento héroe con efecto de gradiente
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