css - Remove Bootstrap styling from controls/inputs

Question

Bootstrap includes some (very nice) styling for HTML inputs/selects/etc. However, for the project I'm on, they already have styling for these HTML elements that they want to keep.

Is there a way for me to turn off Bootstrap styles for inputs? Perhaps with some kind of css class? Or, do I have to override them manually?

Answer 1

包含样式表的顺序可以帮助您。包含 bootstrap.css 后跟您自己的样式表会使样式表中的元素覆盖引导程序中的元素。

例如，

<link href="/static/bootstrap/css/bootstrap.css" rel="stylesheet" media="screen">
<script src="/static/jquery.js"></script>
<script src="/static/bootstrap/js/bootstrap.min.js"></script>
<link type=text/css rel='stylesheet' href=/static/main.css><!-- custom stylesheet -->

例如，

如果main.css包含

body
{
    background-color:red;
}

并bootstrapp.css包含

body
{
    background-color:blue;
}

该站点将具有red背景。