金魚也能學會寫網頁-框架篇

tags: `金魚也能學會寫網頁`

據說金魚只有七秒的記憶力，那有沒有辦法讓金魚也能快速建置個人網頁呢? 答案是有的!! Bootstrap是一個前端的網頁框架，框架內有各種已寫好的網頁元件，你只要做3件事，複製、貼上、拼拼圖(Component)，就能做出一個基本的前端網頁。

Hint: 文章內所使用的版本是 Bootstrap v4.6.x

Image Not Showing Possible Reasons

The image file may be corrupted
The server hosting the image is unavailable
The image path is incorrect
The image format is not supported

Learn More →

Setting Environment

如果你已經有用習慣的網頁編寫工具，可以選擇略過此部分，下面以VS Code為例

Image Not Showing Possible Reasons

The image file may be corrupted
The server hosting the image is unavailable
The image path is incorrect
The image format is not supported

Learn More →

Step 1: 下載並安裝 VS Code

Download VS Code 基本上按照預設一直點下一步就行

Step 2: 設定 VS Code 環境

設定Ctrl+滑鼠滾輪的程式碼縮放功能、自動儲存

Image Not Showing Possible Reasons

The image file may be corrupted
The server hosting the image is unavailable
The image path is incorrect
The image format is not supported

Learn More →

Image Not Showing Possible Reasons

The image file may be corrupted
The server hosting the image is unavailable
The image path is incorrect
The image format is not supported

Learn More →

安裝Live Server套件

Image Not Showing Possible Reasons

The image file may be corrupted
The server hosting the image is unavailable
The image path is incorrect
The image format is not supported

Learn More →

Step 3: 使用快捷鍵建立基本架構

開啟欲存放檔案的資料夾
右鍵新增.html檔案
在檔案內輸入 !+Enter 或 !+Tab 自動生成基本架構(如下方程式碼區塊)

Image Not Showing Possible Reasons

The image file may be corrupted
The server hosting the image is unavailable
The image path is incorrect
The image format is not supported

Learn More →

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

Step 4: 使用 Live Server 檢視網頁

點擊右下角 Go Live，此時瀏覽器應自動開啟並顯示網頁

Image Not Showing Possible Reasons

The image file may be corrupted
The server hosting the image is unavailable
The image path is incorrect
The image format is not supported

Learn More →

Hint: 1.若在右下角沒看到 Live Server，請在程式碼區塊內按滑鼠右鍵，點擊 Open with Live Server。 2.網頁預設路徑: 127.0.0.1:5500。

Image Not Showing Possible Reasons
The image file may be corrupted
The server hosting the image is unavailable
The image path is incorrect
The image format is not supported
Learn More →

檢視你的網頁!

Image Not Showing Possible Reasons

The image file may be corrupted
The server hosting the image is unavailable
The image path is incorrect
The image format is not supported

Learn More →

成功完成基本環境設定!

Getting Started

Step 1: 複製Bootstrap Template到你的編輯器中

Starter template

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

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">

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

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

    <!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js" integrity="sha384-+YQ4JLhjyBLPDQt//I+STsc9iw4uQqACwlvpslubQzn4u2UU2UFM80nGisd026JF" crossorigin="anonymous"></script>
    -->
  </body>
</html>

複製貼上模板程式碼後，網頁畫面如下:

Image Not Showing Possible Reasons

The image file may be corrupted
The server hosting the image is unavailable
The image path is incorrect
The image format is not supported

Learn More →

