ポップオーバー - プロ 成分
iOSで見られるようなBootstrapポップオーバーをあなたのサイトのあらゆる要素に追加するためのドキュメントと例。
静的ポップオーバー
上、右、下、左揃えの4つのオプションがあります。
Popover top
Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
Popover right
Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
Popover bottom
Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
Popover left
Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
ライブデモ
<button type="button" class="btn btn-lg btn-danger" data-toggle="popover" data-container="body" data-original-title="Popover Title" data-content="And here's some amazing content. It's very engaging. Right?" data-color="primary">Click to toggle popover</button>
四方
次のクリックで閉じる
ユーザーがトグル要素とは異なる要素を次にクリックしたときにポップオーバーを閉じるには、 focus
トリガーを使用します。
次のクリックで非表示に必要な特定のマークアップ
適切なクロスブラウザおよびクロスプラットフォームの動作のためには、 <a>
タグを使用し、_not_は <button>
タグを使用し、[tabindex
](https://developer.mozillaを含める必要があります .org / en-US / docs / Web / HTML / Global_attributes / tabindex)属性。
<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-toggle="popover" data-trigger="focus" title="Dismissible popover" data-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>
あなたがより多くの例と特性を見たいと思うならば、公式をチェックしてください Bootstrap Documentation.