網頁製作 網頁製作

網站規劃與設計上課補充教材

網站規劃與設計 > 課程內容 > 第 14 堂課 - bootstrap 簡易教材

第 14 堂課 - bootstrap 簡易教材

bootstrap 重點功能是內建 RWD 效果，整個排版可以有個依循的設計，主要以 12 格來進行設計，製作相關樣式時， 也能參考 bootstrap 的網站 (直接由 w3school 參考) 來取得合適的樣式，也能使用自己想要的 CSS 覆蓋原有樣式！ 設計搭建上面相當容易！
  • 14.1： 什麼是 bootstrap，如何使用 bootstrap 功能
  • 14.2： 搭配 HTML5 的版面標籤配置與 position 應用
  • 14.3： bootstrap 的網格系統 (grid) 與 RWD
  • 14.4： 使用導覽列 (navbar)
  • 14.5： 使用 card 或自訂 div 進行文章、資料的處理
  • 14.6： 使用旋轉木馬 (Carousel) 設計自動旋轉圖示

14.1： 什麼是 bootstrap，如何使用 bootstrap 功能

  1. bootstrap 的 github 網站： https://github.com/twbs/bootstrap
  2. 可以參考的 W3C schools 教學網站： https://www.w3schools.com/bootstrap5/index.php
  3. 使用 CDN (Content Delivery Network) 的方式，建立一個非滿版的簡易網頁：
    • 可參考 Get started：https://www.w3schools.com/bootstrap5/bootstrap_get_started.php
    • 實際製作的方式： 
      <!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet"
     href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js">
  </script>
</head>
<body>

<div class="container">
  <h1>My First Bootstrap Page</h1>
  <p>This part is inside a .container class.</p>
  <p>The .container class provides a responsive fixed width container.</p>
</div>

</body>
</html>
  4. 例題：建立一個 index.html 的網頁，將上述的資料複製到網頁內，然後將 title, 與 h1 內容修訂， 同時測試 class="container" 與 class="container-fluid" 的差異！另外， html 裡面的 lang 也能設定為『zh-Hant-TW』。 最終請改回 container 這種非滿版的模式。
  5. 如果要使用 google 字型，尤其是中文，同時因為預設 bootstrap 的字體大小太小了，想要調整的話，可以這樣實驗看看：
    • google 的 Noto 字型連結：https://fonts.google.com/noto/fonts?query=chinese
    • 請選擇兩個繁體中文 (有襯字(serif)與無襯字(sans))，以及兩個英文字型 (有襯字與無襯字)，參考使用 import 的方法， 選擇完畢，按下『get code』按鈕，選擇『@import』方式，即可看到可以處理的方案了！
  6. 例題：再加一個名為 mystyle.css 的檔案，並且呼叫到 index.html 當中。mystle.css 裡面， 設定使用 google 字型，請使用 import 的方式，建立 4 種字型的類別 (class)。之後，更改 body 的預設屬性， 設定字體大小為 14pt，行距為 1.6em，字型預設使用有襯字google英文、有襯字google中文。

