HTML-整合Bootstrap 4 (或者其它版本)

by wish | 12 月 20, 2024 | 程式 | 0 comments

Bootstrap是推特提供的前端框架，從3.0開時流行起來，筆者寫這篇文章的時候最新版是5.x

如果你的工作是維護舊專案，大概不太會需要弄新的套件上去，但把這個學起來無妨。

Table of Contents

整合新套件到系統中的幾個重點

授權條款，套件的原始碼雖然放在Github上，但其實不能商用，例如EasyUI。然後有些套件是特定版本之後的不能免費商用。
看程式碼運作的環境，如果是隔離無法上網的環境，就不能使用CDN，需下載released版本自己整。
看Github的星星數，通常星星數越多的套件越多人使用，代表有問題的時候比較容易google到答案。
看一下Getting Start跟Example。

授權條款

可以商用的

MIT
Apache 2.0
BSD 3-Clause

可以商用但有附加條款的

GPL
LGPL
Microsoft Public License (Ms-PL)

不能商用的

All Rights Reserved
完全沒有寫授權條款，算在不能商用的。
Proprietary Licenses（專用授權條款）
Creative Commons Non-Commercial (CC BY-NC / CC BY-NC-SA)（禁止商用的創用條款）

這邊簡單的整理了常見的條款，在引用開源的第三方套件務必要注意套件的使用授權。

Bootstrap的授權條款

到Bootstrap 的Github找 License

Bootstrap Github

點進去後可以確認是MIT License

開始整合-使用CDN

根據網站說明，有CDN跟自己抓檔案整合。

<html>
  <head>
    <!-- 其它內容... -->
    <!-- style放這-->
  </head>
  <body>
    <!-- 頁面內容... -->
    <!-- JS放這 -->
  </body>
</html>

CDN整合的話

CSS放head結束前

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

JS放body結束前

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>

收工…

放CDN的好處

不佔用網站磁碟空間、流量。
不會被源碼檢測掃到。
方便省事

基本上如果不是隔離環境，我一律推薦CDN就好

手動整合

解壓縮bootstrap資料夾

解壓縮之後會有css跟js資料夾，全部複製到網站目錄下

下載jquery

JS部分

根據getting strart的描述，這東西的js還需要jQuery跟Popper，不過Popper本身有整合了，所以我們還需要整合jQuery

網址：jQuery

jquery程式碼要自己存

打開來會是一堆英文字母，你需要按下右鍵另存新檔

將bootstrap跟jquery放到網站資料夾

這邊我開了一個新的資料夾，並且創了index.html

參考了bootstrap 4的start template製作的index.html的內容如下，這邊是還沒整合的

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

    <!-- Bootstrap CSS -->

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>
    <!--JS-->
  </body>
</html>

放置檔案到網站目錄

將bootstrap的js跟css這兩個資料夾放到網站跟目錄
將jquery-3.7.1.min.js放到網站的js目錄。

完成後如下：

放置bootstrap 4檔案後目錄

再來我們要開始整合

插入CSS檔案的語法

<link rel="stylesheet" href="檔案路徑" />

以我們的需求則是需要插入這個檔案

<link rel="stylesheet" href="css/bootstrap.min.css" />

路徑為css/bootstrap.min.css，css是資料夾，檔名的min 指的是縮減過的檔案，去除空白、註解的檔案，可以加速網站載入。

插入至index.html檔案後如下

<!DOCTYPE html>
<html lang="zh-tw">
  <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="css/bootstrap.min.css" />
    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>
    <!--JS-->
  </body>
</html>

插入js至index.html

接著要插入兩個js，一個是jquery的，另一個是bootstrap

<script type="text/javascript" src="js路徑或網址" />

這邊重點：

由於bootstrap要「依賴」jquery，所以jquery要先放。

<script type="text/javascript" src="js/jquery-3.7.1.min.js"></script>
<script type="text/javascript" src="js/bootstrap.bundle.js"></script>

完成後如下。

<!DOCTYPE html>
<html lang="zh-tw">
  <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="css/bootstrap.min.css" />
    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>
    <!--JS-->
    <script type="text/javascript" src="js/jquery-3.7.1.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.bundle.js"></script>
  </body>
</html>

測試成果

我們在頁面上放幾個boostrap的按鈕看看，有沒有變化

直接複製boostrap 4網站上example

<!DOCTYPE html>
<html lang="zh-tw">
  <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="css/bootstrap.min.css" />
    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>
    <button type="button" class="btn btn-primary">Primary</button>
    <button type="button" class="btn btn-secondary">Secondary</button>
    <button type="button" class="btn btn-success">Success</button>
    <button type="button" class="btn btn-danger">Danger</button>
    <button type="button" class="btn btn-warning">Warning</button>
    <button type="button" class="btn btn-info">Info</button>
    <button type="button" class="btn btn-light">Light</button>
    <button type="button" class="btn btn-dark">Dark</button>

    <button type="button" class="btn btn-link">Link</button>
    <!--JS-->
    <script type="text/javascript" src="js/jquery-3.7.1.min.js" />
    <script type="text/javascript" src="js/bootstrap.bundle.js" />
  </body>
</html>

整合結果

補充說明-jQuery版本

Bootstrap文件提供的jQuery是slim版，有些功能其實沒作用，例如 fadeIn() 跟 fadeOut()

我建議換成常見的jQuery min版就好，min的意思是迷你版的，去除程式中的註解、換行、縮排空白等，通常可以讓程式碼降至原本1/3以下大小

CDN JS的jQuery連結

CDN JS

複製這個值接貼

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js" integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>