定义一个使用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; }

本文详细讨论了该技术：

http://transmission.vehikl.com/using-bootstrap-as-a-semantic-mixin-library/

Answer 2

您可以执行以下操作：

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

希望有帮助！