Bootstrap3和4模板

最新推荐文章于 2025-01-16 03:27:50 发布

YY小怪兽

最新推荐文章于 2025-01-16 03:27:50 发布

阅读量273

点赞数

分类专栏： Bootstrap 文章标签： bootstrap html 前端

本文链接：https://blog.csdn.net/lihui61357457/article/details/121174922

版权

Bootstrap 专栏收录该内容

7 篇文章

订阅专栏

这篇博客对比了Bootstrap3和Bootstrap4的主要差异，包括meta标签的更新、响应式布局的优化以及JavaScript依赖的改变。Bootstrap4引入了新的viewport设置，并且在JavaScript方面增加了对Popper.js的依赖，以支持更先进的提示和弹窗功能。此外，还讨论了如何在旧版IE浏览器中使用html5shiv和respond.js进行兼容性处理。

摘要由CSDN通过智能技术生成

Bootstrap3

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <!--可以让部分国产浏览器默认采用高速模式渲染页面-->
    <meta name="renderer" content="webkit">
    <!--为了让 IE 浏览器运行最新的渲染模式下-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!--为了保证在移动端能够正常的显示-->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>自己网页的标题</title>
    <!-- 导入Bootstrap的CSS文件 -->
    <link rel="stylesheet" href="css/bootstrap.css">

    <!--导入respond.js文件的目的, 是为了能够在IE8以及IE8以下的浏览器中使用媒体查询-->
    <!--导入html5shiv.js文件的目的, 是为了能够在IE8以及IE8以下的浏览器中使用H5新增的标签-->
    <!--
    [if xxx] ![endif]这个是IE中的条件注释, 只有在IE浏览器下才会执行
    以下代码的含义: 如果当前是IE9以下的浏览器, 那么就导入以下的两个JS文件
    -->
    <!--[if lt IE 9]>
        <script src="js/html5shiv.js"></script>
        <script src="js/respond.js"></script>
    <![endif]-->
</head>
<body>
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="js/jquery-1.12.4.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="js/bootstrap.js"></script>
</body>
</html>

Bootstrap4

<!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="css/bootstrap.css">
    <title>自己网页的标题</title>
</head>
<body>

<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="js/jquery-3.1.1.js"></script>
<!--在Bootstrap4中很多的提示/弹窗都是通过popper.min.js实现的, 所以需要导入-->
<script src="js/popper.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="js/bootstrap.js"></script>
</body>
</html>