只在指定的类或id中集成css框架

2024年2月3日 208次阅读

我的问题是我的项目集成到另一个网站.

例如,我从0开始构建网站,我的指定系统构建在boostrap或基础上.当我尝试将它集成到我的网站上时,我的所有网站都开始使用boostrap或基础风格.

例如,只有在这个css工作才有可能

<div id="boostrap_only">
    <table class="table table-bordered">...</table> <!-- here works -->
</div>

<table class="table table-bordered">...</table> <!-- here don't work -->

最佳答案 有很多方法.

1-使用less(在你的文件中包含你的引导程序)

.bootstrap {
    @import "/path-to-bootstrap-less.less"
    @import "/path-to-bootstrap-responsive-less.less"
}

2-详细解决方案：

最后的修复是使用SASS(由异地人推荐),因为它允许您嵌套元素,然后自动生成最终的CSS.这个过程一步一步是：

>将两个Bootstrap文件(bootstrap.css和bootstrap-responsive.css)连接到bootstrap-all.css.
>使用内容div.bootstrap {创建一个新的SASS文件bootstrap-all.scss.
>将bootstrap-all.css添加到bootstrap-all.scss.
>通过追加}来关闭div.bootstrap选择器到bootstrap-all.scss.
>在bootstrap-all.scss上运行SASS以生成最终的CSS文件.
>在最终文件上运行YUI Compressor以生成最小化版本.
>将最小化版本添加到head元素,并将我想要的样式包装到< div class =“bootstrap”>< / div>中.

供参考,请参阅此链接link 1

点赞