自定义 Twitter Bootstrap 类名答案

【问题标题】：Customize Twitter Bootstrap Classnames自定义 Twitter Bootstrap 类名
【发布时间】：2015-05-14 05:24:14
【问题描述】：

以上链接，自定义 Bootstrap 的组件、Less 变量和 jQuery 插件以获得您自己的版本。

我想知道是否可以通过向其类添加前缀来自定义引导程序，例如：

".container" = ".myid_container"
".btn-group" = ".myid_btn-group"

【问题讨论】：

你可以相当容易地编写一个 CSS 后处理器（使用类似 postcss 的东西）来做这种事情。 Bootstrap Customizer 页面本身无法做到这一点。请注意，您必须对 Bootstrap 的 JavaScript 进行相应的更改。

标签： twitter-bootstrap class twitter-bootstrap-3 prefix classname

【解决方案1】：

如果您使用的是 sass，您可以@extend 引导类并随意调用它们。这是信息http://www.sitepoint.com/sass-semantically-extend-bootstrap/

但如果你使用普通的 bootstrap.css，我不确定是否有办法重命名引导类，除了在文件中重命名它们。

【讨论】：

【解决方案2】：

只需在任何编辑器上转到您的引导 css 文件，然后使用“查找和替换”（在 Notepad++ 中为 Ctrl + H）替换所有 '.'用'.myid_'

【讨论】：

【解决方案3】：

我知道这是一个老问题，但这可能会帮助从搜索引擎来到这里的人 - 您可以在 scss 中执行以下操作来实现上述目标：

// allows this file to use bootstrap classes and functions
@forward "node_modules/bootstrap/scss/bootstrap";

.myid_container{
  @extend .container;
}

.myid_btn-group{
  @extend .btn-group;
}

【讨论】：