CSS paginering voorbeeld

Leer hoe je responsieve paginering kunt maken met CSS.

Eenvoudige paginering

Als er veel pagina's zijn op de website, zou je misschien willen dat je een soort paginering toevoegt aan elke pagina:

Voorbeeld

.pagination {
  display: inline-block;
}
.pagination a {
  color: black;
  float: left;
  padding: 8px 16px;
  text-decoration: none;
}

Probeer het zelf

Actieve hover-pagina's

Met .active Class maakt de huidige pagina prominent en gebruikt deze bij het overzetten van de muis erover: :hover Selector wijzigt de kleur van elke pagina-link:

Voorbeeld

.pagination a.active {
  background-color: #4CAF50;
  color: white;
}
.pagination a:hover:not(.active) {background-color: #ddd;}

Probeer het zelf

Ronde hoeken van actieve en hover-pagina's

Als je ronde hoeken nodig hebt voor de "active" en "hover" knoppen, voeg dan toe border-radius Property:

Voorbeeld

.pagination a {
  border-radius: 5px;
}
.pagination a.active {
  border-radius: 5px;
}

Probeer het zelf

hover-effect

Plaats transition Property voegt een overgangseffect toe aan de pagina-links bij muisovergang:

Voorbeeld

.pagination a {
  transition: background-color .3s;
}

Probeer het zelf

Randige pagina's

Gebruik border Property voegt randen toe aan de pagina's:

Voorbeeld

.pagination a {
  border: 1px solid #ddd; /* Grijs */
}

Probeer het zelf

Cirkelrande randen

Tip:Voeg cirkelrande randen toe aan de eerste en laatste links van de pagina's:

Voorbeeld

.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;
}

Probeer het zelf

Ruimte tussen de links

Tip:Als je de pagina's niet wilt combineren, voeg dan toe margin Property:

Voorbeeld

.pagination a {
  margin: 0 4px; /* Boven- en ondermarges zijn 0, flexibel te wijzigen */
}

Probeer het zelf

Pagina'sgrootte

Gebruik font-size Property wijzigt de grootte van de pagina's:

Voorbeeld

.pagination a {
  font-size: 22px;
}

Probeer het zelf

Centraal uitgelijnde pagina's

Gebruik aub een ingeschakelde text-align:center De container-elementen (zoals <div>) omhullen het:

Voorbeeld

.center {}}
  text-align: center;
}

Probeer het zelf

Meer voorbeelden

Voorbeeld

Probeer het zelf

Kruimelpad

Een ander formaat van paginering is het zogenaamde "kruimelpad" (breadcrumbs):

Voorbeeld

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";
}

Probeer het zelf