Bootstrap 5 పేజినేషన్
- ముందు పేజీ BS5 లోడర్
- తరువాత పేజీ BS5 జాబితా గుంపు
కోర్సు సిఫార్సులు:
ప్రాథమిక పేజింగ్
మీ వెబ్సైట్లో ఎక్కువ పేజీలు ఉంటే, ప్రతి పేజీకి పేజింగ్ జోడించవచ్చు. ప్రాథమిక పేజింగ్ సృష్టించడానికి జోడించండి కేతగిరీని జోడించండి .pagination <ul> మేలుపాటు చేయండి మరియు ప్రతి భాగానికి జోడించండి .page-item <li> మేలుపాటు చేయండి మరియు ప్రతి లింకుకు జోడించండి .page-link కేతగిరీని జోడించండి <li> ప్రతి లింకుకు ఉపయోగించండి:
ఉదాహరణ
<ul class="pagination"> <li class="page-item"><a class="page-link" href="#">ముంది పేజీ</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="#">తరువాత పేజీ</a></li> </ul>
క్రియాశీల స్థితి
.active ప్రస్తుత పేజీని ఉపయోగించడానికి కేతగిరీ ఉపయోగించండి:
ఉదాహరణ
<ul class="pagination"> <li class="page-item"><a class="page-link" href="#">ముంది పేజీ</a></li> <li class="page-item"><a class="page-link" href="#">1</a></li> <li class="page-item active"><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="#">తరువాత పేజీ</a></li> </ul>
అచేతన స్థితి
.disabled నిలిచిపోయిన లింకులకు కేతగిరీ ఉపయోగించండి:
ఉదాహరణ
<ul class="pagination"> <li class="page-item disabled"><a class="page-link" href="#">ముంది పేజీ</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="#">తరువాత పేజీ</a></li> </ul>
పేజింగ్ పరిమాణం
పేజింగ్ భాగాలను పెద్దగా లేదా చిన్నగా మార్చవచ్చు:
పెద్ద భాగానికి కేతగిరీ జోడించండి .pagination-lg చిన్న భాగానికి జోడించండి .pagination-sm కేతగిరీ రకం:
ఉదాహరణ
<ul class="pagination pagination-lg"> <li class="page-item"><a class="page-link" href="#">ముంది పేజీ</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="#">తరువాత పేజీ</a></li> </ul> <ul class="pagination pagination-sm"> <li class="page-item"><a class="page-link" href="#">ముంది పేజీ</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="#">తరువాత పేజీ</a></li> </ul>
పేజినేటింగ్ అనుకూలీకరణ
పేజినేటింగ్ అనుకూలీకరణకు utility క్లాస్ ఉపయోగించండి:
ఉదాహరణ
<!-- డిఫాల్ట్ (ఎడమ మూలలు నిలుచున్నది) --> <ul class="pagination" style="margin:20px 0"> <li class="page-item">...</li> </ul> <!-- మధ్యలు నిలుచున్నది --> <ul class="pagination justify-content-center" style="margin:20px 0"> <li class="page-item">...</li> </ul> <!-- కుడి మూలలు నిలుచున్నది --> <ul class="pagination justify-content-end" style="margin:20px 0"> <li class="page-item">...</li> </ul>
బ్రెడ్‌క్రమ్స్ (Breadcrumbs)
పేజినేటింగ్ మరొక రూపం బ్రెడ్‌క్రమ్స్ ఉంది:
.breadcrumb మరియు .breadcrumb-item ఈ పేజీని నావిగేషన్ హైరార్కీలో నిలబడిన స్థానాన్ని నిర్ణయించే క్లాస్ నిబంధనలు:
ఉదాహరణ
<ul class="breadcrumb"> <li class="breadcrumb-item"><a href="#">చిత్రాలు</a></li> <li class="breadcrumb-item"><a href="#">2019వ సంవత్సరం శీతాకాలం</a></li> <li class="breadcrumb-item"><a href="#">చైనా</a></li> <li class="breadcrumb-item active">పేక్ష </ul>
- ముందు పేజీ BS5 లోడర్
- తరువాత పేజీ BS5 జాబితా గుంపు
