Boostrapは、次のような12のJavaScriptプラグインを提供します。
アニメーションの移行
モーダルモーダル
ドロップダウンメニュー
scrollspy
タブ
プロンプトボックスツールチップ
ポップオーバー
警告ボックスアラート
ボタン
崩壊
ロータリーカルーセル
フロート接辞を自動的に配置します
モーダルポップアップウィンドウ
<div> <div> div> <div> <ボタンタイプ= "ボタン" data-dismiss = "modal" aria-hidden = "true">×</button> <h4>モーダルタイトル</h4> </div> <div> <p> data-dismiss = "modal"> save </button> </div> </div> </div>
プルダウンメニュー
宣言的な使用
通常、ドロップダウンメニューは、ナビゲーションバー（Navbar）とタブ（タブ）に実装されています。
<div id = "nav-example"> <a href = "＃">プロジェクト名</a> <ul role = "navigation"> <li> <a data-toggle = "dropdown" botton "href ="＃ "id =" drop1 ">ドロップダウン<b> </b> </a> href = "＃" tabindex = "-1" role = "menuitem"> action1 </a> </li> <li role = "presention"> <a href = "＃" tabindex = "-1" chore = "menuitem"> action2 </a> </li> <li chole = "presention"> <a hreautem " </li> </ul> </li> <li> <a data-toggle = "dropdown" role = "button" href = ""＃ "drop2"> dropdown2 <b> </b> </a> <ul aria-labelledby = "drop2" lole = "menu"> <li = "presention> < </li> <liロール= "プレゼンテーション"> <a href = "＃" tabindex = "-1" role = "menuitem"> action5 </a> </li> <li rolie = "href ="＃ "tabindex =" -1 "role =" menuitem "> action6 </a> </li> </li> </li> </ul> </ul>
タブ
<％ - ナビゲーションバータブ - ％> <ul> <li> <a href = "＃home" data-toggle = "tab"> home </a> </li> <li> <a href = "＃プロファイル" data-toggle = "tab">プロファイル</a> </li> <li> <a href = "＃メッセージhref = "＃settings" data-toggle = "tab"> settings </a> </li> </ul> <％ - タブパネル - ％> <div> <div id = "home"> home ... </div> <div = "プロファイル">プロファイル... </div> <div id = "メッセージ">メッセージ...
プロンプトボックス
<ボタンDATA-ORIGINAL-TITLE = "ToolTip on Left" data-toggle = "Tooltip" data-clacement = "left">左のツールチップ</button> <ボタンdata-original-tip = "data-original-tip" data-toggle = "tooltip" data-clacement = "top"> top> <ボタン> <ボタン> <ボタン> <ボタン> data-toggle = "tooltip" data-clacement = "bottom">下のツールチップ</button> <button data-original-title = "tooltip on bottom" data-toggle = "tooltip" data-clacement = "bottom"> bottom </button> <button data-original-tip = "Tooltip" "Tooltip" "Tooltip" data-toggle = "tooltip" data-clacement = "right"> tooltip </button>
警告ボックス
<div> <ボタンData-mismiss = "alert" type = "button"> x </button> <h4>警告タイトル</h4> <p>これを変更して、それを試してみてください。 </p> </div>
折り畳み
<div id = "accordion"> <div> <div> <h4> <a data-toggle = "collapse" data-parent = "＃accordion" href = "＃accordion">トリガー要素＃1 </a> </h4> </div> div id = "collapseone"> <div> foldコンテンツ...... </div> div> </div> </div
カルーセルの回転
<div data-ride = "carouse1" id="container"><%-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- data-slide-to = "2" data-target = "＃container"> </li> </ol> <％ - 左と左のコントロールボタン - ％> <a data-slide = "href ="＃container "> </span> </a> <a data-slide =" "href ="
上記は、編集者が紹介した基本的なブーツストラップチュートリアルのJavaScriptプラグインの章です。それがあなたに役立つことを願っています。ご質問がある場合は、メッセージを残してください。編集者は時間内に返信します。 wulin.comのウェブサイトへのご支援ありがとうございます！