
Twitter Bootstrap — это свободный фронтенд фреймворк, позволяющий создавать сайты и веб-приложения. По умолчанию, при подключении стилей этого фреймворка, они применяются ко всему сайту. Но иногда мы хотим применить эти стили только к какому то конкретному блоку на странице. Например, при интеграции плагина jQuery File Upload на сайт с отдельными стилями для всего остального контента. Далее я покажу как можно решить эту проблему.
Допустим, мы хотим ограничить применение стилей к элементу <div>
с классом «bootstrap».
Идея в том, что бы автоматически создать свои версии нужных файлов стилей (bootstrap.css и bootstrap-responsive.css) путем добавления к каждой CSS инструкции префикса div.bootstrap. Сделаем это с помощью динамического языка стилей LESS.
Итак, для каждого файла который следует преобразовать, делаем следующее:
- Скачиваем последнюю версию css файла.
- Открываем файл и копируем все его содержимое в буфер обмена.
- Заходим на сайт онлайн LESS-компилятора, например, http://lesstester.com/.
- Создаем входной код для компилятора таким образом:
div.bootstrap { // Сюда вставляем код CSS файла из буфера обмена }
- Компилируем LESS код.
- Результат сохраняем в отдельном css файле (например, bootstrap-div.css и bootstrap-responsive-div.css).
В результате, код в нашем CSS файле будет выглядеть приблизительно так:
div.bootstrap{}div.bootstrap .clearfix{*zoom:1} div.bootstrap .clearfix:before,div.bootstrap .clearfix:after{display:table;line-height:0;content:""} …
Теперь просто подключаем полученные файлы в на наш сайт, и используем стили Twitter Bootstrap следующим образом:
<div class="bootstrap"> // Все что содержится внутри этого блока будет "украшено" стилями Twitter Bootstrap <div>
Показанный прием можно использовать не только для стилей Twitter Bootstrap, но и для любых других стилей, которые по умолчанию применяются ко всему сайту, а вы этого не хотите.
Большое спасибо за ссылку на компилятор. Никак найти не мог… Выручил!
Спасибо тебе большое!!! Это для меня открытие!
Можете готовые файлы выложить?
Всем привет, у меня не получается, не могли бы Вы со мной связаться, чтобы помочь?
Есть
К этому index.html подключена таблица стилей .
Также есть еще таблица .
Как мне global.css применить ТОЛЬКО для #slider?