ホームページ  >  記事  >  ウェブフロントエンド  >  ブートストラップ内のデータは何を意味しますか?

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

WBOY
WBOYオリジナル
2022-02-11 18:11:492987ブラウズ

ブートストラップでは、データとはカスタム属性を定義することを意味します。カスタム属性は通常、「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 はカルーセル カルーセルに使用されます。

関連する推奨事項:

ブートストラップ チュートリアル

以上がブートストラップ内のデータは何を意味しますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。