正文

bootstrap4/3页面基础模板与兼容旧版本浏览器

痴者工良  2022-02-15  250

关键词：

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/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 引入不起作用解决，请点击 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/

官网图片

哪些角度版本与 AspNetCore SpaServices 兼容？

】哪些角度版本与AspNetCoreSpaServices兼容？【英文标题】：WhatangularversionsarecompatiblewithAspNetCoreSpaServices?【发布时间】：2021-10-2510:28:59【问题描述】：我们正在将使用.net框架和angular1.7的旧应用程序转换为.netcore2.1。我的第一步是转... 查看详情

Spring Cloud 数据流与基础 Cloud Foundry 版本的兼容性

】SpringCloud数据流与基础CloudFoundry版本的兼容性【英文标题】：springclouddataflowcompatibiltywithbasecloudfoundryversions【发布时间】：2017-02-2418:12:36【问题描述】：我正在阅读SpringCloud数据流的发布公告。https://spring.io/blog/2017/02/22/spring-clou... 查看详情

一分钟理解向后兼容

什么是兼容谈到兼容，少不了获得兼容收益的目标对象，以及提供兼容功能的组件这两个相互对应的概念。如果一个目标对象，能否在同一组件的同个不同版本上协同工作，则移该组件的两个版本是兼容的，如下图所示：兼容性... 查看详情

与 Xcode 11.3.1 兼容的最新 Flutter 版本是啥？

】与Xcode11.3.1兼容的最新Flutter版本是啥？【英文标题】：WhatisthelastFlutterversioncompatiblewithXcode11.3.1?与Xcode11.3.1兼容的最新Flutter版本是什么？【发布时间】：2021-08-1804:15:14【问题描述】：我正在尝试在MacosCatalina上构建我的Flutter应... 查看详情

Swift 动态库是不是向后兼容旧的 swift 版本项目

】Swift动态库是不是向后兼容旧的swift版本项目【英文标题】：AreSwiftdynamiclibrariesbackwardcompatiblewitholderswiftversionprojectsSwift动态库是否向后兼容旧的swift版本项目【发布时间】：2017-04-0608:21:07【问题描述】：我开始从头开始开发SDK... 查看详情

博客园笔记

...建议你通过只改变css的方式来制作新的皮肤模板。当然，页面的部分代码你也是可以更改的，例如一些图片的地址。但是，请你在递交作品的时候，请同时提交对页面部分代码的修改备注和说明。以便我们了解。2：为了保证页... 查看详情

无法在 macOS Sierra 上运行旧版本的 Xcode

...。我一直在尝试启动旧版本，它说Xcode版本与我的macOS不兼容。如何解决这个问题？或者我需要安装旧版本的MacOS 查看详情

在哪里可以找到旧版本的 iPhone 示例代码

...代码，因为似乎苹果只会让您下载最新版本（与iphone3.2+兼容）。是否有这些地方的存档，是否有理由删除旧版本的相同代码？【问题讨论】：【参考方案1】：他们中的很多人会使用贬值的类，这查看详情

关于jquery版本与兼容ie7,ie8的一些问题

...ery版本很多，当初我这小白以为版本越高越好，后来在写页面时要兼容到ie7,8时，才发现遇到一些问题。我觉得要兼容ie7,8尽量不要用jq3+,用jq1+就好了。我的页面有用到bootstrap页签，在引入jq1-7-1,会报错：Bootstrap‘sJavaScriptrequiresjQ... 查看详情

在角度 bootstrap4.3 类中不起作用

】在角度bootstrap4.3类中不起作用【英文标题】：Inangularbootstrap4.3classnotworking【发布时间】：2022-01-1111:30:02【问题描述】：我使用的是Angular7版本，并且我已将我的引导程序版本从3.7更新到4.3。在bootstrap3.7下面的代码可以工作，但... 查看详情

opencv各版本差异与演化，从1.x到4.0

...不可避免地会带有旧版本的痕迹，毕竟新版本是从旧版本基础上“生长”出来的，新老版本间能看到比较明显的过渡痕迹，同时出于降低迁移成本的考虑，需要（部分）向前兼容因此，如果新版本已经稳定，且需要从头开... 查看详情

Hadoop-3.0.0 与旧版本 Hive、Pig、Sqoop 和 Spark 的兼容性如何

】Hadoop-3.0.0与旧版本Hive、Pig、Sqoop和Spark的兼容性如何【英文标题】：HowisHadoop-3.0.0\'scompatibilitywitholderversionsofHive,Pig,SqoopandSpark【发布时间】：2017-12-2107:31:57【问题描述】：我们目前在10节点集群上使用hadoop-2.8.0，并计划升级到最... 查看详情

jq基础样式篇

...一个JavaScript脚本库，不需要特别的安装，只需要我们在页面<head>标签内中，通过script标签引入jQuery库即可。jQuery分2个系列版本 1.x 与 2.x，主要的区别在于2.x不再兼容IE6、7、8浏览器，这样是为了兼容移动端查看详情

单页面响应式模板：黑石

预览：部分页面展示：演示及下载：演示地址免费下载更多模板请立刻访问模板集市介绍：单页面响应式模板，支持ipad，iphone浏览器兼容：现代浏览器（支持HTML5/CSS3）... 查看详情

关于小程序基础库

基础库基础库与客户端之间的关系小程序的能力需要微信客户端来支撑，每一个基础库都只能在对应的客户端版本上运行，高版本的基础库无法兼容低版本的微信客户端。关于基础库的兼容方法，可以查看「兼容处理」章节。基... 查看详情

关于小程序基础库

在页面上包含两个版本的 jQuery 而不会影响旧插件

】在页面上包含两个版本的jQuery而不会影响旧插件【英文标题】：IncludetwoversionsofjQueryonapagewithoutaffectingoldplugins【发布时间】：2012-06-0613:32:27【问题描述】：我们的drupal站点使用我们尚未升级的jQuery版本1.2.1运行。问题是这样的... 查看详情

向下兼容,向上叫啥

...文档或系统仍能被正常操作或使用，或在旧版本的类库的基础上开发的程序仍能正常编译运行的情况。例如较高档的计算机或较高版本的软件平台可以运行较为低档计算机或早期的软件平台所开发的程序。向下兼容可以使用户在... 查看详情