如何仅将Bootstrap4.1外部CSS应用到特定区域

因为Bootstrap的CSS是全局生效的，直接引入Bootstrap4的CSS会覆盖Bootstrap3的全局样式，所以我们需要通过样式隔离的方式来实现仅特定区域使用Bootstrap4。下面是几种靠谱的解决方案：

方法一：给Bootstrap4 CSS添加命名空间（最推荐） #

这是最常用且兼容性最好的方式，核心思路是修改Bootstrap4的CSS，让所有选择器都带上一个自定义的类前缀，只有包含这个类的父容器内的元素才会应用Bootstrap4样式。

具体步骤： #

1. 处理Bootstrap4的CSS文件
   你需要给Bootstrap4的所有选择器添加前缀，比如.bootstrap4-wrapper。可以用工具自动完成：

   • 使用PostCSS插件：安装postcss-prefix-selector，配置如下（示例）：

     module.exports = {
       plugins: [
         require('postcss-prefix-selector')({
           prefix: '.bootstrap4-wrapper',
           exclude: ['html', 'body', ':root'], // 排除全局选择器，避免影响主页面
           transform: (prefix, selector) => {
             // 处理特殊选择器，比如媒体查询里的选择器
             return `${prefix} ${selector}`;
           }
         })
       ]
     };
     

   • 或者用在线工具：搜索"CSS selector prefixer"，上传Bootstrap4的CSS文件，添加前缀后下载处理后的文件。

2. 引入处理后的CSS
   不要直接引入官方的Bootstrap4 CDN，而是引入你处理好的带前缀的CSS文件：

   <link rel="stylesheet" href="./path/to/prefixed-bootstrap4.css">
   

3. 在特定区域添加前缀类
   把需要应用Bootstrap4的内容放在带有前缀类的容器里：

   <!-- 外面的区域还是Bootstrap3样式 -->
   <div class="btn btn-default">这是Bootstrap3的按钮</div>
   
   <!-- 这个容器内的元素使用Bootstrap4样式 -->
   <div class="bootstrap4-wrapper">
     <button class="btn btn-primary">这是Bootstrap4的按钮</button>
     <div class="card">这是Bootstrap4的卡片组件</div>
   </div>
   

注意事项： #

• 处理CSS时一定要排除html、body、:root这些全局选择器，否则会修改主页面的全局样式（比如字体、背景色）。
• 有些Bootstrap4的组件依赖全局的::before/::after伪元素，处理时要确保这些伪元素的选择器也带上前缀。

方法二：使用iframe完全隔离 #

如果你的特定区域是一个独立的功能模块，可以把它放在iframe中，在iframe内部单独引入Bootstrap4的CSS。这种方式完全隔离，不会影响主页面的Bootstrap3样式。

示例代码： #

主页面（Bootstrap3环境）：

<!-- 主页面的Bootstrap3内容 -->
<div class="panel panel-default">这是Bootstrap3的面板</div>

<!-- 嵌入使用Bootstrap4的iframe -->
<iframe src="./bootstrap4-content.html" frameborder="0" width="100%" height="auto"></iframe>

bootstrap4-content.html（独立的Bootstrap4页面）：

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
</head>
<body>
  <div class="card">这是Bootstrap4的卡片</div>
  <button class="btn btn-success">Bootstrap4按钮</button>
</body>
</html>

优缺点： #

• 优点：完全隔离，不会有样式冲突。
• 缺点：iframe和主页面的交互需要用postMessage，高度自适应需要额外处理，用户体验不如直接在页面内的组件流畅。

方法三：使用Shadow DOM（现代浏览器支持） #

Shadow DOM是浏览器提供的原生样式隔离方案，把特定区域放在Shadow DOM中，内部的CSS不会影响外部，外部的CSS也不会影响内部。

示例代码： #

<!-- 主页面的Bootstrap3内容 -->
<button class="btn btn-default">Bootstrap3按钮</button>

<!-- 准备一个容器用于挂载Shadow DOM -->
<div id="bootstrap4-container"></div>

<script>
  const container = document.getElementById('bootstrap4-container');
  // 创建Shadow DOM
  const shadowRoot = container.attachShadow({ mode: 'open' });

  // 在Shadow DOM内部引入Bootstrap4的CSS
  const link = document.createElement('link');
  link.rel = 'stylesheet';
  link.href = 'https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css';
  link.integrity = 'sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4';
  link.crossOrigin = 'anonymous';
  shadowRoot.appendChild(link);

  // 添加Bootstrap4的内容
  const btn = document.createElement('button');
  btn.className = 'btn btn-primary';
  btn.textContent = 'Bootstrap4按钮';
  shadowRoot.appendChild(btn);

  const card = document.createElement('div');
  card.className = 'card p-3';
  card.textContent = 'Bootstrap4卡片';
  shadowRoot.appendChild(card);
</script>

注意事项： #

• Shadow DOM的兼容性：IE不支持，Chrome、Firefox、Safari等现代浏览器都支持。如果你的用户群体主要使用现代浏览器，这是个不错的选择。
• 有些Bootstrap4的JavaScript组件可能依赖全局的window对象，在Shadow DOM中使用时可能需要额外适配。

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