自定义 Twitter Bootstrap 类名

Posted 2023-03-16

【中文标题】自定义 Twitter Bootstrap 类名

【英文标题】：Customize Twitter Bootstrap Classnames

【发布时间】：2015-05-14 05:24:14

【问题描述】：

http://getbootstrap.com/customize/

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

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

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

【问题讨论】：

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

【参考方案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;