Latest web development tutorials
×

Bootstrap コース

Bootstrap コース Bootstrap 簡単な紹介 Bootstrap 設置環境

Bootstrap CSS

Bootstrap CSS 概要 Bootstrap グリッド方式 Bootstrap 組版 Bootstrap コード Bootstrap テーブル Bootstrap フォーム Bootstrap プッシュボタン Bootstrap 絵 Bootstrap 補助クラス Bootstrap レスポンシブユーティリティ

Bootstrap レイアウトコンポーネント

Bootstrap フォントのアイコン Bootstrap ドロップダウンメニュー Bootstrap ボタングループ Bootstrap ボタンのドロップダウンメニュー Bootstrap 入力ボックスグループ Bootstrap ナビゲーション要素 Bootstrap ナビゲーションバー Bootstrap パン粉 Bootstrap ページング Bootstrap ラベル Bootstrap バッジ Bootstrap 大画面 Bootstrap ページタイトル Bootstrap サムネイル Bootstrap 警告 Bootstrap プログレスバー Bootstrap マルチメディアオブジェクト Bootstrap 一覧グループ Bootstrap パネル Bootstrap Wells

Bootstrap ウィジェット

Bootstrap プラグインの概要 Bootstrap 転移効果 Bootstrap モーダルボックス Bootstrap ドロップダウンメニュー Bootstrap スクロールモニター Bootstrap タブ Bootstrap ツールヒント Bootstrap ポップアップボックス Bootstrap 警告ボックス Bootstrap プッシュボタン Bootstrap 折り畳みます Bootstrap 回転木馬 Bootstrap 追加のナビゲーション

Bootstrap 他の

Bootstrap UI エディタ Bootstrap V2 コース Bootstrap HTML コーディング規約 Bootstrap CSS コーディング規約

プラグインの概要ブートストラップ

前のセクションでは、それはほんの始まりに過ぎないアセンブリへのコンポーネントのレイアウトを議論しました。 ブートストラップは、jQueryのプラグインが機能をよりインタラクティブサイトに追加することができます拡張する12種類が付属しています。 あなたは、高度なJavaScriptの開発者でなくても、あなたはまた、ブートストラップJavaScriptのプラグインを学ぶために始めることができます。 使用ブートストラップデータAPI(ブートストラップデータAPI)、プラグインのほとんどは、任意のコードを記述せずにトリガすることができます。

サイトは、2つの方法でブートストラッププラグインを参照します:

  • 単独の引用:ブートストラップの別々の*の.jsファイルを使用しています。一部のプラグインやCSSコンポーネントは、他のプラグインに依存します。 あなたは別個の基準を接続した場合、彼らはプラグイン間の依存関係を理解し​​ておいてください。
  • 使用bootstrap.jsまたはbootstrap.min.jsの圧縮バージョン:(同時に)引用をコンパイルします。
    bootstrap.jsのbootstrap.min.jsはすべてのプラグインが含まれているため、これらの2つのファイルを引用しようとしないでください。
すべてのプラグインはjQueryのに依存しています。 あなたはjQueryの前にプラグインファイル内で参照する必要があります。 訪問bower.jsonブートストラップにはjQueryの現在サポートされているバージョンを表示します。

特性データ

  • あなただけのJavaScriptコードを1行も記述せずに、ブートストラッププラグインAPIを属性データのすべてを使用することができる場合があります。 これは、あなたの好ましい方法であるべきで、ファーストクラスのブートストラップAPIです。
  • その後、再び、いくつかのケースでは、この機能をオフにする必要があるかもしれません。 したがって、我々はまた、すなわち、データ-APIの名前空間を持ち上げ、文書イベントに結合するために、閉じられたデータ属性APIメソッドを提供します。 次のような:
    $(ドキュメント).off( '。データ-API」)
    
  • ここに示されているように、単にデータ-APIの名前空間に加えて名前空間としてウィジェットの名前の前に、特定のプラグインを閉じるには:
    $(ドキュメント).off( '。Alert.data-API」)
    

プログラムAPI

我々は、すべてのブートストラップのプラグインのための純粋なJavaScriptのAPIへの道を提供します。 (:フォームとjQuery契約を呼び出す注)すべてのパブリックAPIコールを個別にサポートまたはモードを連鎖し、それが動作する要素の集合を返しています。 例えば:

$( "。Btn.danger」)。ボタン(「トグル」)。AddClass(「脂肪」)

すべてのメソッドは、オプションのオプションを取ることができ、次のように、(この場合には、それはデフォルトの動作用のプラグインを初期化します)パラメータ、または特定のメソッドを表す文字列として、またはパラメータなしでオブジェクト:

// $( "#myModal」)のデフォルトの動作に初期化されます。モーダル()    
 //初期化キーボードは$( "#myModal」)モーダル({:偽キーボード})をサポートしていません。  
//初期化し、すぐにショーを呼び出します
$( "#MyModal」)。モーダル( 'ショー')                

$ .fn.popover.Constructor:各プラグインコンストラクタ特性にも元のコンストラクタを公開しています。 あなたが特定のウィジェットのインスタンスを取得したい場合は、ページ要素を介して直接取得することができます。

 $( '[のRel =ポップオーバー]')。データ(「ポップオーバー」)。

名前空間の衝突を避けます

時々、ブートストラップのプラグインは、他のUIフレームワークで使用する必要があるかもしれません。 この場合、名前空間の衝突が発生する可能性があります。 この問題が発生した場合は残念ながら、あなたは、ウィジェット.noConflictメソッドを呼び出すことにより、元の値を復元することができます。

//)(割り当てられた値のVAR bootstrapButton = $ .fn.button.noConflict前に$ .fn.buttonを返します。 
// $()のために。BootstrapBtn機能は、ブートストラップを授与しました					       
$ .fn.bootstrapBtn = BootstrapButton            

イベント

ブートストラップは、ほとんどのプラグインのユニークな行動などのカスタムイベントを提供します。 一般的に、これらのイベントは、2つの形式があります。

  • 不定詞:イベントが始まるときにトリガされます。このようなのように:ショー。不定詞のイベントはのpreventDefault機能を提供します。 これは、イベントが開始する前に、動作を停止することができます。
    $( '#のMyModal')。オン( 'show.bs.modal'、関数(e)の{
    //防ぎモーダルボックスが表示されているか(!データ)(e.preventDefaultを返します) 
    })
    
  • 過去分詞形:操作が完了した後、これがトリガされます。このような例:示します。