Using scoped JQuery plugin for bootstrap

Question

I have a website with a lot of css functions. I want to start using bootstrap features in it as well. The problem is : my website has classes with the same name as bootstrap and some features are crashing.

I am trying to do it like this solution: apply external CSS to specific area But when I try to include a page in a section like this :

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

The css part works but the scripts don't load.

Nevertheless the "normal" declarations like :

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

This works just right.

My questions is:

1) Am I doing the includes in the right way?
2) If not, how should I do it?

Thanks!

Answer 1

I'm using http://www.w3schools.com/tags/att_style_scoped.asp as a reference for this.

if you look at the syntax, the scoped style sheet has to be inside of the DOM element that contains the content that uses it.

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

From the same link, only Firefox supports it. You would be better off just using css selectors as shown below. There is good tutorial about this at 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>