Příklady stránkování CSS
Naučte se vytvářet responzivní stránkování pomocí CSS.
Jednoduché stránkování
Pokud máte web s mnoha stránkami, možná budete chtít na každou stránku přidat nějaký druh stránkování:
Příklad
.pagination {
display: inline-block;
}
.pagination a {
color:
black;
float: left;
padding: 8px
16px;
text-decoration: none;
}
Aktivní a Hoverable stránkování
Zvýrazněte aktuální stránku pomocí .active
třídy a pomocí :hover
selektoru změňte barvu každého odkazu na stránku, když na ně najedete myší:
Příklad
.pagination a.active {
background-color:
#4CAF50;
color: white;
}
.pagination a:hover:not(.active) {background-color: #ddd;}
Zaoblená aktivní a pohyblivá tlačítka
Přidejte border-radius
vlastnost, pokud chcete zaoblené tlačítko „aktivní“ a „umístit kurzor“:
Příklad
.pagination a {
border-radius: 5px;
}
.pagination a.active {
border-radius: 5px;
}
Vznášející se přechodový efekt
Přidejte transition
vlastnost do odkazů na stránky a vytvořte přechodový efekt při umístění kurzoru myši:
Příklad
.pagination a {
transition: background-color .3s;
}
Ohraničené stránkování
Pomocí border
vlastnosti přidejte ohraničení do stránkování:
Příklad
.pagination a {
border: 1px solid #ddd; /* Gray
*/
}
Zaoblené hranice
Tip: Přidejte zaoblené okraje k prvnímu a poslednímu odkazu na stránce:
Příklad
.pagination a:first-child {
border-top-left-radius:
5px;
border-bottom-left-radius: 5px;
}
.pagination
a:last-child {
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
Mezera mezi odkazy
Tip: Přidejte margin
vlastnost, pokud nechcete seskupovat odkazy na stránky:
Příklad
.pagination a {
margin: 0 4px; /* 0 is for top
and bottom. Feel free to change it */
}
Velikost stránkování
Změňte velikost stránkování pomocí font-size
vlastnosti:
Příklad
.pagination a {
font-size: 22px;
}
Stránkování na střed
Chcete-li stránkování vycentrovat, obtočte kolem něj prvek kontejneru (například <div>).text-align:center
Příklad
.center {
text-align: center;
}
Další příklady
Příklad
Strouhanka
Další variantou stránkování jsou takzvané „stroužky“:
Příklad
ul.breadcrumb {
padding: 8px 16px;
list-style: none;
background-color: #eee;
}
ul.breadcrumb li {display: inline;}
ul.breadcrumb li+li:before {
padding: 8px;
color: black;
content: "/\00a0";
}