Bootstrap4の使い方まとめ

事前に、タグの直前に、scriptタグで、jquery.js　popper.js、bootstrap.jsの順番に読み込めるようにして、その後に自分独自のJavaScriptが読み込まれるようにする。

Modal

■クリックした時にモーダルを表示する
任意のボタンをクリックした時に、モーダルが出現するようにします。Modalの一番外側であるid属性のexampleModalを利用して、
■JavaScript側

$(function(){
  $(document).on('click','#btn',function(){
    $('#exampleModal').modal('show');
  });
});

■HTML側

<button id="btn">モーダルの表示</button>

<!-- ModalのコードをHTMLに書いておく -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<!-- Modalのコードがここに入る -->
</div>

●BootstrapのModalで用意されているイベント
show.bs.modal - 表示しようとするとすぐに発生するイベント
shown.bs.modal - 表示完了したタイミングで発生するイベント
hide.bs.modal - 消そうとするとすぐに発生するイベント
hidden.bs.modal - 消去完了したタイミングで発生するイベント

参考リンク
Modal · Bootstrap

Carousel

・カルーセルをスライドさせたときに発生するイベントがBootstrapには組み込まれていて、それを利用して、いろんな値を取得することができます。例えば、fromは、現在、表示しているスライドの番号、toは、クリックした先のスライドの番号をそれぞれ取得します。

$('#carouselExampleIndicators').on('slide.bs.carousel',function(e){
  console.log('現在の番号:' + e.from + ' 次の番号:' + e.to);
});

参考リンク
Carousel · Bootstrap

Tooltip

■自分独自のJavaScript側(仮に、main.js)

$(function(){
  $('[data-toggle="tooltip"]').tooltip();
});

■HTML側

<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">
  Tooltip on bottom
</button>