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

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/

官网图片

原文地址：https://www.cnblogs.com/whuanle/p/9946705.html

时间： 2024-07-29 17:32:48

Bootstrap 4/3 页面基础模板 与 兼容旧版本浏览器的相关文章

兼容低版本浏览器的getElementByClassName方法

/*兼容低版本浏览器的getElementByClassName方法*/ function getElementsByClassName(root,className){ if(root.getElementsByClassName){ return root.getElementsByClassName(className); }else{ var elements=root.getElementsByTagName(); var result=[]; for(var i=0,element;

a标签内容在div中垂直居中，不兼容低版本浏览器

<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title></title></head> <style>.box{width:100px;height:200px;background:orange;border:2px solid #ccc;display: table;}.box a{dis

React+Webpack+ES6 兼容低版本浏览器（IE9）解决方案

虽然过了兼容IE6的噩梦时代,IE依旧阴魂不散,因为你可能还要兼容IE9.在ES6已经普及的今天,用ES6写react已经成了标配.但是babel编译的js语法,由于某些不规范的写法,可能在IE9下不能正确解释,很容易导致白屏.本文记录如下 起因 在准备提测的那天,顺便打开IE9看一眼(注意,这里是原生IE9 ,不是用IE11模拟的IE9),OMG! 排查后发现,原来是因为构造函数中使用了this.简写如下 class Child extends React.Component { ? cons

兼容低版本浏览器的一些方法

页面滚动的兼容方法 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> body { height: 3000px; } </style> </head> <body> </body> </html> &

环形进度条（兼容低版本浏览器的方法）

jQuery + 图片 实现原理 这种方法相对来说就比较简单了,但是也是挺麻烦的一种. 首先,我们需要一个非常冗长的一个图片……图片的内容,就是每1°旋转角度,就是一张图片…100张… html <div class="progressbar"> <span>0</span>% </div> CSS .progressbar { text-align: center; line-height: 44px; width: 44px; dis

Vue2+Webpack+ES6 兼容低版本浏览器（IE9）解决方案

解决方式:安装 "babel-polyfill" 即可. 命令:npm install --save-dev babel-polyfill 在入口main.js文件引入:import 'babel-polyfill' 最后一步,在build文件夹下找到webpack.base.conf.js.修改入口方式: entry: {app: ["babel-polyfill", "./src/main.js"]} 最后,再依赖一个插件解决ES6/ES7高

form的submit()方法不能触发onsubmit事件的解决方法，兼容各版本浏览器。

在处理表单提交的时候遇到一个问题,通常用<input type="submit" value="提交" />按钮来提交form,再监听form的onsubmit事件就能在前端处理表单验证的事情. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document<

使用html5兼容低版本浏览器

因为html5 新出的一些语义化的标签,在低版本浏览器下不能识别,举个例子,比如你写了一个 header 标签中,写了一段文本,在低版本浏览器下,肯定是能看到的,但是,那是他是不认识 header标签的,只是展示的内容而已,如果你给header添加一个样式,肯定是不可以的,我们要解决的就是让低版本的浏览器认识并解析我们的html5标签. 别人的解决方法,我copy过来了,是自己经过测试的. 第一种方法: <!--[if lt IE 9]> <script src="http:/

css3兼容各版本浏览器前缀

前缀 浏览器 -webkit- chrome.safari -moz- firefox -ms-                         IE -o-                           opera