Personalización de la plantilla CSS de Bootstrap

Estoy empezando con Bootstrap desde Twitter y me pregunto cuáles son las ‘mejores prácticas’ para la personalización. Quiero desarrollar un sistema que aproveche todo el poder de una plantilla de CSS (Bootstrap u otro), sea completamente modificable (y fácil), sea sostenible (es decir, cuando se publique la próxima versión de Bootstrap en Twitter, no lo hago). Tengo que empezar de nuevo.

Por ejemplo, quiero agregar imágenes de fondo a la navegación superior. Parece que hay 3 formas de hacerlo:

  1. Modificar las clases .topbar en bootstrap.css. No me gusta especialmente porque tendré muchos elementos en la barra superior y no necesariamente quiero modificarlos del mismo modo.
  2. Crear nuevas clases con mis imágenes de fondo y aplicar ambos estilos (el nuevo y el bootstrap a mi elemento). Esto puede crear conflictos de estilo, lo que podría evitarse eliminando la clase .topbar en clases separadas y luego solo utilizando las piezas que no son pisoteadas por mi clase personalizada. De nuevo, esto requiere más trabajo de lo que creo que debería ser necesario y si bien es flexible, no me permitirá actualizar fácilmente bootstrap.css cuando Twitter publique la próxima entrega.
  3. Use variables en .LESS para lograr la personalización. A primera vista, parece un buen enfoque, pero no lo he usado. MENOS Me preocupa la comstackción de CSS en el cliente y la sostenibilidad del código.

Aunque estoy usando Bootstrap, esta pregunta se puede generalizar a cualquier plantilla CSS.

Gracias de antemano por la entrada.

Lo mejor que puedes hacer es.

1. fork twitter-bootstrap de github y clona localmente.

están cambiando muy rápidamente la biblioteca / marco (difieren internamente. Algunos prefieren la biblioteca, yo diría que es un marco, porque cambian su diseño desde el momento en que lo cargan en su página). Bueno … bifurcar / clonar te permitirá buscar las nuevas versiones fácilmente.

2. No modifique el archivo bootstrap.css

Te complicará la vida cuando necesites actualizar el bootstrap (y tendrás que hacerlo).

3. Crea tu propio archivo css y sobrescríbalo siempre que quieras cosas originales de arranque

si configuran una barra superior con, digamos, color: black; pero desea que sea blanco, cree un nuevo selector muy específico para esta barra superior y use esta regla en la barra superior específica. Para una tabla, por ejemplo, sería

. Si declaras tu archivo css después de bootstrap.css , esto sobrescribirá lo que quieras.

Creo que la forma oficialmente preferida ahora es usar Less, y anular dinámicamente el bootstrap.css (usando less.js), o recomstackr bootstrap.css (usando el comstackdor Node o Less).

A partir de los documentos de Bootstrap , aquí le mostramos cómo sobrescribir los estilos de bootstrap.css de forma dinámica:

Descargue el último Less.js e incluya la ruta a él (y Bootstrap) en el .

    

Para recomstackr los archivos .less, simplemente guárdelos y vuelva a cargar su página. Less.js los comstack y los almacena en el almacenamiento local.

O si prefiere comstackr estáticamente un nuevo bootstrap.css con sus estilos personalizados (para entornos de producción):

Instale la herramienta de línea de comandos LESS a través de Node y ejecute el siguiente comando:

 $ lessc ./less/bootstrap.less > bootstrap.css 

Desde la respuesta de Pabluez en diciembre, ahora hay una mejor manera de personalizar Bootstrap.

Uso: Bootswatch para generar su bootstrap.css

Bootswatch crea el Bootstrap de Twitter normal a partir de la última versión (sea lo que sea que instale en el directorio de arranque), pero también importa sus personalizaciones. Esto facilita el uso de la última versión de Bootstrap, al tiempo que mantiene un CSS personalizado, sin tener que cambiar nada sobre su HTML. Simplemente puede influir en los archivos boostrap.css.

Actualización 2018 – Bootstrap 4

Estoy revisando esta pregunta de personalización de Bootstrap para 4.x, que ahora utiliza SASS en lugar de LESS. En general, hay 2 formas de personalizar Bootstrap …

1. Anulaciones de CSS simples

Una forma de personalizar es simplemente usar CSS para anular Bootstrap CSS. Para la mantenibilidad, las personalizaciones de CSS se colocan en un archivo custom.css separado, de modo que bootstrap.css permanece sin modificar. La referencia a custom.css sigue después de que bootstrap.css para que las anulaciones funcionen …

   

Simplemente agregue los cambios que sean necesarios en el CSS personalizado. Por ejemplo…

  /* remove rounding from cards, buttons and inputs */ .card, .btn, .form-control { border-radius: 0; } 

Before ( bootstrap.css )

enter image description here

After (con custom.css )

enter image description here

Tenga en cuenta que no es necesario utilizar !important en el CSS personalizado, a menos que esté anulando una de las clases de la utilidad Bootstrap . La especificidad CSS siempre funciona para una clase CSS para anular otra.


2. Personalizar usando SASS

