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

Question

我有使用的Web应用程序Foundation.

我不擅长基础,我必须开发几页我想要使用,Bootstrap但我不想与其他公司CSS混合.

所以我正在寻找是否可以将所有的靴子包裹在某些类中bootstrap.所以,如果我想使用bootsrap.我可以用

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

我不知道sass等等.

是否可以从在线下载一些带有一些预定义前缀的bootstrap css

Answer 1

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

1. 做一个简短的前缀(我的推荐)
2. 如果您使用空格,那么它将是父类.
3. 粘贴在CSS文件的编译版本中
4. 单击运行按钮

结果摘要:

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

Answer 2

实际上你可以使用命名空间,参见:如何命名为Twitter Bootstrap,以便样式不会发生冲突,http://lesscss.org/features/#features-overview-feature-namespaces-and-accessors和

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

**少/ SASS**

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

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

更新

接受的解决方案只是前缀类(或具有类的选择器).如果您想使用Bootstrap的CSS来设置HTML表格的样式.您的前缀没有引导的的风格table,th和caption选择.

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

您唯一需要知道的是要导入的文件.Bootstrap的Less文件组织得很好.你应该总是导入variables.less和mixins.less.在mixins.less进口所有其他的混入.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