javascript - 定义一个使用 Bootstrap 类的自定义 css 类

Question

全部，

有什么方法可以定义使用现有 Bootstrap 类的自定义 CSS 类吗？

例如，考虑以下 HTML 片段:

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

Bootstrap 会自动将其设置为蓝色并居中显示 block 。但是添加所有这些类需要记住很多。我可以只使用自己的类(class)吗:

<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

嗨，是的，有一个更好的方法，如果您使用的是 Bootstrap 的 Less Source 版本，您可以通过导入 Less 文件作为引用来将 Bootstrap 的类设置为 Less Mixins

这意味着你可以这样设置:

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

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

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