定义一个使用bootstrap类的自定义css类

Question

所有,

有没有办法定义使用现有引导类的自定义CSS类？

例如,请考虑以下HTML代码段:

<div class="text-primary center-block">Here is some text</div>

Bootstrap将自动使其变为蓝色并居中并显示块.但是要添加所有这些类需要记住很多.我可以使用自己的课程:

<div class="my_class">Here is some text</div>

并在CSS文件中以某种方式添加那些Bootstrap属性？

我能想到的唯一解决方案是使用这样的JQuery:

$(document).ready(
  function() {
    $(".my_class").each(function() {
      $(this).addClass("text-primary center-block");      
    });
  }
);

但是有更好的解决方案吗？

Answer 1

嗨是的,有更好的方法,如果您使用的是引导程序的Less Source版本,可以通过导入Less文件作为参考,将Bootstrap的类设置为Less Mixins

这意味着你可以设置这样的东西:

 .custom-class { .text-primary; center-block; }

这篇文章详细讨论了这项技术:

Answer 2

您可以执行以下操作：但这适用于SCSS，而不适用于标准 CSS

.my_class
{
    @extend .text-primary; 
    @extend .center-block;
}

希望能帮助到你！