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);
}