PetHouse(2016)練習1

範例結果

六、【footer】區塊

BS:【CSS】>【排版Typography】>【清單Default example】

確認項目:

1.中文版中移除項目清單,輸入有誤應為【英文版中:<ul class=”list-unstyled”>】

2.多層次清單項目html結構語法了解

3.利用【行內樣式】設定圖片width:100%【<img src=”img/logo.svg” style=”width:100px”>】

4.cloumn移位:【CSS】>【格線系統Grid system】>【column位移 Offsetting columns】

    <div class="container">
        <div class="row">
            <div class="col-xs-12 col-sm-2 col-sm-offset-1">
                <img src="img/logo.svg"  style="width:100px">
            </div>
            <div class="col-xs-4 col-sm-2 col-sm-offset-1">
                <h5>List title</h5>
                <ul class="list-unstyled">
                    <li><a href="#">link</a></li>
                    <li><a href="#">link</a></li>
                    <li><a href="#">link</a></li>
                </ul>
            </div>
            <div class="col-xs-4 col-sm-2">
                <h5>List title</h5>
                <ul class="list-unstyled">
                    <li><a href="#">link</a></li>
                    <li><a href="#">link</a></li>
                    <li><a href="#">link</a></li>
                </ul>
            </div>
            <div class="col-xs-4 col-sm-2">
                <h5>List title</h5>
                <ul class="list-unstyled">
                    <li><a href="#">link</a></li>
                    <li><a href="#">link</a></li>
                    <li><a href="#">link</a></li>
                </ul>
            </div>
        </div>
    </div>