¿Cómo usar bootstrap-theme.css con bootstrap 3?

174

Después de descargar un paquete completo de bootstrap 3 de http://getbootstrap.com , noté que hay un archivo css separado para el tema. ¿Cómo usarlo? ¿Por favor explique?

Incluí bootstrap-theme.cssen mi proyecto de arranque existente, pero no hay diferencia en la salida.

html css twitter-bootstrap-3 Yuvaraj P
fuente

Respuestas:

382

Al descargar Bootstrap 3.x, obtendrá bootstrap.css y bootstrap-theme.css (sin mencionar las versiones minimizadas de estos archivos que también están presentes).

bootstrap.css

bootstrap.cssestá completamente diseñado y listo para usar, si tal es su deseo. Es quizás un poco simple pero está listo y está allí.

No necesita usar bootstrap-theme.css si no lo desea y las cosas estarán bien.

bootstrap-theme.css

bootstrap-theme.csses justo lo que el nombre del archivo intenta sugerir: es un tema para bootstrap que se considera creativamente 'THE bootstrap theme'. El nombre del archivo confunde las cosas solo un poco ya que la base bootstrap.cssya tiene un estilo aplicado y, por mi parte, consideraría que esos estilos son los predeterminados. Pero esa conclusión es aparentemente incorrecta a la luz de las cosas que se dicen en la sección de ejemplos de la documentación de Bootstrap con respecto a este bootstrap-theme.cssarchivo:

"Cargue el tema Bootstrap opcional para una experiencia visualmente mejorada".

La cita anterior se encuentra aquí http://getbootstrap.com/getting-started/#examples en una miniatura que enlaza con esta página de ejemplo http://getbootstrap.com/examples/theme/ . La idea es que bootstrap-theme.csses EL tema de arranque y es opcional.

Temas en BootSwatch.com

Acerca de los temas en BootSwatch.com: estos temas no se implementan como bootstrap-theme.css. Los temas de BootSwatch son versiones modificadas del original bootstrap.css. Por lo tanto, definitivamente NO debes usar un tema de BootSwatch Y el bootstrap-theme.cssarchivo al mismo tiempo.

Tema personalizado

Acerca de su propio tema personalizado: puede optar por modificar bootstrap-theme.cssal crear su propio tema. Hacerlo puede hacer que sea más fácil hacer cambios de estilo sin romper accidentalmente ninguna de las bondades de Bootstrap incorporadas.

ingenio
fuente
68
Esta debería ser la respuesta seleccionada.
Patrick Cullen
11
Aviso sobre Bootswatch.com es muy útil. Gracias.
Daniel Kmak
@Daniel ... pero se debe refactorizar de acuerdo con la nueva dirección de twbs / bootstrap para tener una característica estable y consistente para sus clientes temáticos
Luca G. Soave
¿El archivo bootstrap-theme.css no es más una anulación? Bootstrap-theme.css está ahí para anular estilos SIN cambiar el archivo css base. La importancia aquí es que si actualiza a Bootstrap XX, reemplaza el archivo css base y no tendrá que preocuparse por perder todas sus personalizaciones. Puede que tenga que modificar su archivo de tema, pero eso es mucho menos preocupante. Quizás lo que estabas diciendo.
Jacques
2
Lo más confuso de esto es que si usa la función de Personalización en el sitio de arranque ( getbootstrap.com/customize ), coloca sus personalizaciones en bootstrap.css y no en el archivo de tema. Esa página tampoco contiene opciones para modificar nada relacionado con The Theme (tm). Hasta donde puedo ver, el archivo de tema solo agrega un montón de degradados y sombras por todas partes y hace poco más.
C.Lista
90

Para ver un ejemplo de los estilos CSS, consulte: http://getbootstrap.com/examples/theme/

Si desea ver cómo se ve el ejemplo sin el archivo bootstrap-theme.css, abra las herramientas de desarrollo de su navegador y elimine el enlace del <head> del ejemplo y luego puede compararlo.

Sé que esta es una vieja pregunta, pero la publiqué por si alguien está buscando un ejemplo de cómo se ve.

Actualizar

bootstrap.css = marco css principal (cuadrículas, estilos básicos, etc.)

bootstrap-theme.css= estilo extendido (botones 3D, gradientes, etc.). Este archivo es opcional y no afecta la funcionalidad de bootstrap en absoluto, solo mejora la apariencia.

Actualización 2

Con el lanzamiento de v3.2.0 Bootstrap ha agregado una opción para ver el tema css en las páginas del documento. Si va a una de las páginas de documentos ( CSS , componentes , JavaScript ), debería ver un enlace "Vista previa del tema" en la parte inferior del navegador lateral que puede usar para activar y desactivar el tema CSS.

joshhunt
fuente
Gracias por seguir con esto ya que su respuesta tiene más sentido. Me preguntaba, ¿sabe, simplemente reemplazaría el contenido de bootstrap.cssun tema de Bootswatch.com como dice el sitio y aún podría usarlo bootstrap-theme.cssincluso con un tema de Bottswatch?
Paladín refractado
3
bootstrap.css = marco css principal (cuadrículas, estilos básicos, etc.) bootstrap-theme.css = estilo extendido (botones 3D, etc.) Nunca lo he usado, pero solo lo miré y Bootswatch parece editar el archivo bootstrap.css para satisfacer sus propias necesidades. Entonces, para usarlo, todo lo que necesita hacer es descargar el archivo bootstrap.css de Bootswatch y usarlo. No use bootstrap-theme.css, ya que probablemente entrará en conflicto con el css de Bootswatch.
joshhunt
Gracias hombre, agradezco la respuesta! Eso es lo que noté también, simplemente no había regresado aquí. Sin modificación, parece que no puedes usarlo bootstrap-themecon Bootswatch. Se hizo un desastre de mi sitio de todos modos.
Refractado Paladin
72

