bootstrap4.css
.mb-4,
.my-4 {
margin-bottom: 1.5rem !important;
}
■メディアオブジェクト: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>
■折り畳み:collapse:JavaScript:アコーディオン折り畳みcollapse
a要素とhref属性によるボタン
a要素とhref属性
によるボタン
罫線なし、色なしでやれば、それっぽく見えるはず
a要素の切替ボタンをクリックすることで表示と非表示とが切り替わるコンテンツ
button要素の切替ボタンをクリックすることで表示と非表示とが切り替わるコンテンツ
<div class="row">
<div class="col-sm-6 mb-4">
<!-- a要素とhref属性による切替ボタン -->
<p>
<a class="btn btn-secondary" data-toggle="collapse" href="#collapseContent01" role="button" aria-expanded="false" aria-controls="collapseContent01">a要素とhref属性によるボタン</a>
<a data-toggle="collapse" href="#collapseContent01" aria-expanded="false" aria-controls="collapseContent01">
a要素とhref属性<br>
によるボタン<br>
罫線なし、色なしでやれば、それっぽく見えるはず
</a>
</p>
<!-- 切り替えるターゲットとなるコンテンツ -->
<div class="collapse" id="collapseContent01">
<div class="card card-body">
a要素の切替ボタンをクリックすることで表示と非表示とが切り替わるコンテンツ
</div>
</div>
</div>
<div class="col-sm-6 mb-4">
<!-- button要素とdata-target属性による切替ボタン -->
<p>
<button class="btn btn-secondary" type="button" data-toggle="collapse" data-target="#collapseContent02" aria-expanded="false" aria-controls="collapseContent02"> button要素とdata-target属性によるボタン</button>
</p>
<!-- 切り替える対象となるコンテンツ -->
<div class="collapse" id="collapseContent02">
<div class="card card-body">
button要素の切替ボタンをクリックすることで表示と非表示とが切り替わるコンテンツ
</div>
</div>
</div>
</div>