Erfahren Sie mehr über die Paginierungskomponente in Bootstrap

Paging-Navigation ist auf fast jeder Website zu sehen. Gutes Paging kann den Benutzern ein gutes Benutzererlebnis bieten. Dieser Artikel gibt Ihnen eine detaillierte Einführung in die BootstrapPaginierung. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird für alle hilfreich sein. „Übersicht“ bietet zwei Arten der Seitennavigation im Bootstrap-Framework:

Die Paging-Navigation mit Seitenzahlen ist möglicherweise die häufigste Art der Paging-Navigation. Insbesondere wenn die Listenseite viel Inhalt enthält, bietet sie Benutzern eine Paging-Navigationsmethode Verwenden Sie die Strukturen p>a und p>span, um eine paginierte Navigation mit Seitenzahlen zu erstellen. Im Bootstrap-Framework wird jedoch eine Struktur wie ul>li>a verwendet und die Paginierungsmethode zum ul-Tag hinzugefügt:

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

Verwandte Empfehlungen: "Bootstrap Tutorial》

【Status】

Links können unter verschiedenen angepasst werden Umstände. Sie können die Klasse .disabled zu Links hinzufügen, die nicht angeklickt werden können, und die Klasse .active zur aktuellen Seite hinzufügen

Am besten fügen Sie aktive oder deaktivierte Links hinzu ( d. h. <a></a>-Tag) mit dem <span></span>-Tag, oder lassen Sie das <a></a>-Tag an den Vorwärts-/Rückwärtspfeilen weg , damit es den erforderlichen Stil beibehält, ohne anklickbar zu sein

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

【Größe】

Im Bootstrap-Framework kann die Größe in zwei verschiedenen Situationen festgelegt werden, ähnlich wie bei Schaltflächen:

1. Verwenden Sie zum Festlegen „pagination-lg“. die Größe Die Paginierungsnavigation wird größer

2. Verwenden Sie „pagination-sm“, um die Paginierungsnavigation zu verkleinern

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

p>a和p>span结构来制作带页码的分页导航。不过，在Bootstrap框架中使用的是ul>li>a这样的结构，在ul标签上加入pagination方法：

   
• «上一页
   
• 下一页»

相关推荐：《bootstrap教程》

【状态】

链接在不同情况下可以定制。可以给不能点击的链接添加 .disabled 类、给当前页添加 .active 类

最好将 active 或 disabled 状态的链接（即 <a></a> 标签）替换为 <span></span> 标签，或者在向前/向后的箭头处省略<a></a> 标签，这样就可以让其保持需要的样式而不能被点击

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

【尺寸】

在Bootstrap框架中，可以通过两种不同的情况来设置其大小，类似于按钮一样：

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

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

   
• ←上一页
   
• 下一页→

翻页

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

【默认用法】

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

.pager .disabled > a,
.pager .disabled >a:hover,
.pager .disabled >a:focus,
.pager .disabled > span {
  color: #999;
  cursor: not-allowed;
  background-color: #fff;
}

【对齐设置】

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

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

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

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

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

  
• «上一页
  
• 下一页»

rrreee

【状态设置】

和带页码分页导航一样，如果在li标签上添加了disabled类名的时候，分页按钮处于禁用状态，但同样不能禁止其点击功能。可以通过js来处理，或将a标签换成span

Seitenumblättern

Neben der Seitennavigation mit Seitenzahlen bietet das Bootstrap-Framework auch Seitennavigation. Diese Art der paginierten Navigation kommt häufig auf einigen einfachen Websites vor, beispielsweise auf persönlichen Blogs, Zeitschriften-Websites usw. Diese Art der Seitennavigation kann die spezifische Seitennummer nicht sehen und stellt nur die Schaltflächen „Vorherige Seite“ und „Nächste Seite“ bereit Die Seitenzahl ist ähnlich. Fügen Sie die Klasse pager zum ul-Tag hinzu🎜rrreee🎜🎜🎜🎜【Ausrichtungseinstellungen】🎜🎜🎜Standardmäßig wird die Seitennavigation in der Mitte angezeigt, aber manchmal Wir müssen Einer links und einer rechts sein. Das Bootstrap-Framework bietet zwei Stile: 🎜🎜☑ Vorheriger: Lassen Sie die Schaltfläche „Zurück“ auf der linken Seite. 🎜🎜☑ Nächster: Lassen Sie die Schaltfläche „Weiter“ auf der rechten Seite. 🎜🎜 Wenn Sie es speziell verwenden, müssen Sie nur li hinzu🎜🎜Das Implementierungsprinzip ist sehr einfach, das heißt, einer schwebt nach links und der andere nach rechts🎜rrreeerrreee🎜🎜🎜🎜【Statuseinstellungen】 🎜🎜🎜 ist dasselbe wie die Paging-Navigation mit Seitenzahlen. Wenn der Name der deaktivierten Klasse zum li-Tag hinzugefügt wird, ist die Paging-Schaltfläche deaktiviert, ihre Klickfunktion kann jedoch nicht deaktiviert werden. Es kann über js verarbeitet werden oder das Tag a durch das Tag span ersetzen🎜rrreeerrreee🎜🎜🎜🎜Mehr programmierungsbezogen Wissen, besuchen Sie bitte: 🎜Programmiervideos🎜! ! 🎜

Das obige ist der detaillierte Inhalt vonErfahren Sie mehr über die Paginierungskomponente in Bootstrap. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!