如何引入Bootstrap轮播组件且不影响网站原有CSS样式

一、样式冲突产生原因 #

未引入Bootstrap时样式正常，引入后全站多处样式错乱，本质是两个问题：

1. CSS加载顺序错误：你将Bootstrap CDN链接放在了自定义样式表之后引入。CSS生效规则为同权重下，后加载的样式会覆盖先加载的样式，直接导致自定义样式中与Bootstrap同权重的声明被覆盖。
2. Bootstrap自带全局样式重置：Bootstrap内置Reboot全局重置模块，会对所有HTML通用标签（包括div、h3、img、p等）设置统一默认样式，比如默认内外边距、盒模型、字体行高、图片最大宽度、标题边距等属性，这些全局选择器会命中页面所有匹配元素，不管元素有没有加Bootstrap类名，因此非Bootstrap组件区域的原有样式也会被改动。

你贴出的底部红色横幅样式错乱也符合这个逻辑：自定义样式只声明了部分需要控制的属性，而Bootstrap默认给所有img设置max-width:100%、display:block，给所有h3设置默认上下边距、字体粗细、行高，给所有元素设置box-sizing:border-box，这些属性你没有在自定义样式里显式声明，浏览器会直接应用Bootstrap设置的值，和之前依赖浏览器默认样式搭建的布局规则冲突，最终导致排版错位。

未引入Bootstrap时的显示效果：

将Bootstrap放在自定义样式后引入的异常效果：

二、常规样式冲突规避方法 #

• 严格遵守CSS引入顺序：所有第三方框架样式（包括Bootstrap）统一放在<head>内靠前位置引入，自定义样式表放在所有第三方CSS的最后方加载，保证自定义样式同权重下优先级更高，可以覆盖框架默认样式。
• 自定义样式尽量避免使用纯标签选择器，优先使用class、id选择器提升选择器权重，减少被框架通用标签样式覆盖的概率。
• 编写自定义样式时不要依赖浏览器默认样式，对需要控制的属性（比如display、margin、box-sizing、position）显式声明值，避免框架重置默认样式后布局错位。
• 不要直接修改Bootstrap源文件样式，需要调整默认样式时，通过自定义样式表写更高权重的选择器覆盖，或者通过Bootstrap提供的官方CSS变量修改主题，避免后续升级框架时样式失效。

三、让Bootstrap仅作用于指定区域的实现方案 #

Bootstrap默认是全局注入样式的，要实现作用域隔离，可选以下两种成熟方案：

方案1：给Bootstrap样式加命名空间前缀（适配成本低） #

通过CSS预处理工具或者PostCSS插件（比如postcss-prefixwrap），给整个Bootstrap样式文件的所有选择器前面统一加上父级作用域选择器。
举个例子，如果你需要让Bootstrap仅对id="bs-container"的section内的内容生效，就把Bootstrap中所有选择器前拼接#bs-container 前缀：

• 原Bootstrap样式：.btn { padding: 6px 12px; }、h3 { margin-bottom: .5rem; }
• 加前缀后：#bs-container .btn { padding: 6px 12px; }、#bs-container h3 { margin-bottom: .5rem; }

处理完成后，所有Bootstrap样式只会命中#bs-container容器内部的元素，外部元素完全不会被Bootstrap样式影响。你只需要把需要使用Bootstrap组件的代码全部包裹在对应容器内即可，不需要改动原有业务代码逻辑。

方案2：使用Shadow DOM做彻底隔离（隔离效果最好） #

将需要应用Bootstrap的区域挂载到Shadow DOM节点中，把Bootstrap样式表注入到对应的Shadow Root内部。Shadow DOM是浏览器原生提供的样式隔离机制，内部的样式完全不会泄露到外部文档，外部文档的样式也不会渗透到Shadow DOM内部，隔离最彻底，适合仅在页面小范围区域使用Bootstrap组件的场景。需要注意的是Shadow DOM内的元素定位、事件冒泡逻辑和普通DOM有细微差异，需要做少量适配。

你贴出的底部红色横幅原有代码参考如下：

/* Chat Card Section */
#chat-card{
  position: absolute;
  bottom: 1px;
}

#chat-card,
#chat-card div{
  background: #e50914;
  width: 100%;
  height: 11vh;
  display: flex;
  justify-content: center;
  color: white;
  align-items: center;
}

#chat-card h3{
  margin: 0;
  font-weight: 500;
  width: 70%;
  display: inline-block;
  margin: 1rem;
  text-align: center;
  margin-left: 0;
}

#chat-card img{
  width:15%;
}

#chat-card .space_chat{
  width:25rem;
}

<section id="chat-card">
    <div class="space_chat">
    </div>
    <div class="Satisfaction">
      <img src="images/smile.png">
      <h3>100% SATISFACTION GUARANTEE</h3>
    </div>
    <div class="support">
      <img src="images/chat-support.png">
      <h3>FREE VIDEO CHAT SUPPORT</h3>
    </div>
    <div class="at-home">
      <img src="images/shipping.png">
      <h3>DELIVERED AT HOME</h3>
    </div>
    <div class="customized">
      <img src="images/veneers.png">
      <h3>CUSTOMIZED VENEERS</h3>
    </div>
    <div class="space_chat">
    </div>
  </section>

只要把Bootstrap的引入顺序调整到自定义样式之前，再给#chat-card img补充display: inline-block、给#chat-card h3补全line-height: normal这类被Bootstrap重置的属性，这个区块的样式就能恢复正常。

内容的提问来源于stack exchange，提问作者Sahil Singh