iT邦幫忙

2021 iThome 鐵人賽

DAY 26
0
Modern Web

我的網頁前端小小小教室系列 第 26

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


上一篇
Day25 Bootstrap簡介
下一篇
Day27 Javascript元件庫 Jquery介紹
系列文
我的網頁前端小小小教室30

尚未有邦友留言

立即登入留言