Bootstrap 4/3 Basic Page Template with Compatibility for Older Browsers

2019年12月9日 66点热度 0人点赞 3条评论

内容目录

There are significant differences between Bootstrap 3 and 4, including their directory structure and the contents they include. This article discusses the files, web templates, and compatibility issues involved in integrating Bootstrap. This website has just been set up, and I’m sharing this article that was originally intended for the test site.

Bootstrap 4

The directory structure is as follows:

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 requires more dependent files than Bootstrap 3 as many components rely on JavaScript to function. For instance, jQuery, Popper.js, and JavaScript plugins are needed.

。

The official web page template is as follows:

<!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">
<span style="color: #008000;">&lt;!--</span><span style="color: #008000;"> Bootstrap CSS </span><span style="color: #008000;">--&gt;</span>
<span style="color: #0000ff;">&lt;</span><span style="color: #800000;">link </span><span style="color: #ff0000;">rel</span><span style="color: #0000ff;">="stylesheet"</span><span style="color: #ff0000;"> href</span><span style="color: #0000ff;">="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css"</span><span style="color: #ff0000;"> integrity</span><span style="color: #0000ff;">="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"</span><span style="color: #ff0000;"> crossorigin</span><span style="color: #0000ff;">="anonymous"</span><span style="color: #0000ff;">&gt;</span>

<span style="color: #0000ff;">&lt;</span><span style="color: #800000;">title</span><span style="color: #0000ff;">&gt;</span>Hello, world!<span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">title</span><span style="color: #0000ff;">&gt;</span>

</head>

<body>

<h1>Hello, world!</h1>
<span style="color: #008000;">&lt;!--</span><span style="color: #008000;"> Optional JavaScript </span><span style="color: #008000;">--&gt;</span>
<span style="color: #008000;">&lt;!--</span><span style="color: #008000;"> jQuery first, then Popper.js, then Bootstrap JS </span><span style="color: #008000;">--&gt;</span>
<span style="color: #0000ff;">&lt;</span><span style="color: #800000;">script </span><span style="color: #ff0000;">src</span><span style="color: #0000ff;">="https://cdn.bootcss.com/jquery/3.2.1/jquery.slim.min.js"</span><span style="color: #ff0000;"> integrity</span><span style="color: #0000ff;">="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"</span><span style="color: #ff0000;"> crossorigin</span><span style="color: #0000ff;">="anonymous"</span><span style="color: #0000ff;">&gt;&lt;/</span><span style="color: #800000;">script</span><span style="color: #0000ff;">&gt;</span>
<span style="color: #0000ff;">&lt;</span><span style="color: #800000;">script </span><span style="color: #ff0000;">src</span><span style="color: #0000ff;">="https://cdn.bootcss.com/popper.js/1.12.9/umd/popper.min.js"</span><span style="color: #ff0000;"> integrity</span><span style="color: #0000ff;">="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"</span><span style="color: #ff0000;"> crossorigin</span><span style="color: #0000ff;">="anonymous"</span><span style="color: #0000ff;">&gt;&lt;/</span><span style="color: #800000;">script</span><span style="color: #0000ff;">&gt;</span>
<span style="color: #0000ff;">&lt;</span><span style="color: #800000;">script </span><span style="color: #ff0000;">src</span><span style="color: #0000ff;">="https://cdn.bootcss.com/bootstrap/4.0.0/js/bootstrap.min.js"</span><span style="color: #ff0000;"> integrity</span><span style="color: #0000ff;">="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"</span><span style="color: #ff0000;"> crossorigin</span><span style="color: #0000ff;">="anonymous"</span><span style="color: #0000ff;">&gt;&lt;/</span><span style="color: #800000;">script</span><span style="color: #0000ff;">&gt;</span>

</body>

</html>

If it looks messy on mobile, refer to the image:

Here's a simplified version:

<!doctype html>
<html lang="en">
  <head>
<span style="color: #0000ff;">&lt;</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">charset</span><span style="color: #0000ff;">="utf-8"</span><span style="color: #0000ff;">&gt;</span>
<span style="color: #0000ff;">&lt;</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="viewport"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="width=device-width, initial-scale=1, shrink-to-fit=no"</span><span style="color: #0000ff;">&gt;</span>

