Bootstrapでポップオーバーを表示する
ポップオーバーとは、アクションをすることで補足説明などを表示させることのできる機能です。
たとえばフォームの各項目の横にある［？］リンクなどをクリックすると、その項目についての説明が出てきたりしますね。
コンパクトに表示したいけれども、説明は省きたくない箇所に便利です。
利用方法
ポップオーバーを利用したいページには下記のJavaScriptを記述します。
ポップオーバー用JavaScript
<script language="javascript">
$("a[data-toggle=popover]").popover()
</script>
利用したい部分に下記のような記述を行います。
ポップオーバー表示用ソース
<a href="javascript:void(0);" data-toggle="popover" data-html="true" data-placement="bottom" data-title="Aipo.comのSプランに登録します。" data-content="このプランでは期間やユーザー数など無制限に、完全無料でご利用いただけます。" data-original-title="" title="">この登録により何ができますか？</a>
ポップオーバー表示イメージ
ポップオーバーをクリックして表示したイメージ
ポップオーバーには設定が必須な項目と、さまざまなオプション項目があります。
| data-toggle="popover" | ポップオーバー表示にする指定をします。 |
|---|---|
| data-title="" | ポップオーバーに表示するタイトル |
| data-content="" | ポップオーバーに表示する内容 |
| data-html="" | ポップオーバー内でhtmlを利用可能にするかどうかを設定します。利用可能にする場合は"true"に設定します。何も設定しない場合はデフォルトの"false"となります。 |
|---|---|
| data-placement="" | ポップオーバーを表示したい位置をtop | bottom | left | rightから指定します。何も設定しない場合はデフォルトの"right"となります。 |
| data-trigger="" | click | hover | focus | manual から、何をすることでポップオーバーを表示するかを指定します。何も設定しない場合はデフォルトの"click"となります。 |
周囲をクリックでポップオーバーを閉じる場合の指定
data-trigger="focus"を追加することで、もう一度リンクをクリックすること無く、どこか別の場所をクリックすることでポップオーバーを閉じることができます。
周囲をクリックでポップオーバーを閉じる
<a href="javascript:void(0);" data-toggle="popover" data-trigger="focus" data-html="true" data-placement="bottom" data-title="これは何ですか？" data-content="詳細な説明やリンクをこの中に記入することができます。<br />画面上のどこかをクリックすることでポップオーバーを閉じることができます。" data-original-title="" title="">このリンクをクリックすると説明が表示されます</a>
hoverでポップオーバーを表示する場合の指定
data-trigger="hover"を追加することで、要素に触れるだけでポップオーバーを表示することができます。
hoverでポップオーバーを表示する
<a href="javascript:void(0);" data-toggle="popover" data-trigger="hover" data-html="true" data-placement="bottom" data-title="これは何ですか？" data-content="詳細な説明やリンクをこの中に記入することができます。<br />こちらは要素に触れてる間のみ表示されます。" data-original-title="" title="">このリンクに触れることで説明が表示されます</a>
ポップオーバーのタイトルデザインを変更する
また、data-title部分には.popover-titleというクラスが付与されるため、以下のように指定することでbootstrapで指定されたcssを上書きすることができます。
追加CSS
.popover .popover-title {
background: none;
border-bottom: none !important;
margin: 0 !important;
padding: 10px 14px 0 !important;
font-weight:bold;
}
追加CSS適用後のポップオーバータイトル
Bootstrapでアコーディオンを表示する
アコーディオンは開閉式の表示方法です。
FAQや、ナビゲーション・メニューを作成するときなどに役立ちます。
下記の記述をすることで利用できます。
アコーディオン表示用ソース
<!--アコーディオンブロック--> <div class="panel-group" id="accordion"> <!--アコーディオン要素--> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne"> アコーディオンタイトル 1 </a> </h4> </div> <div id="collapseOne" class="panel-collapse collapse in"> <div class="panel-body"> アコーディオン内容 1の親要素のpanel-collapse collapseと一緒にinを指定することで、最初から開いた状態で表示させることもできます。 </div> </div> </div> <!--/アコーディオン要素--> <!--アコーディオン要素--> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo"> アコーディオンタイトル 2 </a> </h4> </div> <div id="collapseTwo" class="panel-collapse collapse"> <div class="panel-body"> アコーディオン内容 2<br> アコーディオン内容 2<br> アコーディオン内容 2<br> アコーディオン内容 2<br> アコーディオン内容 2 </div> </div> </div> <!--/アコーディオン要素--> <!--アコーディオン要素--> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree"> アコーディオンタイトル 3 </a> </h4> </div> <div id="collapseThree" class="panel-collapse collapse"> <div class="panel-body"> アコーディオン内容 3<br> アコーディオン内容 3<br> アコーディオン内容 3<br> アコーディオン内容 3<br> アコーディオン内容 3 </div> </div> </div> <!--/アコーディオン要素--> </div> <!--/アコーディオンブロック-->
アコーディオン表示（初期表示）
アコーディオン表示（アコーディオンタイトル2を開いた場合）
標準状態だとタイトルでテキスト部分のみしか押せないため、以下のcssを追加することで、タイトル部分全体を押せるようにします。
追加CSS
.panel-title a {
display:block;
}
さいごに
Bootstrapを利用することでWebサイトの作成はぐっと簡単になります。0からHTMLを勉強するよりもBootstrapを利用しながらWebサイトを作成してみることで、HTMLへの理解度もグッとあがります。
この他にも、Bootstrapを利用することでさまざまな機能を簡単に実現できますので、ぜひ色々と試してみてくださいね。
