Bootstrap 4/3 頁面基礎模板與兼容舊版本瀏覽器

時間 2019-11-25

標籤 bootstrap 頁面基礎模板兼容舊版瀏覽器欄目 Bootstarp 简体版

原文原文鏈接

Bootstrap 3 與 4 差異很大，目錄文件結構、所引入的內容也不一樣，這裏說說一下 Bootstrap 引入的文件、網頁模板和兼容性問題。本網站剛剛搭建好，正好發一下文章原來測試網站。css

Bootstrap 4

目錄結構以下html

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插件。

官方網頁模板以下html5

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

手機看着亂的話，看圖jquery

精簡後看一下npm

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

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

基礎模板和引入的文件以下svg

<!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/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/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/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/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 引入不起做用解決，請點擊 http://www.javashuo.com/article/p-gqnevtjq-du.html
html5shiv html5shiv是一個針對 IE 瀏覽器的 HTML5 JavaScript 補丁，目的是讓 IE 識別並支持 HTML5 元素
詳細介紹和各個版本，請點擊 https://www.bootcdn.cn/html5shiv/