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

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

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

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

1. Скачиваем последнюю версию css файла.
2. Открываем файл и копируем все его содержимое в буфер обмена.

3. Заходим на сайт онлайн LESS-компилятора, например, http://lesstester.com/.

4. Создаем входной код для компилятора таким образом:

div.bootstrap {
   // Сюда вставляем код CSS файла из буфера обмена
}

5. Компилируем LESS код.
6. Результат сохраняем в отдельном 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, но и для любых других стилей, которые по умолчанию применяются ко всему сайту, а вы этого не хотите.