in English

Ɲɛjirali sɛbɛnw

Sɛbɛnw ni misaliw minnu bɛ ɲɛw jiracogo jira walasa k’a jira ko kunnafoni minnu bɛ tali kɛ ɲɔgɔn na, olu bɛ sɔrɔ ɲɛ caman kan.

Nin ɲɛ in kan

Kuma bɛɛ lajɛlen

An bɛ baara Kɛ ni jὲɲɔgɔnya blokiba ye an ka ɲɛɲini kama, o b’a To jɛgɛnsiraw ka gɛlɛn ka Tɛmɛ ani u bɛ Se kà Labɛn nɔgɔya la—o bɛɛ bɛ Kɛ k’a sɔrɔ an bɛ yɔrɔbaw Di minnu bɛ Se ka Kɛ. Pagenation bɛ jɔ ni list HTML elements ye walasa ekran kalanbagaw ka se ka laseli kɛ jɛgɛnsira minnu bɛ sɔrɔ. Baara kɛ ni fɛn dɔ ye min bɛ <nav>fɛn dɔ siri walasa k’a dɔn i n’a fɔ taamasiyɛn yɔrɔ min bɛ kalanbagaw ni dɛmɛ fɛɛrɛ wɛrɛw jira.

Ka fara o kan, i n’a fɔ a ka c’a la, ɲɛw bɛ ni o ɲɔgɔnna taamasiyɛn-yɔrɔw ye minnu ka ca ni kelen ye, a ka ɲi ka ɲɛfɔli dɔ Di aria-labelwalasa <nav>a k’a kuntilenna jira. Misali la, ni ɲɛw yɔrɔ bɛ kɛ ka ɲinini jaabiw kulu dɔ cɛ, taamasiyɛn bɛnnen bɛ se ka kɛ aria-label="Search results pages".

html ye

<nav aria-label="Page navigation example">
  <ul class="pagination">
    <li class="page-item"><a class="page-link" href="#">Previous</a></li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item"><a class="page-link" href="#">Next</a></li>
  </ul>
</nav>

Baara kɛli ni taamasiyɛnw ye

I b’a fɛ ka baara kɛ ni taamasiyɛn walima taamasiyɛn ye sɛbɛnni nɔ na ɲɛ dɔw ladɛrɛsiw la wa? Aw ye aw jija ka dɛmɛ ɲuman di ɛkran kalanbaga ma ni ariajogoɲumanya ye.

html ye

<nav aria-label="Page navigation example">
  <ul class="pagination">
    <li class="page-item">
      <a class="page-link" href="#" aria-label="Previous">
        <span aria-hidden="true">&laquo;</span>
      </a>
    </li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item">
      <a class="page-link" href="#" aria-label="Next">
        <span aria-hidden="true">&raquo;</span>
      </a>
    </li>
  </ul>
</nav>

Jamana minnu ye fiyentɔw ye ani minnu bɛ baara la

Pagenation links bɛ se ka ladilan ka kɛɲɛ ni cogoya wɛrɛw ye. Baara kɛ ni .disabledladɛrɛsiw ye minnu bɛ i n’a fɔ i tɛ se ka digi ani .activeka ɲɛ min bɛ yen sisan, o jira.

Hali ni .disabledkalasi bɛ baara Kɛ pointer-events: nonek'a ɲini ka s ka jὲɲɔgɔnya baarakɛcogo Dabila <a>, o CSS nafolo ma Kɛ fɔlɔ ye wa a tɛ jatebla Kɛ klaviyeti taamacogo la. O cogo la, i ka kan ka fara ɲɔgɔn kan tuma bɛɛ tabindex="-1"jɛgɛnsira minnu ma baara kɛ ani ka baara kɛ ni JavaScript ladamulen ye walasa k’u ka baarakɛcogo bali pewu.

html ye

<nav aria-label="...">
  <ul class="pagination">
    <li class="page-item disabled">
      <a class="page-link">Previous</a>
    </li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item active" aria-current="page">
      <a class="page-link" href="#">2</a>
    </li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item">
      <a class="page-link" href="#">Next</a>
    </li>
  </ul>
</nav>

I bɛ se ka anchor active walima disabled sɛgɛsɛgɛ ni i yɛrɛ sago ye <span>, walima ka anchor bɔ a la ni prev/next arrows ye, walasa ka click baarakɛcogo bɔ ani ka keyboard focus bali k’a sɔrɔ i bɛ styles laɲinitaw mara.

html ye

<nav aria-label="...">
  <ul class="pagination">
    <li class="page-item disabled">
      <span class="page-link">Previous</span>
    </li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item active" aria-current="page">
      <span class="page-link">2</span>
    </li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item">
      <a class="page-link" href="#">Next</a>
    </li>
  </ul>
</nav>

Sizing (Sizing) kɛ

Fancy ka ɲɛ minnu ka bon walima minnu ka dɔgɔ? Aw bɛ a fara a kan .pagination-lgwalima .pagination-smwalasa ka hakɛ wɛrɛw fara a kan.

html ye

<nav aria-label="...">
  <ul class="pagination pagination-lg">
    <li class="page-item active" aria-current="page">
      <span class="page-link">1</span>
    </li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
  </ul>
