仅将CSS样式应用于某些元素

Question

我有一个现有的网站,其中包含许多旧页面和表格,我正在尝试逐步过渡到CSS.我想使用Twitter Bootstrap样式表 - 特别是表单的样式 - 但仅限于我明确请求它们的页面部分.例如,我可能会在div中包围整个表单,如下所示:

<div class="bootstrap">
 <!-- everything in here should have the Bootstrap CSS applied -->
 <form>
   <p><label for="text_input">Label</label><input type="text" id="text_input" /></p>
 </form>
</div>

我希望所有其他形式保持与现在相同,因为我无法同时更改所有形式.有一个简单的方法吗？我可以浏览Bootstrap CSS中的每一个样式并添加一个父选择器(例如'p'将成为'div.bootstrap p'),但这需要很长时间,并且很容易错过样式.

编辑:如果这样的事情不可能,有没有一个免费工具可以从文件中提取所有样式,添加前缀,然后再将它们保存回来？

Answer 1

对于Bootstrap 3,如果您使用它会更容易less:

下载Bootstrap源代码并制作如下style.less文件:

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

最后,你必须编译less文件; 还有很多选择

https://github.com/cloudhead/less.js/wiki/Command-Line-use-of-LESS https://github.com/cloudhead/less.js/wiki/GUI-compilers-that-use-LESS .js文件

或者使用npm安装less然后将style.less文件编译为style.css:

npm install -g less
lessc style.less style.css

Answer 2

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

1. 将两个Bootstrap文件(bootstrap.css和bootstrap-responsive.css)连接成bootstrap-all.css.
2. 创建一个新的文件SASS,bootstrap-all.scss与内容div.bootstrap {.
3. 附加bootstrap-all.css到bootstrap-all.scss.
4. 关闭div.bootstrap通过附加选择}到bootstrap-all.scss.
5. 运行SASS bootstrap-all.scss以生成最终的CSS文件.
6. 在最终文件上运行YUI Compressor以生成最小化版本.
7. 将最小化版本添加到head元素并包装我想要应用的样式的所有内容<div class="bootstrap"></div>.

Answer 3

如果由于工作/其他原因你不能使用LESS/SASS,我想出了一个CSS解决方案.

1. 我使用这个网站http://www.css-prefix.com/,并将bootstrap.min.css复制/粘贴到那里.我设置了prefix ='.bootstrap'和spacer =''.除了不完美之外,它将使用.bootstrap作为前缀.
2. 如果你为'.bootstrap @media'做一个grep,你会发现开始括号右边的第一个类没有.bootstrap作为父.将.bootstrap添加到所有这些事件中,对我来说大概是68.
3. 然后用'@media'替换所有'.bootstrap @media'.
4. 最后一步是将所有'.bootstrap @'替换为'@'(应该是大约5次).

例:

.bootstrap @media (min-width:768px){.lead{font-size:21px}}

需要更换为

@media (min-width:768px){.bootstrap .lead{font-size:21px}}

一种蛮力方法,所以一定要先尝试上面的LESS/SASS方法.

<div>
  No Bootstrap
</div>
<div class="bootstrap">
  Yes Bootstrap
</div>

Answer 4

我有一个简单的解决方案。

1. 将 bootstrap css 内容复制到这个 ( http://css2sass.herokuapp.com/ ) 在线 css 到 scss/sass 转换器。

2. 将您的标记信息（例如div.bootstrap{）添加到 scss 内容的开头并在末尾关闭标记。

3. 将整个 scss 内容复制到此 scss 到 css 转换器（https://www.sassmeister.com/）并进行转换:)