É comum que haja conflitos de CSS ao utilizarmos algum bootstrap. dentro de uma página existente com outros estilos já definidos.
É possível isolar seu bootstrap de CSS para que ele atue a partir de uma DIV específica, como no exemplo abaixo:
<div class="bootstrap-iso"> <!-- A partir daqui sua página será estilizada com seu Bootstrap CSS --> </div>
Como isolar meu CSS bootstrap ?
- Instale o Node.JS em seu computador: http://nodejs.org/
- Agora iremos instalar um processador de CSS que fará o isolamento:
npm install -g less
- Crie um diretório vazio, e copie seus arquivos de CSS do boostrap para dentro deste diretório:
- Dentro deste diretório adicionar o arquivo “prefix.less” com o seguinte conteúdo
.bootstrap-iso {
@import (less) 'bootstrap.css';
}
Cada linha corresponde ao seu arquivo de boostrap que será feito o isolamento.
- Abra o CMD (Windows) ou Terminal (Linux), vá até o diretório criado acima e execute o seguinte comando:
lessc prefix.less bootstrap-iso.css
Foi gerado um novo arquivo de CSS, “boostrap-iso.css”.
Agora basta incluir este arquivo em sua página, e adicionar a class=”bootstrap-iso” na DIV que desejar aplicar o bootstrap.