Primero, bootstrap-theme.cssno es más que equivalente al estilo Bootstrap 2.x en Bootstrap 3. Si realmente quieres usarlo, solo bootstrap.cssagrégalo JUNTO con (la versión minimizada también funcionará).

andrófono
fuente
44
Recuerde que si utiliza archivos CSS de tema de bootstrap de terceros, es mejor que comente el bootstrap-theme.css oficial.
Cheung
163
¿Cómo es que esta es una respuesta aceptada? Ni siquiera es una respuesta. Lo siento. Todo lo que dice es qué es el equivalente del archivo en Bootstrap 2 y cualquier persona que no esté familiarizada con Bootstrap 2 ahora tendrá que buscar otra respuesta para averiguar qué hace este archivo.
Mario Awad
44
Pero es todo lo que quiero saber.
uladzimir
9
De acuerdo con @MarioAwad, esta no es una respuesta. También es confuso ya que pensé que es solo el soporte del viejo Bootstrap css, que es solo parcialmente cierto.
Yannis Dran
1
En BS 3.2, incluir el tema CSS realmente cambia la apariencia al agregar sombras 3D a los botones y otras cosas. Ver la respuesta de joshhunt para más detalles.
RajV
31

Bootstrap-theme.css es el archivo CSS adicional, que es opcional para su uso. Da efectos 3D en los botones y algunos otros elementos.

Jowen
fuente
14

Como lo han dicho otros, el nombre de archivo bootstrap-theme.css es muy confuso. Hubiera elegido algo como bootstrap-3d.css o bootstrap-fancy.css que sería más descriptivo de lo que realmente hace. Lo que el mundo ve como un "tema de Bootstrap" es algo que puede obtener de BootSwatch, que es una bestia totalmente diferente.

Dicho esto, los efectos son bastante agradables: gradientes y sombras y demás. Desafortunadamente, este archivo causará estragos en los temas de BootSwatch, por lo que decidí investigar qué se necesitaría para que fuera agradable para ellos.

MENOS

Bootstrap-theme.css se genera a partir del archivo theme.less en la fuente Bootstrap. Los elementos afectados son (a partir de Bootstrap v3.2.0):

  • Lista de artículos
  • Botones
  • Imágenes
  • Listas deplegables
  • Barras de navegación
  • Alertas
  • Barras de progreso
  • Lista de grupos
  • Paneles
  • Pozos

El archivo theme.less depende de:

@import "variables.less";
@import "mixins.less";

El código usa colores definidos en variables.less en varios lugares, por ejemplo:

// Give the progress background some depth
.progress {
    #gradient > .vertical(@start-color: darken(@progress-bg, 4%); @end-color: @progress-bg)
}

Es por eso que bootstrap-theme.css arruina totalmente los temas de BootSwatch. La buena noticia es que los Temas BootSwatch también se crean a partir de archivos variables.less, por lo que simplemente puede crear un bootstrap-theme.css para su Tema BootSwatch.

Construyendo bootstrap-theme.css

La forma correcta de hacerlo es actualizar el proceso de compilación del tema, pero aquí está la forma rápida y sucia. Reemplace el archivo variables.less en la fuente Bootstrap con el del tema Bootswatch y compílelo y listo, tendrá un archivo bootstrap-theme.css para su tema Bootswatch.

Construyendo Bootstrap en sí

Construir Bootstrap puede sonar desalentador, pero en realidad es muy simple:

  1. Descargue el código fuente de Bootstrap
  2. Descargue e instale NodeJS
  3. Abra un símbolo del sistema y navegue a la carpeta de origen de bootstrap. Escriba "npm install". Esto agregará la carpeta "node_modules" al proyecto y descargará todas las cosas de Node que necesite.
  4. Instale grunt globalmente (la opción -g) escribiendo "npm install -g grunt-cli"
  5. Cambie el nombre de la carpeta "dist" a "dist-orig" y luego vuelva a generarla escribiendo "grunt dist". Ahora verifique que haya una nueva carpeta "dist" que contenga todo lo que necesita para usar su compilación Bootstrap personalizada.

Hecho. Ves, eso fue fácil, ¿no?

Este chico
fuente
2

Sé que esta publicación es un poco vieja pero ...

  Como señaló 'ingenio'.

Acerca de su propio tema personalizado Puede optar por modificar bootstrap-theme.css al crear su propio tema. Hacerlo puede hacer que sea más fácil hacer cambios de estilo sin romper accidentalmente ninguna de las bondades de Bootstrap incorporadas.

  Lo veo como Bootstrap ha visto a lo largo de los años que todos quieren algo un poco diferente a los estilos principales. Si bien podría modificar bootstrap.css, podría romper las cosas y hacer que la actualización a una versión más nueva sea realmente dolorosa y requiera mucho tiempo. La descarga desde un sitio de "tema" significa que debe esperar si ese creador actualiza ese tema, grande si a veces, ¿verdad?

  Algunos compilan su propio archivo 'custom.css' y está bien, pero si usa 'bootstrap-theme.css' ya se han creado muchas cosas y esto le permite rodar su propio tema más rápido 'sin' interrumpir el núcleo de bootstrap .css. Por mi parte, no me gustan los botones 3D y los degradados la mayor parte del tiempo, así que cámbielos usando bootstrap-theme.css. Añadir márgenes o relleno, modificar el área para los botones, y así sucesivamente ...

usuario1946683
fuente