Bootstrap のページネーションコンポーネントの詳細については、こちらをご覧ください。-ブートストラップのチュートリアル-php.cn

Bootstrap のページネーションコンポーネントの詳細については、こちらをご覧ください。

青灯夜游

リリース： 2021-04-01 09:57:35

転載

3559 人が閲覧しました

ページングナビゲーションは、ほぼすべての Web サイトで見られます。優れたページングは、ユーザーに優れたユーザーエクスペリエンスをもたらします。この記事では、Bootstrap ページネーションについて詳しく説明します。一定の参考値があるので、困っている友達が参考になれば幸いです。

Bootstrap のページネーションコンポーネントの詳細については、こちらをご覧ください。

概要

Bootstrap フレームワークでは 2 種類のページングナビゲーションが提供されています。

☑ ページ番号付きのページングナビゲーション

☑ ページめくり付きのページングナビゲーション

ページ番号付きのページング

ページングページ番号付きナビゲーションは、ページングナビゲーションの最も一般的なタイプです。特にリストページに多くのコンテンツが含まれている場合、ユーザーにはページングナビゲーションメソッドが提供されます

[デフォルトのページング]

通常、多くの人は

p>a および p>span 構造を使用して、ページ番号付きのページングナビゲーションを作成することを好みます。ただし、Bootstrap フレームワークは ul>li>a のような構造を使用し、ul タグにページネーションメソッドを追加します:

<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 のページネーションコンポーネントの詳細については、こちらをご覧ください。 ##関連する推奨事項: "

bootstrap チュートリアル

[ステータス]

リンクはさまざまな状況でカスタマイズできます。クリックできないリンクには

.disabled

クラスを追加し、現在のページには .active クラスを追加できます。アクティブまたは無効を追加することをお勧めします。状態リンク (つまり、

<a>

タグ) を <span> タグで指定するか、前方/後方矢印の <a> タグを省略します。必要なスタイルが維持され、クリックできないようにするためです。<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><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></pre><div class="contentsignin">ログイン後にコピー</div></div>

Bootstrap のページネーションコンポーネントの詳細については、こちらをご覧ください。

[サイズ]

Bootstrap フレームワークでは、次のことができます。 2 つの異なるパスを渡しますボタンと同様に、状況に応じてサイズを設定します:

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 のページネーションコンポーネントの詳細については、こちらをご覧ください。

ページめくりページングナビゲーションを提供することに加えて、ページ番号に加えて、Bootstrap フレームワークはページナビゲーションも提供します。この種のページ分割されたナビゲーションは、個人のブログや雑誌 Web サイトなどの単純な Web サイトでよく見られます。この種のページングナビゲーションでは、特定のページ番号は表示されませんが、「前のページ」と「次のページ」ボタンが提供されるだけです。

#[デフォルトの使用法]

#実際にはページめくりのページングナビゲーションは、ページ番号を使用したページングナビゲーションに似ています。pager

クラスを ul タグ

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

ログイン後にコピー

Bootstrap のページネーションコンポーネントの詳細については、こちらをご覧ください。【に追加します。配置設定]

デフォルトでは、ページナビゲーションは中央に表示されますが、場合によっては、一方を左側に、もう一方を右側に表示する必要があります。 Bootstrap フレームワークには 2 つのスタイルが用意されています。

☑ 前へ: 「前へ」ボタンを左側にします

#☑ 次へ: 「次へ」ボタンを右側にします

具体的な用途現時点では、対応するクラス名を

タグに追加するだけです。

実装原理は非常に単純です。つまり、一方は左側にフロートし、もう一方はフローティングになります。右にフロートします<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">.pager .next > a, .pager .next > span { float: right; } .pager .previous > a, .pager .previous > span { float: left; }</pre><div class="contentsignin">ログイン後にコピー</div></div><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><ul class="pager"> <li class="previous"><a href="#">&larr;上一页</a></li> <li class="next"><a href="#">下一页&rarr;</a></li> </ul></pre><div class="contentsignin">ログイン後にコピー</div></div>

[ステータス設定] Bootstrap のページネーションコンポーネントの詳細については、こちらをご覧ください。

無効なクラス名がli タグに追加すると、ページングボタンは無効になりますが、そのクリック機能も無効にすることはできません。これは js を通じて処理することも、a タグを

span

tag<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">.pager .disabled > a, .pager .disabled >a:hover, .pager .disabled >a:focus, .pager .disabled > span { color: #999; cursor: not-allowed; background-color: #fff; }</pre><div class="contentsignin">ログイン後にコピー</div></div><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><ul class="pager"> <li class="disabled"><span>&laquo;上一页</span></li> <li><a href="#">下一页&raquo;</a></li> </ul></pre><div class="contentsignin">ログイン後にコピー</div></div><code class="marker">

に置き換えることもできます。プログラミング関連の知識について詳しくは、こちらをご覧ください。アクセス:

プログラミングビデオ Bootstrap のページネーションコンポーネントの詳細については、こちらをご覧ください。 ! ！