前の2つの記事では、基本的にはJSに関するものではなく、コンポーネントの使用方法についてのみ説明しています。このブログは、JSと組み合わせて議論する必要があります。
いくつかのコンポーネントを説明させてください
1。モーダルボックス
2。スクロール監視
3。タグページ
4。ツールチップ
5。ポップアップボックス
6。ボタン
7。スタッキング
8。回転ページ
9。サイドバー
最初にCSSとJSをインポートします
<link rel = "styleSheet" type = "text/css" href = "css/bootstrap.min.css"> <link rel = "stylesheet" href = "// cdn.bootcss.com/3.3.5/css/boottrap.min.csss" src = "js/jquery-3.1.0.min.js"> </script> <スクリプトsrc = "js/bootstrap.min.js"> </script>
1。モーダルボックス
通常、特定の規制をログインしたり読んだりするときにこのモーダルボックスを使用するため、モーダルボックスは非常に一般的です
最初にボタンを書き、モーダルボックスを開きます
<！ - データターゲットはモーダルボックスのIDであり、data-hatever = "@ime"は、渡すモーダルボックスのタグと値です - > <ボタンタイプ= "button" data-toggle = "modal" data-target = "＃mymodal" data-hatever = "@ime">
次に、モーダルボックスを書きます
<div id = "mymodal" role = "ダイアログ" aria-label = "mymodallabel" aria-hidden = "true"> <！ - これは小さなモーダルボックスです。モーダル-SMをモーダルLGに変更することは大きなモーダルボックスです - > <div> <！ - モーダルボックスヘッド - > <div> <！ - 右上隅のクローズボタン - > <ボタンタイプ= "data-dismiss =" mod-dismis = "modal" aria-label = "close"> <span aria-hidden = "true"> x </div </div <コンテンツ - > <div> <！ - モーダルフレームコンテンツはテキストまたはテーブルにすることができます - > <！ - <p> hello </p> - > <form> <div> <abow> username </label> <入力タイプ= "テキスト"> </div> <div> <ラベル> data-dismiss = "modal"> close </button> <button = "button"> save </button> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> div> div> </div> </div> </div> </div> </div> </div> div>
ボタンをクリックしてから、モーダルボックスのテーブルにパラメーターを渡すと
ボタン：値の属性にデータラベルを追加します
上記のデータ-hatever =”@ime”が例として追加されています。ラベルのパラメーターと@imeの値が追加されています。
以下はJS操作です
// method $（ "＃mymodal"） modal.find（ "。モーダルタイトル"）
2。スクロール監視
さまざまなコンテンツにスライドすると、タブページが変更されます
最初にボディ属性を書きます
<！ - オフセットは70に設定されています。この値はテストされた最高の値です - >
<body data-spy = "scroll" data-target = "。navbar" data-offset = "70">
次に、タブを書きます
<！ - タブバーに固定された表示されたコンテンツの上部 - > <nav role = "navigation"> <div> <div id = "myscrollspy"> <ul> <！ - タグの接続は以下のタイトルのIDです - > <li> <li> <li> "＃iwen"> iwen </a>タグのドロップダウンメニュー - > <li> <a href = "＃" data-toggle = "dropdown">ドロップダウンメニュー<span> </span> </a> <ul role = "> <li> <a href ="＃one "tabindex =" -1 "> one </a> </a> </li> < <li> <a href = "＃3" tabindex = "-1"> 3 </a> </li> </ul> </li> </li> </ul> </div> </div> </nav>
次に、コンテンツを書きます
<h2 id = "iwen">@iwen </h2> <p>これは人です</p> <h2 id = "ime">@ime </h2> <p> id = "2">@2 </h2> <p>これは人です。これは人です</p> <h2 id = "3">@3 </h2> <p>
効果がより明白になるように、コンテンツを長く書くことをお勧めします。ここにあまりにも多くの役に立たない言葉を書くのは便利ではありません。
JSメソッドをいくつか書くこともできます
// method $（ "＃myscrollspy"）。
3。タグページ
さまざまなタグをクリックして、異なるコンテンツを表示します
最初にタグバーを書きます
<ul id = "mytab"> <！ - タグリンクは、以下のタブペインのIDに対応します - > <li> <lif = "＃home" data-toggle = "tab"> home </a> </li> <li> <a href = "＃プロフィール" data-toggle = "tab"> </li> <a href = "＃"＃ "＃"＃ "＃" "href = data-toggle = "Dropdown">ドロップダウンメニュー<span> </span> </a> <ul role = "menu"> <！ - 通常のドロップダウンメニューとは異なり、data-toggle = "tab" - > <li> <a href = "＃one" tabindex = "-1" data-toggle = "tab "> data-toggle = "tab"> 2 </a> </li> </ul> </li> </li> </ul>
次に、さまざまなタグの内容を書きます
<div id = "mytabcontent"> <div id = "home"> <p> home </p> <div id = "profile"> <p>プロファイル</p> <div id = "one"> <p> one </p> <div id = "2"> <p> 2つの</p>
JSで表示されたタブページを初期化できます
タブページを選択する方法はいくつかあります
$（ '＃mytabs a [href = "＃profile"]'） （0が最初のものであるため）。ドロップダウンメニューのタブページの場合、番号は1で追加する必要があります。
4。ツールチップ
<p> <！ - タイトルコンテンツが空の場合、データオリジナルタイトルのコンテンツが表示されます。配置はディスプレイ位置で、下部|左|右|右 - > <！ - パラメーターをデータに設定できます - **** ---> <a data-animation = "false" id = "mytooltip" href = "＃" data-toggle = "Tooltip" data-placement = "bottom" bottom " </p>
その後、JSで初期化する必要があります。そうしないと、効果がありません
//ツールチップを初期化し、表示してください
$（ '[data-toggle = "tooltip"]'）。tooltip（）;
5。ポップアップボックス
ポップアップボックスはツールチップに似ていますが、ツールチップよりも豊富に表示され、より一般的に使用されています。
<！ - data-trigger = "foucus"ブランクをクリックして消えます。追加しない場合は、ボタンをクリックして消えます。ホバーするように設定すると、移動するボタンが表示されます。削除して消滅します - > <！ - このポップアップボックスのタイトルが付いており、コンテンツはコンテンツです - > <ボタンタイプ= "button" data-trigger = "foucus" data-clacement = "bottom" data-toggle = "Popover" data-content = "content">ポップアップボックス</button>
次に、JSで初期化します
//ポップオーバーを初期化します
$（ "。js-popover"）。popover（）;
6。ボタン
最初の2つの記事では、ボタンの基本スタイルについて説明しています。今回は高度で、ボタンがロード時に異なるテキストを表示できるようになります。
<！ - ロード時にボタンのテキストを設定できます - > <ボタンタイプ= "ボタン" data-loading-text = "loding for 3s"> loading status </button>
次に、JSを使用してクリックイベントをバインドします
//バインディングボタンのクリックイベント$（ "。js-loading-btn"））。
7。スタッキング
スタッキング効果は、多くのスクリーンコントロールを節約できますが、これは非常に実用的です
これは、ボタンをクリックしてスタックを開くことです
<！ - hrefはコンテンツのIDです - > <a data-toggle = "collapse" href = "＃collapsexample">クリックして表示</a> <div id = "collapseexample"> <div> hello </div> </div>
これはパネルグループのスタックです
<div id = "accordion" role = "tableist"> <div> <div role = "tab" headingone "> <！ - 表示済み - > <h4> <！ - data-parent data-parent-> <a data-toggle =" collaps "data-parent ="＃auctorion "href ="＃collaseone "非表示なし - > <div id = "collapseone" role = "tabpanel"> <div> hello <br> hello <br> hello <br> </div> </div> </div> <div role = "tab" headingtwo "> <h4> <h4> <h4> <h4> <h4> <h4> <h4> </h4> </div> <div id = "collapsetwo" role = "tabpanel"> <div> hello <br> hello <br> hello <br> </div> </div> </div> <div> <div div div div div "id" id = "headthree"> <h4> <a data-toggle = " </h4> </div> <div id = "collapseThree" role = "tabpanel"> <div> hello <br> hello <br> hello <br> </div> </div> </div> </div> </div> </div> </div>
8。回転ページ
ウェブサイトのホームページでよく見ることができます
<div id = "carousel-example-generic"> <！ - これはインジケーターの下の3つの白い円です - > <ol> <li data-target = "＃carousel-example-generic to =" 0 "> </li> <li data-target ="＃carousel-example-generic "data-slide =" data-target = "＃carousel-example-generic" data-slide-to = "2"> </li> </ol> <！ - 回転ページのコンテンツ - > <div> <img src = "images/4.jpg"> <！ - text-> <div> <h3> u3d </h3> <p> </p src = "images/2.jpg"> <div> <h3d </h3> <p>新製品の発売</p> </div> </div> <div> <img src = "images/3.jpg"> <div> <h3> apple </h3> <p> apple </p> href = "＃carousel-example-generic" data-slide = "prew"> <span> </span> </a> <a href = "＃carousel-example-generic" data-slide = "next"> </span> </a> </div>
間隔を設定して、JSで自動的に開始できます
//間隔を2sに設定し、自動的にCarousel $（ "。Carousel"）。Carousel（{interval：2000}）9。サイドバー
サイドバーの主なコンテンツはリストです
<！ - 幅を設定するには、電話画面に非表示に - > <div> <ul> <a href = "＃"> hello </a> <a href = "＃"> hello </a> <a href = "＃"> hello </a> <a href = "＃"> hello </a> <a href = " href = "＃">こんにちは</a> <a href = "＃"> hello </a> <a href = "＃"> hello </a> <a href = "＃"> hello </a> </ul> </div>
もう一度スタイルを書きます
<style> .affixed-element-top.affix { /*下部になりたい場合は、下部に変更できます：10px;* / top：10px; } .affixed-element-top.affix-bottom {position：relative; } </style>JSを追加します
$（ "。JS-Affixed-Element-Top"）。
これは、Boostrapの基本的な使用法です。マスターした後、良いWebページを作成できます。
上記はこの記事のすべての内容です。みんなの学習に役立つことを願っています。誰もがwulin.comをもっとサポートすることを願っています。