Question

假设您使用的是Twitter Boostrap并且您拥有通用的boostrap.css和其他与boostrap相关的css文件，并且您希望自己的类与某些给定的boostrap类具有相同的属性。据我所知，您不希望直接修改css引导程序文件，但您希望通过创建custom.css文件来扩展它们。

所以没有触及boostrap文件。我如何为自己的类复制一个boostrap类？唯一的方法是从boostrap.css文件中复制和粘贴。或者有办法吗

.myownclass {
    -- some command to replicate class 'alert alert-error' without repeating the CSS that has already been written
}

Answer 1

您可以使用 css预处理器。其他用户已经引用的其他方法很好，但使用css预处理器是最好的方法。

Bootstrap是使用 LESS 构建的，因此您可以使用LESS。请看这里：http://bootstrap.lesscss.ru/less.html。

也可以使用 SASS 。据我说SASS更好。您可以在此处找到教程：http://www.1stwebdesigner.com/css/build-website-using-twitter-bootstrap-sass-1/

什么是CSS预处理器？

浏览器只能理解CSS，因为正在呈现的任何DOM元素的样式技术。 CSS，作为一种语言有自己的功能集，有时可能不足以创建一个干净，可重复使用的规则块。例如。无法在多个选择器中重用规则集合，变量不可用，这可能导致样式表中的数据模糊不清。为了克服大多数这些限制，预处理器的概念诞生了 - 提供了一种编写CSS的高级方法，它扩展了基本功能。此高级代码稍后使用各自的编译器（取决于您使用的预处理器）编译为普通CSS代码，浏览器将理解这些代码。

您应该使用预处理器吗？

在我看来，为您的下一个项目采用预处理器的决定应该经过大量分析后完成，并且完全取决于您的专业水平，最重要的是整个团队的项目要求和工作流程。以下是一些可能有助于您做出决定的提示：

不适合初学者：如果您是初学者并开始探索CSS的奇妙世界，我建议您在进入框架或预处理器之前先用普通的CSS弄脏任何种类。理解并能够使用您使用的任何语言的核心概念非常重要，这对于CSS和任何其他编程语言都是如此。
您是前端开发人员的团队吗？作为前端开发人员团队，采用预处理器将是一个很好的举措。但只有当团队中的某个人真的知道如何处理巨大的CSS文件并相应地构建它们时。通过利用该语言提供的强大功能，首先将整个CSS构建为可重用的块并定义CSS组织的策略是很重要的。例如。您是否会使用多个CSS文件进行排版，表单，布局等。您是否需要使用主题UI，您可能需要广泛使用变量等。
您是否愿意跨越障碍？采用预处理器意味着您将在CSS编码方法中实施更多编程概念。通过使用预处理器，您可能希望学习和实现任何基本编程语言的许多概念。这意味着，你肯定需要提高你的编程技巧，并可能永远改变你看到CSS代码的方式。如果您愿意跨越这个障碍，并且愿意自信地接受这种变化，那么这就适合您。

Answer 2

在CSS中这是不可能的。唯一的方法是链接html标签中的类。

<div class="alert alert-error myownclass"></div>

如果你使用较少，你可以这样做：

 .myownclass {
   .alert
   .alert-error;
 }

这会将设置从一个类复制到另一个类。结果与直接复制类的内容相同。

如果您使用的是Sass，则无需复制课程内容即可。只需参考如下所示的类。这不会复制内容，而是会在您的css代码中的正确位置引用您的自定义类。

.myownclass {
   @extend .alert;
   @extend .alert-error;
}

Ref: Sass @extend

Answer 3

你可以给元素两个类 - 原始的Bootstrap类，然后你自己制作的一个类。然后你会像这样定位它：

HTML

<h1 class="original_class myownclass">Hello</h1>

CSS

.original_class.myownclass {
  // css code
}

这是一个说明概念的小问题：http://jsfiddle.net/ApEpr/

这不需要使用CSS预处理器 - 它只是普通的旧CSS。

Answer 4

您必须使用LESS来避免复制/粘贴：

.myClass {
    .bootstrapClass;
}

或者您可以使用TBS已移植到的任何其他CSS预处理器（Sass有一个，对其他人不确定）。

复制CSS类

4 个答案:

HTML

CSS