PetHouse(2016)練習1

範例結果

四、【相片集】區塊

BS:【元件Components】>【縮圖Thumbnails】>【預設範例Default example】

確認項目:

1.改變圖片外框:透過【CSS】>【圖片Images】

2.應用<div class=”row”>結構分區塊

 

<div class="col-xs-6 col-md-3">
    <a href="#" class="thumbnail"> <img src="img/pet1/pet02.jpg"> </a>
</div>
<div class="col-xs-6 col-md-3">
    <a href="#" class="thumbnail"> <img src="img/pet1/pet03.jpg"> </a>
</div>
<div class="col-xs-6 col-md-3">
    <a href="#" class="thumbnail"> <img src="img/pet1/pet04.jpg"> </a>
</div>
<div class="col-xs-6 col-md-3">
    <a href="#" class="thumbnail"> <img src="img/pet1/pet05.jpg"> </a>
</div>
<div class="col-xs-6 col-md-3">
    <a href="#" class="thumbnail"> <img src="img/pet1/pet06.jpg"> </a>
</div>
<div class="col-xs-6 col-md-3">
    <a href="#" class="thumbnail"> <img src="img/pet1/pet07.jpg"> </a>
</div>
<div class="col-xs-6 col-md-3">
    <a href="#" class="thumbnail"> <img src="img/pet1/tab1.png"> </a>
</div>