昨天我們利用Bootstrap的框架做了一個三欄的版面，而今天我們就是要利用Bootstrap不同的套件，去快速完成一個網頁，讓我們繼續看下去吧!記得要先把基本Bootstrap框架複製到檔案裡喔。

第一步，我們需要網站上的頁首，也就是導覽列，我們可以在左邊Components裡面找到Navbar。

點進去以後將樣式copy下來丟到body裡面，導覽列就完成拉!

第二步，創建完導覽列以後，需要一個banner的區域，我們做一個幻燈片的效果，在Components找到Carousel，並copy下來。設定好圖片來源src後就會有效果囉!

第三步，我們要在banner下面做一個麵包削，就是連結路徑，在Components找到Breadcrumb，並copy你需要的那個。

如果覺得滿版字太左邊，可以用container把breadcrumb麵包削包起來，讓他有固定寬度後，在用一層div包起來container，設定div的背景顏色。記得原本的麵包削背景顏色要設定成透明的喔!

<style>
        .section{
            background-color: gainsboro;
        }
        .breadcrumb{
            background-color: transparent; 
        }
</style>

<div class="section">
    <div class="container">
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="#">Home</a></li>
                <li class="breadcrumb-item"><a href="#">Library</a></li>
                <li
                    class="breadcrumb-item active"
                    aria-current="page"
                >Data</li>
            </ol>
        </nav>
    </div>
</div>

就能讓麵包削看起來不會那麼空洞!

第四步，建造一個左右兩欄的畫面，左邊的話我們用bootstrap的list group，而右邊就用我們昨天所教的container建造兩行四欄的排版。並且在下面做一個分頁的按鈕，用到bootstrap的Pagination。

<div class="container">
    <div class="row">
        <div class="col-3">
            <div class="list-group">
                <a
                    href="#"
                    class="list-group-item list-group-item-action active"
                    aria-current="true"
                >
                    The current link item
                </a>
                <a
                    href="#"
                    class="list-group-item list-group-item-action"
                >A second link item</a>
                <a
                    href="#"
                    class="list-group-item list-group-item-action"
                >A third link item</a>
                <a
                    href="#"
                    class="list-group-item list-group-item-action"
                >A fourth link item</a>
                <a
                    href="#"
                    class="list-group-item list-group-item-action"
                >A five link item</a>
            </div>
        </div>
        <div class="col-9">
            <h1>title</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam possimus hic dolore iure aliquid veniam, fuga nihil dolorum incidunt omnis ad, officia doloremque modi molestiae rerum tempora autem, sint perferendis?</p>
            <div class="row">
                <div class="col">
                    <img src="https://picsum.photos/200/200?random=11" alt="">
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda, magnam.</p>
                </div>
                <div class="col">
                    <img src="https://picsum.photos/200/200?random=12" alt="">
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda, magnam.</p>
                </div>
                <div class="col">
                    <img src="https://picsum.photos/200/200?random=13" alt="">
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda, magnam.</p>
                </div>
                <div class="col">
                    <img src="https://picsum.photos/200/200?random=14" alt="">
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda, magnam.</p>
                </div>
            </div>
            <div class="row">
                <div class="col">
                    <img
                        src="https://picsum.photos/200/200?random=21"
                        alt=""
                    >
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda, magnam.</p>
                </div>
                <div class="col">
                    <img
                        src="https://picsum.photos/200/200?random=22"
                        alt=""
                    >
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda, magnam.</p>
                </div>
                <div class="col">
                    <img
                        src="https://picsum.photos/200/200?random=23"
                        alt=""
                    >
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda, magnam.</p>
                </div>
                <div class="col">
                    <img
                        src="https://picsum.photos/200/200?random=24"
                        alt=""
                    >
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda, magnam.</p>
                </div>
            </div>
                <nav aria-label="Page navigation example ">
                    <ul class="pagination justify-content-center">
                        <li class="page-item"><a
                                class="page-link"
                                href="#"
                            >Previous</a></li>
                        <li class="page-item"><a
                                class="page-link"
                                href="#"
                            >1</a></li>
                        <li class="page-item"><a
                                class="page-link"
                                href="#"
                            >2</a></li>
                        <li class="page-item"><a
                                class="page-link"
                                href="#"
                            >3</a></li>
                        <li class="page-item"><a
                                class="page-link"
                                href="#"
                            >Next</a></li>
                    </ul>
                </nav>
            </div>
        </div>
    </div>

第五步，加上我們的頁尾，footer。設定滿版寬，置中、背景顏色。

.footer{
            text-align: center;
            background-color: gray;
            margin-top: 20px;
        }
        
<div class="container-fluid footer">
    &copy; making by jason
</div>

這樣我們就快速的用Bootstrap建造出一個網頁拉!

Bootstap裡面有非常多好用的套件供我們使用。只要能善加利用這些套件，也可以用框架客製化出自己的網頁。

參考資料:https://www.youtube.com/watch?v=p3CK74T9GHQ&list=PLqivELodHt3iL9PgGHg0_EF86FwdiqCre&index=25