【Day 29】Django 網頁美化篇 - Ctrl+C/V 的魔法 - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

2022 iThome 鐵人賽

DAY 29

Modern Web

Django 初心者之旅系列第 29 篇

【Day 29】Django 網頁美化篇 - Ctrl+C/V 的魔法

14th鐵人賽 django bootstrap5 front-end 網頁教學

Xiang1009

2022-10-14 04:15:45

2110 瀏覽

分享至

今天是鐵人賽的倒數第二篇，在這篇文章內，我們會透過前端框架Bootstrap來幫忙進行網頁美化的工作。Bootstrap是一個結合HTML、CSS、JavaScript的前端框架，藉由重新組合已被建好的網頁元件，像是導覽列、下拉式選單等，我們可以很容易地就建好一個不錯看的網頁，在2021年5月Bootstrap 5的穩定版本被釋出，這次的版本更新跟Bootstrap 4相比有不少的新變動，像是不用再載入JQuery和推出Bootstrap Icon等。

雖然用Bootstrap可以快速幫我們打造漂亮的前端網頁，但是使用框架也是有缺點，其一是Bootstrap需要先載入不算少的外部資源，其二是大家寫出來的網頁容易高度相似，沒有絲毫個人風格。儘管如此，Bootstrap還是一個很好用的前端框架，接下來就一起體驗Ctrl+C/V的魔法吧!

今天文章內使用的都是Bootstrap 5.1版本

Starter Template

還記得在【Day 01】我有說過只要會複製貼上，大家都能寫網頁嗎?
Bootstrap很貼心地提供最基礎的模板，我們只需要複製貼到空白的.html檔裡面就好。下面的模板跟我們平常寫的網頁唯一的差別，在於它載入了Bootstrap預先寫好的CSS和JavaScript，貼上去就等於在使用Bootstrap框架囉!

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
    -->
  </body>
</html>

實際在瀏覽器上會長得像下面這樣，這邊我是直接使用Visual Studio Code好用的擴充功能Live Server做檢視，關於如何使用Live Server檢視網頁，可以參考之前寫的這篇筆記。

接下來就一起學習Ctrl+C/V的魔法，輕鬆把網頁變好看吧!

Bootstrap Component

Bootstrap有幫我們先寫好一些可以立即使用的網頁元件，進到首頁後，點擊上方的Docs，接著往下滑就可以看到Components的區域，裡面是各種預先被寫好的網頁元件，其中包括導覽列(Navbar)、按鈕(Buttons)、下拉式選單(Dropdowns)等，只要複製原始碼就可以馬上使用。

當然還要先載入Bootstrap的CSS和JavaScript喔!

以NavBar為例，假設我們喜歡下面的這個樣式，那只要把它的原始碼貼到Starter Template就可以囉!

把全部的原始碼貼上來太佔空間了，來直接看貼到Starter Template後的結果吧!

有Bootstrap Components的存在，讓我們只要複製貼上就能完成簡單的前端網頁，但這終究只是個雛形，後續如何做到客製化調整就是另一個需要花點時間才能講完的故事了。

最後，來美化我們Members資料表在網頁呈現的資料表格吧!

使用 Bootstrap Table 美化原有的資料表格

仔細看在Bootstrap Components裡面並沒有幫我們寫好Table的網頁元件啊? 這樣要怎麼擁有比較漂亮的資料表格呢? 因為Bootstrap把Table預先寫好的樣式歸類在Content裡面，所以我們要到Content才找得到。

點擊側邊攔的Table後，往下繼續滑就可以看到不少的表格樣式和一些做細部調整的方法。假設我們希望把表格的樣式，更改成Overview下面這樣子，我們可以直接把它複製到members/templates的index.html裡面。

嗯，好像有哪裡怪怪的，我們忘記載入Bootstrap所需要的CSS和JavaScript啦!

在members/templates的index.html裡面補上這些內容。

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

下面的表格是正常的，但上面的表格不正常，為什麼會這樣呢? 因為要按照Bootstrap定義的表格格式，填入表格資料才會正常顯示該有的效果。所以我們要再稍微改寫目前index.html裡的表格結構。

把index.html的所有內容改成像下面這樣，讓原有的表格(Table)符合Bootstrap定義的格式。

<h1>Members</h1>

<table class="table">
    <thead>
        <tr>
            <th scope="col">Id</th>
            <th scope="col">First Name</th>
            <th scope="col">Last Name</th>
            <th scope="col">Update</th>
            <th scope="col">Delete</th>
        </tr>
    </thead>
    <tbody>
        {% for x in mymembers %}
        <tr>
            <th scope="row">{{ x.id }}</th>
            <td>{{ x.firstname }}</td>
            <td>{{ x.lastname }}</td>
            <td><a href="update/{{ x.id }}">update</a></td>
            <td><a href="delete/{{ x.id }}">delete</a></td>
        </tr>
        {% endfor %}
    </tbody>
</table>

<p>
    <a href="add/">Add member</a>
</p>

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

修改完index.html後，就可以在瀏覽器上看到比之前漂亮許多的資料表格囉!