Day26 Bootstrap建立网页

昨天我们利用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