Question

我的网站有很多css个功能。我也想开始使用bootstrap功能。问题是：我的网站有与bootstrap同名的类，有些功能崩溃了。

我试图像这个解决方案那样做：apply external CSS to specific area 但是，当我尝试在这样的部分中包含页面时：

<section class="main" style="min-height:460px">
    <style scoped>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
        <script src="${ctx}/scripts/bootstrap-select.js" ></script>
        <script src="${ctx}/scripts/bootbox.min.js" ></script>
        <script src="${ctx}/scripts/jquery.bootpag.min.js" ></script>
        @import url("https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css");
        @import url("https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css");
        @import url("/ilocate-ws/css/bootstrap-select.css");
    </style>
...
</section>

css部分有效，但脚本无法加载。

然而，＆＃34;正常＆＃34;声明如：

p {
    padding:1em;
    margin:1em;
    border-radius:5px;
}

这很有效。

我的问题是：

1）我是否以正确的方式做includes？ 2）如果没有，我该怎么做？

谢谢！

Answer 1

我正在使用http://www.w3schools.com/tags/att_style_scoped.asp作为参考。

如果查看语法，则作用域样式表必须位于包含使用它的内容的DOM元素内。

<div>
    <style scoped>
        h1 {color:red;}
        p {color:blue;}
    </style>
    <h1>This is a heading</h1>
    <p>This is a paragraph.</p>
</div>

在同一个链接中，只有Firefox支持它。你最好只使用css选择器，如下所示。在http://www.impressivewebs.com/css-selectors/

有很好的教程

 <style>
     .styleThisSection  h1 {color:red;}
    .styleThisSection  p {color:blue;}
</style>
<div  class="styleThisSection">
    <h1>This is a heading</h1>
    <p>This is a paragraph.</p>
</div>

使用scoped JQuery插件进行引导

1 个答案: