使用 CSS 和 Bootstrap 框架

Question

如果我还使用 Bootstrap 框架，如何才能仅在 HTML 中指定的代码片段中访问我自己的 CSS 样式？

比如我定义了样式：

 ul {
            float: left;
            width: 140px;
    }

Bootstrap 也为 ul 定义了样式，我的网站存在冲突，因为我正在使用两者。

Answer 1

CSS 将优先级应用于最具体的标识符，因此您可以通过更具体来覆盖 bootstrap，例如：

ul.mylist {
        float: left;
        width: 140px;
}

或

div.mystuff ul { 
        float: left;
        width: 140px;
}

html中的这个：

<ul class="mylist">

或

<div class="mystuff">
    <ul>

Answer 2

在重复的样式末尾添加 !important。

ul {
        float: left !important;
        width: 140px !important;
}

或自定义您的 bootstrap 风格。

Answer 3

使用 id 或 class.

HTML

<ul class="my-ul">
  <!-- some li -->
</ul>

CSS

ul.my-ul {
  // your style
}

如果您使用的是 id，

HTML

<ul id="myul">
  <!-- some li-->
</ul>

CSS

#my-ul {
  // some style
}

Answer 4

如果您想覆盖默认bootstrap规则，加载您的mystyle.cssAFTER包括bootstrap css，这样你的 ul 就会受到你的 CSS 的控制，而不是 bootstrap。

如果您想将特定的 css 规则添加到特定的一个或一组元素，但不是全部，请给它一个唯一的 #id - 如果超过一个元素给他们一个独特的 .class 名称 - 并根据您的 css 规则自由控制他们

*永远记住，css 代码中最底层的 CSS 规则将覆盖上面具有相同命名的规则

Answer 5

我建议使用像 SASS 这样的预处理器，它允许您轻松覆盖现有样式并执行如下所示的操作。易于阅读、维护和扩展运行。

custom_styling {
 ul {
  font-size:10px;
  color:tomato;
 }
}

然后您可以用 class custom_styling 包裹您的容器。从那里覆盖很简单。

Answer 6

首先在页眉上应用 bootstrap.css，然后将 link 添加到您网站的 css。通过这种方式，您的网站 css 将被优先考虑。

因此，当您申请 css 时，它会优先考虑。

查看如何使用 Bootstrap - here。

此外，您可以给 "ul" 元素一些 id，然后像这样

应用具有该 id 的 css

ul#myul {
        float: left;
        width: 140px;
}

Using CSS with Bootstrap framework