Cómo espacios de Twitter Bootstrap para que los estilos no entren en conflicto

Quiero utilizar Twitter Bootstrap, pero solo en elementos específicos, así que tengo que encontrar una manera de prefijar todas las clases de Twitter Bootstrap con mi prefijo, o usar las menos mixinas. Todavía no tengo experiencia con esto, así que no entiendo muy bien cómo hacerlo. Aquí hay un ejemplo del HTML que bash estilizar:

dont style this with bootstrap

use bootstrap

En este ejemplo, Twitter Bootstrap sería un estilo normal tanto para h1 s, pero quiero ser más selectivo sobre las áreas en las que aplicaré los estilos de Twitter Bootstrap.

Esto resultó ser más fácil de lo que pensaba. Tanto Less como Sass admiten espacios de nombres (usando la misma syntax incluso). Cuando incluye bootstrap, puede hacerlo dentro de un selector para el espacio de nombres:

 .bootstrap-styles { @import 'bootstrap'; } 

Actualización: para las versiones más nuevas de LESS, aquí le mostramos cómo hacerlo:

 .bootstrap-styles { @import (less) url("bootstrap.css"); } 

Una pregunta similar fue respondida aquí.

@Andrew gran respuesta. También querrás notar que bootstrap modifica el cuerpo {}, principalmente para agregar fuente. Por lo tanto, cuando el espacio de nombres lo hace a través de LESS / SASS, su archivo css de salida se ve así: (en el progtwig de arranque 3)

 .bootstrap-styles body { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 14px; line-height: 1.428571429; color: #333333; background-color: white; } 

pero obviamente no habrá una etiqueta corporal dentro de su div, por lo que su contenido bootstrap no tendrá la fuente bootstrap (ya que todo el bootstrap hereda la fuente del padre)

Para solucionarlo, la respuesta debería ser:

 .bootstrap-styles { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 14px; line-height: 1.428571429; color: #333333; background-color: white; @import 'bootstrap'; } 

Poniendo juntas las respuestas de @Andrew, @Kevin y @ adamj (más algunos otros estilos), si incluye lo siguiente en un archivo llamado “bootstrap-namespaced.less”, simplemente puede importar ‘bootstrap-namespaced.less’ en cualquier archivo:

 // bootstrap-namespaced.less // This less file is intended to be imported from other less files. // Example usage: // my-custom-namespace { // import 'bootstrap-namespaced.less'; // } // Import bootstrap.css (but treat it as a less file) to avoid problems // with the way Bootstrap is using the parent operator (&). @import (less) 'bootstrap.css'; // Manually include styles using selectors that will not work when namespaced. @import 'variables.less'; & { // From normalize.less // Previously inside "html {" // font-family: sans-serif; // Overridden below -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; // Previously inside "body {" margin: 0; // From scaffolding.less // Previously inside "html {" // font-size: 10px; // Overridden below -webkit-tap-highlight-color: rgba(0,0,0,0); // Previously inside "body {" font-family: @font-family-base; font-size: @font-size-base; line-height: @line-height-base; color: @text-color; background-color: @body-bg; } 

Agregar un espacio de nombres al bootstrap CSS romperá la funcionalidad modal ya que el progtwig de arranque agrega una clase ‘modal-backdrop’ directamente al cuerpo. Una solución alternativa es mover este elemento después de abrir el modal, por ejemplo:

 $('#myModal').modal(); var modalHolder = $('
'); $('body').append(modalHolder); $('.modal-backdrop').first().appendTo(modalHolder);

Puede eliminar el elemento en un controlador para el evento ‘hide.bs.modal’.

Use la versión .less de los archivos. Determine qué menos archivos necesita, luego ajuste esos archivos .less con:

 .bootstrap-styles { h1 { } } 

Esto le dará la salida de:

 .bootstrap-styles h1 { } 

Hice un GIST con Bootstrap 3 dentro de una clase llamada .bootstrap-wrapper https://gist.github.com/onigetoc/20c4c3933cabd8672e3e

Empecé con esta herramienta: http://www.css-prefix.com/ Y arregle el rest con la búsqueda y reemplazo en PHPstorm. Todas las fonts @ font-face están alojadas en maxcdn.

Ejemplo de primera línea

 .bootstrap-wrapper {font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%} 

El espaciado de nombres rompe el div de fondo del complemento Modal, ya que siempre se agrega directamente a la etiqueta , omitiendo el elemento de espacio de nombres que tiene los estilos aplicados.

Puede solucionar esto cambiando la referencia del complemento a $body antes de que muestre el fondo:

 myDialog.modal({ show: false }); myDialog.data("bs.modal").$body = $(myNamespacingElement); myDialog.modal("show"); 

La propiedad $body decide dónde se agregará el fondo.

Para explicar mejor todos los pasos de lo que Andrew estaba hablando para aquellos que no saben lo que es Less. Aquí hay un enlace que explica bastante bien cómo se hace paso a paso Cómo aislar Bootstrap u otras bibliotecas CSS

Me enfrenté al mismo problema y el mismo método propuesto por @Andrew desafortunadamente no ayudó en mi caso específico. Las clases Bootstrap colisionaron con clases de otro framework. Así es como se ha aceptado este proyecto https://github.com/sneas/bootstrap-sass-namespace . Siéntase libre de usar.

La solución más simple: comience a usar clases CSS de comstackción personalizadas para Bootstrap.

Por ejemplo, para Bootstrap 4.1 descarga archivos del directorio css4.1 –

https://github.com/cryptoapi/Isolate-Bootstrap-4.1-CSS-Themes

y envuelva su HTML en un div con la clase bootstrapiso:

 

La plantilla de página con bootstrap 4 aislado será

 < !DOCTYPE html>       Page1