Bootstrap 4/3 頁面基礎模板 與 相容舊版本瀏覽器
阿新 • • 發佈：2018-11-12
Bootstrap 3 與 4 差別很大，目錄檔案結構、所引入的內容也不同，這裡說說一下 Bootstrap 引入的檔案、網頁模板和相容性問題。本網站剛剛搭建好，正好發一下文章原來測試網站。
Bootstrap 4
目錄結構如下
bootstrap/
├── css/
│ ├── bootstrap.css
│ ├── bootstrap.css.map
│ ├── bootstrap.min.css
│ ├── bootstrap.min.css.map
│ ├── bootstrap-grid.css
│ ├── bootstrap-grid.css.map
│ ├── bootstrap-grid.min.css
│ ├── bootstrap-grid.min.css.map
│ ├── bootstrap-reboot.css
│ ├── bootstrap-reboot.css.map
│ ├── bootstrap-reboot.min.css
│ └── bootstrap-reboot.min.css.map
└── js/
├── bootstrap.bundle.js
├── bootstrap.bundle.min.js
├── bootstrap.js
└── bootstrap.min.js
Bootstrap 4需要依賴的檔案比 Bootstrap 3多，許多元件需要依賴 JavaScript才能執行。例如， jQuery、Popper.js 以及JavaScript外掛。
官方網頁模板如下
<!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.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"><title>Hello, world!</title> </head> <body> <h1>Hello, world!</h1> <!-- Optional JavaScript --> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://cdn.bootcss.com/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> <script src="https://cdn.bootcss.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> </body> </html>
手機看著亂的話，看圖
精簡後看一下
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link rel="stylesheet" href="./css/bootstrap.min.css"> <title> 666 </title> </head> <body> <script src="./jquery/3.2.1/jquery.slim.min.js"></script> <script src="./popper.min.js"></script> <script src="./js/bootstrap.min.js"></script> </body> </html>
注意
- Bootstrap 4中，沒有 Popper.js檔案
- 但是
bootstrap.bundle.js和壓縮後的bootstrap.bundle.min.js已經包含了 Popper
仔細看一下，上面官方模板中，引入了 jquery.slim.min.js 而不是 jquery.min.js 。不知道官方為什麼做~~~ - jquery.slim.min.js 與 jquery.min.js 的區別是 jquery.slim.min.js 是瘦身版，去除了Ajax功能。
Bootstrap 3
目錄結構如下
bootstrap/
├── css/
│ ├── bootstrap.css
│ ├── bootstrap.css.map
│ ├── bootstrap.min.css
│ ├── bootstrap.min.css.map
│ ├── bootstrap-theme.css
│ ├── bootstrap-theme.css.map
│ ├── bootstrap-theme.min.css
│ └── bootstrap-theme.min.css.map
├── js/
│ ├── bootstrap.js
│ └── bootstrap.min.js
└── fonts/
├── glyphicons-halflings-regular.eot
├── glyphicons-halflings-regular.svg
├── glyphicons-halflings-regular.ttf
├── glyphicons-halflings-regular.woff
└── glyphicons-halflings-regular.woff2
基礎模板和引入的檔案如下
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <!-- 宣告為響應式頁面 --> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- [end] --> <!-- meta 標籤需要放在最前面 --> <title>Bootstrap 官方給出的示例</title> <!-- Bootstrap 檔案 --> <link href="./3.3.7/dist/css/bootstrap.min.css" rel="stylesheet"> <!-- HTML5 shim 和 Respond.js 是為了讓舊版本的IE瀏覽器支援Bootstrap，因為 IE9 以下可能不支援 HTML5 元素和媒體查詢（media queries）功能 --> <!-- 警告：通過 file:// 協議（就是直接將 html 頁面拖拽到瀏覽器中）訪問頁面時 Respond.js 不起作用 --> <!--[if lt IE 9]> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/html5shiv.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dest/respond.min.js"></script> <![endif]--> </head> <body> <!-- jQuery (Bootstrap 的所有 JavaScript 外掛都依賴 jQuery，所以必須放在前邊) --> <script src="./1.12.4/dist/jquery.min.js"></script> <!-- 載入 Bootstrap 的所有 JavaScript 外掛。你也可以根據需要只加載單個外掛。 --> <script src="./3.3.7/dist/js/bootstrap.min.js"> </script> </body> </html>
手機看不清楚請看圖
精簡後
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Bootstrap 官方給出的示例</title> <link href="./3.3.7/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/html5shiv.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dest/respond.min.js"></script> </head> <body> <script src="./1.12.4/dist/jquery.min.js"></script> <script src="./3.3.7/dist/js/bootstrap.min.js"></script> </body> </html>
注意：
官方提供的壓縮的原始碼中，不包含 html5shiv和 Respond.js檔案，需要使用到這兩個檔案，要自行下載。
如何相容
- 上面已經說了引用 html5shiv和 Respond.js 檔案，用以支援 IE9 及以下的瀏覽器。
- 細心的朋友可能發現，在示例模板中，Bootstrap 4沒有相容性檔案，而 Bootstrap 3中，有 html5shiv.js 和 respond.js。
↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ - 這是因為Bootstrap 4放棄了對 IE8 以及 iOS 6 的支援，現在僅僅支援 IE9 以上 以及 iOS 7 以上版本的瀏覽器。
也就是說，Bootstrap3 能夠通過引用兩個檔案實現瀏覽器相容，而Bootstrap 4已經不能再支援舊版本瀏覽器了。。。(別急，下面介紹解決辦法) - html5shiv 和 Respond.js 兩個檔案
具體怎麼用 ，請點選 https://blog.csdn.net/bluefish_flying/article/details/72594152 - html5shiv.js 和 respond.js 引入不起作用解決 ，請點選 https://www.cnblogs.com/xiaoshudian/p/7138624.html
- html5shiv html5shiv是一個針對 IE 瀏覽器的 HTML5 JavaScript 補丁，目的是讓 IE 識別並支援 HTML5 元素
- 詳細介紹和各個版本，請點選 https://www.bootcdn.cn/html5shiv/
官方雖然不再支援IE9以下的瀏覽器，但是有 “民間組織” 閒的慌，甚至實現了對IE6 的支援。。。
這個就是 “bsie專案” 。 地址 http://www.bootcss.com/p/bsie/
官網圖片
