Bulma es un marco CSS gratuito y de código abierto basado en flexbox que permite a los desarrolladores web crear sitios web hermosos y receptivos para todos los tamaños de pantalla. En este artículo, veremos los estilos del componente de paginación en Bulma.
El componente de paginación de Bulma tiene solo una variación de estilo que se puede aplicar agregando un modificador redondeado en el componente de paginación.
Clase de estilo de paginación de Bulma:
- is-rounded: esta clase se utiliza para redondear los elementos de paginación.
Sintaxis:
<nav class="pagination is-rounded">
....
</nav>
Ejemplo: El siguiente ejemplo muestra cómo usar el modificador is-rounded en el componente de paginación para redondear los elementos de paginación.
HTML
<!DOCTYPE html>
<html>
<head>
<link rel='stylesheet'
href=
'https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css'>
<style>
.container>p {
margin-top: 60px;
font-weight: bold;
}
.container>p:first-child {
margin-top: 30px;
}
</style>
</head>
<body class="has-text-centered">
<h1 class="is-size-2 has-text-success">
GeeksforGeeks
</h1>
<p class="is-size-4">
<b>Bulma Pagination Styles</b>
</p>
<div class="container is-fluid">
<p>Simple Pagination Style:</p>
<nav class="pagination" role="navigation">
<a class="pagination-previous is-disabled"
title="Tou are on the first page.">
Previous
</a>
<a class="pagination-next">Next</a>
<ul class="pagination-list">
<li>
<a class="pagination-link is-current"
title="Page 1">1</a>
</li>
<li>
<a class="pagination-link"
title="Page 2">2</a>
</li>
<li>
<a class="pagination-link"
title="Page 3">3</a>
</li>
</ul>
</nav>
<p>Rounded Pagination Style:</p>
<nav class="pagination is-rounded"
role="navigation">
<a class="pagination-previous is-disabled"
title="Tou are on the first page.">
Previous
</a>
<a class="pagination-next">Next</a>
<ul class="pagination-list">
<li>
<a class="pagination-link is-current"
title="Page 1">1</a>
</li>
<li>
<a class="pagination-link"
title="Page 2">2</a>
</li>
<li>
<a class="pagination-link"
title="Page 3">3</a>
</li>
</ul>
</nav>
</div>
</body>
</html>
Producción:
Estilos de paginación de Bulma
Referencia: https://bulma.io/documentation/components/pagination/#styles