ブートストラップ内のデータは何を意味しますか?-ブートストラップのチュートリアル-php.cn

ブートストラップ内のデータは何を意味しますか?

WBOY

リリース： 2022-02-11 18:11:49

オリジナル

2999 人が閲覧しました

ブートストラップでは、データとはカスタム属性を定義することを意味します。カスタム属性は通常、「data-」で始まります。データ属性を適用すると、HTML タグで暗黙的にデータを添付できるようになり、JavaScript でこれらの属性に対して読み取りおよび書き込み操作を実行できます。データ。

ブートストラップ内のデータは何を意味しますか?

このチュートリアルの動作環境: Windows 10 システム、ブートストラップバージョン 3.3.7、DELL G3 コンピューター

ブートストラップのデータの意味

【1 data-attribute】

data 属性は HTML5 の新しい属性です。開発者はタグに属性を自由に追加してデータを保存することができ、そのようなカスタム属性は通常「data-」で始まります。

保存された (カスタム) データは、ページの JavaScript によって取得および利用できます。

data-* 属性は 2 つの部分で構成されます:

* 属性名には大文字を含めることはできません。プレフィックスの後に少なくとも 1 文字が必要です。 "データ-"。
#* 属性値には任意の文字列を指定できます。

端的に言うと、これはデータ属性の適用です。そのため、HTML タグは暗黙的にデータを添付でき、JavaScript はこれらの属性データを読み書きできるため、次のことができます。対応するアクションとイベントを生成します。

[Bootstrap の 2 つのデータ属性]

公式 Web サイトには、記述せずにデータ属性 API だけですべての Bootstrap プラグインを使用できるとの紹介があります。 JavaScript コードの行。これは Bootstrap のファーストクラス API であり、最初に選択する必要があります。

これまでネイティブ javascrpt を使用していたときは、まずフロントエンドスタイルのレイアウトと必要なインタラクティブイベントを決定し、次に JavaScript と HTML DOM ツリーを使用して既存のテキストオブジェクトを操作して動的な効果などを実現していました。交流。

その後 Facebook は、ドロップダウンメニュー、折りたたみ、モーダルボックスなど、多くの基本的な Web ページ効果が一般的に使用され、頻繁に使用されていることを発見しました。これらのよく使われるものを標準モデルに抽出し、使用ルールを策定し、使用するときはそのルールに従って直接使用するだけでよいのではないかということで、Bootstrap が誕生しました。

つまり、以前は機能要件が最初にあり、それを実装していました。これで基本的な関数は網羅され、js関連の操作関数が記述され、cssスタイルも記述されたので、使用したい場合はルールに従って直接呼び出すだけです。次に、より多様性を持たせるために、Bootstrap.js の関数にはさまざまなパラメータ値を設定できます。これらのパラメータ値は、タグに指定した属性に従って設定されます。 (実際、現在、さまざまな Java クラスライブラリと同様に、JS プラグインは基本的にこのルーチンに従います)

タグの class="xxx" 属性は、主にブートストラップの CSS スタイル

# を使用するために使用されます。 ## および識別可能なオブジェクト object のクラス名として識別されます。

タグの data-[xx]="yy" 属性は、主にブートストラップコンポーネントとプラグインの使用と呼び出しに使用されます。つまり、bootstrap.js を使用して何らかの対話型効果を実現します。

[3 ブートストラップ共通データ属性]

1 data-toggle

data-toggle は、トリガーされるイベントタイプ、一般的に使用されるイベントタイプを指します。以下の通り。

data-toggle="dropdown"//下拉菜单
data-toggle="model" //模态框事件
data-toggle="tooltip"//提示框事件
data-toggle="tab"//标签页
data-toggle="collapse"//折叠
data-toggle="popover"//弹出框
data-toggle="button"//按钮事件

ログイン後にコピー

一般イベントはラベルオブジェクトに影響します。別のラベルオブジェクトの場合は、data-target を使用してイベントのラベルターゲットを参照する必要があります。そのため、data-loggle と data-target が一緒に使用されることがあります。以下のように

<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
    开始演示模态框
</button>
<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
                code。。。
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>

ログイン後にコピー

2 data-dismiss

モーダルウィンドウを閉じるためにモーダルウィンドウでよく使用されます data-dismiss="modal"

3 data-slide-to, data -slide、data-ride

data-slide-to、data-slide、data-ride はカルーセルカルーセルに使用されます。