Bootstrap链接改变我的css代码

Question

当我在html链接上添加bootstrap时，它会改变我的一些css代码。

预引导：

在自举：

Bootstrap链接： Css代码已更改：

#bannerRodap{
    background-color: black;
    position: fixed;    
    width: 100%;
    height:80px;
    top: 88%;
}
#bannerRodap p{
    position: relative;
    top: 25%;
    color: white;
    text-align: center;
    font-family: 'Helvetica',sans-serif;
    font-size:0.8em; 
}

除此之外，bootstrap还在我的flex-box容器下添加了这个小东西。

Answer 1

是的，您遇到的CSS更改肯定会发生，这是使用Bootstrap 的典型缺点之一。就像名称本身所暗示的那样，框架“Bootstrap”使其完整的CSS可用于整个项目。真正的问题是bootstrap.css包含的巨大代码，即使程序员甚至不需要大部分代码（超过3000行）。我从文件（bootstrap.css）中取了一个非常小的片段来解释：

a {
  color: #337ab7;
  text-decoration: none;
}
a:hover,
a:focus {
  color: #23527c;
  text-decoration: underline;
} 

这意味着项目中的所有锚标记（<a>）默认情况下都会显示颜色#337ab7，除非您将此样式覆盖到您自己的样式表中所需的样式。当您看到项目中的其他元素根据引导程序CSS更改其行为但实际上您不希望它们发生时，会出现真正的问题 - 在这种情况下，您需要覆盖来自bootstrap.css 的样式在一种方式来取消你需要编写自己不必要的样式以使其看起来正常的引导样式。

这就是你问大多数有经验的UI开发者关于bootstrap他们会去的原因...... ** yuck **

• 你自己的样式表开始变得非常混乱。
• HTML变得混乱，尤其是当您开始使用bootstrap的网格结构时
• 巨大的不需要的代码（来自BS CSS / JS）存在于您的项目中，即使您永远不需要所有这些代码。

即使包含样式表的顺序也几乎没有任何区别。在你的情况下，使用Dev Inspector来查看导致蓝色物体（可能是来自boostrap的阴影）出现的情况。通过覆盖自己的样式表中的样式来删除它（在这种情况下，你的样式表应该包含在bootstrap.css之后）

  

Imo，引导程序应该主要由那些需要引导程序来完成所有关于外观和外观的人使用。感觉他们的项目很少有自己的定制。如果你有自己的大量自定义，那么也可以从头开始编写你自己的CSS而不包括BS。