0

假设您正在使用 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
}
4

4 回答 4

2

您可以使用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 代码的方式。如果你愿意跨越这个障碍，并准备好自信地接受改变，那么这就是给你的。

于 2012-12-28T01:29:07.723 回答
2

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

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

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

 .myownclass {
   .alert
   .alert-error;
 }

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

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

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

参考：萨斯@extend

于 2012-12-28T01:33:45.600 回答
1

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

HTML

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

CSS

.original_class.myownclass {
  // css code
}

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

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

于 2012-12-28T01:17:16.947 回答
1

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

.myClass {
    .bootstrapClass;
}

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

于 2012-12-28T01:17:19.083 回答