Bootstrapのカスタムデータの意味について教えてください(初心者です)

Question

前提・実現したいこと

カスタムデータを用いて、ハンバーガーメニューなどを簡単にBootstrapで開閉できたりするのは分かったのですが、その際のカスタムデータとその役割について詳しく知りたいです。

よくカスタムデータについて知らずにコードを書いていたので、ほぼ丸暗記でした。
この際に学んで、Bootstrapの理解をしっかりできたらと思いますm(__)m

該当のソースコード

<nav class="navbar navbar-expand-md navbar-light sticky-top">
    <div class="container-fluid">
      <a href="#" class="navbar-brand">
      <img src="../Bootstrap Youtube/img/logo.png">  
      </a>
      <Button class="navbar-toggler" data-toggler="collapse" data-target="#menu">
        <span class="navbar-toggler-icon"></span>
      </Button>
      <div class="collapse navbar-collapse" id="menu">
        <ul class="navbar-nav ml-auto">
          <li class="nav-item active"><a href="#" class="nav-link">Link</a></li>  
          <li class="nav-item"><a href="#" class="nav-link">Link</a></li>  
          <li class="nav-item"><a href="#" class="nav-link">Link</a></li>  
          </ul>
      </div>
    </div>  
  </nav>

知りたいこと

「data-toggler」、「data-target」
これらと「class」「id」がどういう関係で動いて、ハンバーガーメニューの動きを作っているのかを知りたいですm(__)m

またできれば、スライダーを作る際の以下のコードについても教えていただけると幸いですm(__)m
(「data-ride」 「data-target」「data-slide-to」とは？)

###該当のソースコード

div id="slides" class="carousel slide" data-ride="carousel">
  <ul class="carousel-indicators">
    <li data-target="#slides" data-slide-to="0" class="active"></li>  
    <li data-target="#slides" data-slide-to="1"></li>  
    <li data-target="#slides" data-slide-to="2"></li>  
  </ul>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="img/background.png">    
    </div>
    <div class="carousel-item">
      <img src="img/background2.png">  
    </div>
    <div class="carousel-item">
      <img src="img/background3.png">  
    </div>  
  </div>
</div>

Comments

[m.ts10806]

> (初心者です)
質問内に書くのではなく「初心者アイコン」をつけるだけで良いです。

Answer 1

ハンバーガーメニューはCollapseというBootstrapの機能で動いています。

data-toggler="collapse"
これが設定された要素が、開閉を操作するボタンになります。

data-target="#menu"
開閉操作する要素のセレクタを指定しています。

質問の例だと、data-toggler="collapse"が入っているからCollapseとして初期化されて、
開閉する部分はid="menu"を指しています。

参考：Collapse · Bootstrap

---

スライダーはCarouselという機能になります。

data-ride="carousel"
これが指定されることによって、ページのロードと同時にスライドを開始します。

data-target="#slides"
スライドのセレクタを指定しています。

data-slide-to
その要素が押したときにスライドの何番目に移動するかを指定します。数値は0から始まります

参考：Carousel · Bootstrap

---

Bootstrapはドキュメントが丁寧ですし、各機能のページにサンプルコードがあるので、参考になると思います。

https://getbootstrap.com/docs

Comments

[x_x]

質問内容にバージョンの指定はないので、リンク先は4.3のほうがいいのでは？

[s8_chu]

質問者さんが過去質問で挙げている参考動画から、質問者さんが使用している Bootstrap のバージョンは 4.0.0 ~ 4.1.x あたりだと推測出来るので、リンク先のページとして適切だと思います。
https://teratail.com/questions/189999
https://teratail.com/questions/189674

[Eggpan]

コメントありがとうございます。質問者さんのバージョンまでは細かく意識してなかったです。

検索で出てきたページが4.1でして、確かページ内でバージョンのプルダウンも選んだような・・と思ったら4.0と4.1のマニュアルページで、ヘッダのプルダウンが(Latest 4.1.ｘ)までしか表示されてないみたいで、勘違いしていしまいました。

後から見た人が古いリンクを辿ってしまって変な所でハマる、という事も考えられるので、4.3のリンクに差し替えさせていただきました。ありがとうございます。