更新 2018.8.29 11:15閲覧 3033

Bootstrap 3 でカードを作る

Bootstrap 4b のカードを真似てみるテスト <style>img:hover{opacity:0.5;}</style>

panel-primary

<div class="panel panel-primary" style="width:350px;"> <div class="panel-heading" style="padding:0;min-height:400px"> <img class="img-responsive" src="images/hcqf.png" style="border-top-left-radius:3px;border-top-right-radius:3px;" alt=""> <p style="margin:1.25em">panel-primary</p> </div> </div>

alert-danger

<div class="alert alert-danger" style="padding:0;width:350px;min-height:400px;display: flex;flex-direction: column;"> <p style="margin:1.25em;flex:1 1 auto;">alert-danger</p> <img class="img-responsive" src="images/hcqf.png" style="border-bottom-right-radius:4px;border-bottom-left-radius:4px;" alt=""> </div>

well

<div class="well" style="padding:0;width:350px;min-height:400px;display:flex;flex-direction:column;"> <p style="margin:1.25em;flex:1 1 auto;">well</p> <img class="img-responsive" src="images/hcqf.png" style="border-bottom-left-radius:4px;border-bottom-right-radius:4px;" alt=""> </div>

jumbotron

<div class="jumbotron nowrap" style="padding:0;width:350px;min-height:400px"> <img class="img-responsive" src="images/hcqf.png" style="border-top-left-radius:6px;border-top-right-radius:6px;" alt=""> <p style="margin:1.25em;width:350px;">jumbotron</p> </div>

コメント

当フォームより収集される個人情報は、返信を要する際に使用されるものであり、法令に基づく行政機関等への提供を除き、ご本人の同意を得ずに第三者に提供することはありません。また、コメントが掲載される場合であってもメールアドレスが本サイト内に記載されることはありません。