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

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

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

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

【1 data-attribute】

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

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

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

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

• #* 属性値には任意の文字列を指定できます。

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

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

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

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 サイトの他の関連記事を参照してください。