emergentes - Cómo espacios de Twitter Bootstrap para que los estilos no entren en conflicto
bootstrap table (10)
@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 programa 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'';
}
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 intento estilizar:
<div class="normal-styles">
<h1>dont style this with bootstrap</h1>
<div class="bootstrap-styles">
<h1>use bootstrap</h1>
</div>
</div>
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.
Agregar un espacio de nombres al bootstrap CSS romperá la funcionalidad modal ya que el programa 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 = $(''<div class="your-namespace"></div>'');
$(''body'').append(modalHolder);
$(''.modal-backdrop'').first().appendTo(modalHolder);
Puede eliminar el elemento en un controlador para el evento ''hide.bs.modal''.
El espaciado de nombres rompe el div de fondo del complemento Modal, ya que siempre se agrega directamente a la etiqueta <body>, 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.
Esto resultó ser más fácil de lo que pensaba. Tanto Less como Sass admiten espacios de nombres (usando la misma sintaxis 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í.
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 resto con la búsqueda y reemplazo en PHPstorm. Todas las fuentes @ 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%}
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.
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 formden.com/blog/isolate-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;
}
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 { }
La solución más simple: comience a usar clases CSS de compilació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:
<div class="bootstrapiso">
<!-- Any HTML here will be styled with Bootstrap CSS -->
</div>
La plantilla de página con bootstrap 4 aislado será
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="">
<title>Page1</title>
<!-- Isolated Bootstrap4 CSS - -->
<link rel="stylesheet" href="css4.1/bootstrapcustom.min.css" crossorigin="anonymous">
<!-- JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" crossorigin="anonymous"></script>
<script defer src="https://use.fontawesome.com/releases/v5.0.9/js/all.js" crossorigin="anonymous"></script>
</head>
<body>
<div class="bootstrapiso">
<!-- Any HTML here will be styled with Bootstrap CSS -->
</div>
</body>
</html>