iPadの効果と同じように、ページコンテンツに小さなオーバーレイを追加し、ページ要素に追加の情報を追加します。
プラグインの依存関係
ポップアップボックスはツールチッププラグインによって異なるため、最初にツールチッププラグインをロードする必要があります。
選択的添加関数
パフォーマンスに関する考慮事項のために、ツールチップとポップアップコンポーネントのデータ属性APIがオプションで追加されます。つまり、自分で初期化する必要があります。
ボタングループと入力ボックスグループでポップアップボックスを使用する場合、追加の設定が必要です
プロンプトボックスが.btn-groupまたは.input-groupと組み合わせて使用される場合、コンテナを指定する必要があります：「ボディ」オプション（下のドキュメントを参照）は、不要な副作用を避けます（たとえば、ポップアップボックスが表示されると、協力するページ要素が幅が広くなっているか、ラウンダウンが描かれている場合があります）。
禁止されているページ要素でポップアップボックスを使用する場合、それをラップアップするために追加の要素を追加する必要があります
ポップアップボックスを無効または障害のある要素に追加するには、<div>のポップアップボックスに追加する必要があるページ要素を包み、この<div>要素にポップアップボックスを適用します。
1。静的ケース
4オプションオプション：上、右、下、左のアレンジメント。
コードセグメント
.bs-example {border-color：#dd; Border-Radius：4px 4px 0 0;境界線：1px; Box-Shadow：なし;マージン左：0;マージン右：0;ボーダースタイル：ソリッド; } .bs-example-popover .popover {position：relative;表示：ブロック;フロート：左;幅：240px;マージン：20px; }<h1> 3。ポップアップボックス</h1> <div> <div> <div> </div> <h3>ポップオーバートップ</h3> <div> <p> sed posuere conectetur est at lobortis。 Aenean Eu Leo Quam。 Pellentessque Ornare sem lacinia quam venenatis vestibulum。 Aenean Eu Leo Quam。 Pellentessque Ornare Sem Lacinia Quam venenatis。 Aenean Eu Leo Quam。 Pellentessque Ornare Sem Lacinia Quam Venenatis Vestibulum。 Aenean Eu Leo Quam。 Pellentessque ornare sem lacinia quam venenatis vestibulum。 Aenean Eu Leo Quam。 Pellentesque Ornare Sem Lacinia Quam Venenatis Vestibulum。
プレビュー効果
コードスニペット：
<a href = "javascript：void（0）" id = "a_pop" data-clacement = "botto" data-content = "風と雨は白い馬に夢中になっている時間を過ごすようなものです。あなたはまだ若い手のひらに夢を抱いています。私たちは全世界から逸脱しています。風と明るい雪片は髪の毛を白く吹きます。あなたはかつてあなたは別れて永遠に一緒にいるべきではないと言っていました、そして今、私はあなたがただの幼稚なことわざであるかどうか尋ねたいと思います、罪のない年は若者を欺くために耐えられない。私はあなたに対応します。大雪は、私たちの存在の痕跡を消さないでください。大雪は私たちがお互いに与えるマークを消すことはできません。今夜、草は分離され、明るい月の夜は秋の風が来るのを待つために何千マイルものマイルを送ります。」data-Original-Title =「雨を沸騰させる時間 ">クリックして読みます</a>
<strong> js初期化：</strong> <script type = "text/javascript"> $（ "＃a_pop"）。popover（）; </script>
プレビュー効果：
配置が指定されている場合は、方向の問題に特に注意してください。トリガーイベント要素の中心でポップアップボックスがポップアップし始めるため、上書きされる可能性が高く、すべてを表示することはできません。
コードのAタグHREF属性は、リンク効果を削除するためにJavaScript：void（0）として指定する必要があります。
4つの方向：
コード
<a href = "javascript：void（0）" id = "a_pop1" data-clacement = "left" data-content = "風と雨は白い馬に追いつくために時間を費やすようなものです。 <a href = "javascript：void（0）" id = "a_pop2" data-clacement = "top" data-content = "私たちは分離すべきではないと言いました。 Data-Original-Title =「雨を沸騰させる時間 "> upper </a> <a href =" javascript：void（0） "a_pop3" data-content = "その年の真夏に作られた無限の願いを握り、私たちはあなたの川を越えて、私が尋ねると、私たちはあなたの川を越えて尋ねました。言葉。」 data-original-title = "雨を沸騰させる時間"> lower </a> <a href = "javascript：void（0）" a_pop4 "data-content =" loid live dece live us to youに住むことはできません。今夜、草は明るい月を離れ、来年に秋の風が上昇するのを待つためにあなたを送ります。 $（ "＃a_pop2"）。popover（）; $（ "＃a_pop3"）。popover（）; $（ "＃a_pop4"）。popover（）; </script>
プレビュー効果;
2。オプション
オプションは、データプロパティまたはJavaScriptを渡すことができます。データ属性の場合、data-animation = ""など、データの後にオプション名を配置する必要があります。
データプロパティを1つのポップアップボックスに適用します
単一のポップアップボックスの場合、上記のように、データプロパティを通じてオプションを個別に指定できます。
3。メソッド
$（）。ポップオーバー（オプション）
一連の要素のポップアップボックスを初期化します。
.popover（ 'show'）
ポップアップボックスを表示します。
$（ '＃要素'）。ポップオーバー（ 'show'）
.popover（ 'hide'）
ポップアップボックスを非表示にします。
$（ '＃要素'）。ポップオーバー（ '非表示'）
.popover（ 'Toggle'）
ポップアップボックスを表示または非表示にします。
$（ '＃要素'）。ポップオーバー（ 'トグル'）
.popover（ 'Destroy'）
ポップアップボックスを非表示にして破壊します。
$（ '＃要素'）。ポップオーバー（ 'Destroy'）
IV。イベント
$（ '＃mypopover'）。
それでも詳細に勉強したい場合は、ここをクリックして3つのエキサイティングなトピックを勉強して添付できます。
ブートストラップ学習チュートリアル
ブートストラップ実用的なチュートリアル
ブートストラッププラグインの使用チュートリアル
上記はこの記事に関するすべてです。誰もがブートストラップポップアップボックスを学び、マスターすることが役立つことを願っています。