Bootstrap5 學習

陳信嘉

  • 讓工程師的網頁也具有美工的水準

  • 堆積木的方式來組合網頁

  • 手機、平板、電腦等裝置，一次搞定

特性介紹

  • 網頁設計框架

  • 常用的設計元件組合而成

  • 高度支援 RWD (Response Web Design)

Responsive Web Design

一個網站設計，可用在不同的裝置

RWD

Bootstrap 的理念

不寫 CSS 語法

組合設計的元件

大型看板

功能表

訊息顯示

按鈕

表格

圖案

適用對象

程式技術

美工設計

符合潮流及效能的

網頁 (RWD)

前端

後端

設計

企畫

誰能使用

學習資料來源

Bootstrap 

https://getbootstrap.com/​

Bootstrap 5

https://bootstrap5.hexschool.com/​

中文手冊 (翻譯 by 六角學院)

Learn Bootstrap4

(from w3schools)

https://www.w3schools.com/bootstrap4/default.asp​

尚未有 Bootstrap 5

必備的技能

文字編輯器是最好的工具

Visual Studio Code

主要部份

Grid System 排版

HTML / CSS 基礎元件

常用組件 Component

Javascript 互動功能

網頁變化三階段範例

階段 1：工程師寫網頁

階段 2：加入美工處理 (!!!)

階段 3：採用 Bootstrap 框架

實際練習

注意事項

  • 注意版本：5.0.x
    • 和 2.x、3.x、4.x 的版本不能相容
  • 所有的教學及範例 ==> 就在官方網站
  • 使用相容 HTML5 的瀏覽器 (Chrome)

CDN 或載入

<!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.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 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.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
    -->
  </body>
</html>

Bootstrap 提供：1 個 css 檔案 + 1 個 js 檔案

必須再自行加入 popper.js

學習項目

  • 基本架構 (css, javascript 檔案)
  • 檔案連結及 CDN 方式
  • 各元件之 class 指定 (CSS, Components)
  • Grid System 的排版方法
  • Bootstrap examples 範本

官方的學習資源

各個項目在此

優先看 Conent, Components

文件說明

請逐一練習這些項目

練習：各元件 class 指定

練習：含 Javascript 元件

練習：examples 範本

Examples

............

Bootstrap5 學習

By 陳信嘉

Made with Slides.com

Bootstrap5 學習

  • 122

More from 陳信嘉