14.2： 搭配 HTML5 的版面標籤配置與 position 應用

  1. html5 的版面配置標籤，經常有 header, nav, aside, section, article, footer 等
    • header：可以用來包含網頁的標題、網站的整體標題或 Logo 等，也可以將導覽列包含在這個項目內。
    • nav：就是 navigator ，領航員之意，所以裡面放置的為主要的導覽連結。一般放在 header 內或 header 後。
    • aside：包含周圍內容有關，但獨立的內容，通常放在側邊欄展示；
    • section：比較通用的結構元素，大部分的內容可以填放在這個地方。
    • article：可以視為特別的 section，一般是指可獨自填滿整個頁面的獨立內容，例如日誌、部落格文章等。
    • footer：網頁的頁尾部份，包括作者資訊、版權宣告與其他相關連結等資訊。
  2. 例題：將 index.html 的內容，透過最外層的 container ，底下分為 (1)header 區塊, (2)nav 區塊, (3)section 裡面有一個 article 一個 aside, (4)section 區塊, (5)footer 區塊。每個區塊內容就寫該區塊的標籤即可。並將上述的標籤， 通通先打上 border: 1px solid gray 的模樣！
  3. 要使用位置定位 position 時，父元素、子元素，全部都需要 position ！不能僅有子元素有此 CSS 屬性名。 position 基本上有幾種常見的位置，分別是：
    • relative：可以增加上、下、左、右的移動，來讓這個元素在目前的位置上面進行偏移。 比較特別的是，其他週邊的元素並不會被這個元素的移動而被影響！所以，如果你的版面配置是正常的， 但只是想要移動某個元件，那麼將該元件加上 relative 的屬性值之後，就可以單獨對這個元素做變動了！
    • absolute：絕對位置～最簡單的想法，就是位置以父元素的左上角原點 (起始位置) 來更動的！不過你得要特別注意， 跟這個元素在同一個父元素的其他元素，會對這個元素『視而不見』！因為這個絕對位置的元素已經自己獨立存在於父元素的環境下了！ 所以，此時你會發現到整個元素浮動在畫面上！而其他元素會被覆蓋喔！
    • fixed：那個 absolute 主要的參考座標是父元素，而這個 fixed 的參考座標則是『瀏覽器！』 你應該常常發現很多網站的許多導覽列都是固定在瀏覽器上的特定位置， 那就是 fixed 的功能！
    • sticky：透過 top, buttom, left, right 等屬性，可以將元素在移動到某個位置時，黏在該位置上！
  4. 搭配 position 的屬性，除了 padding, margin 之外，常用底下的方式來處理：
    • left: Npx：針對參考座標之左邊留白的距離
    • right: Npx ：針對參考座標之右邊留白的距離
    • top: Npx ：針對參考座標之上方留白的距離
    • bottom: Npx ：針對參考座標之下方留白的距離
    另外，要注意的是，通常使用 position 時，都是針對某個『區塊元素』進行位置調整，而不是針對行內元素 (inline-block) 進行調整的。 如果是需要針對行內元素做調整，應該使用的是 text-align 才對！
  5. 如果元素之間有互相覆蓋的情況，或子元素超出父元素時，經常可以使用的屬性有：
    • overflow: {visible|hidden|scroll|auto}：屬性值意思是 {資料不會被留置在父元素內，會超出父元素的框框之外|超出的部份會被隱藏|父元素會產生拉條， 讓使用者可以拉動拉條在父元素內查看超出的部份|少少資料不會有拉條，超出父元素空間的資料量時，才會出現拉條}
    • z-index: N ：N 為一個數值，多個具有 z-index 的元件，較大的 z-index 會覆蓋在較小的 z-index 元件上。
  6. 例題：處理一個回到最上方 (top) 的按鈕：
    • 設定錨點：在 index.html 的 body 內，使用 a 與 id 增加一個定位點，id 設定為 mytop 好了。這個定位點放置在全部頁面的最上方。
    • 設定連結：在 body 最後面，增加一個 p 標籤，內容文字寫『 top 』，加入超連結，當按下 top 時，可以回到最上方頁面。這個 p 元素， 設定 class name 為 mytop
    • 設定留白：在 mystyle.css 的 footer 設定，增加 margin-bottom 大約 500px (或 1000px)，讓底部多出一些空白。
    • 設定 mytop class 的 CSS：在 mystyle.css 內，設定 .mytop，使用 fixed 位置，寬度約為 50px，文字顏色白，背景色黑， 定位在右下角，離右邊、下方各 10px 的空間上。內部文字為置中。
    • 設定 .mytop a，字體為白色，轉為區塊元素 (display: block)，文字不要有底線
    • 開始測試，注意，要將瀏覽器拉到最下方之後，才按下 Top 測試喔！
  7. bootstrap 的圖片應用，可以參考：https://www.w3schools.com/bootstrap5/bootstrap_images.php。這個頁面中，也談到圖片的位置 (aligining images)， 與置中對齊 (mx-auto, d-block) 的功能！相當有用！同時，有需要的話，也能使用響應式圖片來根據父元素做自動放大縮小(img-fluid)。
  8. 例題：讓你的首頁最左上方出現你的『圓形』大頭貼： 
    <div style='width:100px; height:100px; border: 1px solid gray;'>
