Question

我的Web应用程序目前不使用Bootstrap或任何其他框架。我现在正在考虑让它变得更加精致，并且意识到我想要实现的效果非常类似Bootstrap（即圆形按钮）。

因此，如果我现在将Bootstrap添加到我的网站，我有两个问题

在我开始引用Bootstrap组件之前，它是否会保持我的网站不变。
我是否可以使用Bootstrap组件而无需使用Bootstrap网格系统
我可以使用CSS覆盖Bootstrap，还是必须使用我不理解的LESS

Answer 1

问题1。在我开始引用Bootstrap组件之前，它是否会保持我的网站不变。

Ans：它完全取决于您在HTML中使用的类。例如，如果您使用了 class =“btn”然后将bootstrap添加到您的应用程序中，它将会试图覆盖CSS，因为Bootstrap在其css文件中定义了该类。

问2 。我是否可以使用Bootstrap组件而无需使用Bootstrap网格系统。

Ans：您可以在不使用其Bootstrap网格的情况下使用Bootstrap组件，但如果您使用的是bootstrap，那么它是否正确，因为网格系统能够提供您的网络应用程序响应能力。

Q 3 ：我可以使用CSS覆盖Bootstrap，还是必须使用我不理解的LESS

答案：是的，你可以。例如如果你已经上课

`.btn-primary{
        color: #eee;
        background-color: #337ab7;
        border-color: #2e6da4;
        border: 2px solid transparent;
        border-radius: 2px;
    }` in your app.

然后你添加了bootstrap，它的库也有这个类，如：

`.btn-primary{
        color: #fff;
        background-color: #337ab7;
        border-color: #2e6da4;
        border: 1px solid transparent;
        border-radius: 4px;
    }`
    and overriding  your class.

所以你可以做的是，只需在你的css中使用！important 来解决相互冲突的属性。像：

`.btn-primary{
        color: #eee !important;
        background-color: #337ab7;
        border-color: #2e6da4;
        border: 2px solid transparent !important;
        border-radius: 2px !important;
    }`

现在HTML引擎总会选择你的CSS

Answer 2

问题3：你可以用更高的特异性覆盖它。这意味着如果您使用bootstrap中的类btn，您可以添加自己的类，如my-btn，然后在您的CSS中引用它，如

.btn .my-btn{
    color:#123456;
}

希望有所帮助

我可以只使用Bootstraps组件而不是布局系统

2 个答案: