Bootstrap入门v5

Mrhan1214
357 阅读1分钟

todo

总结

  • bootstrap从版本5开始,不再兼容IE浏览器
  • bootstrap的css或js不生效,可以先检查引入文件是否正确.
<!doctype html>
<!--html页面使用中文简体-->
<html lang="zh-CN">
<head>
    <!--设置html页面的字符集为UTF-8-->
    <meta charset="UTF-8">
    <!--使用IE最新的渲染模式,展示页面-->
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!--
        viewport:视口
        视口: 浏览器上网页可视区域的内容
        width=device-width, 设备宽度
        initial-scale=1.0,  初始化缩放级别(移动设备上缩放级别:1-5)
        maximum-scale=1.0,  最大缩放级别
        minimum-scale=1.0,  最小缩放级别
        user-scalable=no,   页面禁止缩放(禁止缩放后,maximum-scale=1.0, minimum-scale=1.0失效)
    -->
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <!--上面3个元标签必须要放在其他内容的前面-->

    <!--bootstrap-v5版本是与jQuery独立的,需要单独引入jQuery-->
    <!--通过CDN引入jQuery和bootstrap-->
    <!--    <script src="https://code.jquery.com/jquery-3.6.0.js"></script>-->
    <!--    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>-->
    <!--    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">-->

    <!--通过下载的源文件引入jQuery和bootstrap-->
    <script src="../jquery/jquery-3.6.0.min.js"></script>
    <script src="../bootstrap/bootstrap.bundle.min.js"></script>
    <link href="../bootstrap/bootstrap.min.css" rel="stylesheet">

    <title>Bootstrap v5</title>
</head>
<body>
</body>
</html>

image.png

如何选择bootstrap生产文件中的css和js

.map文件扩展
sourcemap扩展

  • 我们项目中引入bootstrap.min.css、bootstrap.bundle.min.js即可
1. 编译文件: bootstrap.*
2. 既编译又压缩文件: bootstrap.min.*
3. 压缩文件的索引文件: bootstrap.*.map
   - 与浏览器的开发者工具协同使用, 目的是从压缩文件映射到非压缩文件中.
   - 压缩文件没有空格换行,不方便使用,该文件可以把bootstrap.min.*文件的位置映射到bootstrap.*文件中,方便查看
4. bootstrap.bundle.min.js比bootstrap.min.js多了个Popper组件,推荐一次全引入省事.

image.png

avatar
文章
阅读
粉丝