<img src='images/amanda.jpg'  />
</div>
    • 先註解圖片，在 div 裡面，增加圓形圖示的 class，看看能不能看到圓形的框線。
    • 放開圖示，看看圖片會變如何！
    • 在 div 裡面的 style 增加 overflow: hidden 的設定！再回來看看情況。
    • 在 img 裡面，增加 img-fluid 的類別，看看圖片正確與否！
    • 若需要調整圖片在圓內的位置，需在 div 增加 relative, 在 img 增加 absolute 的位置，然後在 img 裡面使用 top, left 調整。
    • 若需要調整圓的位置，可以將 div 位置改為 absolute，且 header 標籤也需要 relative 位置，然後就能調整了！ 但是要注意，在 header 內的其他元素，就會看不見圓形資料了！
  9. 例題：以絕對位置 (position: absolute) 設定範圍內的圖示位置
    • 先在 index.html 中，在 footer 上面，再加一個 section，裡面放置多個上面的圓形圖示。
    • 透過 top, left 去調整每個圖示的位置，同時，可以透過『 transform: rotate(30deg) 』之類的設定，去改變旋轉角度
    • section 內，需要 position 之外，也需要設定 height，否則會出現沒看到 section 的框線問題。
    • 至於圖示的 div 圓框，則需要 absolute 位置，這樣才能調整到正確的位置上！也可以透過百分比 (%) 的單位，設定在 top/left 上面！

14.3： bootstrap 的網格系統 (grid) 與 RWD

  1. bootstrap 的 .container 對於畫面解析度的寬度設定方式：
    1. (.col-) Extra small devices (<576px) → width: auto (or no width)
    2. (.col-sm-) Small devices (≥576px) → width: 540px
    3. (.col-md-) Medium devices (≥768px) → width: 720px
    4. (.col-lg-) Large devices (≥992px) → width: 960px
    5. (.col-xl-) Xlarge devices (≥1200px) → width: 1140px
    6. (.col-xxl-) XXL devices (≥1400px) → width: 1320px
    7. 資料來源：https://www.w3schools.com/bootstrap5/bootstrap_grid_system.php
  2. bootstrap 的 12 個網格 (grid) 欄位規劃設計：
    span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1
     span 4  span 4  span 4
    span 4 span 8
    span 6 span 6
    span 12
  3. 如果右側 aside 寬度想要比較固定，因此越小的裝置，佔用的格數越多，越大的裝置，佔用的格數越小，那可以這樣設計： 
    <div class='row'>
  <div class='col-md-8 col-lg-9 col-xl-10'>文章欄位</div>
  <div class='col-md-4 col-lg-3 col-xl-2'>側邊欄</div>
