【Bootstrapその⑧】Components系のカスタムⅤ～ページ遷移系の機能3選～【学習積み上げ】
引き続き、Bootstrapの学習を積み上げています、マサです。
今回はページ遷移時に使える便利機能のカスタマイズについてまとめました。
ページ遷移の定義としては、そのページ内で他のリンクボタンを押したときのデザインや、スクロール時に使えるちょっとした機能のことです。
正直、前回のナビ系と似たところもあるので、一緒にしてまとめるか迷いましたが、、
量が多くなりすぎるのと、ヘッダーに使えそうなのが前回のかなあという理由から3つずつに分けてます。
あるかないかは少しの違いでしかありませんが、最近のホームページやブログなんかではよく見かけるものですので、サクッと覚えて使えるようになっておきたいです。
それでは、早速いきましょう！
Components系のカスタム
ページ遷移系の便利機能
Pagination
まずはいつもどおり一例からです。
ページ系というだけあって、こんなものがあります。
Pagination
Pagination(ページネーション)についてのドキュメントと例です。ページネーションの使い方の例を示します。
公式より
このPaginationとは、ページ割りという意味です。
内部コンテンツの量が多くなってきたときにページ分けして、1ページ内に含む量を少なくしてくれるやつですね。
ページ分けするメリットしては、一回の読み込み時間を分散できてページ表示が早くなったり、スクロールが少なくて済むのでユーザーの利便性が上がるといったところでしょう。
これはブログもそうですが、特にECサイトなんかでは有効で、商品量＝写真が多くなるのでページ分けして読み込みを早くすることで、ユーザーの直帰率を下げることに繋がりますね。
Bootstrapのものを使うとこんな感じです。
<nav aria-label="Page navigation example"> <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> </nav>
公式では、aria-labelをつけることを推奨してますので、つけています。
あとは、class名にpagenationとpage-itemをつけてあげればOKですね。
割と簡単にできます。
また、矢印をアイコンに変えたり、activeを追加することで開いているページを明示することもできます。
<nav aria-label="Page navigation example"> <ul class="pagination"> <li class="page-item"> <a class="page-link" href="#"> <i class="fas fa-angle-left"></i> </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="#"> <i class="fas fa-arrow-alt-circle-right"></i> </a> </li> </ul> </nav>
font-awesomeのタグを入れるだけでちょっとしたデザインもできるのはいいですね。
こういったページ遷移系に関する他の機能はあと2つあります。
Scrollspy(スクロールスパイ)とSpinners(スピナー)です。
Scrollspy
Scrollspyはスクロールに合わせてアクティブな状態を表示してくれるものです。
こんな感じです。
使うにはこの動画のように前回やったNavbarなどと併用して使う必要があります。
コードは、
<nav id="navbar-example2" class="navbar navbar-dark bg-dark"> <a class="navbar-brand" href="#">Navです</a> <ul class="nav nav-pills"> <li class="nav-item"> <a class="nav-link" href="#morning">おはよう</a> </li> <li class="nav-item"> <a class="nav-link" href="#hello">こんにちは</a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">メニュー</a> <div class="dropdown-menu"> <a class="dropdown-item" href="#one">one</a> <a class="dropdown-item" href="#two">two</a> <div role="separator" class="dropdown-divider"></div> <a class="dropdown-item" href="#three">three</a> </div> </li> </ul> </nav> <div class="scroll-list" data-spy="scroll" data-target="#navbar-example2" data-offset="0"> <h4 id="morning">おはよう</h4> <p>朝です。...</p> <h4 id="hello">こんにちは</h4> <p>お昼です。...</p> <h4 id="one">one</h4> <p>111...</p> <h4 id="two">two</h4> <p>222...</p> <h4 id="three">three</h4> <p>333...</p> </div> </div>
Navbarにするので初めにnav>ul>liの階層にします。
ボタン系でも触れたDropdownも使っています。
nav#navbar~の記述が終わったら、div.data-spy="scroll" data-target="#navbar-example2"を記述します。これが必須です。
id属性できちんと紐付けてあげることでスクロールが反応します。
ここまではほぼコピペでも大丈夫ですが、追加でスタイルを当ててあげないとこれが反応しません。
上記のHTMLに追加したスタイルは、これです。
.scroll-list { position: relative; max-height: 200px; overflow-y: auto; }
div.data-spy="scroll" data-target="#navbar-example2"が記述してあるdivに.scroll-listというclass名(これは何でもいい)を追加して、position: relative;とheightとoverflow-yを追加してます。
bodyに直接scrollspyを機能させるのではなくコンテンツとして入れるなら、heightとoverflow-yとrelativeを追加しないとこの動画のようにスクロールやアクティブな色の変化自体が機能しませんので注意してくださいね。
詳しい内容は公式に書いてありますので参考にご覧ください。
Spinners
Spinnersはページ遷移系というのには語弊があるかもしれないですが、ロード中の画面に使えるものです。
シンプルで実装しやすいですし、基本的にはJavascriptもいらないのでコードも短いです。
<div class="spinner-border my-5" role="status"></div> <div class="spinner-grow my-5" role="status"></div>
2種類の動きがあります。くるくる回るのはborder、ふわっと成長するのがgrow。
アップで動画にしたので画質が荒くて申し訳ないです。。
色やサイズも変更可能です。公式はコチラ。
Spinners - Bootstrap 4.4 - 日本語リファレンス
