Solo usuarios registrados pueden comentar y agradecer, Logueate o Registrate

Autor Topic: Actualizar Boostrap de tu theme  (Visto 1091 veces)

0 Miembros and 1 Guest are viewing this topic.

Offline Linck Posteado: April 19, 2020, 10:41:12 PM | Modificado: April 19, 2020, 10:43:02 PM by Linck

  • 0 puntos por ventas
  • *
  • Rank: Usuario activo
  • Posts: 63
  • Gracias recibida: 14
  • cl
Hola a todos le traigo una pequeña guía para poder actualizar el boostrap de tu sitio de mu.
¿Porque debería actualizar?
R: Para tener las ultimas actualizaciones y con ellas los fix y los nuevos componentes que ellas te entregaran :D

Lo primero que tenemos que ver si es en que versión esta tu sitio. Para esto tenemos que ir   nuestro sitio y ver el código fuente y fijarnos en el la parte del head de este y buscar Bootstrap y saldrá algo así  Bootstrap/x.x.x/
Si en el caso que no le salga su versión mediante lo explicado anteriormente no se preocupen
Busquen una imagen de su sitio y quitan /image/
Eje:
asi debería estar
https://linck.cl/template/lincktheme/images/logos/logonav.png
Debe quedar asi
https://linck.cl/template/lincktheme/

Ahora pegamos la siguiente línea
/plugins/bootstrap/css/bootstrap.min.css
 
Y quedaría así
https://linck.cl/template/lincktheme/plugins/bootstrap/css/bootstrap.min.css
Si esto no le aparece esta forma no se preocupen yo les ayudare.
Lo que debería buscar en este archivo es solo la primera línea y nos diera la versión que esta tiene:
Eje
* Bootstrap v4.0.0-beta (https://getbootstrap.com)


Bueno una vez obtenida esa información nos dirigimos a la página oficial de Bootstrap que es
https://getbootstrap.com/

Ahora vamos a cambiar la versión de esta
En los theme de mu o de algún otro sitio web se acostumbra a usar librerías dentro los archivos del sitio, eso está bien, pero para mí es mejor usar las librerías externas para no estar realizando carga innecesaria en el sitio.
Les enseñare esa forma y luego creare el post con los archivos dentro del theme (es casi parecido solo que tendría que llamar a los archivos desde tu sitio)

Ya vamos al grano.

Vamos al index de tu Theme que quieres actualizar ojo aquí Realiza un respaldo del archivo en caso de que te equivoques y te recomiendo usar Atom para editar los archivo así tienes el original
y el que editaras en otra pestaña.

Ahora en el index buscaremos las líneas donde estará el link que llama al boostrap y el script que hace ciertas funciones que ahora no entrare en profundidad.
En los theme lo tendrán más o menos asi :
Code: [Select]
<link rel="stylesheet" href="template/<?=$core['config']['template']; ?>/plugins/bootstrap/css/bootstrap.min.css">

   

Y el script en mi caso no lo traía incluido

Ok ahora manos a la obra
 Vamos a la página de Bootstrap  https://getbootstrap.com/ vamos a download bajamos y nos encontraremos con BootstrapCDN debajo de este veremos un  códigos  como por ejemplo

Code: [Select]
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">


<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

(ahora explicare como colocarlos calma, te recomiendo que lo pegues en un text o en otra pestaña del editor de texto)
 Ahora tomaremos el primer código que es el link del estilo del boostrap
Eje
Code: [Select]
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"> 

Este código deberá remplazar a

   
Code: [Select]
<link rel="stylesheet" href="template/<?=$core['config']['template']; ?>/plugins/bootstrap/css/bootstrap.min.css">

En el index del theme

Ahora el script si tu theme no tiene solo pegas dentro del head arriba o debajo de los script que tengas
Code: [Select]
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

Y eso sería todo tu web estaría con boostrap actualizado y con eso ya podrás  experimentar con las herramientas que te proporciona esta gran Liberia.
Para ver todo sus componente y herramientas visita:
https://getbootstrap.com/docs/4.4/getting-started/introduction/

espero que les sea útil

Gracias:


Offline Danihv #1 Posteado: April 19, 2020, 11:03:50 PM

  • Php Coder
  • 0 puntos por ventas
  • *
  • Rank: Dedicado
  • Posts: 32
  • Gracias recibida: 46
  • ar
Tener todo actualizado es siempre lo mejor, sin embargo hacer una guía para que todos hagan esto no me parece lo mejor.

Me explico, el bootstrap que usan la mayoria de cms y temas son MUY desactualizados, WebEngine por ejemplo usa Bootstrap 3. Si alguien necesita una guía para actualizar un simple import de css no tendría la capacidad de actualizar todos los módulos y estilos de tema que esté utilizando para adaptarlo a la última versión de bootstrap, ya que se romperían muchas cosas, como el cambio del componente panel a card de bootstrap 3 a bootstrap 4, el cambio de los pull- a los float-, los atributos rounded, entre otros.


Offline Linck #2 Posteado: April 19, 2020, 11:07:36 PM

  • 0 puntos por ventas
  • *
  • Rank: Usuario activo
  • Posts: 63
  • Gracias recibida: 14
  • cl
Tener todo actualizado es siempre lo mejor, sin embargo hacer una guía para que todos hagan esto no me parece lo mejor.

Me explico, el bootstrap que usan la mayoria de cms y temas son MUY desactualizados, WebEngine por ejemplo usa Bootstrap 3. Si alguien necesita una guía para actualizar un simple import de css no tendría la capacidad de actualizar todos los módulos y estilos de tema que esté utilizando para adaptarlo a la última versión de bootstrap, ya que se romperían muchas cosas, como el cambio del componente panel a card de bootstrap 3 a bootstrap 4, el cambio de los pull- a los float-, los atributos rounded, entre otros.
la idea es dar mas herramientas y asi puede adaptar mejor sus webs

Gracias:


Solo usuarios registrados pueden comentar y agradecer, Logueate o Registrate


 

Related Topics

  Subject / Started by Replies Last post
0 Replies
950 Views
Last post November 15, 2016, 08:39:48 PM
by sukerwold
3 Replies
1348 Views
Last post January 27, 2018, 10:02:12 PM
by sukerwold
3 Replies
1307 Views
Last post April 10, 2018, 10:56:01 PM
by conchetumare
7 Replies
1493 Views
Last post October 22, 2021, 11:22:37 AM
by lautat1
1 Replies
1487 Views
Last post October 20, 2022, 05:45:51 AM
by Avis Torphy