ప్రధాన కంటెంట్‌కు దాటవేయండి డాక్స్ నావిగేషన్‌కు దాటవేయండి
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ప్రస్తుత పేజీని సూచించడానికి ఉపయోగించండి .

s యొక్క లింక్ కార్యాచరణను నిలిపివేయడానికి .disabledతరగతి 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లో జోడించబడింది

బూట్‌స్ట్రాప్ యొక్క అభివృద్ధి చెందుతున్న 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};
}