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/

官网图片

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

  1. Vue2+Webpack+ES6 兼容低版本浏览器(IE9)解决方案

    Vue2+Webpack+ES6 兼容低版本浏览器(IE9)解决方案 解决方式:安装 "babel-polyfill" 即可. 命令:npm install --save-dev ...

  2. React+Webpack+ES6 兼容低版本浏览器(IE9)解决方案

    虽然过了兼容IE6的噩梦时代,IE依旧阴魂不散,因为你可能还要兼容IE9.在ES6已经普及的今天,用ES6写react已经成了标配.但是babel编译的js语法,由于某些不规范的写法,可能在IE9下不 ...

  3. 开源的javascript实现页面打印功能,兼容所有的浏览器(情况属实)

    这篇文章完全是属于技术文章,也是记录一下自己在项目当中遇到的坑爹问题啊,因为是B/S的程序,所以打印功能还是必须要有的,对于打印我选择了一个js插件,发现非常的简单和方便,所以这里拿出来和大家分享一下 ...

  4. html5标签兼容低版本浏览器

    随着html5(后面用h5代表)标签越来越广泛的使用,IE不识别h5标签的问题让人很是烦恼. 在火狐和chrome之类的浏览器中,遇到不认识的标签,只要给个display:block属性,就能让这个元 ...

  5. 兼容各版本浏览器,封装原生Js获取ClassName

    web前端开发工作中常常会用到获取元素的className,用jQuery的$(".class")方法也可以获取className,但是有时候牵扯到数据而影响的加载顺序的原因会获取 ...

  6. 使用html5兼容低版本浏览器

    因为html5 新出的一些语义化的标签,在低版本浏览器下不能识别,举个例子,比如你写了一个 header 标签中,写了一段文本,在低版本浏览器下,肯定是能看到的,但是,那是他是不认识 header标签 ...

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

    在处理表单提交的时候遇到一个问题,通常用<input type="submit" value="提交" />按钮来提交form,再监听form的on ...

  8. WebSocket解释及如何兼容低版本浏览器

    WebSocket类似HTTP 协议,是为了弥补HTTP 协议的缺陷:通信只能由客户端发起,HTTP 协议做不到服务器主动向客户端推送信息. WebSocket 协议在2008年诞生,2011年成为国 ...

  9. css中的左右垂直居中的问题,可兼容各种版本浏览器的写法

    如题分为垂直居中,左右居中,先挑简单的记录. 一.左右居中 1.我刚开始写代码的时候,老师就直接告诉我一个简单的方法,那就是: width:500px; height:200px; margin:0 ...

随机推荐

  1. PHP之mb_internal_encoding使用

    mb_internal_encoding (PHP 4 >= 4.0.6, PHP 5, PHP 7) mb_internal_encoding - Set/Get internal chara ...

  2. InnoDB的哈希算法

    InnoDB存储引擎中自适应哈希索引使用的是散列表(Hash Table)的数据结构.但是散列表不只存在于自适应哈希中,在每个数据库中都存在.设想一个问题,当前我的内存为128G,我怎么得到内存中的某 ...

  3. 理解Flexbox:你需要知道的一切

    这篇文章介绍了Flexbox模块所有基本概念,而且是介绍Flexbox模块的很好的一篇文章,所以这篇文章非常的长,你要有所准备. 学习Flexbox的曲线 @Philip Roberts在Twitte ...

  4. [转]Redis 数据类型

    本文转自:http://www.runoob.com/redis/redis-data-types.html Redis支持五种数据类型:string(字符串),hash(哈希),list(列表),s ...

  5. [SQL Server] 无法连接到本地数据库

    打开SQL Server配置管理器 启用下图两个协议 打开SQL Server服务 这一步可能出现这种情况: 故障原因是,安装Visual Studio 2012的时候,自动安装“Microsoft ...

  6. 可变参数的lambda表达式

    delegate int mydelegate(params int[] a); class Program { static void Main(string[] args) { //接收可变参数的 ...

  7. 记一次线上Mysql数据库 宕机

    从发现问题,到最后解决一共消耗两个半小时(7:30~10:00),报警电话16通,警察坐镇,未完待续 ......

  8. Ubuntu14.04默认cmake升级为3.x

    由于Ubuntu14.04的cmake版本为2.8.x,而如果需要cmake3.x版本时,无法生成makefile,有两种方法可以安装cmake3.4.1: sudo apt-get install ...

  9. idea搭建Spring Boot+Mybatis及使用教程

    环境准备 idea 15 jDK tomcat maven 搭建方式 官网下载源码包解压缩 使用idea中的Spring initializr创建 这两种方法创建的项目完全相同,只是操作方式不一样 这 ...

  10. HDU2048 神,上帝以及老天爷 错排

    http://acm.hdu.edu.cn/showproblem.php?pid=2048 这是一道错排的题目 错排如下:http://baike.baidu.com/link?url=U2_H-4 ...