</nav>

html ye

<nav aria-label="...">
  <ul class="pagination pagination-sm">
    <li class="page-item active" aria-current="page">
      <span class="page-link">1</span>
    </li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
  </ul>
</nav>

Alignment (labɛnni).

ɲɛbila yɔrɔw labɛncogo caman Changer ni flexbox nafamafɛnw ye . Misali la, ni .justify-content-center:

html ye

<nav aria-label="Page navigation example">
  <ul class="pagination justify-content-center">
    <li class="page-item disabled">
      <a class="page-link">Previous</a>
    </li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item">
      <a class="page-link" href="#">Next</a>
    </li>
  </ul>
</nav>

Walima ni .justify-content-end:

html ye

<nav aria-label="Page navigation example">
  <ul class="pagination justify-content-end">
    <li class="page-item disabled">
      <a class="page-link">Previous</a>
    </li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item">
      <a class="page-link" href="#">Next</a>
    </li>
  </ul>
</nav>

CSS ye

Yɛlɛma-yɛlɛmaw

A farala a kan v5.2.0 kɔnɔ

Bootstrap ka CSS fɛn caman sɛgɛsɛgɛli fɛɛrɛ dɔ ye min bɛ ka wuli ka bɔ a nɔ na, ɲɛɲini bɛ baara kɛ sisan ni sigida CSS fɛn caman sɛgɛsɛgɛli ye on .paginationfor for enhanced real-time customization. Nafa minnu bɛ CSS fɛn caman sɛgɛsɛgɛli la, olu bɛ sigi Sass fɛ, o la Sass ka ladamuni bɛ dɛmɛ hali bi, o fana.

  --#{$prefix}pagination-padding-x: #{$pagination-padding-x};
  --#{$prefix}pagination-padding-y: #{$pagination-padding-y};
  @include rfs($pagination-font-size, --#{$prefix}pagination-font-size);
  --#{$prefix}pagination-color: #{$pagination-color};
  --#{$prefix}pagination-bg: #{$pagination-bg};
  --#{$prefix}pagination-border-width: #{$pagination-border-width};
  --#{$prefix}pagination-border-color: #{$pagination-border-color};
  --#{$prefix}pagination-border-radius: #{$pagination-border-radius};
  --#{$prefix}pagination-hover-color: #{$pagination-hover-color};
  --#{$prefix}pagination-hover-bg: #{$pagination-hover-bg};
  --#{$prefix}pagination-hover-border-color: #{$pagination-hover-border-color};
  --#{$prefix}pagination-focus-color: #{$pagination-focus-color};
  --#{$prefix}pagination-focus-bg: #{$pagination-focus-bg};
  --#{$prefix}pagination-focus-box-shadow: #{$pagination-focus-box-shadow};
  --#{$prefix}pagination-active-color: #{$pagination-active-color};
  --#{$prefix}pagination-active-bg: #{$pagination-active-bg};
  --#{$prefix}pagination-active-border-color: #{$pagination-active-border-color};
  --#{$prefix}pagination-disabled-color: #{$pagination-disabled-color};
  --#{$prefix}pagination-disabled-bg: #{$pagination-disabled-bg};
  --#{$prefix}pagination-disabled-border-color: #{$pagination-disabled-border-color};

Sass bεε bε bεn

$pagination-padding-y:              .375rem;
$pagination-padding-x:              .75rem;
$pagination-padding-y-sm:           .25rem;
$pagination-padding-x-sm:           .5rem;
$pagination-padding-y-lg:           .75rem;
$pagination-padding-x-lg:           1.5rem;

$pagination-font-size:              $font-size-base;

$pagination-color:                  var(--#{$prefix}link-color);
$pagination-bg:                     $white;
$pagination-border-radius:          $border-radius;
$pagination-border-width:           $border-width;
$pagination-margin-start:           ($pagination-border-width * -1);
$pagination-border-color:           $gray-300;

$pagination-focus-color:            var(--#{$prefix}link-hover-color);
$pagination-focus-bg:               $gray-200;
$pagination-focus-box-shadow:       $input-btn-focus-box-shadow;
$pagination-focus-outline:          0;

$pagination-hover-color:            var(--#{$prefix}link-hover-color);
$pagination-hover-bg:               $gray-200;
$pagination-hover-border-color:     $gray-300;

$pagination-active-color:           $component-active-color;
$pagination-active-bg:              $component-active-bg;
$pagination-active-border-color:    $pagination-active-bg;

$pagination-disabled-color:         $gray-600;
$pagination-disabled-bg:            $white;
$pagination-disabled-border-color:  $gray-300;

$pagination-transition:              color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;

$pagination-border-radius-sm:       $border-radius-sm;
$pagination-border-radius-lg:       $border-radius-lg;

Sass ka mixinw

@mixin pagination-size($padding-y, $padding-x, $font-size, $border-radius) {
  --#{$prefix}pagination-padding-x: #{$padding-x};
  --#{$prefix}pagination-padding-y: #{$padding-y};
  @include rfs($font-size, --#{$prefix}pagination-font-size);
  --#{$prefix}pagination-border-radius: #{$border-radius};
}