<span style="color: #0000ff;">&lt;</span><span style="color: #800000;">link </span><span style="color: #ff0000;">rel</span><span style="color: #0000ff;">="stylesheet"</span><span style="color: #ff0000;"> href</span><span style="color: #0000ff;">="./css/bootstrap.min.css"</span><span style="color: #0000ff;">&gt;</span>

<span style="color: #0000ff;">&lt;</span><span style="color: #800000;">title</span><span style="color: #0000ff;">&gt;</span> 666 <span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">title</span><span style="color: #0000ff;">&gt;</span>

</head>

<body>
<span style="color: #0000ff;">&lt;</span><span style="color: #800000;">script </span><span style="color: #ff0000;">src</span><span style="color: #0000ff;">="./jquery/3.2.1/jquery.slim.min.js"</span><span style="color: #0000ff;">&gt;&lt;/</span><span style="color: #800000;">script</span><span style="color: #0000ff;">&gt;</span>
<span style="color: #0000ff;">&lt;</span><span style="color: #800000;">script </span><span style="color: #ff0000;">src</span><span style="color: #0000ff;">="./popper.min.js"</span><span style="color: #0000ff;">&gt;&lt;/</span><span style="color: #800000;">script</span><span style="color: #0000ff;">&gt;</span>
<span style="color: #0000ff;">&lt;</span><span style="color: #800000;">script </span><span style="color: #ff0000;">src</span><span style="color: #0000ff;">="./js/bootstrap.min.js"</span><span style="color: #0000ff;">&gt;&lt;/</span><span style="color: #800000;">script</span><span style="color: #0000ff;">&gt;</span>

</body>

</html>

Notes:

In Bootstrap 4, there is no Popper.js file.
However, bootstrap.bundle.js and the minified version bootstrap.bundle.min.js already include Popper.
Taking a closer look, the official template above includes jquery.slim.min.js instead of jquery.min.js. The reason for this is unclear~~~
The difference between jquery.slim.min.js and jquery.min.js is that jquery.slim.min.js is a slim version, which removes the Ajax functionality.

Bootstrap 3

The directory structure is as follows

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

The basic template and included files are as follows

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
<!--  Declare as a responsive page  -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
<!--  [end]  -->
<span style="color: #008000;">&lt;!--</span><span style="color: #008000;"> meta tags should be placed first </span><span style="color: #008000;">--&gt;</span>

<span style="color: #0000ff;">&lt;</span><span style="color: #800000;">title</span><span style="color: #0000ff;">&gt;</span>Bootstrap Official Example<span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">title</span><span style="color: #0000ff;">&gt;</span>

<span style="color: #008000;">&lt;!--</span><span style="color: #008000;"> Bootstrap Files </span><span style="color: #008000;">--&gt;</span>
<span style="color: #0000ff;">&lt;</span><span style="color: #800000;">link </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="./3.3.7/dist/css/bootstrap.min.css"</span><span style="color: #ff0000;"> rel</span><span style="color: #0000ff;">="stylesheet"</span><span style="color: #0000ff;">&gt;</span>

<span style="color: #008000;">&lt;!--</span><span style="color: #008000;"> HTML5 shim and Respond.js are to enable Bootstrap support for old versions of IE, as IE9 and below may not support HTML5 elements and media queries </span><span style="color: #008000;">--&gt;</span>
<span style="color: #008000;">&lt;!--</span><span style="color: #008000;"> WARNING: Respond.js does not work when accessing the page via file:// protocol (i.e., dragging the HTML page directly into a browser) </span><span style="color: #008000;">--&gt;</span>
<span style="color: #008000;">&lt;!--</span><span style="color: #008000;">[if lt IE 9]&gt;
  &lt;script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"&gt;&lt;/script&gt;

&lt;![endif]</span><span style="color: #008000;">--&gt;</span>

</head>

<body>
<span style="color: #008000;">&lt;!--</span><span style="color: #008000;"> jQuery (All JavaScript plugins for Bootstrap rely on jQuery, hence must be placed before) </span><span style="color: #008000;">--&gt;</span>
<span style="color: #0000ff;">&lt;</span><span style="color: #800000;">script </span><span style="color: #ff0000;">src</span><span style="color: #0000ff;">="./1.12.4/dist/jquery.min.js"</span><span style="color: #0000ff;">&gt;&lt;/</span><span style="color: #800000;">script</span><span style="color: #0000ff;">&gt;</span>
<span style="color: #008000;">&lt;!--</span><span style="color: #008000;"> Load all JavaScript plugins for Bootstrap. You can also load individual plugins as needed. </span><span style="color: #008000;">--&gt;</span>
<span style="color: #0000ff;">&lt;</span><span style="color: #800000;">script </span><span style="color: #ff0000;">src</span><span style="color: #0000ff;">="./3.3.7/dist/js/bootstrap.min.js"</span><span style="color: #0000ff;">&gt;</span>