Si está familiarizado con SASS (y debe usar este método), puede personalizar Bootstrap con su propio custom.scss . Hay una sección en los documentos de Bootstrap que explica esto, sin embargo, los documentos no explican cómo utilizar las variables existentes en su custom.scss . Por ejemplo, cambiemos el color de fondo del cuerpo a #eeeeee , y cambie / anule el color contextual primary azul a la variable $purple Bootstrap …

 /* custom.scss */ /* import the necessary Bootstrap files */ @import "bootstrap/functions"; @import "bootstrap/variables"; /* -------begin customization-------- */ /* simply assign the value */ $body-bg: #eeeeee; /* use a variable to override primary */ $theme-colors: ( primary: $purple ); /* -------end customization-------- */ /* finally, import Bootstrap to set the changes! */ @import "bootstrap"; 

Esto también funciona para crear nuevas clases personalizadas . Por ejemplo, aquí agrego purple a los colores del tema, lo que crea todo el CSS para btn-purple , text-purple , bg-purple , alert-purple , etc.

 /* add a new purple custom color */ $theme-colors: ( purple: $purple ); 

https://www.codeply.com/go/7XonykXFvP

¡Con SASS debes @importar bootstrap después de las personalizaciones para que funcionen! Una vez que el SASS se comstack en CSS (esto debe hacerse en el lado del servidor usando un comstackdor SASS), el CSS resultante es el Bootstrap personalizado. Si no está familiarizado con SASS, puede personalizar Bootstrap usando una herramienta como este generador de temas que creé.

Demostración de Bootstrap personalizada (SASS)


Relacionado:
Cómo ampliar / modificar (personalizar) Bootstrap 4 con SASS
¿Cómo cambiar el color primario de arranque?
Cómo crear un nuevo conjunto de estilos de color en Bootstrap 4 con sass
Cómo personalizar Bootstrap

Puede usar la plantilla de arranque de

http://www.initializr.com/

que incluye todos los archivos bootstrap .less. A continuación, puede cambiar las variables / actualizar los menos archivos que desee y comstackrá automáticamente el css. Al implementar, comstack menos archivos en css.

La mejor opción en mi opinión es comstackr un archivo LESS personalizado que incluya bootstrap.less, un archivo de variables.less personalizado y sus propias reglas:

  1. Clona la rutina de arranque en tu carpeta raíz: git clone https://github.com/twbs/bootstrap.git
  2. Cambiarle el nombre a “bootstrap”
  3. Crea un archivo package.json: https://gist.github.com/jide/8440609
  4. Crea un Gruntfile.js: https://gist.github.com/jide/8440502
  5. Crea una carpeta “menos”
  6. Copie bootstrap / less / variables.less en la carpeta “menos”
  7. Cambie la ruta de la fuente: @icon-font-path: "../bootstrap/fonts/";
  8. Cree un archivo style.less personalizado en la carpeta “less” que importa bootstrap.less y su archivo de variables.less personalizado: https://gist.github.com/jide/8440619
  9. Ejecute la npm install
  10. Ejecutar grunt watch

Ahora puede modificar las variables de la forma que desee, anular las reglas de rutina de carga en su archivo custom.less personalizado, y si algún día desea actualizar el bootstrap, puede reemplazar toda la carpeta de carga.

EDITAR: Creé un modelo repetitivo de Bootstrap usando esta técnica: https://github.com/jide/bootstrap-boilerplate

Hace poco escribí una publicación sobre cómo lo he estado haciendo en Udacity durante los últimos años. Este método ha significado que hemos podido actualizar Bootstrap cada vez que queríamos sin tener conflictos de fusión, trabajo descartado, etc., etc.

La publicación va más en profundidad con ejemplos, pero la idea básica es:

  • Mantenga una copia prístina de bootstrap y sobrescríbalo externamente.
  • Modifique un archivo (variables.tras de bootstrap) para incluir sus propias variables.
  • Haga que su archivo de sitio @include bootstrap.less y luego anule.

Esto significa utilizar LESS y comstackrlo en CSS antes de enviarlo al cliente (LESS del lado del cliente si es meticuloso, y generalmente lo evito) pero es EXTREMADAMENTE bueno para la facilidad de mantenimiento / actualización, y obtener LESS comstackción es realmente muy fácil . El código de github vinculado tiene un ejemplo que utiliza ronco, pero hay muchas maneras de lograrlo, incluso GUI si eso es lo que te gusta.

Al usar esta solución, su problema de ejemplo se vería así:

  • Cambia el color de la barra de navegación con @ navbar-inverse-bg en tus variables.less (no en bootstrap)
  • Agregue sus propios estilos de barra de navegación a bootstrap_overrides.less, sobrescribiendo todo lo que necesite a medida que avanza.
  • Felicidad.

Cuando llega el momento de actualizar tu bootstrap, simplemente cambias la copia prístina de arranque y todo seguirá funcionando (si bootstrap hace cambios importantes, necesitarás actualizar tus anulaciones, pero tendrías que hacer eso de todos modos)

Publicación de blog con recorrido detallado aquí .

Ejemplo de código en github está aquí .

Usa LESS con Bootstrap …

Aquí están los documentos de Bootstrap sobre cómo usar LESS

(se han movido desde respuestas anteriores)