Question

我的网络应用程序使用Foundation。

我不擅长基础，我必须开发几个页面，我想使用Bootstrap，但我不想与其他公司的css混合。

所以我正在寻找是否可以将所有的靴子包裹在像bootstrap这样的类中。所以，如果我想使用bootsrap。我可以像

一样使用

<div class="bootstrap"> <table class="table">
</div>

我不知道这一切。

是否可以使用一些预定义的前缀

从在线下载一些bootstrap css

Answer 1

如果您不使用SASS或LESS，则可以使用http://www.css-prefix.com/

制作一个简短的前缀（我的推荐）
如果您使用空格，那么它将是父类。
粘贴CSS文件的编译版本
点击“运行”按钮

结果摘要：

.tb.col-xs-1, .tb.col-sm-1, .tb.col-md-1, ...

enter image description here

Answer 2

确实可以使用名称空间，请参阅：How to namespace Twitter Bootstrap so styles don't conflict，http://lesscss.org/features/#features-overview-feature-namespaces-and-accessors和

如果您只需要用于表的Bootstrap CSS，则可以在http://getbootstrap.com/getting-started/#download下载源代码后编译以下Less / SASS代码：

** less / SASS **

.bootstrap {
@import "variables";
@import "mixins/table-row";
@import "tables";
}

如您所见，您可以对Less和SASS使用相同的代码，请注意编译SASS版本时导入的顺序很重要。

<强>更新

接受的解决方案只有前缀类（或具有类的选择器）。如果您想使用Bootstrap的CSS来设置HTML表格的样式。您的前缀不具有table，th和caption选择器的引导程序样式。

即使您从未使用过Less / CSS，也可以使用Less（或SASS）轻松利用在线编译器进行前缀。可以在http://lesscss.org/usage/#online-less-compilers找到在线Less编译器列表。 codepen还有一个在线LESS和SASS编译器。

您唯一需要知道的是要导入的文件。 Bootstrap的Less文件组织得很好。您应始终导入variables.less和mixins.less。 mixins.less导入所有其他mixins。 Mixins不输出，因此导入所有这些将减慢编译速度，但不会出现在已编译的CSS代码中。

如果您需要表CSS的前缀版本，您可以在其中一个在线编译器中运行以下代码：

.bootstrap {
    @import url("https://raw.githubusercontent.com/twbs/bootstrap/master/less/variables.less");
    @import url("https://raw.githubusercontent.com/twbs/bootstrap/master/less/mixins.less");
    @import url("https://raw.githubusercontent.com/twbs/bootstrap/master/less/tables.less");
}

可以在http://codepen.io/bassjobsen/pen/PwPNBP

找到演示

Answer 3

听起来你想要命名Bootstrap，这很容易使用SASS（基金会使用，我相信）。所以在你的SASS文件中（应该有.scss扩展名）你可以在这样的类名中导入Bootstrap：

.bootstrap {
  @import 'bootstrap';
}

然后你可以在你的HTML中引用Bootstrap：

<body class="bootstrap">
    <div class="col-xs-12 col-sm-6"> 
        <table class="table"></table>
    </div>
</body>

您可以在此处下载SASS版本的Bootstrap：https://github.com/twbs/bootstrap-sass。将该SCSS文件放入与主SCSS文件相同的目录中，然后即可导入。

Answer 4

Imo这个问题的答案是有问题的。如果你引入一个泛型类来命名所有东西，比如这......

.bootstrap { @import 'bootstrap'; }

您正在有效地提高CSS特异性。

您真正需要的是一个迁移Bootstrap以更改类名称的工具。

例如，

E.g。

<div class="alert"> <div class="something alert"> <div class="something alert alert-danger">

应该成为

<div class="bs-alert"> <div class="something bs-alert"> <div class="something bs-alert bs-alert-danger">

它应该单独留下“某些东西”，因为这个类不会出现在Bootstrap中。

据我所知，这样的工具不存在（开源）。

Answer 5

@Wolfr's答案已经很好地描述了这个问题-在2019年，http://www.css-prefix.com/不再起作用，并且Google top10中的所有其他解决方案仅通过将所有bootstrap类包装为来提高CSS的特异性。家长班。

这种方法不是防弹的：例如如果您制作

.custom_namespace .col-3 { width: 25%; }

这不会保护您免受使用！important引导类的人的侵害，无论出于何种原因。 .col-3 { width: 99% !important; }

实际上，我在npm上发现了一件作品，开发人员确实实现了该自定义前缀，甚至使其与bootstrap的JS文件一起使用。但这仅适用于Bootstrap 3：https://www.npmjs.com/package/bootstrap-sass-namespace

这将生成所有引导类，例如.custom_prefix_col-3 {}

如果您需要真正命名空间的Bootstrap 4 CSS，则还有一个选择：

在我的情况下，我需要Bootstrap 4，因此我打开了bootstrap css文件，运行搜索并使用正则表达式替换了Sublime Text，使用此值进行搜索： \.(?<TAG>[a-z]{1,3})-通过使用句点和前一到三个字母字符来捕获类的所有开头，而不是仅搜索句点（。）并冒乱搞乱CSS属性的浮点值。

为了替换，我使用了.the_prefix_I_need\1

这使我可以生成真正隔离的bootstrap 4 css文件，如果包含我的应用的网站上的某个人决定用！important重新定义一些bootstrap类，那么可以肯定不会搞砸。

有没有准备好使用带前缀的Bootstrap css文件

5 个答案:

如果您需要真正命名空间的Bootstrap 4 CSS，则还有一个选择：