</div>
  4. 例題：在 index.html 當中，在 nav 標籤底下有個 section 裡面有 article 以及 aside， 請透過上述的方式，分別在父元素 (section) 以及兩欄子元素 (article, aside) 加入正確的 class。另外，自行調整你要的欄位大小， 不需要跟上面的設定相同。
  5. 使用 fontawesome 小圖示，前往https://fontawesome.com/ 取得小圖示！不過，目前新的版本 ( > 6 ) 都需要額外的註冊帳號。所以，這邊我們使用舊版的 fontawesome 5.x 的版本。 使用的方式也只需要在你的 head 當中 link 即可！如下： 
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" 
    integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" 
    crossorigin="anonymous">
    • 進 https://fontawesome.com/ 並點擊最上方的 Icons 按鈕
    • 點擊右側版本，選擇 5 的版本喔！
    • 尋找 home 或 facebook, instagram, phone 等，即可取得免費的小圖示 (不要選 Pro 以上的付費)
    • 點擊你要的圖示，就可以取得不同的圖示使用方式，例如 home 可以是： 
      <i class="fas fa-home"></i>
  6. 顏色的處理：
  7. 例題：開始稍微美化你的 header 部份：
    • 讓你的 header 分為兩個欄位，但是小於 md 以下的就變成一個欄位，否則就是兩個欄位。
    • 左側欄位裡面主要放大頭照以及那個 h1 的說明
    • 右側欄位擺放你的聯絡方式，可以使用 fontawesome 網站找到的相關小圖示來增加超連結效果
    • 也可以加上一些文字顏色或底色顏色來處理你的 header 項目。
  8. RWD 應該要完成三個重點：
    • 可以自動改變排版的區塊
    • 靈活有彈性的圖片 (可隨螢幕大小來調整比例)
    • 使用 CSS3 的 Media Queries 功能
    處理的方案可以是底下的模樣： 
    <head>
  ...
  <style>
  @media (max-width: 767.98px) {
	  body {
		font-size: 12px;
	  }
  }
  @media (min-width: 768px) and (max-width: 1199.98px) {
	  body {
		font-size: 14px;  
	  }
  }
  @media (min-width: 1200px) {
	  body {
		font-size: 16px;  
	  }
  }
  ....
  </style>
</head>
  9. 例題：讓你的大頭照能夠根據裝置的解析度調整大小：
    • 將 index.html 裡面 header 的那個大頭貼的 div，把高度與寬度取消。同時，在 class 裡面新增一個 myhead 的類別
    • 在 mystyle.css 裡面，透過上述的方式，僅設定 < 767.98px 及 ≥ 768px 兩種情況，讓 .myhead 的寬度與高度， 分別設定為 50px 與 100px (不同螢幕的圖示大小會有變化喔！)

14.4： 使用導覽列 (navbar)

  1. bootstrap 提供多種導覽列功能，詳情參考：https://www.w3schools.com/bootstrap5/bootstrap_navbar.php
  2. 要達成 navbar 的功能，基本上在父元素加上 .navbar 之後，底下可以使用的方式為：
    • 若要縮放，可以在最頂層的 navbar 後面，加上 .navbar-expand-lg(xxl,xl,lg,md,sm) 指定縮放解析度
    • 承上，加上 .navbar-toggler 與 data-bs-toggle='collapse' 與 data-bs-target='#name' 處理！
    • 在 navbar 後面，基本上使用 ul 加上 .navbar-nav 類別即可。
    • li 要加上 .nav-item 類別
    • 在 ul li a 的 a 裡面，要用 nav-link ，可以搭配 ative 與 disabled 進行顏色變化
    • 在獨立於 ul 之外的 a 為 navbar-brand 時，該項目就會變成 Logo 喔！
    • 若需要下拉式選單，則需要透過
  3. 例題：建立你的導覽列內容：
    • 優先參考這個範例：https://www.w3schools.com/bootstrap5/tryit.asp?filename=trybs_navbar_dropdown&stacked=h
    • 整體顏色改為 bg-light 與 nav-light 的設計
    • 要大於 lg 的解析度時，才會解開，否則會變成右方縮小圖示
    • Logo 的字樣，改成 fontawesome 的 home 圖示，且點擊會進入 index.html 檔案
    • 修改連結 Link 成為 (HTML練習, CSS練習, bootstrap 練習, vue 練習) 等，至少四個連結
    • Dropdown 改為『成果展示』，內容有 4 個，也是與上面提到的練習有關即可
    • 再加一個 dropdown，內容為『階段測試』裡面有兩個連結，分別是『期中報告』與『期末報告』
  4. 例題：讓導覽列可以移動後放置到最上方。請查詢 w3c 的 navbar 頁面，以 sticky 為關鍵字查詢， 將查詢到的結果加到你的 index.html 當中，並測試導覽列會不會『黏』在最上方。
  5. 例題：讓你的導覽列增加『登入』與『註冊』的按鈕～

