PetHouse(2016)練習1

範例結果

五、【項目列表】區塊

BS:【元件Components】>【縮圖Thumbnails】>【自訂內容Custom content】

確認項目:

CSS【Flex】再應用

<div class="container">
<div class="row">
<div class="col-xs-12">
<h2 class="text-center">項目列表標題</h2> </div>
</div>
<div class="row"  id="thumnail">
<div class="col-xs-6 col-sm-3 col-md-2">
<div class="thumbnail text-center"> <img src="img/pet/pet01.png">
<div class="caption">
<h3>台灣土狗</h3>
<p>聰明堅毅</p>
<p class="bbb"><a href="#" class="btn btn-primary" role="button">Button</a> </p>
</div>
</div>
</div>
<div class="col-xs-6 col-sm-3 col-md-2">
<div class="thumbnail text-center"> <img src="img/pet/pet02.png">
<div class="caption">
<h3>柯基犬</h3>
<p>大力士般小型犬大力士般小型犬大力士般小型犬</p>
<p><a href="#" class="btn btn-primary" role="button">Button</a> </p>
</div>
</div>
</div>
<div class="col-xs-6 col-sm-3 col-md-2">
<div class="thumbnail text-center"> <img src="img/pet/pet03.png">
<div class="caption">
<h3>紅貴賓</h3>
<p>神秘高貴有氣質</p>
<p><a href="#" class="btn btn-primary" role="button">Button</a> </p>
</div>
</div>
</div>
<div class="col-xs-6 col-sm-3 col-md-2">
<div class="thumbnail text-center"> <img src="img/pet/pet04.png">
<div class="caption">
<h3>柴犬</h3>
<p>性格沉穩忠於主人</p>
<p><a href="#" class="btn btn-primary" role="button">Button</a> </p>
</div>
</div>
</div>
<div class="col-xs-6 col-sm-3 col-md-2">
<div class="thumbnail text-center"> <img src="img/pet/pet05.png">
<div class="caption">
<h3>臘腸犬</h3>
<p>聰穎又貼心</p>
<p><a href="#" class="btn btn-primary" role="button">Button</a> </p>
</div>
</div>
</div>
<div class="col-xs-6 col-sm-3 col-md-2">
<div class="thumbnail text-center"> <img src="img/pet/pet06.png">
<div class="caption">
<h3>博美</h3>
<p>性格細膩愛撒嬌</p>
<p><a href="#" class="btn btn-primary" role="button">Button</a> </p>
</div>
</div>
</div>
<div class="col-xs-6 col-sm-3 col-md-2">
<div class="thumbnail text-center"> <img src="img/pet/pet07.png">
<div class="caption">
<h3>雪納瑞</h3>
<p>開朗活潑的性情,個性勇敢堅強</p>
<p><a href="#" class="btn btn-primary" role="button">Button</a> </p>
</div>
</div>
</div>
<div class="col-xs-6 col-sm-3 col-md-2">
<div class="thumbnail text-center"> <img src="img/pet/pet08.png">
<div class="caption">
<h3>瑪爾濟斯</h3>
<p>服從穩定性強、溫順脾氣好</p>
<p><a href="#" class="btn btn-primary" role="button">Button</a> </p>
</div>
</div>
</div>
<div class="col-xs-6 col-sm-3 col-md-2">
<div class="thumbnail text-center"> <img src="img/pet/pet09.png">
<div class="caption">
<h3>吉娃娃</h3>
<p>個性敏捷不膽小、步容輕盈、動靜皆宜</p>
<p><a href="#" class="btn btn-primary" role="button">Button</a> </p>
</div>
</div>
</div>
<div class="col-xs-6 col-sm-3 col-md-2">
<div class="thumbnail text-center"> <img src="img/pet/pet10.png">
<div class="caption">
<h3>秋田</h3>
<p>日本大型代表犬</p>
<p><a href="#" class="btn btn-primary" role="button">Button</a> </p>
</div>
</div>
</div>
<div class="col-xs-6 col-sm-3 col-md-2">
<div class="thumbnail text-center"> <img src="img/pet/pet11.png">
<div class="caption">
<h3>拉不拉多</h3>
<p>傻呼呼的孩子王</p>
<p><a href="#" class="btn btn-primary" role="button">Button</a> </p>
</div>
</div>
</div>
<div class="col-xs-6 col-sm-3 col-md-2">
<div class="thumbnail text-center"> <img src="img/pet/pet12.png">
<div class="caption">
<h3>法國鬥牛犬</h3>
<p>親人的小小鬥士</p>
<p><a href="#" class="btn btn-primary" role="button">Button</a> </p>
</div>
</div>
</div>
</div><!--第二個.row End-->
</div><!--.container End-->

HTML示意圖

為CSS美化方便性,為第二個.row 加入ID名稱<div class=”row”  id=”thumnail”>

/*==項目列表 Start==================================================================*/
#thumnail {
display: flex; background: #00ffcb;
flex-wrap: wrap;
}
#thumnail>div {
display: flex; background: #ffeb00;
align-items: stretch;
}
#thumnail .thumbnail {
display: flex; flex-direction: column;
margin-top: 20px;
}
#thumnail .thumbnail .caption {
display: flex; flex-direction: column;
height: 100%;
}
#thumnail .thumbnail .caption p:nth-of-type(2) {
margin-top: auto;
}
#thumnail .thumbnail {
border: 1px solid #b71c1c; transition: all .5s;
}
#thumnail .thumbnail:hover {
transform: scale(1.1) rotate(2deg);
}