صفحو

دستاويز ۽ مثال صفحو ڏيکارڻ لاءِ ظاهر ڪرڻ لاءِ ته لاڳاپيل مواد جو هڪ سلسلو ڪيترن ئي صفحن تي موجود آهي.

هن صفحي تي

اوسر

اسان استعمال ڪريون ٿا ڳنڍيل لنڪن جو هڪ وڏو بلاڪ اسان جي صفحي جي ترتيب لاءِ، ڳنڍڻ کي مشڪل بنائڻ ۽ آسانيءَ سان اسپيبلبل ٺاهڻ- سڀ ڪجهه جڏهن ته وڏا هٽ علائقا مهيا ڪري رهيا آهيون. صفحو لسٽ HTML عناصر سان ٺهيل آهي تنهنڪري اسڪرين پڙهندڙ دستياب لنڪن جي تعداد جو اعلان ڪري سگهن ٿا. <nav>اسڪرين ريڊرز ۽ ٻين مددگار ٽيڪنالاجيز کي نيويگيشن سيڪشن جي طور تي سڃاڻڻ لاءِ ريپنگ عنصر استعمال ڪريو .

اضافي طور تي، جيئن ته صفحن ۾ ممڪن آهي ته هڪ کان وڌيڪ نيويگيشن سيڪشن آهن، ان جي مقصد کي ظاهر ڪرڻ aria-labelلاء هڪ وضاحتي مهيا ڪرڻ جي صلاح ڏني وئي آهي. <nav>مثال طور، جيڪڏھن صفحي جو حصو استعمال ڪيو ويندو آھي ڳولا جي نتيجن جي ھڪڙي سيٽ جي وچ ۾ نيويگيٽ ڪرڻ لاء، ھڪڙو مناسب ليبل ٿي سگھي ٿو 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>

icons سان ڪم

ڪجهه صفحي جي لنڪ لاءِ ٽيڪسٽ جي جاءِ تي هڪ آئڪن يا علامت استعمال ڪرڻ چاهيو ٿا؟ 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۽ موجوده صفحي کي ظاهر ڪرڻ لاءِ.

جڏهن ته .disabledڪلاس s جي لنڪ ڪارڪردگيءَ کي بند ڪرڻ جي pointer-events: noneڪوشش ڪري<a> ٿو، ته CSS ملڪيت اڃا معياري نه آهي ۽ ڪيبورڊ نيويگيشن جو حساب نه ٿو رکي. جيئن ته، توهان کي هميشه 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 يوٽيلٽيز سان صفحو جي اجزاء جي ترتيب کي تبديل ڪريو . مثال طور، سان گڏ .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>

سي ايس ايس

متغير

v5.2.0 ۾ شامل ڪيو ويو

Bootstrap جي ترقي يافته CSS متغير جي نقطي جي حصي جي طور تي، صفحو هاڻي مقامي CSS متغير استعمال ڪري ٿو .paginationبهتر حقيقي وقت جي ڪسٽمائيزيشن لاءِ. 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};

سس متغير

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