</script>

</body>

</html>

If you cannot see clearly on your mobile, please check the image

Simplified version

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
<span style="color: #0000ff;">&lt;</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">charset</span><span style="color: #0000ff;">="utf-8"</span><span style="color: #0000ff;">&gt;</span>
<span style="color: #0000ff;">&lt;</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">http-equiv</span><span style="color: #0000ff;">="X-UA-Compatible"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="IE=edge"</span><span style="color: #0000ff;">&gt;</span>
<span style="color: #0000ff;">&lt;</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="viewport"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="width=device-width, initial-scale=1"</span><span style="color: #0000ff;">&gt;</span>

<span style="color: #0000ff;">&lt;</span><span style="color: #800000;">title</span><span style="color: #0000ff;">&gt;</span>Bootstrap Official Example<span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">title</span><span style="color: #0000ff;">&gt;</span>

<span style="color: #0000ff;">&lt;</span><span style="color: #800000;">link </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="./3.3.7/dist/css/bootstrap.min.css"</span><span style="color: #ff0000;"> rel</span><span style="color: #0000ff;">="stylesheet"</span><span style="color: #0000ff;">&gt;</span>
  <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">script </span><span style="color: #ff0000;">src</span><span style="color: #0000ff;">="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"</span><span style="color: #0000ff;">&gt;&lt;/</span><span style="color: #800000;">script</span><span style="color: #0000ff;">&gt;</span>
  <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">script </span><span style="color: #ff0000;">src</span><span style="color: #0000ff;">="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"</span><span style="color: #0000ff;">&gt;&lt;/</span><span style="color: #800000;">script</span><span style="color: #0000ff;">&gt;</span>

</head>

<body>
<span style="color: #0000ff;">&lt;</span><span style="color: #800000;">script </span><span style="color: #ff0000;">src</span><span style="color: #0000ff;">="./1.12.4/dist/jquery.min.js"</span><span style="color: #0000ff;">&gt;&lt;/</span><span style="color: #800000;">script</span><span style="color: #0000ff;">&gt;</span>
<span style="color: #0000ff;">&lt;</span><span style="color: #800000;">script </span><span style="color: #ff0000;">src</span><span style="color: #0000ff;">="./3.3.7/dist/js/bootstrap.min.js"</span><span style="color: #0000ff;">&gt;&lt;/</span><span style="color: #800000;">script</span><span style="color: #0000ff;">&gt;</span>

</body>

</html>

Note:

The official compressed source code does not include html5shiv and Respond.js files; if these two files are needed, you must download them yourself.

How to Achieve Compatibility

It has been mentioned above to include html5shiv and Respond.js files to support IE9 and below browsers.
Observant friends may have noticed that the sample template does not include compatibility files in Bootstrap 4, while Bootstrap 3 has html5shiv.js and respond.js.
↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓
This is because Bootstrap 4 has dropped support for IE8 and iOS 6, and now only supports browsers above IE9 and iOS 7.
This means that Bootstrap 3 can achieve browser compatibility by including two files, whereas Bootstrap 4 can no longer support older versions of browsers... (Don't worry, a solution will be introduced below)
How to use the two files html5shiv and Respond.js
For details, please click: https://blog.csdn.net/bluefish_flying/article/details/72594152
For solutions when html5shiv.js and respond.js do not work, please click: https://www.cnblogs.com/xiaoshudian/p/7138624.html
html5shiv is a JavaScript patch for IE browsers, aimed at enabling IE to recognize and support HTML5 elements.
For detailed descriptions and various versions, please click: https://www.bootcdn.cn/html5shiv/

Although the official version no longer supports browsers below IE9, there are "grassroots organizations" that have even managed to achieve support for IE6...

This is the "bsie project." Address: http://www.bootcss.com/p/bsie/

Official website image