Применение CSS стилей Twitter Bootstrap для отдельного блока на странице

Иконка CSS

Twitter Bootstrap — это свободный фронтенд фреймворк, позволяющий создавать сайты и веб-приложения. По умолчанию, при подключении стилей этого фреймворка, они  применяются ко всему сайту. Но иногда мы хотим применить эти стили только к какому то конкретному блоку на странице. Например, при интеграции плагина jQuery File Upload на сайт с отдельными стилями для всего остального контента. Далее я покажу как можно решить эту проблему.

Допустим, мы хотим ограничить применение стилей к элементу <div> с классом «bootstrap».

Идея в том, что бы автоматически создать свои версии нужных файлов стилей (bootstrap.css и bootstrap-responsive.css) путем добавления к каждой CSS инструкции префикса div.bootstrap. Сделаем это с помощью динамического языка стилей LESS.

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

  1. Скачиваем последнюю версию css файла.
  2. Открываем файл и копируем все его содержимое в буфер обмена.
  1. Заходим на сайт онлайн LESS-компилятора, например, http://lesstester.com/.
  1. Создаем входной код для компилятора таким образом:
div.bootstrap {
   // Сюда вставляем код CSS файла из буфера обмена
}
  1. Компилируем LESS код.
  2. Результат сохраняем в отдельном 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, но и для любых других стилей, которые по умолчанию применяются ко всему сайту, а вы этого не хотите.

1 комментарий

  1. Большое спасибо за ссылку на компилятор. Никак найти не мог… Выручил!

Добавить комментарий для Алексей Отменить ответ

Ваш e-mail не будет опубликован. Обязательные поля помечены *

*

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>