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

时间:2012-08-06 15:32:25

标签: css twitter-bootstrap

我有一个现有的网站,其中包含大量旧页面和表格,我正在尝试逐步过渡到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'),但这需要很长时间,并且很容易错过样式。

编辑:如果无法做到这一点,是否有免费工具可以从文件中提取所有样式,添加前缀然后再将其保存回来?

7 个答案:

答案 0 :(得分:45)

对于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

答案 1 :(得分:26)

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

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

答案 2 :(得分:15)

如果由于工作/其他原因无法使用LESS / SASS,我想出了一个CSS解决方案。

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

答案 3 :(得分:4)

我对这些答案中的任何一个都不满意。使用Less来规范规则创建了各种缺陷。例如,Clearfix都搞砸了。像button.close这样的规则变成button.bootstrap close而不是我真正想要的那样:.bootstrap button.close

我采取了不同的方法。我使用PostCSS来处理随Bootstrap一起提供的开箱即用的CSS。我使用Scopify插件将每个规则限定为.bootstrap

这个主要是到达那里。当然,htmlbody规则变为.bootstrap html.bootstrap body变得非感性。不用担心......我可以写一个PostCSS转换来清理它们:

var elevateGlobalsPlugin = postcss.plugin('elevateGlobals', function(opts) {
    return function(css, result) {
        css.walkRules(function(rule) {
            rule.selector = rule.selector.replace('.bootstrap html', '.bootstrap');
            rule.selector = rule.selector.replace('.bootstrap body', '.bootstrap');
        });
    }
});

现在,我可以通过在顶层添加class="bootstrap"来隔离所有Bootstrap样式。

答案 4 :(得分:3)

这很难。你不能Apply different css stylesheet for different parts of the same web page

我怀疑这样做的唯一方法是为你的内容创建一个单独的文件来获取引导样式,然后将它构建到页面中,如下所示:

<iframe src="/content-to-take-bootstrap-styles.html" ></iframe>

然后在content-to-take-bootstrap-styles.html  引用标题中的bootstrap样式表。但是你有iframe的所有复杂性 - 例如:iframe元素不会增长以适应你的内容的长度。

答案 5 :(得分:3)

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

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

  2. 将您的代码信息(例如div.bootstrap{)添加到scss内容的开头,并在结尾处关闭代码。

  3. 将整个scss内容复制到此scss转换为css转换器(https://www.sassmeister.com/)并将其转换为:)

答案 6 :(得分:0)

您可以使用随时可用的隔离css for Bootstrap 4.1(使用LESS编译) -

https://github.com/cryptoapi/Isolate-Bootstrap-4.1-CSS-Themes

它有主题的隔离css -

要使用Bootstrap CSS,只需将HTML包装在带有bootstrapiso类的div中,如下所示:

<div class="bootstrapiso">
<!-- Any HTML here will be styled with Bootstrap CSS -->
</div>

并使用文件夹css4.1中的任何css样式,如下所示:

<head>
<link rel="stylesheet" href="css4.1/bootstrapcustom.min.css" crossorigin="anonymous">
...
</head>

// https://github.com/cryptoapi/Isolate-Bootstrap-4.1-CSS-Themes

完成!