接下來就是發揮拼圖的實力啦~XD ((ps.純白地獄真D可怕

Step 2: 將適合的Bootstrap Component原始碼放入你的網頁中

你的拼圖底加(Bootstrap Components)

Image Not Showing Possible Reasons

The image file may be corrupted
The server hosting the image is unavailable
The image path is incorrect
The image format is not supported

Learn More →

Image Not Showing Possible Reasons

The image file may be corrupted
The server hosting the image is unavailable
The image path is incorrect
The image format is not supported

Learn More →

Image Not Showing Possible Reasons

The image file may be corrupted
The server hosting the image is unavailable
The image path is incorrect
The image format is not supported

Learn More →

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
    <div class="navbar-nav">
      <a class="nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
      <a class="nav-link" href="#">Features</a>
      <a class="nav-link" href="#">Pricing</a>
      <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
    </div>
  </div>
</nav>

Hint: Bootstrap 已經預先定義元件的屬性，所以我們可以不用list-based的形式建立導覽列。

Because we use classes for our navs, you can avoid the list-based approach entirely if you like. –-Bootstrap

2. 複製到template

Image Not Showing Possible Reasons

The image file may be corrupted
The server hosting the image is unavailable
The image path is incorrect
The image format is not supported

Learn More →

3. Component在瀏覽器的外觀

Image Not Showing Possible Reasons

The image file may be corrupted
The server hosting the image is unavailable
The image path is incorrect
The image format is not supported

Learn More →

相信做到這邊，你已經迫不及待的想開始拼出一個網頁了吧!
接下來我將介紹Bootstrap的Layout配置。

Layout

Components and options for laying out your Bootstrap project, including wrapping containers, a powerful grid system, a flexible media object, and responsive utility classes. –- Bootstrap

Hint: 在Bootstrap裡，Container是用來放置Components的容器，同時它也關係到網頁在不同尺寸裝置上的外觀。

主要有3種不同的Container (CSS Class) :

.container
- 根據螢幕寬度利用媒體查詢 (Media Query) ，設定變化的斷點，階段性的改變寬度，當改變瀏覽器的大小，頁面將一個階段一個階段變化。

<div class="container">
  <!-- Content here -->
</div>

.container-fluid
- 不考慮螢幕寬度，始終將寬度設定為auto，當縮放瀏覽器時，保持全屏大小(100%的寬度)。

<div class="container-fluid">
  ...
</div>

.container-{breakpoint}
- 透過Bootstrap寫好的 Media Query 調整頁面
- 如: .container-sm

<div class="container-sm">100% wide until small breakpoint</div>
<div class="container-md">100% wide until medium breakpoint</div>
<div class="container-lg">100% wide until large breakpoint</div>
<div class="container-xl">100% wide until extra large breakpoint</div>

.container-{breakpoint} 細節

介紹完Container後，緊接著介紹Bootstrap的欄位配置 –- Grid System

Grid System

Use our powerful mobile-first flexbox grid to build layouts of all shapes and sizes thanks to a twelve column system, five default responsive tiers, Sass variables and mixins, and dozens of predefined classes. –- Bootstrap

Hint: Bootstrap 以 Grid System 規範網頁的版面配置 (列 - 欄) ，而1列在Bootstrap中被預設劃分為12欄。

Setting Row & Column

不設定的col-size情況下，3欄均分12個欄位大小 (3 X 4)

<div class="container">
  <div class="row">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
</div>

More Details

兩種主要col設定方式 (full size: 12):

col-size 主動配置欄位大小

<div class="container">
  <div class="row">
    <div class="col">col</div>
    <div class="col">col</div>
    <div class="col">col</div>
    <div class="col">col</div>
  </div>
  <div class="row">
    <div class="col-8">col-8</div>
    <div class="col-4">col-4</div>
  </div>
</div>
<!-- 只寫.col時，會根據.col的數量均分12欄 -->

col-{breakpoint}-size 根據螢幕大小調整欄位配置

<div class="container">
  <div class="row">
    <div class="col-sm-8">col-sm-8</div>
    <div class="col-sm-4">col-sm-4</div>
  </div>
  <div class="row">
    <div class="col-sm">col-sm</div>
    <div class="col-sm">col-sm</div>
    <div class="col-sm">col-sm</div>
  </div>
</div>

Hint: 關於breakpoint的設定，請參照上方的 .container-{breakpoint} 細節。

最後，讓我們動手拼出一個網頁吧! GOGOGO~

Web Page Implementation

Step 1: 尋找要用到的Component放到Starter Template

我的規劃:

Nav Bar

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarTogglerDemo02">
    <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

Carousel (原版沒有圖片，可以自行設定)

<div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
    <li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
    <li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="https://picsum.photos/1200/300?random=18https://picsum.photos/1200/300?random=18" class="d-block w-100" alt="...">
      <div class="carousel-caption d-none d-md-block">
        <h5>First slide label</h5>
        <p>Some representative placeholder content for the first slide.</p>
      </div>
    </div>
    <div class="carousel-item">
      <img src="https://picsum.photos/1200/300?random=19" class="d-block w-100" alt="...">
      <div class="carousel-caption d-none d-md-block">
        <h5>Second slide label</h5>
        <p>Some representative placeholder content for the second slide.</p>
      </div>
    </div>
    <div class="carousel-item">
      <img src="https://picsum.photos/1200/300?random=20" class="d-block w-100" alt="...">
      <div class="carousel-caption d-none d-md-block">
        <h5>Third slide label</h5>
        <p>Some representative placeholder content for the third slide.</p>
      </div>
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

Breadcrumb

<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>

List Group

<ul class="list-group">
  <li class="list-group-item active" aria-current="true">An active item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
  <li class="list-group-item">A fourth item</li>
  <li class="list-group-item">And a fifth one</li>
</ul>

Image Gallery (自行設計的Component)

<div class="col-12 col-md-9">
    <h1>title</h1>
    <p>List groups are a flexible and powerful component for displaying a series of content. Modify and extend them to support just about any content within.</p>
    <div class="row item-group">
        <div class="col-12 col-md-3">
            <div class="item">
                <img class="img-fluid" src="https://picsum.photos/300/200?random=8">
                <h3>title</h3>
                <p>List groups are a flexible and powerful component for displaying</p>
            </div>
        </div>
        <div class="col-12 col-md-3">
            <div class="item">
                <img class="img-fluid" src="https://picsum.photos/300/200?random=2">
                <h3>title</h3>
                <p>List groups are a flexible and powerful component for displaying</p>
            </div>
        </div>
        <div class="col-12 col-md-3">
            <div class="item">
                <img class="img-fluid" src="https://picsum.photos/300/200?random=4">
                <h3>title</h3>
                <p>List groups are a flexible and powerful component for displaying</p>
            </div>
        </div>
        <div class="col-12 col-md-3">
            <div class="item">
                <img class="img-fluid" src="https://picsum.photos/300/200?random=5">
                <h3>title</h3>
                <p>List groups are a flexible and powerful component for displaying</p>
            </div>
        </div>
        <div class="col-12 col-md-3">
            <div class="item">
                <img class="img-fluid" src="https://picsum.photos/300/200?random=38">
                <h3>title</h3>
                <p>List groups are a flexible and powerful component for displaying</p>
            </div>
        </div>
        <div class="col-12 col-md-3">
            <div class="item">
                <img class="img-fluid" src="https://picsum.photos/300/200?random=32">
                <h3>title</h3>
                <p>List groups are a flexible and powerful component for displaying</p>
            </div>
        </div>
        <div class="col-12 col-md-3">
            <div class="item">
                <img class="img-fluid" src="https://picsum.photos/300/200?random=34">
                <h3>title</h3>
                <p>List groups are a flexible and powerful component for displaying</p>
            </div>
        </div>
        <div class="col-12 col-md-3">
            <div class="item">
                <img class="img-fluid" src="https://picsum.photos/300/200?random=35">
                <h3>title</h3>
                <p>List groups are a flexible and powerful component for displaying</p>
            </div>
        </div>
    </div>
</div>

Pagination

<nav aria-label="Page navigation example">
  <ul class="pagination justify-content-center">
    <li class="page-item">
      <a class="page-link" href="#" aria-label="Previous">
        <span aria-hidden="true">&laquo;</span>
      </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="#" aria-label="Next">
        <span aria-hidden="true">&raquo;</span>
      </a>
    </li>
  </ul>
</nav>

Footer (自行設計的Component)

<div class="container-fluid main-footer text-center">
    &copy; copyright by QI-XIANG 2021
</div>

Step 2: 將 Component 依序放進 Starter Template

結果如下:

看起來還不錯，但還可以再做些調整，讓網頁更加美觀。

Step 3 (Optional): 網頁細部調整

請將下方程式碼複製到新檔案中

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

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">

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

    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <a class="navbar-brand" href="#">Navbar</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
      
        <div class="collapse navbar-collapse" id="navbarTogglerDemo02">
          <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
            <li class="nav-item active">
              <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item">
              <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
            </li>
          </ul>
          <form class="form-inline my-2 my-lg-0">
            <input class="form-control mr-sm-2" type="search" placeholder="Search">
            <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
          </form>
        </div>
    </nav>
   

    <div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
        <ol class="carousel-indicators">
          <li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
          <li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
          <li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
        </ol>
        <div class="carousel-inner">
          <div class="carousel-item active">
            <img src="https://picsum.photos/1200/300?random=18" class="d-block w-100" alt="...">
            <div class="carousel-caption d-none d-md-block">
              <h5>First slide label</h5>
              <p>Some representative placeholder content for the first slide.</p>
            </div>
          </div>
          <div class="carousel-item">
            <img src="https://picsum.photos/1200/300?random=19" class="d-block w-100" alt="...">
            <div class="carousel-caption d-none d-md-block">
              <h5>Second slide label</h5>
              <p>Some representative placeholder content for the second slide.</p>
            </div>
          </div>
          <div class="carousel-item">
            <img src="https://picsum.photos/1200/300?random=20" class="d-block w-100" alt="...">
            <div class="carousel-caption d-none d-md-block">
              <h5>Third slide label</h5>
              <p>Some representative placeholder content for the third slide.</p>
            </div>
          </div>
        </div>
        <a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" data-slide="prev">
          <span class="carousel-control-prev-icon" aria-hidden="true"></span>
          <span class="sr-only">Previous</span>
        </a>
        <a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-slide="next">
          <span class="carousel-control-next-icon" aria-hidden="true"></span>
          <span class="sr-only">Next</span>
        </a>
    </div>

    <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 class="container">
        <div class="row">
            <div class="col-12 col-md-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 disabled" tabindex="-1" aria-disabled="true">A disabled link item</a>
                </div>
            </div>
            <div class="col-12 col-md-9">
                <h1>title</h1>
                <p>List groups are a flexible and powerful component for displaying a series of content. Modify and extend them to support just about any content within.</p>
                <div class="row item-group">
                    <div class="col-12 col-md-3">
                        <div class="item">
                            <img class="img-fluid" src="https://picsum.photos/300/200?random=8">
                            <h3>title</h3>
                            <p>List groups are a flexible and powerful component for displaying</p>
                        </div>
                    </div>
                    <div class="col-12 col-md-3">
                        <div class="item">
                            <img class="img-fluid" src="https://picsum.photos/300/200?random=2">
                            <h3>title</h3>
                            <p>List groups are a flexible and powerful component for displaying</p>
                        </div>
                    </div>
                    <div class="col-12 col-md-3">
                        <div class="item">
                            <img class="img-fluid" src="https://picsum.photos/300/200?random=4">
                            <h3>title</h3>
                            <p>List groups are a flexible and powerful component for displaying</p>
                        </div>
                    </div>
                    <div class="col-12 col-md-3">
                        <div class="item">
                            <img class="img-fluid" src="https://picsum.photos/300/200?random=5">
                            <h3>title</h3>
                            <p>List groups are a flexible and powerful component for displaying</p>
                        </div>
                    </div>
                    <div class="col-12 col-md-3">
                        <div class="item">
                            <img class="img-fluid" src="https://picsum.photos/300/200?random=38">
                            <h3>title</h3>
                            <p>List groups are a flexible and powerful component for displaying</p>
                        </div>
                    </div>
                    <div class="col-12 col-md-3">
                        <div class="item">
                            <img class="img-fluid" src="https://picsum.photos/300/200?random=32">
                            <h3>title</h3>
                            <p>List groups are a flexible and powerful component for displaying</p>
                        </div>
                    </div>
                    <div class="col-12 col-md-3">
                        <div class="item">
                            <img class="img-fluid" src="https://picsum.photos/300/200?random=34">
                            <h3>title</h3>
                            <p>List groups are a flexible and powerful component for displaying</p>
                        </div>
                    </div>
                    <div class="col-12 col-md-3">
                        <div class="item">
                            <img class="img-fluid" src="https://picsum.photos/300/200?random=35">
                            <h3>title</h3>
                            <p>List groups are a flexible and powerful component for displaying</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <nav aria-label="Page navigation example">
        <ul class="pagination justify-content-center">
          <li class="page-item">
            <a class="page-link" href="#" aria-label="Previous">
              <span aria-hidden="true">&laquo;</span>
            </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="#" aria-label="Next">
              <span aria-hidden="true">&raquo;</span>
            </a>
          </li>
        </ul>
    </nav>

    <div class="container-fluid main-footer text-center">
        &copy; copyright by QI-XIANG 2021
    </div>

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

    <!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js" integrity="sha384-+YQ4JLhjyBLPDQt//I+STsc9iw4uQqACwlvpslubQzn4u2UU2UFM80nGisd026JF" crossorigin="anonymous"></script>
    -->
  </body>
    <style type="text/css">
        .main-footer{
            padding: 20px 0;
            background-color: #000;
            color: white;
        }
        .item-group .item img{
            width: 100%; /* 在螢幕小的裝置上讓圖片滿版 */
        }
        .item-group .item{
            text-align: center;
        }
    </style>  
</html>

結果如下:

調整後是不是變得有點專業呢?

Conclusion

小結論

Bootstrap可以節省設計每個網頁區塊的時間，藉由Bootstrap預先定義的 .class，我們可以很快的調整區塊的一些屬性。但如果想要更客製化網頁的話，還是要套用到自己寫的CSS，此時要注意不要過度使用 !important 強制更改Bootstrap預先定義的CSS。

在學完 框架 (Framework) 的基礎知識後，相信你對寫網頁開始有那麼一點感興趣吧?在網頁的世界裡充斥著非常豐富的技術知識，例如: SEO、AJAX、Web Security等…，網頁這片無盡的大海，正在前方等著各位去探索!

BONUS 1: Lorem Picsum ( 產生假圖 )

說明: 寫網頁有時會遇到需要測試圖片的狀況，這時候假圖/隨機圖產生器就很重要了。Lorem Picsum 這個網站提供各式測試用圖片，你可以透過修改網址的方式，產生不同大小、外觀的圖片。

Lorem Picsum

BONUS 2: CSS Box Model ( 盒子模型 )

定義: The CSS box model describes the rectangular boxes that are generated for elements in the document tree and laid out according to the visual formatting model. 簡單來說平常寫的<p>lorem...</p>，就可以看做是一個Box，而Box Model則規範Box在瀏覽器上的長相。

Box Model

在Chrome裡滑鼠右鍵檢查 (F12)，可以在右方(Styles)看到如下畫面

Margin: box 的外部距離區域
Border: box 的邊界
Padding: box content 外的填充區域
Content: Content實際的寬 X 高

Hint: Chrome提供的檢查功能可以提升我們在網頁設計上的效率，比如:你寫出的網頁在不同尺寸的裝置上顯示的版面差異，方便我們做進一步的RWD (Responsive Web Design) 規劃。

金魚也能學會寫網頁-框架篇

tags: 金魚也能學會寫網頁

Setting Environment

Step 1: 下載並安裝 VS Code

Step 2: 設定 VS Code 環境

Step 3: 使用快捷鍵建立基本架構

Step 4: 使用 Live Server 檢視網頁

Image Not Showing Possible Reasons The image file may be corruptedThe server hosting the image is unavailableThe image path is incorrectThe image format is not supported Learn More →

Image Not Showing Possible Reasons The image file may be corruptedThe server hosting the image is unavailableThe image path is incorrectThe image format is not supported Learn More →

Image Not Showing Possible Reasons The image file may be corruptedThe server hosting the image is unavailableThe image path is incorrectThe image format is not supported Learn More →

檢視你的網頁!

Getting Started

Step 1: 複製Bootstrap Template到你的編輯器中

Starter template

複製貼上模板程式碼後，網頁畫面如下:

Step 2: 將適合的Bootstrap Component原始碼放入你的網頁中

1. 以網頁導覽列 (nav bar) 為例

2. 複製到template

3. Component在瀏覽器的外觀

Layout

主要有3種不同的Container (CSS Class) :

.container-{breakpoint} 細節

Grid System

Setting Row & Column

不設定的col-size情況下，3欄均分12個欄位大小 (3 X 4)

More Details

兩種主要col設定方式 (full size: 12):

Web Page Implementation

Step 1: 尋找要用到的Component放到Starter Template

我的規劃:

Step 2: 將 Component 依序放進 Starter Template

結果如下:

Step 3 (Optional): 網頁細部調整

請將下方程式碼複製到新檔案中

結果如下:

Conclusion

小結論

BONUS 1: Lorem Picsum ( 產生假圖 )

Lorem Picsum

BONUS 2: CSS Box Model ( 盒子模型 )

Last updated 2021/05/31 by Qi Xiang

Read more

原子習慣 書摘(2)

原子習慣 書摘(1)

初步掌握Git與Github應用-整合版

初步掌握Git與Github應用(Extra 1) -- Git 常用指令大全

tags: `金魚也能學會寫網頁`

Image Not Showing Possible Reasons
The image file may be corrupted
The server hosting the image is unavailable
The image path is incorrect
The image format is not supported
Learn More →

Image Not Showing Possible Reasons
The image file may be corrupted
The server hosting the image is unavailable
The image path is incorrect
The image format is not supported
Learn More →

Image Not Showing Possible Reasons
The image file may be corrupted
The server hosting the image is unavailable
The image path is incorrect
The image format is not supported
Learn More →

原子習慣書摘(2)

原子習慣書摘(1)