tutorial link framework bootstrap html css twitter-bootstrap-3

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



framework de bootstrap (7)

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

bootstrap.css

bootstrap.css está completamente diseñado y listo para usar, si así lo desea. Es quizás un poco simple pero está listo y está allí.

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

bootstrap-theme.css

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

"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 a esta página de ejemplo http://getbootstrap.com/examples/theme/ . La idea es que bootstrap-theme.css es EL tema de arranque Y es opcional.

Temas en BootSwatch.com

Acerca de los temas en BootSwatch.com: estos temas no están implementados como bootstrap-theme.css . Los temas de BootSwatch son versiones modificadas del bootstrap.css original. Entonces, definitivamente NO deberías usar un tema de BootSwatch Y el archivo bootstrap-theme.css al mismo tiempo.

Tema personalizado

Acerca de su propio tema personalizado: puede optar por modificar bootstrap-theme.css al crear su propio tema. Hacerlo puede facilitar los cambios de estilo sin romper accidentalmente ninguna de las bondades incorporadas de Bootstrap.

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

bootstrap-theme.css en mi proyecto de bootstrap existente, pero no hay diferencia en el resultado.

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

Como dicen 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 Bootstrap" es algo que puedes obtener de BootSwatch, que es una bestia totalmente diferente.

Dicho esto, los efectos son bastante agradables: degradados y sombras, etc. Lamentablemente, este archivo causará estragos en BootSwatch Themes, por lo que decidí investigar qué se necesitaría para hacerlo jugar bien con ellos.

MENOS

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

  • Lista de artículos
  • Botones
  • Imágenes
  • Listas deplegables
  • Navbars
  • Alertas
  • Barras de progreso
  • Lista de grupos
  • Paneles
  • Wells

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) }

Esta es la razón por la que bootstrap-theme.css arruina totalmente BootSwatch Themes. La buena noticia es que BootSwatch Themes también se crean a partir de archivos variables.less, por lo que puede simplemente crear un bootstrap-theme.css para su BootSwatch Theme.

Edificio bootstrap-theme.css

La forma correcta de hacerlo es actualizar el proceso de compilación del tema, pero aquí está la manera rápida y sucia. Reemplace el archivo variables.less en el origen de Bootstrap con el de su tema de Bootswatch y compárelo y listo si tiene un archivo bootstrap-theme.css para su tema de 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 del bootstrap. Escriba "npm install". Esto agregará la carpeta "node_modules" al proyecto y descargará todas las cosas de Node que necesite.
  4. Instale ronco globalmente (la opción -g) escribiendo "npm install -g grunt-cli"
  5. Cambie el nombre de la carpeta "dist" a "dist-orig" y luego recupérelo escribiendo "grunt dist". Ahora compruebe que hay una nueva carpeta "dist" que contiene todo lo que necesita para usar su compilación Bootstrap personalizada.

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

Para ver un ejemplo de los estilos CSS, echa un vistazo a: 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 acaso alguien está buscando un ejemplo de cómo me parece.

Actualizar

bootstrap.css = main framework css (grids, estilos básicos, etc.)

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

Actualización 2

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

Primero, bootstrap-theme.css no es otra cosa que el equivalente al estilo Bootstrap 2.x en Bootstrap 3. Si realmente quieres usarlo, simplemente agrégalo junto con bootstrap.css (la versión minificada también funcionará).

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

Como ''witttness'' señaló.

Acerca de su propio tema personalizado Puede optar por modificar bootstrap-theme.css al crear su propio tema. Hacerlo puede facilitar los cambios de estilo sin romper accidentalmente ninguna de las bondades incorporadas de Bootstrap.

Lo veo como Bootstrap ha visto a lo largo de los años que todo el mundo quiere algo un poco diferente a los estilos básicos. Si bien podría modificar bootstrap.css, podría romper las cosas y podría hacer que actualizar a una versión más nueva sea una verdadera molestia y consuma mucho tiempo. Descargar desde un sitio ''tema'' significa que tienes que esperar si ese creador actualiza ese tema, grande si a veces, ¿no?

Algunos construyen su propio archivo ''custom.css'' y está bien, pero si usas ''bootstrap-theme.css'' ya están construidas muchas cosas y esto te permite rodar tu 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. Agregue márgenes o relleno, cambie el radio a sus botones, y así sucesivamente ...

Una publicación bastante antigua, pero pensé que agregaría mis dos centavos sobre temas. Es comprensible que muchas personas (yo incluido) adoren el marco de arranque con su diseño de cuadrícula sensible, pero también queremos diferenciarnos de otros sitios web "listos para usar ". La disponibilidad de plantillas y temas únicos de arranque se ha disparado en los últimos años. Recientemente, he creado mi propio sitio para proporcionar algunos de estos temas en: http://thetoolsmith.com (enchufe Shameless)

La conclusión es que todavía necesitará el marco de arranque básico, pero puede modificar o agregar estilos a bootstrap-theme.css para que funcione junto con los archivos principales, pero que brinde un aspecto y una sensación diferente de los que puede crear.