ප්‍රධාන අන්තර්ගතය වෙත යන්න ලේඛන සංචාලනය වෙත යන්න
Check
in English

පේජිනේෂන්

පිටු කිහිපයක් පුරා පවතින අදාළ අන්තර්ගත මාලාවක් දැක්වීමට පිටු සලකුණු පෙන්වීම සඳහා ලියකියවිලි සහ උදාහරණ.

මෙම පිටුවේ

දළ විශ්ලේෂණය

අපි අපගේ පිටු සැකසීම සඳහා සම්බන්ධිත සබැඳි විශාල ප්‍රමාණයක් භාවිතා කරන අතර, සබැඳි මඟ හැරීමට අපහසු වන අතර පහසුවෙන් පරිමාණය කළ හැකි-සියල්ල විශාල ප්‍රදේශ සපයන අතරම. පිටු සැකසීම ලැයිස්තුගත HTML මූලද්‍රව්‍ය සමඟ ගොඩනගා ඇති බැවින් තිර කියවන්නන්ට පවතින සබැඳි ගණන ප්‍රකාශ කළ හැක. <nav>තිර කියවන්නන් සහ අනෙකුත් සහායක තාක්ෂණයන් වෙත එය සංචාලන අංශයක් ලෙස හඳුනා ගැනීමට දවටන අංගයක් භාවිතා කරන්න .

මීට අමතරව, පිටුවල එවැනි සංචාලන අංශ එකකට වඩා ඇති බැවින්, එහි අරමුණ පිළිබිඹු කිරීම aria-labelසඳහා විස්තරයක් සැපයීම සුදුසුය. <nav>උදාහරණයක් ලෙස, සෙවුම් ප්‍රතිඵල සමූහයක් අතර සැරිසැරීමට pagination සංරචකය භාවිතා කරන්නේ නම්, සුදුසු ලේබලයක් විය හැක aria-label="Search results pages".

html 
<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>

අයිකන සමඟ වැඩ කිරීම

සමහර පේජිනේෂන් සබැඳි සඳහා පෙළ වෙනුවට අයිකනයක් හෝ සංකේතයක් භාවිතා කිරීමට බලාපොරොත්තු වන්නේද? ariaගුණාංග සමඟ නිසි තිර කියවනය සහාය ලබා දීමට වග බලා ගන්න .

html 
<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>

ආබාධිත සහ ක්රියාකාරී තත්ත්වයන්

පේජිනේෂන් සබැඳි විවිධ තත්වයන් සඳහා අභිරුචිකරණය කළ හැකිය. .disabledක්ලික් කළ නොහැකි ලෙස පෙනෙන සබැඳි සඳහා සහ .activeවත්මන් පිටුව දැක්වීමට භාවිතා කරන්න .

s හි සබැඳි ක්‍රියාකාරීත්වය අක්‍රිය කිරීමට පන්තිය .disabledභාවිතා pointer-events: noneකරන අතර , එම CSS ගුණය තවමත් ප්‍රමිතිගත කර නොමැති අතර යතුරුපුවරු සංචාලනය සඳහා ගණන් නොගනී . <a>එනිසා, ඔබ සැමවිටම tabindex="-1"අබල කළ සබැඳි එක් කළ යුතු අතර ඒවායේ ක්‍රියාකාරීත්වය සම්පූර්ණයෙන්ම අක්‍රිය කිරීමට අභිරුචි ජාවාස්ක්‍රිප්ට් භාවිත කළ යුතුය.

html 
<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>

ක්ලික් කිරීමේ ක්‍රියාකාරිත්වය ඉවත් කිරීමට සහ අපේක්ෂිත මෝස්තර රඳවා තබා ගනිමින් යතුරුපුවරු නාභිගත වීම වැළැක්වීමට, ඔබට විකල්ප වශයෙන් සක්‍රිය හෝ අක්‍රිය නැංගුරම් මාරු කළ හැකිය <span>, නැතහොත් පෙර/ඊළඟ ඊතල සම්බන්ධයෙන් නැංගුරම ඉවත් කළ හැකිය.

html 
<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>

ප්‍රමාණය කිරීම

විශාල හෝ කුඩා පිටුවක් කිරීමට කැමතිද? එකතු කරන්න .pagination-lgහෝ .pagination-smඅමතර ප්‍රමාණ සඳහා.

html 
<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 
<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>

පෙළගැස්වීම

flexbox උපයෝගිතා සමඟින් pagination සංරචක පෙළගැස්වීම වෙනස් කරන්න . උදාහරණයක් ලෙස, සමඟ .justify-content-center:

html 
<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>

හෝ සමඟ .justify-content-end:

html 
<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

විචල්යයන්

v5.2.0 හි එකතු කරන ලදී

Bootstrap හි විකාශනය වන CSS විචල්‍ය ප්‍රවේශයේ කොටසක් ලෙස, pagination දැන් .paginationවැඩිදියුණු කළ තත්‍ය කාලීන අභිරුචිකරණය සඳහා දේශීය CSS විචල්‍යයන් භාවිතා කරයි. CSS විචල්‍යයන් සඳහා අගයන් Sass හරහා සකසා ඇත, එබැවින් Sass අභිරුචිකරණයට තවමත් සහය දක්වයි.

  --#{$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 විචල්යයන්

$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;

සාස් මික්සින්

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