PetHouse(2016)練習1

範例結果

四、【Banner】區塊

BS:【元件Components】>【大銀幕效果Jumbotron】

確認項目:

1.加入圖片:【CSS】>【圖片Images】

2.不同行動裝置元素排列方式【CSS】>【格線系統Grid system】>【格線選項Grid options】

3.增加按鈕【CSS】>【按鈕Buttons】

4.左右兩邊等高:CSS【Flex】介紹(說明工具

.jumbotron .container{
    display: flex; flex-wrap: wrap;
}

.jumbotron .container div{/* background: #ffbbbb;*/
    display: flex;
}
.jumbotron .container .img-thumbnail{
    border: 10px solid #ffffff; border-radius: 20px;
}
.jumbotron .container div:nth-child(2){flex-direction: column;}
.jumbotron .container div:nth-child(2) .btn{
    margin-top: auto; margin-bottom: 20px; align-self: center;  /*按鈕置中,若無則與Div同寬*/
}
.jumbotron .container h1 img{height: 80px;}