■カード：card：コンポーネント：基本的な使用例 divでcard、card-body、imgでcard-img-top、pでcard-title、card-text
<!-- カードの枠：card -->
<div class="card" style="max-width: 25rem;">
<!-- カード上部にレイアウトされる画像：card-img-top -->
<img class="card-img-top" src="https://via.placeholder.com/318x180/FFFF00/000000?text=img" alt="...">
<!-- カード本文：card-body -->
<div class="card-body">
<!-- カードタイトル：card-title -->
<h4 class="card-title">カードのタイトル</h4>
<!-- カードの内容文：card-text -->
<p class="card-text">カードの内容</p>
<a href="#" class="btn btn-primary">ボタン</a>
</div>
</div>
■カード：card：コンポーネント：カードデッキによるレイアウトcard-deck
カード01
カードの内容
カード02
カードの内容
カード03
カードの内容
カードの内容
<div class="card-deck">
<!-- カード01 -->
<div class="card">
<img class="card-img-top" src="https://via.placeholder.com/318x180/FFFF00/000000?text=.card-img-top" alt="...">
<div class="card-body">
<h4 class="card-title">カード01</h4>
<p class="card-text">カードの内容</p>
</div>
<div class="card-footer">
<small class="text-muted">カードのフッター</small>
</div>
</div>
<!-- カード02 -->
<div class="card">
<img class="card-img-top" src="https://via.placeholder.com/318x180/FFFF00/000000?text=.card-img-top" alt="...">
<div class="card-body">
<h4 class="card-title">カード02</h4>
<p class="card-text">カードの内容</p>
</div>
<div class="card-footer">
<small class="text-muted">カードのフッター</small>
</div>
</div>
<!-- カード03 -->
<div class="card">
<img class="card-img-top" src="https://via.placeholder.com/318x180/FFFF00/000000?text=.card-img-top" alt="...">
<div class="card-body">
<h4 class="card-title">カード03</h4>
<p class="card-text">カードの内容</p>
<p class="card-text">カードの内容</p>
</div>
<div class="card-footer">
<small class="text-muted">カードのフッター</small>
</div>
</div>
</div>
■カード：card：コンポーネント：カードグループによるレイアウト card-group
カード01
カードの内容
カード02
カードの内容カードの内容
カード03
カードの内容
カードの内容
<div class="card-group">
<!-- カード01 -->
<div class="card">
<img class="card-img-top" src="https://via.placeholder.com/318x180/FFFF00/000000?text=.card-img-top" alt="...">
<div class="card-body">
<h4 class="card-title">カード01</h4>
<p class="card-text">カードの内容</p>
</div>
<div class="card-footer">
<small class="text-muted">カードのフッター</small>
</div>
</div>
<!-- カード02 -->
<div class="card">
<img class="card-img-top" src="https://via.placeholder.com/318x180/FFFF00/000000?text=.card-img-top" alt="...">
<div class="card-body">
<h4 class="card-title">カード02</h4>
<p class="card-text">カードの内容カードの内容</p>
</div>
<div class="card-footer">
<small class="text-muted">カードのフッター</small>
</div>
</div>
<!-- カード03 -->
<div class="card">
<img class="card-img-top" src="https://via.placeholder.com/318x180/FFFF00/000000?text=.card-img-top" alt="...">
<div class="card-body">
<h4 class="card-title">カード03</h4>
<p class="card-text">カードの内容</p>
<p class="card-text">カードの内容</p>
</div>
<div class="card-footer">
<small class="text-muted">カードのフッター</small>
</div>
</div>
</div>
■カード：card：コンポーネント：カードカラムによるレイアウト card-columns
カード01
ここに文章が入ります
カード02
ここに文章が入ります
カード03
ここに文章が入ります
ここに文章が入ります
カード04
ここに文章が入ります
カード05
ここに文章が入ります
この文章はダミーです。
カード07
ここに文章が入ります
カード08
ここに文章が入ります
ここに文章が入ります
<div class="card-columns">
<!-- カード01 -->
<div class="card"> <img class="card-img-top" src="https://via.placeholder.com/640x480/FFFF00/000000?text=.card-img-top" alt="...">
<div class="card-body">
<h4 class="card-title">カード01</h4>
<p class="card-text">ここに文章が入ります</p>
</div>
</div>
<!-- カード02 -->
<div class="card p-3">
<blockquote class="blockquote mb-0 card-body">
<p>カード02</p>
<p>ここに文章が入ります</p>
<footer class="blockquote-footer"> <small class="text-muted"> ここに文章が入ります </small> </footer>
</blockquote>
</div>
<!-- カード03 -->
<div class="card"> <img class="card-img-top" src="https://via.placeholder.com/640x480/FFFF00/000000?text=.card-img-top" alt="...">
<div class="card-body">
<h4 class="card-title">カード03</h4>
<p class="card-text">ここに文章が入ります</p>
<p class="card-text"><small class="text-muted">ここに文章が入ります</small></p>
</div>
</div>
<!-- カード04 -->
<div class="card bg-secondary text-white text-center p-3">
<blockquote class="blockquote mb-0">
<p>カード04</p>
<p>ここに文章が入ります</p>
<footer class="blockquote-footer"> <small> ここに文章が入ります </small> </footer>
</blockquote>
</div>
<!-- カード05 -->
<div class="card text-center">
<div class="card-body">
<h4 class="card-title">カード05</h4>
<p class="card-text">ここに文章が入ります</p>
<p class="card-text"><small class="text-muted">この文章はダミーです。</small></p>
</div>
</div>
<!-- カード06 -->
<div class="card"> <img class="card-img" src="https://via.placeholder.com/640x480/FFFF00/000000?text=Card 06" alt="..."> </div>
<!-- カード07 -->
<div class="card p-3 text-right">
<blockquote class="blockquote mb-0">
<p>カード07</p>
<p>ここに文章が入ります</p>
<footer class="blockquote-footer"> <small class="text-muted"> この文章はダミーです。 </small> </footer>
</blockquote>
</div>
<!-- カード08 -->
<div class="card">
<div class="card-body">
<h4 class="card-title">カード08</h4>
<p class="card-text">ここに文章が入ります</p>
<p class="card-text"><small class="text-muted">ここに文章が入ります</small></p>
</div>
</div>
</div>
■カード：card：コンポーネント：カードに画像を配置する card-img-top card-img-bottom
カードの内容
カードの内容
<!-- カード上部に画像を配置：card-img-top -->
<div class="card mb-3" style="max-width: 25rem;">
<img class="card-img-top" src="https://via.placeholder.com/318x180/FFFF00/000000?text=.card-img-top" alt="...">
<div class="card-body">
<p class="card-text">カードの内容</p>
</div>
</div>
<!-- カード下部に画像を配置：card-img-bottom -->
<div class="card" style="max-width: 25rem;">
<div class="card-body">
<p class="card-text">カードの内容</p>
</div>
<img class="card-img-bottom" src="https://via.placeholder.com/318x180/FFFF00/000000?text=.card-img-bottom" alt="..."> </div>
</div>
■カード：card：コンポーネント：カードの画像とテキストを重ね合わせる card-img-overlay
<div class="card">
<img class="card-img" src="https://via.placeholder.com/960x450/FFFF00/000000?text=card-img" alt="...">
<div class="card-img-overlay">
<h4 class="card-title">カードのタイトル</h4>
<p class="card-text">カードの内容</p>
</div>
</div>
■カード：card：コンポーネント：カード内にコンテンツを複合する
<div class="card" style="max-width: 25rem;">
<img class="card-img-top" src="https://via.placeholder.com/318x180/FFFF00/000000?text=.card-img-top" alt="Card image cap">
<div class="card-body">
<h4 class="card-title">カードのタイトル</h4>
<p class="card-text">カードの内容</p>
</div>
<!-- カード内のリストグループ：list-group-flush -->
<ul class="list-group list-group-flush">
<li class="list-group-item">リスト01</li>
<li class="list-group-item">リスト02</li>
<li class="list-group-item">リスト03</li>
</ul>
<!-- カードの本文：card-body -->
<div class="card-body">
<a href="#" class="card-link">カード内リンク</a>
<a href="#" class="card-link">カード内リンク</a>
</div>
</div>
■幅、高さ：Sizing：ユーティリティ：最大高を指定するクラス mh-100
<img class="mh-100" src="https://via.placeholder.com/318x180/FFFF00/000000?text=img" alt="">
■幅、高さ：Sizing：ユーティリティ：最大幅を指定するクラス mw-100
<img class="mw-100" src="https://via.placeholder.com/318x180/FFFF00/000000?text=img" alt="">
■ディスプレー：Display：ユーティリティ：Embedユーティリティ 埋め込みクラス アスペクト比 16:9
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" allowfullscreen></iframe>
</div>
■親要素でフロートを解除する：Clearfix：ユーティリティ：Floatクラス float-left float-right clearfixはあってもなくても同じみたい
<div class="clearfix">
<img src="https://via.placeholder.com/200x200" class="float-left" alt="左寄せ画像">
<img src="https://via.placeholder.com/200x200" class="float-right" alt="右寄せ画像">
</div>
■図表キャプション：figure：図表の基本的なスタイリング
<figure class="figure">
<img src="https://via.placeholder.com/400x300/FFFF00/000000?text=img" class="figure-img img-fluid" alt="図表コンテンツ内の画像">
<figcaption class="figure-caption">図表キャプション</figcaption>
</figure>
■図表キャプション：figure：図表キャプション：左寄せ（デフォルト）
<figure class="figure">
<img src="https://via.placeholder.com/400x300/FFFF00/000000?text=img" class="figure-img img-fluid" alt="図表コンテンツ内の画像">
<figcaption class="figure-caption text-left">図表キャプション左寄せ（デフォルト）（text-left：デフォルト）</figcaption>
</figure>
■図表キャプション：figure：図表キャプション：中央寄せ
<figure class="figure">
<img src="https://via.placeholder.com/400x300/FFFF00/000000?text=img" class="figure-img img-fluid" alt="図表コンテンツ内の画像">
<figcaption class="figure-caption text-center">図表キャプション中央寄せ（text-center）</figcaption>
</figure>
■図表キャプション：figure：図表キャプション：右寄せ
<figure class="figure">
<img src="https://via.placeholder.com/400x300/FFFF00/000000?text=img" class="figure-img img-fluid" alt="図表コンテンツ内の画像">
<figcaption class="figure-caption text-right">図表キャプション右寄せ（text-right）</figcaption>
</figure>
■レスポンシブ画像：img：：レスポンシブ画像（img-fluid）
<img src="https://via.placeholder.com/710x250/FFFF00/000000?text=img" class="img-fluid" alt="レスポンシブ画像">
■レスポンシブ画像：img：：Spacingユーティリティークラスを使用した配置例 mx-auto d-block
<img src="https://via.placeholder.com/200x200" class="mx-auto d-block" alt="中央寄せ画像">
■レスポンシブ画像：img：：Textユーティリティークラスを使用した配置例 text-center
<div class="text-center">
<img src="https://via.placeholder.com/200x200" alt="中央寄せ画像">
</div>
■レスポンシブ画像：img：：サムネイル画像 img-thumbnail
<img src="https://via.placeholder.com/200x200" alt="サムネイル画像" class="img-thumbnail">
■メディアオブジェクト：media：メディアオブジェクトmedia-bodyは画像と説明を配置すること
タイトル
ここに文章が入ります <div class="media">
<img class="mr-3" alt="" src="https://via.placeholder.com/60x60/FFFF00/000000?text=img">
<div class="media-body">
<h5>タイトル</h5>
ここに文章が入ります
</div>
</div>
■メディアオブジェクト：media：メディアオブジェクトの上部に画像を配置
タイトル
ここに文章が入りますここに文章が入りますここに文章が入りますここに文章が入りますここに文章が入りますここに文章が入りますここに文章が入りますここに文章が入ります <div class="media">
<img class="align-self-start mr-3" alt="" src="https://via.placeholder.com/120x120/FFFF00/000000?text=img">
<div class="media-body">
<h5>タイトル</h5>
ここに文章が入りますここに文章が入りますここに文章が入りますここに文章が入りますここに文章が入りますここに文章が入りますここに文章が入りますここに文章が入ります
</div>
</div>
■メディアオブジェクト：media：メディアオブジェクト：並べ替え order
タイトル
HTMLの構造上、画像を先に、メディア本文を後に記述していますが、order-*クラスを使用して表示上の順序を入れ替えています。 <div class="media">
<img class="order-2 ml-3" alt="" src="https://via.placeholder.com/60x60/FFFF00/000000?text=img">
<div class="media-body order-1">
<h5>タイトル</h5>
HTMLの構造上、画像を先に、メディア本文を後に記述していますが、order-*クラスを使用して表示上の順序を入れ替えています。
</div>
</div>
■メディアオブジェクト：media：ulリストにメディアオブジェクト
-
タイトル
ここに文章が入ります -
タイトル
ここに文章が入ります -
タイトル
ここに文章が入ります
<ul class="list-unstyled">
<li class="media mb-4">
<img class="mr-3" src="https://via.placeholder.com/60x60/FFFF00/000000?text=img" alt="">
<div class="media-body">
<h5>タイトル</h5>
ここに文章が入ります
</div>
</li>
<li class="media mb-4">
<img class="mr-3" src="https://via.placeholder.com/60x60/FFFF00/000000?text=img" alt="">
<div class="media-body">
<h5>タイトル</h5>
ここに文章が入ります
</div>
</li>
<li class="media mb-4">
<img class="mr-3" src="https://via.placeholder.com/60x60/FFFF00/000000?text=img" alt="">
<div class="media-body">
<h5>タイトル</h5>
ここに文章が入ります
</div>
</li>
</ul>
■メディアオブジェクト：media：メディアオブジェクトの入れ子media-bodyの中にさらにmedia
タイトル
ここに文章が入りますここに文章が入ります子のタイトル
ここに文章が入りますここに文章が入ります <div class="media">
<img class="mr-3" alt="" src="https://via.placeholder.com/60x60/FFFF00/000000?text=img">
<div class="media-body">
<h5>タイトル</h5>
ここに文章が入りますここに文章が入ります
<div class="media mt-3">
<a href="#"><img class="mr-3" alt="" src="https://via.placeholder.com/60x60/FFFF00/000000?text=img"></a>
<div class="media-body">
<h5>子のタイトル</h5>
ここに文章が入りますここに文章が入ります
</div>
</div>
</div>
</div>
■ナビゲーションバー：navbar：コンポーネント：a要素内に画像を使用したブランド
<nav class="navbar navbar-dark bg-dark">
<a class="navbar-brand" href="#">
<img src="img/bootstrap-solid.svg" width="30" height="30" alt="">
</a>
</nav>
■ナビゲーションバー：navbar：コンポーネント：a要素内に画像とテキストを使用したブランド
<nav class="navbar navbar-dark bg-dark">
<a class="navbar-brand" href="#">
<img src="img/bootstrap-solid.svg" width="30" height="30" class="d-inline-block align-top" alt="">
Bootstrap
</a>
</nav>
■カルーセル回転木馬：carousel：JavaScript：カルーセル基本的な使用例
<div class="container">
<div class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<!-- First slide -->
<div class="carousel-item active">
<img class="d-block w-100" alt="First slide" src="https://via.placeholder.com/1600x900/FFFF00/000000?text=First slide">
</div>
<!-- Second slide -->
<div class="carousel-item">
<img class="d-block w-100" alt="Second slide" src="https://via.placeholder.com/1600x900/FFFF00/000000?text=Second slide">
</div>
<!-- Third slide -->
<div class="carousel-item">
<img class="d-block w-100" alt="Third slide" src="https://via.placeholder.com/1600x900/FFFF00/000000?text=Third slide">
</div>
</div>
</div>
</div>
■カルーセル回転木馬：carousel：JavaScript：タイトル、キャプション付きカルーセル
<div id="carouselSample" class="carousel slide" data-ride="carousel">
<!-- インジケーター部分 -->
<ol class="carousel-indicators">
<li data-target="#carouselSample" data-slide-to="0" class="active"></li>
<li data-target="#carouselSample" data-slide-to="1"></li>
<li data-target="#carouselSample" data-slide-to="2"></li>
</ol>
<!-- カルーセル部分 -->
<div class="carousel-inner">
<!-- First slide -->
<div class="carousel-item active">
<img class="d-block w-100" alt="slide" src="https://via.placeholder.com/1600x900/666666/FFFF00/000000?text=First slide">
<!-- キャプション -->
<div class="carousel-caption d-none d-md-block">
<h5>スライドタイトル</h5>
<p>スライドのキャプション文</p>
</div>
</div>
<!-- Second slide -->
<div class="carousel-item">
<img class="d-block w-100" alt="slide" src="https://via.placeholder.com/1600x900/666666/FFFF00/000000?text=Second slide">
<!-- キャプション -->
<div class="carousel-caption d-none d-md-block">
<h5>スライドタイトル</h5>
<p>スライドのキャプション文</p>
</div>
</div>
<!-- Third slide -->
<div class="carousel-item">
<img class="d-block w-100" alt="slide" src="https://via.placeholder.com/1600x900/666666/FFFF00/000000?text=Third slide">
<!-- キャプション -->
<div class="carousel-caption d-none d-md-block">
<h5>スライドタイトル</h5>
<p>スライドのキャプション文</p>
</div>
</div>
</div>
<!-- コントローラー部分 -->
<!-- 前に戻るアイコン -->
<a class="carousel-control-prev" href="#carouselSample" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">前に戻る</span>
</a>
<!-- 次に送るアイコン -->
<a class="carousel-control-next" href="#carouselSample" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">次に送る</span>
</a>
</div>
■カルーセル回転木馬：carousel：JavaScript：前と次のアイコン付きカルーセル
<section>
<div class="container">
<div id="carouselControls" class="carousel slide" data-ride="carousel">
<!-- カルーセル部分 -->
<div class="carousel-inner">
<!-- First slide -->
<div class="carousel-item active">
<img class="d-block w-100" alt="First slide" src="https://via.placeholder.com/1600x900/FFFF00/000000?text=First slide">
</div>
<!-- Second slide -->
<div class="carousel-item">
<img class="d-block w-100" alt="Second slide" src="https://via.placeholder.com/1600x900/FFFF00/000000?text=Second slide">
</div>
<!-- Third slide -->
<div class="carousel-item">
<img class="d-block w-100" alt="Third slide" src="https://via.placeholder.com/1600x900/FFFF00/000000?text=Third slide">
</div>
</div>
<!-- コントローラー部分 -->
<!-- 前に戻るアイコン -->
<a class="carousel-control-prev" href="#carouselControls" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">前に戻る</span>
</a>
<!-- 次に送るアイコン -->
<a class="carousel-control-next" href="#carouselControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">次に送る</span>
</a>
</div>
</div>
</section>
■カルーセル回転木馬：carousel：JavaScript：インジケーターによるフェード遷移（好きな場所にクリックでいける）
<div class="container">
<div id="carouselSample2" class="carousel slide carousel-fade" data-ride="carousel">
<!-- インジケーター部分 -->
<ol class="carousel-indicators">
<li data-target="#carouselSample2" data-slide-to="0" class="active"></li>
<li data-target="#carouselSample2" data-slide-to="1"></li>
<li data-target="#carouselSample2" data-slide-to="2"></li>
</ol>
<!-- カルーセル部分 -->
<div class="carousel-inner">
<!-- First slide -->
<div class="carousel-item active">
<img class="d-block w-100" alt="slide" src="https://via.placeholder.com/1600x900/666666/FFFF00/000000?text=First slide">
<!-- キャプション -->
<div class="carousel-caption d-none d-md-block">
<h5>スライドタイトル</h5>
<p>スライドのキャプション文</p>
</div>
</div>
<!-- Second slide -->
<div class="carousel-item">
<img class="d-block w-100" alt="slide" src="https://via.placeholder.com/1600x900/666666/FFFF00/000000?text=Second slide">
<!-- キャプション -->
<div class="carousel-caption d-none d-md-block">
<h5>スライドタイトル</h5>
<p>スライドのキャプション文</p>
</div>
</div>
<!-- Third slide -->
<div class="carousel-item">
<img class="d-block w-100" alt="slide" src="https://via.placeholder.com/1600x900/666666/FFFF00/000000?text=Third slide">
<!-- キャプション -->
<div class="carousel-caption d-none d-md-block">
<h5>スライドタイトル</h5>
<p>スライドのキャプション文</p>
</div>
</div>
</div>
<!-- コントローラー部分 -->
<!-- 前に戻るアイコン -->
<a class="carousel-control-prev" href="#carouselSample2" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">前に戻る</span>
</a>
<!-- 次に送るアイコン -->
<a class="carousel-control-next" href="#carouselSample2" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">次に送る</span>
</a>
</div>
</div>
■カルーセル回転木馬：carousel：JavaScript：イベント：slid.bs.carousel
<div class="container">
<div id="carouselExample" class="carousel slide">
<!-- インジケーター部分 -->
<ol class="carousel-indicators">
<li data-target="#carouselExample" data-slide-to="0" class="active"></li>
<li data-target="#carouselExample" data-slide-to="1"></li>
<li data-target="#carouselExample" data-slide-to="2"></li>
</ol>
<!-- カルーセル部分 -->
<div class="carousel-inner">
<!-- First slide -->
<div class="carousel-item active"> <img class="d-block w-100" alt="slide" src="https://via.placeholder.com/1600x900/666666/FFFF00/000000?text=First slide">
<!-- キャプション -->
<div class="carousel-caption">
<h5>スライドタイトル</h5>
<p>スライドのキャプション文</p>
</div>
</div>
<!-- Second slide -->
<div class="carousel-item"> <img class="d-block w-100" alt="slide" src="https://via.placeholder.com/1600x900/666666/FFFF00/000000?text=Second slide">
<!-- キャプション -->
<div class="carousel-caption">
<h5>スライドタイトル</h5>
<p>スライドのキャプション文</p>
</div>
</div>
<!-- Third slide -->
<div class="carousel-item"> <img class="d-block w-100" alt="slide" src="https://via.placeholder.com/1600x900/666666/FFFF00/000000?text=Third slide">
<!-- キャプション -->
<div class="carousel-caption">
<h5>スライドタイトル</h5>
<p>スライドのキャプション文</p>
</div>
</div>
</div>
<!-- コントローラー部分 -->
<!-- 前に戻るアイコン -->
<a class="carousel-control-prev" href="#carouselExample" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">前に戻る</span>
</a>
<!-- 次に送るアイコン -->
<a class="carousel-control-next" href="#carouselExample" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">次に送る</span>
</a>
</div>
</div>
<script>
$('#carouselExample').on('slide.bs.carousel', function () {
$('#carouselExample .carousel-caption').hide();
});
$('#carouselExample').on('slid.bs.carousel', function () {
$('#carouselExample .carousel-caption').show();
});
</script>
■カルーセル回転木馬：carousel：JavaScript：インジケーター付きカルーセル
<div class="container">
<div id="carouselIndicators" class="carousel slide" data-ride="carousel">
<!-- インジケーター部分 -->
<ol class="carousel-indicators">
<li data-target="#carouselIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselIndicators" data-slide-to="1"></li>
<li data-target="#carouselIndicators" data-slide-to="2"></li>
</ol>
<!-- カルーセル部分 -->
<div class="carousel-inner">
<!-- First slide -->
<div class="carousel-item active">
<img class="d-block w-100" alt="First slide" src="https://via.placeholder.com/1600x900/666666/FFFF00/000000?text=First slide">
</div>
<!-- Second slide -->
<div class="carousel-item">
<img class="d-block w-100" alt="Second slide" src="https://via.placeholder.com/1600x900/666666/FFFF00/000000?text=Second slide">
</div>
<!-- Third slide -->
<div class="carousel-item">
<img class="d-block w-100" alt="Third slide" src="https://via.placeholder.com/1600x900/666666/FFFF00/000000?text=Third slide">
</div>
</div>
<!-- コントローラー部分 -->
<!-- 前に戻るアイコン -->
<a class="carousel-control-prev" href="#carouselIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">前に戻る</span>
</a>
<!-- 次に送るアイコン -->
<a class="carousel-control-next" href="#carouselIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">次に送る</span>
</a>
</div>
</div>
■カルーセル回転木馬：carousel：JavaScript：カルーセルをJavaScript経由で呼び出す
<div class="container">
<div id="carouselExample" class="carousel slide"><!-- data-ride="carousel"は不要 -->
<!-- インジケーター部分 -->
<ol class="carousel-indicators">
<li data-target="#carouselExample" data-slide-to="0" class="active"></li>
<li data-target="#carouselExample" data-slide-to="1"></li>
<li data-target="#carouselExample" data-slide-to="2"></li>
</ol>
<!-- カルーセル部分 -->
<div class="carousel-inner">
<!-- First slide -->
<div class="carousel-item active"> <img class="d-block w-100" alt="slide" src="https://via.placeholder.com/1600x900/666666/FFFF00/000000?text=First slide">
<!-- キャプション -->
<div class="carousel-caption">
<h5>スライドタイトル</h5>
<p>スライドのキャプション文</p>
</div>
</div>
<!-- Second slide -->
<div class="carousel-item"> <img class="d-block w-100" alt="slide" src="https://via.placeholder.com/1600x900/666666/FFFF00/000000?text=Second slide">
<!-- キャプション -->
<div class="carousel-caption">
<h5>スライドタイトル</h5>
<p>スライドのキャプション文</p>
</div>
</div>
<!-- Third slide -->
<div class="carousel-item"> <img class="d-block w-100" alt="slide" src="https://via.placeholder.com/1600x900/666666/FFFF00/000000?text=Third slide">
<!-- キャプション -->
<div class="carousel-caption">
<h5>スライドタイトル</h5>
<p>スライドのキャプション文</p>
</div>
</div>
</div>
<!-- コントローラー部分 -->
<!-- 前に戻るアイコン -->
<a class="carousel-control-prev" href="#carouselExample" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">前に戻る</span>
</a>
<!-- 次に送るアイコン -->
<a class="carousel-control-next" href="#carouselExample" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">次に送る</span>
</a>
</div>
</div>
<script>
$(function(){
$('#carouselExample').carousel({
interval: 1000
});
});
</script>
■カルーセル回転木馬：carousel：JavaScript：コントローラー付きカルーセル
<div class="container">
<div id="carousel" class="carousel slide">
<div class="carousel-inner">
<!-- First slide -->
<div class="carousel-item active">
<img class="d-block w-100" alt="First slide" src="https://via.placeholder.com/1600x900/666666/FFFF00/000000?text=First slide">
</div>
<!-- Second slide -->
<div class="carousel-item">
<img class="d-block w-100" alt="Second slide" src="https://via.placeholder.com/1600x900/666666/FFFF00/000000?text=Second slide">
</div>
<!-- Third slide -->
<div class="carousel-item">
<img class="d-block w-100" alt="Third slide" src="https://via.placeholder.com/1600x900/666666/FFFF00/000000?text=Third slide">
</div>
</div>
<!-- コントローラー部分 -->
<!-- 前に戻るアイコン -->
<a class="carousel-control-prev" href="#carouselIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">前に戻る</span>
</a>
<!-- 次に送るアイコン -->
<a class="carousel-control-next" href="#carouselIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">次に送る</span>
</a>
</div>
<!-- コントロールボタン -->
<div class="control-buttons my-3">
<input type="button" class="btn btn-primary start-slide" value="開始">
<input type="button" class="btn btn-primary pause-slide" value="停止">
<input type="button" class="btn btn-primary prev-slide" value="前へ">
<input type="button" class="btn btn-primary next-slide" value="次へ">
<input type="button" class="btn btn-primary slide-first" value="第1スライドに">
<input type="button" class="btn btn-primary slide-second" value="第2スライドに">
<input type="button" class="btn btn-primary slide-third" value="第3スライドに">
</div>
</div>
<script>
$(function(){
// 循環開始
$(".start-slide").on('click',function(){
$("#carousel").carousel('cycle');
});
// 一時停止
$(".pause-slide").on('click',function(){
$("#carousel").carousel('pause');
});
// 前へ循環
$(".prev-slide").on('click',function(){
$("#carousel").carousel('prev');
});
// 次へ循環
$(".next-slide").on('click',function(){
$("#carousel").carousel('next');
});
// 特定のフレームに循環
$(".slide-first").on('click',function(){
$("#carousel").carousel(0);
});
$(".slide-second").on('click',function(){
$("#carousel").carousel(1);
});
$(".slide-third").on('click',function(){
$("#carousel").carousel(2);
});
});
</script>
■カルーセル回転木馬：carousel：JavaScript：データ属性でオプションを指定
<div class="container">
<div id="carouselExample" class="carousel slide" data-ride="carousel" data-interval="1000">
<!-- インジケーター部分 -->
<ol class="carousel-indicators">
<li data-target="#carouselExample" data-slide-to="0" class="active"></li>
<li data-target="#carouselExample" data-slide-to="1"></li>
<li data-target="#carouselExample" data-slide-to="2"></li>
</ol>
<!-- カルーセル部分 -->
<div class="carousel-inner">
<!-- First slide -->
<div class="carousel-item active"> <img class="d-block w-100" alt="slide" src="https://via.placeholder.com/1600x900/666666/FFFF00/000000?text=First slide">
<!-- キャプション -->
<div class="carousel-caption">
<h5>スライドタイトル</h5>
<p>スライドのキャプション文</p>
</div>
</div>
<!-- Second slide -->
<div class="carousel-item"> <img class="d-block w-100" alt="slide" src="https://via.placeholder.com/1600x900/666666/FFFF00/000000?text=Second slide">
<!-- キャプション -->
<div class="carousel-caption">
<h5>スライドタイトル</h5>
<p>スライドのキャプション文</p>
</div>
</div>
<!-- Third slide -->
<div class="carousel-item"> <img class="d-block w-100" alt="slide" src="https://via.placeholder.com/1600x900/666666/FFFF00/000000?text=Third slide">
<!-- キャプション -->
<div class="carousel-caption">
<h5>スライドタイトル</h5>
<p>スライドのキャプション文</p>
</div>
</div>
</div>
<!-- コントローラー部分 -->
<!-- 前に戻るアイコン -->
<a class="carousel-control-prev" href="#carouselExample" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">前に戻る</span>
</a>
<!-- 次に送るアイコン -->
<a class="carousel-control-next" href="#carouselExample" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">次に送る</span>
</a>
</div>
</div>