Limitar el alcance de los estilos de arranque

¿Cómo limito Bootstrap solo al alcance de un div? Necesito anidar la hoja de estilo Bootstrap dentro de una aplicación ExtJS para divs específicos y ambos chocan porque necesitan su propio cuerpo, ul, li, a, etc.

Estoy tratando de evitar editar bootstrap.css manualmente (o mantenerlo al mínimo) para que pueda actualizarse fácilmente.

May 13 '12 06:05 ojosilva

Como el resultado de modificar less/bootstrap.less no fue lo suficientemente bueno para mí (vea por qué al final de la publicación), terminé filtrando bootstrap.css:

var css = require('css'), fs = require('fs');

var prefix = '.bootstrap-scope';
var inFile = 'bootstrap.css';

var cssAst = css.parse(fs.readFileSync(inFile, 'utf8'));
prefixNode(cssAst);
console.log(css.stringify(cssAst));

function prefixSelector(sel){
    if (sel.match(/^@/)) return sel;
    var m = sel.match(/(^| )(body|html)($|\W.*)/i);
    if (m) 
        return m[1] + prefix + m[3];
    else
        return prefix + ' ' + sel;
}

function prefixNode(node) {
    if (node.selectors) {
        node.selectors = node.selectors.map(prefixSelector);
    } else if (node.stylesheet) {
        node.stylesheet.rules.forEach(prefixNode);
    } else if (node.rules) {
        node.rules.forEach(prefixNode);
    }
}

Dado que se genera bootstrap.css, también se puede hacerlo a ciegas (solución similar a la de Alexey, pero que también maneja algunos casos extremos):

perl -lpe 'BEGIN { $prefix = ".bootstrap-scope" } if (($indent, $s, $sep) = /^(\s*)([^@\s].*?)(\s*[,{])$/) { $s =~ /^(from|to)*$/ or $s =~ s/(^| )(body|html)($|\W.*)/$1$prefix$3/i or $s = "$prefix $s"; $_ = "$indent$s$sep" }' bootstrap.css

En cuanto a modificar less/bootstrap.css y llamar a grunt para generar dist/css/bootstrap.css (la solución de Andrew Homeyer), parece no funcionar bien (al menos en bootstrap 3) en algunos casos:

• varios mixins como .make-grid-columns (de less/mixins.xml) terminan mal prefijados. Ejemplo:

  .bootstrap-scope .col-sm-1,
    .col-sm-2,
    .col-sm-3,
  

• el uso de "&" en MENOS es limitado:

  .caret {
    .btn-default & {
  

  se convierte

   .btn-default .bootstrap-scope .caret {
  

  en lugar de lo que queremos:

   .bootstrap-scope .btn-default .caret {
  

Nov 18 '2013 15:11 Pascal Pixel Rigaux

Si tiene la siguiente estructura de archivos:

• mis estilos.menos
• mis estilos.css
• /oreja/
  • bootstrap.less
  • arranque.css
  • sin cuadrícula
  • ...
  • /mezclas/

Y desea limitar el alcance del bootstrap, debe ingresar mystyles.less ( forma correcta ):

.your-class-to-limit-bootstrap-scope{
    @import (less) "bootstrap/bootstrap.css";
}

Tenemos que importar el archivo bootstrap.css en lugar de bootstrap.less, pero usando la opción (less) @import para tratar el archivo como un archivo Less, sin importar la extensión del archivo. Entonces obtendrás el CSS correcto, por ejemplo:

.your-class-to-limit-bootstrap-scope .col-xs-1,
.your-class-to-limit-bootstrap-scope  .col-sm-1,
.your-class-to-limit-bootstrap-scope ...
.your-class-to-limit-bootstrap-scope .col-lg-12 {
    position: relative;
    min-height: 1px;
    padding-left: 7px;
    padding-right: 7px;
 }

Pero si importa archivos sin arranque, obtendrá un CSS con alcance incorrecto (forma incorrecta) :

.your-class-to-limit-bootstrap-scope{
    @import "bootstrap/bootstrap.less";
}

Entonces, obtendrás el CSS con alcance incorrecto, por ejemplo:

.your-class-to-limit-bootstrap-scope .col-xs-1, 
.col-sm-1,
.col-md-1,
...
.col-lg-12 {
    position: relative;
    min-height: 1px;
    padding-left: 15px;
    padding-right: 15px;
}

Jun 04 '2015 10:06 PoseLab

Hay una forma mucho más sencilla de lograr este requisito legítimo: reemplace }NEWLINE y ,NEWLINE con el valor anterior y el alcance de su clase. Es muy fácil hacerlo, por ejemplo, en Sublime:

• Seleccione }\r\n

• Alt + F3 (para seleccionar todas las ocurrencias)

• Reemplazar con }\r\n.bootstrap-scope

• Seleccione,\r\n

• Alt + F3 (para seleccionar todas las ocurrencias)

• Reemplazar con,\r\n.bootstrap-scope

¡Eso es todo! Será bastante fácil actualizarlo en el futuro, ya que el reemplazo demora aproximadamente un minuto. Espero que mi respuesta haya ayudado.

May 30 '2013 12:05 Alexey