मुख्य सामग्री पर जाउ डॉक्स नेविगेशन पर जाउ
Check
in English

पृष्ठांकन

संबंधित सामग्री कें एकटा श्रृंखला कें संकेत करय कें लेल पृष्ठांकन कें दर्शाबय कें लेल दस्तावेजीकरण आ उदाहरण अनेक पृष्ठक कें पार मौजूद छै.

इस पेज पर

अवलोकन

हम अपनऽ पृष्ठांकन लेली जुड़लऽ लिंकऽ के एगो बड़ऽ ब्लॉक के उपयोग करै छियै, जेकरा स॑ लिंकऽ क॑ छूटना मुश्किल होय जाय छै आरू आसानी स॑ स्केल करलऽ जाय सकै छै-ई सब जबकि बड़ऽ हिट क्षेत्र उपलब्ध करै छै । पृष्ठांकन सूची एचटीएमएल तत्वक कें साथ बनायल गेल छै ताकि स्क्रीन रीडर उपलब्ध लिंक कें संख्या कें घोषणा कयर सकय. <nav>रीडर आ अन्य सहायक प्रौद्योगिकी कें स्क्रीनिंग कें लेल नेविगेशन खंड कें रूप मे पहचान करय कें लेल एकटा रैपिंग तत्व कें उपयोग करूं .

एकरऽ अलावा, जैन्हऽ कि पन्नाऽ म॑ संभवतः एक स॑ अधिक ऐन्हऽ नेविगेशन खंड छै, ई सलाह देलऽ जाय छै कि एकरऽ उद्देश्य क॑ प्रतिबिंबित करै aria-labelलेली एक वर्णनात्मक उपलब्ध कराय देलऽ जाय । <nav>उदाहरण कें लेल, यदि पृष्ठांकन घटक कें उपयोग खोज परिणामक कें कोनों सेट कें बीच नेविगेट करय कें लेल करल जाय छै, त एकटा उपयुक्त लेबल भ सकय छै aria-label="Search results pages".

एचटीएमएल 
<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विशेषताक संग उचित स्क्रीन रीडर समर्थन अवश्य प्रदान करू .

एचटीएमएल 
<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 करै लेली उपयोग करै छै , वू CSS गुण अभी तलक मानकीकृत नै छै आरू कीबोर्ड नेविगेशन केरऽ लेखा-जोखा नै दै छै । अइ तरह, अहां कें हमेशा अक्षम लिंक पर जोड़नाय चाही आ ओकर कार्यक्षमता कें पूर्ण रूप सं अक्षम करय कें लेल कस्टम जावास्क्रिप्ट कें उपयोग करनाय चाही.<a>tabindex="-1"

एचटीएमएल 
<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>, या पिछला/अगला तीर कें मामला मे एंकर कें छोड़ सकय छी, क्लिक कार्यक्षमता कें हटावय कें लेल आ इच्छित शैली कें बरकरार रखयत कीबोर्ड फोकस कें रोकय कें लेल.

एचटीएमएल 
<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

एचटीएमएल 
<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>
एचटीएमएल 
<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:

एचटीएमएल 
<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: 1।

एचटीएमएल 
<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 मे जोड़ा गेल

बूटस्ट्रैप कें विकसित CSS चर दृष्टिकोण कें हिस्सा कें रूप मे, पृष्ठांकन आब .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};

सस्स चर

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