집 >웹 프론트엔드 >부트스트랩 튜토리얼 >Bootstrap의 페이지 매김 구성 요소에 대해 자세히 알아보십시오.
Bootstrap의 페이지 매김 구성 요소에 대해 자세히 알아보십시오.
- 青灯夜游앞으로
- 2021-04-01 09:57:353524검색
페이징 탐색은 거의 모든 웹사이트에서 볼 수 있습니다. 좋은 페이징은 사용자에게 좋은 사용자 경험을 선사할 수 있습니다. 이 글에서는 Bootstrap페이지 매기기에 대해 자세히 소개합니다. 도움이 필요한 친구들이 모두 참고할 수 있기를 바랍니다.
Overview
는 Bootstrap 프레임워크에서 두 가지 유형의 페이징 탐색을 제공합니다.
xml 페이지 번호를 사용한 페이징 탐색
xml 페이지 넘김을 사용한 페이징 탐색
페이지 번호 페이징
페이지 번호를 사용한 페이징 탐색은 가장 일반적인 페이징 탐색 유형일 수 있습니다. 특히 목록 페이지에 콘텐츠가 많은 경우 사용자에게 페이징 탐색 방법을 제공합니다
【기본 페이징】
많은 사람들이 일반적으로 선호합니다. 사용하세요 p>a 및 p>span 구조는 페이지 번호로 페이지가 매겨진 탐색을 만드는 데 사용됩니다. 그러나 Bootstrap 프레임워크에서는 ul>li>a와 같은 구조가 사용되며 ul 태그에 페이지 매김 방법이 추가됩니다: p>a和p>span结构来制作带页码的分页导航。不过，在Bootstrap框架中使用的是ul>li>a这样的结构，在ul标签上加入pagination方法：
<nav aria-label="Page navigation">
<ul class="pagination">
<li>
<a href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li>
<a href="#" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>
相关推荐：《bootstrap教程》
【状态】
链接在不同情况下可以定制。可以给不能点击的链接添加 .disabled 类、给当前页添加 .active 类
最好将 active 或 disabled 状态的链接（即 <a></a> 标签）替换为 <span></span> 标签，或者在向前/向后的箭头处省略<a></a> 标签，这样就可以让其保持需要的样式而不能被点击
<nav> <ul> <li> <span> <span>«</span> </span> </li> <li><span>1</span></li> <li><a>2</a></li> <li><a>3</a></li> <li><a>4</a></li> <li><a>5</a></li> <li> <a> <span>»</span> </a> </li> </ul> </nav>
【尺寸】
在Bootstrap框架中，可以通过两种不同的情况来设置其大小，类似于按钮一样：
1、通过“pagination-lg”让分页导航变大
2、通过“pagination-sm”让分页导航变小
<nav> <ul> <li> <a> <span>«</span> </a> </li> <li><a>1</a></li> <li><a>2</a></li> <li><a>3</a></li> <li><a>4</a></li> <li><a>5</a></li> <li> <a> <span>»</span> </a> </li> </ul> </nav> <nav> <ul> <li> <a> <span>«</span> </a> </li> <li><a>1</a></li> <li><a>2</a></li> <li><a>3</a></li> <li><a>4</a></li> <li><a>5</a></li> <li> <a> <span>»</span> </a> </li> </ul> </nav> <nav> <ul> <li> <a> <span>«</span> </a> </li> <li><a>1</a></li> <li><a>2</a></li> <li><a>3</a></li> <li><a>4</a></li> <li><a>5</a></li> <li> <a> <span>»</span> </a> </li> </ul> </nav>
翻页
Bootstrap框架除了提供带页码的分页导航之外还提供了翻页导航。这种分页导航常常在一些简单的网站上看到，比如说个人博客，杂志网站等。这种分页导航是看不到具体的页码，只会提供一个“上一页”和“下一页”的按钮
【默认用法】
在实际使用中，翻页分页导航和带页码的分页导航类似，为ul标签加入pager类
【对齐设置】
默认情况之下，翻页分页导航是居中显示，但有的时候我们需要一个居左，一个居右。Bootstrap框架提供了两个样式：
☑ previous：让“上一步”按钮居左
☑ next：让“下一步”按钮居右
具体使用的时候，只需要在li标签上添加对应类名即可
实现原理很简单，就是一个进行了左浮动，一个进行了右浮动
.pager .next > a,
.pager .next > span {
float: right;
}
.pager .previous > a,
.pager .previous > span {
float: left;
}
【状态设置】
和带页码分页导航一样，如果在li标签上添加了disabled类名的时候，分页按钮处于禁用状态，但同样不能禁止其点击功能。可以通过js来处理，或将a标签换成span
.pager .disabled > a,
.pager .disabled >a:hover,
.pager .disabled >a:focus,
.pager .disabled > span {
color: #999;
cursor: not-allowed;
background-color: #fff;
}
.disabled 클래스를 추가하고, 현재 페이지에는 .active 클래스를 추가할 수 있습니다🎜🎜활성 또는 비활성화된 링크를 추가하는 것이 가장 좋습니다( 예: <a></a> 태그)를 <span></span> 태그로 사용하거나 앞으로/뒤로 화살표에서 <a></a> 태그를 생략합니다. , 클릭하지 않고 필요한 스타일을 유지하도록 🎜
- «上一页
- 下一页»
🎜🎜🎜【크기】🎜🎜🎜Bootstrap 프레임워크에서는 버튼과 유사하게 두 가지 상황에서 크기를 설정할 수 있습니다. 🎜🎜1. "pagination-lg"를 사용하여 설정합니다. 페이지 매김 탐색이 더 커집니다🎜🎜2. 페이지 매김 탐색을 더 작게 만들려면 "pagination-sm"을 사용하세요🎜rrreee🎜
🎜🎜🎜🎜페이지 넘기기🎜🎜🎜🎜페이지 번호가 있는 페이지 탐색 기능을 제공하는 것 외에도 Bootstrap 프레임워크는 페이지 넘기기 탐색도 제공합니다. . 이러한 종류의 페이지 매김 탐색은 개인 블로그, 잡지 웹사이트 등과 같은 일부 간단한 웹사이트에서 흔히 볼 수 있습니다. 이러한 종류의 페이징 탐색은 특정 페이지 번호를 볼 수 없으며 "이전 페이지" 및 "다음 페이지" 버튼만 제공합니다🎜🎜🎜[기본 사용법]🎜🎜🎜실제 사용에서는 페이지 넘기기 페이징 탐색과 페이지 번호는 ul 태그🎜rrreee🎜
pager 클래스를 추가하세요. 446/ 728/1617241957632780.png" title="1617241957632780.png" alt="Bootstrap의 페이지 매김 구성 요소에 대해 자세히 알아보십시오."/>🎜🎜🎜【정렬 설정】🎜🎜🎜기본적으로 페이지 넘기기 내비게이션이 중앙에 표시되지만 가끔 우리는 왼쪽에 하나, 오른쪽에 하나가 있어야 합니다. 부트스트랩 프레임워크는 두 가지 스타일을 제공합니다: 🎜🎜학년: "이전" 버튼을 왼쪽에 두세요 🎜🎜학년: "다음" 버튼을 오른쪽에 두세요 🎜🎜 구체적으로 사용할 때는 li 태그에 추가하기만 하면 됩니다🎜🎜구현 원리는 매우 간단합니다. 즉, 하나는 왼쪽에 떠 있고 다른 하나는 오른쪽에 떠 있습니다🎜rrreeerrreee🎜<img src="https://img.php.cn%20/upload/image/971/735/953/1617241993540377.png" title="1617241993540377.png" alt="Bootstrap의 페이지 매김 구성 요소에 대해 자세히 알아보십시오.">🎜🎜🎜【상태 설정】 🎜🎜🎜 페이지 번호를 사용한 페이징 탐색과 동일합니다. 비활성화된 클래스 이름을 li 태그에 추가하면 페이징 버튼이 비활성화되지만 클릭 기능은 비활성화될 수 없습니다. js를 통해 처리하거나 <code class="marker">a 태그를 span 태그로 대체할 수 있습니다🎜rrreeerrreee🎜🎜🎜🎜더 많은 프로그래밍 관련 지식이 있으시면 🎜프로그래밍 비디오🎜를 방문하세요! ! 🎜위 내용은 Bootstrap의 페이지 매김 구성 요소에 대해 자세히 알아보십시오.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!