twitter-bootstrap – 覆盖在LESS中

发布时间：2020-12-17 21:27:37 所属栏目：安全来源：网络整理

导读：我正在使用LESS使用Bootstrap,我是LESS的新手,所以我有疑问. 例如,我想向body添加padding属性. body { margin: 0; font-family: @baseFontFamily; font-size: @baseFontSize; line-height: @baseLineHeight; color: @textColor; background-color: @bodyBack

我正在使用LESS使用Bootstrap,我是LESS的新手,所以我有疑问.

例如,我想向body添加padding属性.

body {
  margin: 0;
  font-family: @baseFontFamily;
  font-size: @baseFontSize;
  line-height: @baseLineHeight;
  color: @textColor;
  background-color: @bodyBackground;
}

在bootstrap.less我做了这个：

@import "bootstrap/scaffolding.less";
body {
  margin: 0;
  font-family: @baseFontFamily;
  font-size: @baseFontSize;
  line-height: @baseLineHeight;
  color: @textColor;
  background-color: @bodyBackground;
  padding: 50px;
}

但是在编译的CSS文件中,我有两个正文类,一个是原始的,然后是我自己的.
如何在没有重复的情况下向类中添加属性？
谢谢.

解决方法

如前所述,最好不要修改bootstraps较少的文件,而是将样式添加到样式表/ less文件中,以覆盖bootstraps.这样,您可以在升级到新版本的bootstrap时避免出现问题 – 当您需要跟踪错误时,只需查看覆盖内容就会更容易.

现在,您可能遇到与覆盖相关的问题,并试图弄清楚为什么您的应用样式不会覆盖bootstrap的样式.在那种情况下,我建议你阅读Andy Clarke的伟大文章 – CSS：特殊性战争(它有点陈旧,但仍然是css特异性的一个很好的解释)：

http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html

编辑 – 为了更好地解释多个类块的优点,这里首先使用两个类来设置一个元素的样式：

CSS：

.center {
   margin: 0 auto;
}
img.center {
   display: block;
}

HTML

<div class="center">This will center horizontally</div>
<img class="center" src="foo.png"><!-- this image will also center horizontally -->

在上面的示例中,图像将居中,因为它将继承这两个规则.现在假设您希望嵌套的ul具有比常规(父)ul更少的填充量,然后您可以通过定位其层次结构来覆盖它(再次上面发布的链接解释了这一点)

ul {
    list-style: none;
    padding: 5px;
}

ul ul {
    padding: 1px;
}

编辑,回答@Chris Moschini评论

是的,如果你创建自己的较少文件导入bootstrap.less,你也可以通过LESS覆盖Bootstrap默认值 – 然后覆盖你想要更改的变量.

@import "less/bootstrap.less";
@brand-primary: red;

要查看你可以覆盖的内容,请查看git上的文件variables.less,如果你想在那里混乱,也可以查看mixins.less文件.

但在许多情况下,你需要通过css特异性做一些重写.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!