Использование облачного плагина JQuery для начальной загрузки

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> 

устанавливаемых сотовую часть работы, но сценарии не загружаются.

Тем не менее "нормальное" заявление, как:

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>