पृष्ठांकन

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

या पृष्ठावर

आढावा

आम्ही आमच्या पृष्ठांकनासाठी कनेक्ट केलेल्या लिंक्सचा एक मोठा ब्लॉक वापरतो, ज्यामुळे लिंक्स चुकणे कठीण आणि सहज स्केलेबल बनवते—सर्व मोठे हिट क्षेत्र प्रदान करताना. पृष्ठांकन सूची 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>

चिन्हांसह कार्य करणे

काही पृष्ठांकन दुव्यांसाठी मजकुराच्या जागी चिन्ह किंवा चिन्ह वापरायचे आहे का? 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"अक्षम केलेल्या लिंक्सवर जोडले पाहिजे आणि त्यांची कार्यक्षमता पूर्णपणे अक्षम करण्यासाठी सानुकूल JavaScript वापरावे.

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>

संरेखन

फ्लेक्सबॉक्स युटिलिटीसह पृष्ठांकन घटकांचे संरेखन बदला . उदाहरणार्थ, सह .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 मध्ये जोडले

.paginationबूटस्ट्रॅपच्या विकसित होत असलेल्या CSS व्हेरिएबल्सच्या दृष्टिकोनाचा भाग म्हणून, पृष्ठांकन आता वर्धित रिअल-टाइम कस्टमायझेशनसाठी स्थानिक 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};
}