Bootstrapがダウンロードおよびインストールされた後、D：/nodejs/node_modules/bootstrap/jsに12のJSファイルを見つけることができます。これらのJSファイルは、ブートストラップに付属する12のjQueryプラグインです。また、d：/nodejs/node_modules/bootstrap/dist/jsでbootstrap.jsおよびbootstrap.min.jsを見つけることもできます。両方のファイルには、12のjQueryプラグインが含まれています。
これらの12のjQueryプラグインの中で、最も一般的に使用されるのは、Picture Carousel.js、タグスイッチングTab.js、スクロールリスニングScrollspy.js、Dropdown List Dropdown.js、モジュールボックスポップアップレイヤーModal.js 、およびプロンプトボックスTooltip.jsです。
（i）carousel.jsの画像
画像Carouselは、必要に応じてCSSで画像サイズ、位置などを設定できます。
Image Carouselでは、jquery.min.jsおよびcarousel.jsの導入が必要です。またはtransition.jsを導入して、遷移効果を追加できます。
<div> <div> <div> <！ - data-ride = "carousel"属性は、ページが読み込まれたときにアニメーション再生を開始するカルーセルをマークするために使用されます - > <div data-ride = "carousel" id = "carousel-332839"> <ol> <li li data-slide-to = "0"＃carousel-332839 "> </</</</< data-slide-to = "1" data-target = "＃carousel-332839"> </li> <li data-slide-to = "2" data-target = " <p> cras justo odio、dapibus ac Facilisis in、egestas eget quam。 donec id elit non mi porta gravida at eget metus。 nullam id dolor id nibh ultricies behicula ut id elit。 </p> </div> </div> <div> <img src = "images/Decert.jpg"/> <div> <h4> 2番目のサムネイルラベル</h4> <p> cras justo odio、dapibus ac facilisis、egstas eget quam。 donec id elit non mi porta gravida at eget metus。 nullam id dolor id nibh ultricies behicula ut id elit。 </p> </div> </div> <div> <img src = "images/hydrangeas.jpg"> <div> <h4> 3番目のサムネイルラベル</h4> <p> cras justo odio、dapibus acilisis in、egstas eget quam。 donec id elit non mi porta gravida at eget metus。 nullam id dolor id nibh ultricies behicula ut id elit。 </p> </div> </div> </div> <a href = "＃carousel-332839" data-slide = "prev"> <span> </span> </a> <a href = "＃carousel-332839" data-slide = "next"> </span> </div> div> </div> </div> </div>
（ii）タグスイッチングtab.js
タグの切り替えには、jquery.min.jsおよびtab.jsの導入が必要です。またはtransition.jsを導入して、遷移効果を追加できます。
<div> <div> <div> <div id = "tabs-440751"> <ul> <li> <a href = "＃panel-1" data-toggle = "tab">セクション1 </a> </li> <li> <a href = "＃パネル2" data-toggle = "tab">セクション2 </p> </div> <div id = "panel-2"> <p>私はセクション2にいます。
（iii）scrollspy.jsとドロップダウンリストDropdown.jsを聞くスクロール
スクロールとドロップダウンリストを組み合わせて、ドロップダウンリストでスクロールしてリスニングできるナビゲーションバーを作成します。
スタイルを設定する必要があります。この例のスタイルは次のとおりです。
.a、.b {height：500px;幅：100％;}。b {background-color：white;}。a {background-color：black;}jquery.min.js、dropdown.js、scrollspy.jsを紹介する必要があります。
<body data-spy = "scroll" data-target = "＃navbarexample"> <div> <div> <div> <div> <div id = "navbarexample"> <div> <button = "button" data-toggle = "collapse"＃bs-example-navbar-collaps-1 "> <span> <span>ナビゲーション</span> <span> </span> <span> </span> <span> </span> </span> </button> <a href = "＃"> brand </a> </div> <div div div div div-navbar-collapse-1 "> <ul> <li> <a href =" href = "＃2"> link </a> </li> <li> <a href = "＃3" data-toggle = "dropdown">ドロップダウン</strong> </a> <ul> <li> <a href = "> action </a> </a> </li> <li> <a href ="ここ</a> </li> <li> <a href = "＃">分離リンク</a> </li> <li> <a href = "＃">分離リンク</a> </li> <li> <a href = "> 1つの分離リンク</a> </a> </li> </ul> <button type = "submit">送信</button> </form> <ul> <li> <a href = "＃4"> link </a> </li> <li> <a href = "＃5" date-toggle = "dropdown">ドロップダウンアクション</a> </li> <li> <a href = "＃">ここに何か他の何か</a> </li> <li> </li> <li> <a href = "＃">分離リンク</a> </li> </li> Data-Target = "＃navbarexample"> - > <div> <div id = "1"> </div> <div id = "2"> </div> <div id = "3"> </div> <div> <div> <div> <div> div = "5"> </div> </div> </div> div> </div> </div> </div> </div> div> div> div> div> div> div> </div> </div> </body> </html>
（iv）モーダルフレームポップアップレイヤーModal.js
jquery.min.jsおよびmodal.jsを導入する必要があります。または、transition.jsを導入して遷移効果を追加できます。
<div> <div> <a id = "modal-732948" href = "＃modal-container-732948" role = "button" data-toggle = "modal"> lurne demo modal </a> <div id = "modal-container-732948" "let dialog =" aria-labelledby = "mira-labelledby =" mira-labelledby = "myrabelledby =" myrabelledby " <div> <div> <ボタンタイプ= "button" data-dismiss = "modal" aria-hidden = "true">×</button> <h4 id = "mymodallabel">モーダルタイトル</h4> </div> <div> ... </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> div> div> </div> </div> </div> </div> </div> </div> </div> </div>
（v）プロンプトボックスTooltip.js
jquery.min.jsおよびtooltip.jsを導入する必要があります。または、transition.jsを導入して遷移効果を追加する必要があります。
また、ツールチッププラグインは他のプラグインとは異なり、純粋なCSSプラグインではありません。このプラグインを使用するには、jQueryを使用してアクティブにする必要があります。
$（function（）{$（ "[data-toggle = 'tooltip']"）。tooltip（）;}）; <ボディスタイル= "パディング：100px;" > <a href = "＃" data-toggle = "tooltip">デフォルトのツールチップ</a> <br/> <a href = "＃" data-toggle = "data-clacement =" left ">左側のツールチップ</a> <br/> <a href ="＃ "＃" data-toggle = "data-placement" <br/> <a href = "＃" data-toggle = "tooltip" data-clacement = "bottom">下部のツールチップ</a> <br/> <a href = "＃" data-toggle = "tooltip" data-placement = "right">右のツールチップ</a> <br/> <ボタンタイプ= "dation <br/> <ボタンタイプ= "ボタン" data-toggle = "tooltip" data-clacement = "left">左側のツールチップ</button> <br/> <ボタンタイプ= "button" data-toggle = "tooltip" data-clacement = "top"> tooltip at the top </button> <br/> <button = "button"> "button"> "DataToggle" DataToggle "The Tooltip下</button> <br/> <button type = "button" data-toggle = "tooltip" data-clacement = "right">右のツールチップ</button> </body>素晴らしいトピックの共有：jQueryの写真カルーセルjavascript写真カルーセルブートストラップ写真カルーセル
それでも詳細に勉強したい場合は、ここをクリックして3つのエキサイティングなトピックを勉強して添付できます。
ブートストラップ学習チュートリアル
ブートストラップ実用的なチュートリアル
ブートストラップテーブルの使用チュートリアル
この記事は「Bootstrapプラグイン使用チュートリアル」にまとめられており、誰もが学習して読むことを歓迎します。
上記はこの記事のすべての内容です。みんなの学習に役立つことを願っています。誰もがwulin.comをもっとサポートすることを願っています。