texto tamaño style para examples estilos cajas borde bootstrap ajustar css twitter-bootstrap bootswatch

css - tamaño - input sin borde bootstrap



Personalización de la plantilla CSS de Bootstrap (8)

Creo que la forma oficialmente preferida ahora es usar Less, y anular dinámicamente el bootstrap.css (usando less.js), o recompilar bootstrap.css (usando el compilador 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 <head> .

<link rel="stylesheet/less" href="/path/to/bootstrap.less"> <script src="/path/to/less.js"></script>

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

O si prefiere compilar 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

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 compilació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.

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.

Hace poco escribí una post 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 compilarlo 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 compilació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 post .

Ejemplo de código en github está here .

La mejor opción en mi opinión es compilar 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

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 <table class="zebra-striped mycustomclass"> . Si declaras tu archivo css después de bootstrap.css , esto sobrescribirá lo que quieras.

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 compilará automáticamente el css. Al implementar, compila menos archivos en css.

Actualización 2018 - Bootstrap 4

Estoy revisando esta pregunta de personalización de Bootstrap para 4.x, que ahora utiliza SASS 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 ...

<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"> <link rel="stylesheet" type="text/css" href="css/custom.css">

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 )

After (con custom.css )

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 cambiemos 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; /* or, use an existing variable */ $theme-colors: ( primary: $purple ); /* -------end customization-------- */ /* finally, import Bootstrap to set the changes! */ @import "bootstrap";

¡Con SASS debes @importar bootstrap después de las personalizaciones para que funcionen! Una vez que el SASS se compila en CSS (esto debe hacerse en el lado del servidor usando un compilador 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 trabajo SASS

Relacionado:
Cómo ampliar / modificar (personalizar) Bootstrap 4 con SASS
¿Cómo cambiar el color primario de arranque?