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">ਪੈਕਿੰਗ</li> </ul>
- ਪਿਛਲਾ ਪੰਨਾ BS5 ਲੋਡਰ
- ਅਗਲਾ ਪੰਨਾ BS5 ਲਿਸਟ ਗਰੁੱਪ
