Bulma es un marco CSS de código abierto basado en FLexbox y es completamente gratuito. Es rico en componentes, compatible y bien documentado. Es de naturaleza altamente receptiva. Utiliza clases para implementar su diseño.
La ‘paginación’ es un componente que se utiliza para indicar la existencia de una serie de contenido relacionado en varias páginas. La paginación se utiliza para permitir la navegación entre las páginas de un sitio web. El componente de paginación incluye varios otros componentes que tenemos que agregar exclusivamente para diseñar bien nuestro contenido. Estos componentes se enumeran a continuación.
- pagination-previous: Se utiliza para navegar a la página anterior.
- pagination-next: Se utiliza para navegar a la página siguiente.
- lista de paginación: se utiliza para mostrar diferentes páginas del sitio web.
- pagination-link: Es para indicar el número de página en la etiqueta ancla.
- pagination-ellipsis: Crea los separadores de rango entre los números de página.
Ejemplo 1: Este ejemplo muestra un componente de paginación Bulma simple.
<!DOCTYPE html>
<html>
<head>
<title>Bulma Pagination</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: 80px;
}
</style>
</head>
<body>
<div class='container'>
<div class='columns is-mobile is-centered'>
<div class='column is-10'>
<nav class="pagination" role="navigation"
aria-label="pagination">
<a class="pagination-previous">Previous</a>
<a class="pagination-next">Next page</a>
<ul class="pagination-list">
<li>
<a href="#" class="pagination-link"
aria-label="Page 1">1</a>
</li>
<li>
<a href="#" class="pagination-link
is-current" aria-label="Goto page 2"
aria-current="page">2</a>
</li>
<li>
<a href="#" class="pagination-link"
aria-label="Goto page 3">3</a>
</li>
<li>
<a href="#" class="pagination-link"
aria-label="Goto page 4">4</a>
</li>
<li>
<a href="#" class="pagination-link"
aria-label="Goto page 5">5</a>
</li>
<li>
<a class="pagination-link"
aria-label="Goto page 6">6</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
</body>
</html>
Producción:
Ejemplo 2: Este ejemplo muestra la paginación de un gran número de páginas.
<!DOCTYPE html>
<html>
<head>
<title>Bulma Pagination</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: 80px;
}
</style>
</head>
<body>
<div class='container'>
<div class='columns is-mobile is-centered'>
<div class='column is-10'>
<nav class="pagination" role="navigation"
aria-label="pagination">
<a class="pagination-previous">Previous</a>
<a class="pagination-next">Next page</a>
<ul class="pagination-list">
<li>
<a class="pagination-link"
aria-label="Goto page 1">1</a>
</li>
<li>
<a class="pagination-link"
aria-label="Goto page 2">2</a>
</li>
<li>
<a class="pagination-link"
aria-label="Goto page 3">3</a>
</li>
<li>
<span class="pagination-ellipsis">
…
</span>
</li>
<li>
<a class="pagination-link"
aria-label="Goto page 26">26</a>
</li>
<li>
<a class="pagination-link is-current"
aria-label="Page 27"
aria-current="page">27</a>
</li>
<li>
<a class="pagination-link"
aria-label="Goto page 28">28</a>
</li>
<li>
<a class="pagination-link"
aria-label="Goto page 29">29</a>
</li>
<li>
<a class="pagination-link"
aria-label="Goto page 30">30</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
</body>
</html>
Producción:
Ejemplo 3: Este ejemplo muestra paginación con diferente alineación.
<!DOCTYPE html>
<html>
<head>
<title>Bulma Pagination</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: 80px;
}
.pagination {
margin-bottom: 20px;
}
</style>
</head>
<body>
<div class='container'>
<div class='columns is-mobile is-centered'>
<div class='column is-10'>
<nav class="pagination has-background-primary"
role="navigation" aria-label="pagination">
<a class="pagination-previous">Previous</a>
<a class="pagination-next">Next page</a>
<ul class="pagination-list">
<li>
<a class="pagination-link"
aria-label="Goto page 1">1</a>
</li>
<li>
<a class="pagination-link"
aria-label="Goto page 2">2</a>
</li>
<li>
<a class="pagination-link"
aria-label="Goto page 3">3</a>
</li>
<li>
<span class="pagination-ellipsis">
…
</span>
</li>
<li>
<a class="pagination-link"
aria-label="Goto page 26">26</a>
</li>
<li>
<a class="pagination-link is-current"
aria-label="Page 27"
aria-current="page">27</a>
</li>
<li>
<a class="pagination-link"
aria-label="Goto page 28">28</a>
</li>
<li>
<a class="pagination-link"
aria-label="Goto page 29">29</a>
</li>
<li>
<a class="pagination-link"
aria-label="Goto page 30">30</a>
</li>
</ul>
</nav>
<nav class="pagination is-centered
has-background-success" role="navigation"
aria-label="pagination">
<a class="pagination-previous">Previous</a>
<a class="pagination-next">Next page</a>
<ul class="pagination-list">
<li>
<a class="pagination-link"
aria-label="Goto page 1">1</a>
</li>
<li>
<a class="pagination-link"
aria-label="Goto page 2">2</a>
</li>
<li>
<a class="pagination-link"
aria-label="Goto page 3">3</a>
</li>
<li>
<span class="pagination-ellipsis">
…
</span>
</li>
<li>
<a class="pagination-link"
aria-label="Goto page 26">26</a>
</li>
<li>
<a class="pagination-link is-current"
aria-label="Page 27"
aria-current="page">27</a>
</li>
<li>
<a class="pagination-link"
aria-label="Goto page 28">28</a>
</li>
<li>
<a class="pagination-link"
aria-label="Goto page 29">29</a>
</li>
<li>
<a class="pagination-link"
aria-label="Goto page 30">30</a>
</li>
</ul>
</nav>
<nav class="pagination is-right
has-background-info" role="navigation"
aria-label="pagination">
<a class="pagination-previous">Previous</a>
<a class="pagination-next">Next page</a>
<ul class="pagination-list">
<li>
<a class="pagination-link"
aria-label="Goto page 1">1</a>
</li>
<li>
<a class="pagination-link"
aria-label="Goto page 2">2</a>
</li>
<li>
<a class="pagination-link"
aria-label="Goto page 3">3</a>
</li>
<li>
<span class="pagination-ellipsis">
…
</span>
</li>
<li>
<a class="pagination-link"
aria-label="Goto page 26">26</a>
</li>
<li>
<a class="pagination-link is-current"
aria-label="Page 27"
aria-current="page">27</a>
</li>
<li>
<a class="pagination-link"
aria-label="Goto page 28">28</a>
</li>
<li>
<a class="pagination-link"
aria-label="Goto page 29">29</a>
</li>
<li>
<a class="pagination-link"
aria-label="Goto page 30">30</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
</body>
</html>
Producción:
Ejemplo 4: Este ejemplo muestra la paginación con diferentes tamaños.
<!DOCTYPE html>
<html>
<head>
<title>Bulma Pagination</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: 80px;
}
.pagination {
margin-bottom: 20px;
}
</style>
</head>
<body>
<div class='container'>
<div class='columns is-mobile is-centered'>
<div class='column is-10'>
<nav class="pagination is-small
has-background-primary" role="navigation"
aria-label="pagination">
<a class="pagination-previous">Previous</a>
<a class="pagination-next">Next page</a>
<ul class="pagination-list">
<li>
<a class="pagination-link"
aria-label="Goto page 1">1</a>
</li>
<li>
<a class="pagination-link"
aria-label="Goto page 2">2</a>
</li>
<li>
<a class="pagination-link"
aria-label="Goto page 3">3</a>
</li>
<li>
<span class="pagination-ellipsis">
…
</span>
</li>
<li>
<a class="pagination-link"
aria-label="Goto page 26">26</a>
</li>
<li>
<a class="pagination-link is-current"
aria-label="Page 27"
aria-current="page">27</a>
</li>
<li>
<a class="pagination-link"
aria-label="Goto page 28">28</a>
</li>
<li>
<a class="pagination-link"
aria-label="Goto page 29">29</a>
</li>
<li>
<a class="pagination-link"
aria-label="Goto page 30">30</a>
</li>
</ul>
</nav>
<nav class="pagination is-medium
has-background-success" role="navigation"
aria-label="pagination">
<a class="pagination-previous">Previous</a>
<a class="pagination-next">Next page</a>
<ul class="pagination-list">
<li>
<a class="pagination-link"
aria-label="Goto page 1">1</a>
</li>
<li>
<a class="pagination-link"
aria-label="Goto page 2">2</a>
</li>
<li>
<a class="pagination-link"
aria-label="Goto page 3">3</a>
</li>
<li>
<span class="pagination-ellipsis">
…
</span>
</li>
<li>
<a class="pagination-link"
aria-label="Goto page 26">26</a>
</li>
<li>
<a class="pagination-link is-current"
aria-label="Page 27"
aria-current="page">27</a>
</li>
<li>
<a class="pagination-link"
aria-label="Goto page 28">28</a>
</li>
<li>
<a class="pagination-link"
aria-label="Goto page 29">29</a>
</li>
<li>
<a class="pagination-link"
aria-label="Goto page 30">30</a>
</li>
</ul>
</nav>
<nav class="pagination is-large
has-background-info" role="navigation"
aria-label="pagination">
<a class="pagination-previous">Previous</a>
<a class="pagination-next">Next page</a>
<ul class="pagination-list">
<li>
<a class="pagination-link"
aria-label="Goto page 1">1</a>
</li>
<li>
<a class="pagination-link"
aria-label="Goto page 2">2</a>
</li>
<li>
<a class="pagination-link"
aria-label="Goto page 3">3</a>
</li>
<li>
<span class="pagination-ellipsis">
…
</span>
</li>
<li>
<a class="pagination-link"
aria-label="Goto page 26">26</a>
</li>
<li>
<a class="pagination-link is-current"
aria-label="Page 27"
aria-current="page">27</a>
</li>
<li>
<a class="pagination-link"
aria-label="Goto page 28">28</a>
</li>
<li>
<a class="pagination-link"
aria-label="Goto page 29">29</a>
</li>
<li>
<a class="pagination-link"
aria-label="Goto page 30">30</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
</body>
</html>
Producción:
Ejemplo 5: Este ejemplo muestra la función de paginación redondeada.
<!DOCTYPE html>
<html>
<head>
<title>Bulma Pagination</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: 80px;
}
.pagination {
margin-bottom: 20px;
}
</style>
</head>
<body>
<div class='container'>
<div class='columns is-mobile is-centered'>
<div class='column is-10'>
<nav class="pagination is-rounded"
role="navigation" aria-label="pagination">
<a class="pagination-previous">Previous</a>
<a class="pagination-next">Next page</a>
<ul class="pagination-list">
<li>
<a class="pagination-link"
aria-label="Goto page 1">1</a>
</li>
<li>
<a class="pagination-link"
aria-label="Goto page 2">2</a>
</li>
<li>
<a class="pagination-link"
aria-label="Goto page 3">3</a>
</li>
<li>
<span class="pagination-ellipsis">
…
</span>
</li>
<li>
<a class="pagination-link"
aria-label="Goto page 26">26</a>
</li>
<li>
<a class="pagination-link is-current"
aria-label="Page 27"
aria-current="page">27</a>
</li>
<li>
<a class="pagination-link"
aria-label="Goto page 28">28</a>
</li>
<li>
<a class="pagination-link"
aria-label="Goto page 29">29</a>
</li>
<li>
<a class="pagination-link"
aria-label="Goto page 30">30</a>
</li>
</ul>
</nav>
</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