Применение стилей CSS только к определенным элементам

У меня есть существующий веб-сайт с большим количеством старых страниц и форм, выложенных таблицами, которые я пытаюсь постепенно переходить на 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" ), но это займет много времени, и было бы легко пропустить стили.

Изменить: если такая вещь невозможна, есть ли бесплатный инструмент, который может извлечь все стили из файла, добавить префикс и затем сохранить его снова?

Ответы

Ответ 1

Последнее исправление заключалось в использовании SASS (рекомендуется кем-то за пределами сайта), поскольку это позволяет вам вставлять элементы, а затем автоматически производят окончательный CSS. Шаг за шагом процесс:

  • Объединение двух файлов Bootstrap (bootstrap.css и bootstrap-responsive.css) в bootstrap-all.css.
  • Создайте новый файл SASS, bootstrap-all.scss, с содержимым div.bootstrap {.
  • Добавить bootstrap-all.css в bootstrap-all.scss.
  • Закройте селектор div.bootstrap, добавив } в bootstrap-all.scss.
  • Запустите SASS на bootstrap-all.scss, чтобы создать окончательный файл CSS.
  • Запустите YUI Compressor в конечном файле, чтобы создать свернутую версию.
  • Добавьте свернутую версию в элемент head и оберните все, к чему я хочу применить стили в <div class="bootstrap"></div>.

Ответ 2

Для Bootstrap 3 это проще, если вы используете less:

Загрузите исходный код Bootstrap и создайте файл style.less следующим образом:

.bootstrap {
    @import "/path-to-bootstrap-less.less";
    @import "/path-to-bootstrap-responsive-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

Ответ 3

Я придумал решение CSS, если вы не можете использовать LESS/SASS из-за работы/других причин.

  • Я использовал этот сайт http://www.css-prefix.com/ и копировал/вставлял bootstrap.min.css туда. Я устанавливаю префикс = '. Bootstrap' и spacer = ''. Он будет префикс всего с .bootstrap, за исключением не идеально.
  • Если вы делаете grep для '.bootstrap @media', вы обнаружите, что первый класс справа от открывающей скобки не имеет .bootstrap в качестве родителя. Добавьте .bootstrap ко всем этим встречам, около 68 для меня.
  • Затем замените все ".bootstrap @media" на "@media".
  • Заключительный шаг - заменить все ".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>

Ответ 4

Я не был удовлетворен ни одним из этих ответов. Использование Менее для охвата правил создало всевозможные дефекты. Clearfix, например, был испорчен. И правила вроде button.close стали button.bootstrap close вместо того, что я действительно хотел: .bootstrap button.close.

Я использовал другой подход. Я использую PostCSS для обработки готового CSS-кода, поставляемого с Bootstrap. Я использую плагин Scopify для охвата каждого правила с помощью .bootstrap.

В основном это происходит. Конечно, существуют правила html и body, которые становятся .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');
        });
    }
});

Теперь я могу выделить все стили Bootstrap, добавив class="bootstrap" на верхнем уровне.

Ответ 5

Это тяжело. Вы не можете применять различные стили CSS для разных частей одной и той же веб-страницы.

Я подозреваю, что единственный способ сделать это - сделать отдельный файл для вашего контента, чтобы взять стили бутстрапа, и i-frame его на страницу следующим образом:

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

то в content-to-take-bootstrap-styles.html  ссылайтесь на лист стиля загрузки в заголовке. Но тогда у вас есть все сложности iframe - например: iframe-элемент не будет расти, чтобы соответствовать длине вашего контента.

Ответ 6

У меня есть простое решение.

  • Скопируйте содержимое бутстрапа css в это (http://css2sass.herokuapp.com/) в онлайн-css конвертер scss/sass.

    /li >

  • Добавьте информацию о теге (например, div.bootstrap{) в начало содержимого scss и закройте тег в конце.

  • Скопируйте весь текст scss в этот scss в css-конвертер (https://www.sassmeister.com/) и преобразуйте его:)