カード その他
2021-07-01
参考サイト1:https://webst8.com/blog/bootstrap4-card/
参考サイト2:https://webnetamemo.com/coding/bootstrap4/201711116162
参考サイト3:http://www.tohoho-web.com/bootstrap/card.html
参考サイト4:https://getbootstrap.jp/docs/4.2/components/card/
参考サイト5:https://www.webdesignleaves.com/pr/plugins/bootstrap4_04.html
cardコンテンツのみ
card-body
|
1 2 3 4 5 |
<div class="card"> <div class="card-body"> card-body </div> </div> |
cardタイトル・サブタイ・テキスト・リンク
.card-title
.card-subtitle..mb-2（margin-bottom0.5rem）.text-muted（文字色変更）
.card-text
|
1 2 3 4 5 6 7 8 9 |
<div class="card" style="width: 20rem;"> <div class="card-body"> <h4 class="card-title">.card-title</h4> <h6 class="card-subtitle mb-2 text-muted">.card-subtitle..mb-2（margin-bottom0.5rem）.text-muted（文字色変更）</h6> <p class="card-text">.card-text</p> <a href="#" class="card-link">.card-link</a> <a href="#" class="card-link">.card-linkと同階層にあると左に間隔</a> </div> </div> |
cardにヘッダーとフッターを追加
ヘッダーのみが今まで使っていたパネルに一番近いと思います。
背景色変更のクラスを入れた場合、ヘッダーフッターも合わせて背景色変更されます。
WordPressが勝手にpタグをいれてしまうとフッターの下に隙間ができるかもしれないです。
card-header
背景色変更と文字色変更
|
1 2 3 4 5 6 7 8 9 10 11 |
<div class="card bg-primary text-white"> <div class="card-header"> card-header </div> <div class="card-body"> 背景色変更と文字色変更 </div> <div class="card-footer"> card-footer </div> </div> |
ヘッダーのみ
card-body
|
1 2 3 4 5 6 7 8 |
<div class="card"> <div class="card-header"> ヘッダーのみ </div> <div class="card-body"> card-body </div> </div> |
card-body
|
1 2 3 4 5 6 7 8 |
<div class="card"> <div class="card-body"> card-body </div> <div class="card-footer"> フッターのみ </div> </div> |
cardリスト付き
- list-group-item
- list-group-item
- list-group-item
|
1 2 3 4 5 6 7 8 |
<div class="card" style="width:20rem;"> <img class="card-img-top" src="https://www.mgm-design.jp/wp-content/uploads/2016/08/s_gori0I9A3099072103255_TP_V.jpg" alt=""> <ul class="list-group list-group-flush"> <li class="list-group-item">list-group-item</li> <li class="list-group-item">list-group-item</li> <li class="list-group-item">list-group-item</li> </ul> </div> |
