Bootstrap의 페이지 매김 구성 요소에 대해 자세히 알아보십시오.

페이징 탐색은 거의 모든 웹사이트에서 볼 수 있습니다. 좋은 페이징은 사용자에게 좋은 사용자 경험을 선사할 수 있습니다. 이 글에서는 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> 标签）替换为 <span> 标签，或者在向前/向后的箭头处省略<a> 标签，这样就可以让其保持需要的样式而不能被点击

<nav aria-label="Page navigation">
  <ul class="pagination">
    <li class="disabled">
      <span aria-label="Previous">
        <span aria-hidden="true">«</span>
      </span>
    </li>
    <li class="active"><span>1</span></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框架中，可以通过两种不同的情况来设置其大小，类似于按钮一样：

1、通过“pagination-lg”让分页导航变大

2、通过“pagination-sm”让分页导航变小

  

    

      
        «
      
    
    
1
    
2
    
3
    
4
    
5
    

      
        »
      
    
  


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


  

    

      
        «
      
    
    
1
    
2
    
3
    
4
    
5
    

      
        »
      
    
  

翻页

Bootstrap框架除了提供带页码的分页导航之外还提供了翻页导航。这种分页导航常常在一些简单的网站上看到，比如说个人博客，杂志网站等。这种分页导航是看不到具体的页码，只会提供一个“上一页”和“下一页”的按钮

【默认用法】

在实际使用中，翻页分页导航和带页码的分页导航类似，为ul标签加入pager类

<ul class="pager">
   <li><a href="#">&laquo;上一页</a></li>
   <li><a href="#">下一页&raquo;</a></li>
</ul>

【对齐设置】

默认情况之下，翻页分页导航是居中显示，但有的时候我们需要一个居左，一个居右。Bootstrap框架提供了两个样式：

☑ previous：让“上一步”按钮居左

☑ next：让“下一步”按钮居右

具体使用的时候，只需要在li标签上添加对应类名即可

实现原理很简单，就是一个进行了左浮动，一个进行了右浮动

.pager .next > a,
.pager .next > span {
float: right;
}
.pager .previous > a,
.pager .previous > span {
float: left;
}

<ul class="pager">
   <li class="previous"><a href="#">&larr;上一页</a></li>
   <li class="next"><a href="#">下一页&rarr;</a></li>
</ul>

【状态设置】

和带页码分页导航一样，如果在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> 태그)를 <span> 태그로 사용하거나 앞으로/뒤로 화살표에서 <a> 태그를 생략합니다. , 클릭하지 않고 필요한 스타일을 유지하도록 🎜

<ul class="pager">
  <li class="disabled"><span>&laquo;上一页</span></li>
  <li><a href="#">下一页&raquo;</a></li>
</ul>

🎜🎜🎜🎜【크기】🎜🎜🎜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 중국어 웹사이트의 기타 관련 기사를 참조하세요!