ਮੁੱਖ ਸਮੱਗਰੀ ਤੇ ਜਾਓ ਡੌਕਸ ਨੈਵੀਗੇਸ਼ਨ 'ਤੇ ਜਾਓ
Check
in English

ਪੰਨਾ ਨੰਬਰ

ਕਈ ਪੰਨਿਆਂ ਵਿੱਚ ਸੰਬੰਧਿਤ ਸਮਗਰੀ ਦੀ ਇੱਕ ਲੜੀ ਨੂੰ ਦਰਸਾਉਣ ਲਈ ਪੰਨਾ ਨੰਬਰ ਦਿਖਾਉਣ ਲਈ ਦਸਤਾਵੇਜ਼ ਅਤੇ ਉਦਾਹਰਨਾਂ।

ਇਸ ਪੰਨੇ 'ਤੇ

ਸੰਖੇਪ ਜਾਣਕਾਰੀ

ਅਸੀਂ ਆਪਣੇ ਪੰਨਿਆਂ ਲਈ ਕਨੈਕਟ ਕੀਤੇ ਲਿੰਕਾਂ ਦੇ ਇੱਕ ਵੱਡੇ ਬਲਾਕ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹਾਂ, ਲਿੰਕਾਂ ਨੂੰ ਖੁੰਝਣ ਲਈ ਔਖਾ ਅਤੇ ਆਸਾਨੀ ਨਾਲ ਮਾਪਣਯੋਗ ਬਣਾਉਂਦੇ ਹਾਂ - ਇਹ ਸਭ ਵੱਡੇ ਹਿੱਟ ਖੇਤਰ ਪ੍ਰਦਾਨ ਕਰਦੇ ਹੋਏ। ਪੰਨਾ ਨੰਬਰ ਸੂਚੀ 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 ਕਰਨ ਲਈ ਵਰਤਦੀ ਹੈ , ਉਹ CSS ਵਿਸ਼ੇਸ਼ਤਾ ਅਜੇ ਪ੍ਰਮਾਣਿਤ ਨਹੀਂ ਹੈ ਅਤੇ ਕੀਬੋਰਡ ਨੈਵੀਗੇਸ਼ਨ ਲਈ ਖਾਤਾ ਨਹੀਂ ਹੈ। ਇਸ ਤਰ੍ਹਾਂ, ਤੁਹਾਨੂੰ ਹਮੇਸ਼ਾ ਅਯੋਗ ਲਿੰਕਾਂ ਨੂੰ ਜੋੜਨਾ ਚਾਹੀਦਾ ਹੈ ਅਤੇ ਉਹਨਾਂ ਦੀ ਕਾਰਜਕੁਸ਼ਲਤਾ ਨੂੰ ਪੂਰੀ ਤਰ੍ਹਾਂ ਅਸਮਰੱਥ ਬਣਾਉਣ ਲਈ ਕਸਟਮ JavaScript ਦੀ ਵਰਤੋਂ ਕਰਨੀ ਚਾਹੀਦੀ ਹੈ।<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>

ਅਲਾਈਨਮੈਂਟ

ਫਲੈਕਸਬਾਕਸ ਉਪਯੋਗਤਾਵਾਂ ਦੇ ਨਾਲ ਪੰਨਾਬੰਦੀ ਭਾਗਾਂ ਦੀ ਇਕਸਾਰਤਾ ਨੂੰ ਬਦਲੋ । ਉਦਾਹਰਨ ਲਈ, ਇਸ ਨਾਲ .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 ਵਿੱਚ ਸ਼ਾਮਲ ਕੀਤਾ ਗਿਆ

ਬੂਟਸਟਰੈਪ ਦੀ ਵਿਕਸਿਤ ਹੋ ਰਹੀ 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};

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