14.5： 使用 card 或自訂 div 進行文章、資料的處理

  1. 參考聯合新聞網的設計概念：https://udn.com/news/cate/2/7227，左、右側兩個欄位，右側比較小，有點類似 card 的展示方式。
  2. 關於照片的長寬比，可以參考 aspect-ratio 與 object-fit 的設定值，有助於處理照片的模式。
  3. 例題：使用上述的方法，增加底下的資料到你的 index.html 裡面的 aside 當中，至少填寫 3 個以上，測試看看。 
    <div class="card" style='width: 100%;'>
	<img src='images/amanda.jpg' class='card-img-top myfig43'>
	<div class="card-body">
		<h4 class="card-title">故事介紹</h4>
		<p class="card-text">故事-1</p>
		<a class='btn btn-primary' href='#'>see more</a>
	</div>
</div>
    記得調整一下 aspect-ratio、object-fit、object-position 等，測試一下整體的感覺！
  4. 模仿聯合新聞報的左方小方塊的設定方式，圖片在左側、標題在右上方、內文在中央、時間在右下方， 看看能不能自訂一個 .mynews 的設定，並以 img, h2, p, h6 做設計看看。以下方的原始碼為例，加入到 article 當中。 
    <div class='mynews'>
	<img src='images/amanda.jpg' >
	<h2><a href='#'>HTML/基本上，可以使用的 tag 有 header / nav / section /...</a></h2>
	<p>學習 HTML5 版面配置，經過多年的分析，發現常用的 div class name 
		為 header/nav/section/article 等等，
		因此，後來乾脆就給了這些常用的 class name 變成 tag name 嚕！...</p>
	<h6>2025/04/07</h6>
</div>
    1. 在 mystyle.css 中，建立 .mynews，先給 border，以及 position 為 relative。
    2. 建立 .mynews img，寬度給 30%，剛剛的 myfig43 內容搬到這裡來，給予 border-radius: 10px 的圓角看看。 增加 float 功能，讓圖片漂浮在左側
    3. 建立 .mynews h2，字體給 1.5em，寬度為 65%，同樣先給 border，同樣漂浮在左側，但是與左側元素具有 2% 的外部留白
    4. 建立 .ynews p，寬度給 65%，漂浮在左側，與左側元素有 2% 留白，跟上方元素有 1em 的距離，同樣給予 border， 行距降低為 1.2em 就好，字體顏色設定為 gray 灰色
    5. 回頭修改 .mynews，增加 overflow: auto，字體對齊設計為 justify，跟下方元素具有 1em 的距離。
    6. 建立 .mynews h6，位置設定為 absolute，黏在右下方。同樣先給 border。
    7. 建立 .mynews a，取消底線，顏色為黑色
    8. 建立 a:hover，顏色變化為 purple 或其他亮色。
  5. 用 Modal 增加彈出視窗的應用：https://www.w3schools.com/bootstrap5/bootstrap_modal.php，且主要參考： https://www.w3schools.com/bootstrap5/tryit.asp?filename=trybs_modal_centered用在 header 上面， 右方的小按鈕。
  6. 例題：以下方的設定為例，放在你的 index.html 內部的 header 裡面，並透過上述置中 modal 的功能， 讓用戶點擊文字時，會有重要訊息的資料框在畫面正中央。 
    <span data-bs-toggle='modal' data-bs-target='#mymodal' type='button'>
	<i class="far fa-newspaper"></i>news</span>

14.6： 使用旋轉木馬 (Carousel) 設計自動旋轉圖示

  1. 先參考 w3c 的 carousel 用法：
  2. 例題：使用上述的旋轉木馬功能，抓出至少 3 張圖片，替換旋轉木馬程式碼，讓你的圖示可以輪流播放。 另外，為了擔心畫面太大導致的圖片解析度問題，因此整體旋轉木馬最大寬度只能到 800px，且當 section 解析度高於 800px 時， 輪播畫面需要置中輸出。另外，也應該要根據圖片的底色，每一張圖片都修改解釋的顏色！另外，善用上面談到的 myfig43 的圖片設計方式，可以讓你拿到的圖片在 X/Y 比例不同時，也不會造成圖片比例被扭曲的問題。