引入 Bootstrap时报错，css样式显示不了

img

引入 Bootstrap时报错，css样式显示不了，请问该怎么解决

  • 你可以看下这个问题的回答https://ask.csdn.net/questions/648567
  • 你也可以参考下这篇文章：Bootstrap版本不同，个别类的css样式无效
  • 您还可以看一下 张晨光老师的BootStrap快速入门基础教程系列课程中的 bootstrap插件小节, 巩固相关知识点
  • 以下回答由chatgpt基于相关博客总结生成:

    针对本问题，建议采用以下步骤来解决：

    步骤1：检查Bootstrap的引入方式和路径是否正确。

    检查Bootstrap的引入方式和路径是否正确。可以使用CDN引入，也可以下载到本地再引入。如果使用CDN引入，需要加上integrity和crossorigin属性。

    步骤2：检查是否有其他CSS样式覆盖了Bootstrap的样式。

    检查是否有其他CSS样式覆盖了Bootstrap的样式。可以在Chrome浏览器中使用开发者工具检查元素，查看是否有CSS样式被覆盖；也可以将其他CSS样式注释掉，看是否显示Bootstrap的样式。

    步骤3：确认代码是否有错误。

    确认代码是否有错误。可以使用代码编辑器自带的调试工具或Chrome浏览器中的控制台，查看是否有错误提示，如语法错误、路径错误等。

    如果以上步骤都没有解决问题，建议尝试重新下载Bootstrap或寻求专业人士的帮助。

    以下是一个例子，演示如何引入Bootstrap并使用其预定义样式：

    <!DOCTYPE html>
<html>
<head>
    <title>Bootstrap Example</title>
    <!--引入Bootstrap CSS文件-->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
</head>
<body>
    <div class="container">
        <h1>Bootstrap Example</h1>
        <button type="button" class="btn btn-primary">Primary</button>
        <button type="button" class="btn btn-secondary">Secondary</button>
        <button type="button" class="btn btn-success">Success</button>
        <button type="button" class="btn btn-info">Info</button>
        <button type="button" class="btn btn-warning">Warning</button>
        <button type="button" class="btn btn-danger">Danger</button>
        <button type="button" class="btn btn-light">Light</button>
        <button type="button" class="btn btn-dark">Dark</button>
    </div>
    <!--引入Bootstrap JS文件-->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js" integrity="sha384-SBeX9gWRe-vMu+HkCcSWMjhOlfFGBh/5zJmo5iwZfAKzRptN9E9vJGNo3qyU6L2U" crossorigin="anonymous"></script>
</body>
</html>

建议你换个链接，或者下载到本地引用

直接 在浏览器地址栏输入你这个地址看看能不能 显示代码 。
官网cdn试试

img