Migrando de bootstrap 3 a bootstrap 5

Migrando de bootstrap 3 a bootstrap 5




Fecha de Actualización: 01 de Septiembre 2022

Bootstrap 5 fue lanzado oficialmente el 05 de Mayo de 2021, y fue integrado a Yii aproximadamente en Julio del mismo año.

Recomendaciones previas al migrar

Al tener una gran diferencia entre la version de bootrstrap 3 a la 5 es posible tengas que hacer una gran cantidad de cambios dentro de tu proyecto, sobre todo debes de evaluar que todos la compatibilidad de tus extensiones instaladas.

Dicho esto ya puedes continuar siguiendo los siguientes pasos. 

Proceso de instalación

Instalación de bootstrap 5


Deberas desintalar o comentar en el composer la version antigua de bootsrap. En mi caso tengo la version "~2.0.0" , podsrias tener algo un poco diferente pero en todo caso debe ser eliminada del composer.

 
 "yiisoft/yii2-bootstrap": "~2.0.0",


Y debes agregar en el composer la siguiente linea:


 
"yiisoft/yii2-bootstrap5": "~1.0.0"


Y actualizar el composer. 

Nota importante: No pueden estar las dos versiones instaladas bootstrap 3 y 5, al menos no es lo normal que estan ambas versiones al mismo tiempo. 


Modo de instalación desde linux por comando composer. De igual manera se debe desistalar primero la version anterior de bootstrap.


 
 php composer.phar require --prefer-dist yiisoft/yii2-bootstrap5



Configuracion de Asset

En la plantilla básica ubica el archivo "assets/AppAsset.php" y se debe modificar la linea  'yii\bootstrap\BootstrapAsset' por 'yii\bootstrap5\BootstrapAsset'


Ejemplo de codigo original

 
    public $depends = [
        'yii\web\YiiAsset',
        'yii\bootstrap5\BootstrapAsset',
    ];



Codigo modificado

 
    public $depends = [
        'yii\web\YiiAsset',
        'yii\bootstrap5\BootstrapAsset',
    ];



Extensiones que podria necesitar cambiar

Estas son algunas de las extenciones que podria necesitar cambiar, dependiendo del numero de extenciones de su proyecto.

yii\bootstrap\Nav  --> yii\bootstrap5\Nav
yii\bootstrap\NavBar -->yii\bootstrap5\NavBar
app\widgets\Alert --> yii\bootstrap5\Alert





Referencias: 

Git Bootstrap 5
https://github.com/yiisoft/yii2-bootstrap5

Comentarios

Publicar un comentario

Aprende Yii2


Lo más Visto

Tutorial de implementación de calendario de rango de fechas con Karkit en gridView

Imagen
Tutorial de implementación de calendario de rango de fechas con Karkit en gridView. Artículo actualizado: 12 de Marzo de 2024 Este tutorial muestra un ejemplo de cómo implementar el calendario de karkit de rango de fechas dentro de un filtro de un gridView. Nota importante: Esta es una adaptación no oficial del uso del calendario dentro de un gridview, ya que en la documentación oficial Que para los que van comenzando con Yii2 podría resultar un poco tardado y no encontré un tutorial que lo explicara de forma clara. Asi pues les dejo este tutorial esperando que les sea de utilidad. PASO # 1 .- Agregar la columna para el calendario del gridview. Se debe de agregar dentro de la vista la columna donde irá el filtro, recordar que se tiene que agregar previamente el componente de karkit dentro de la vista. Deberá tener instalada el siguiente plugin use kartik\daterange\DateRangePicker; [                 'label' => Yii::t('ap
Leer más

Guía rápida para uso de widget kartik para select para formulario

Imagen
En esta guía te enseñaré cómo utilizar de manera simple y rápida el widget para select de kartik Nota: Este video tutorial de ejemplo contiene un ejemplo parecido al de éste post.  Introducción. Algunas veces necesitamos algunas opciones más avanzadas para algunos formularios, para esos casos puedes utilizar este pluging que al día en el que estoy escribiendo éste artículo es popular. A continuación te muestro como utilizar éste componente en los siguientes pasos. Paso #1. Instalación de widget. Si aun no lo tienes instalado deberás instalarlo para poder utilizarlo, el nombre del widget es:      use kartik\select2\Select2; Por lo tanto deberás incluir ésta librería dentro de tu vista. Paso #2. Obtener arreglo con opciones que se cargarán en el menú. Este proceso es muy simular al que se hace regularmente, sólo asegúrate de estar recibiendo en la vista el formato adecuado. Existen varias opciones para convertir una consulta a un arreglo, algu
Leer más

Cómo incluir una vista dentro de un modal

Imagen
 Cómo incluir una vista dentro de un modal En este artículo aprenderás a incluir una vista dentro de un modal de manera simple. Un modal es una ventana emergente que se genera siempre cuando se ejecuta una vista, dentro del modal puedes incluis otra vista, debes considerar que esta vista siempre se ejecutara y que esto puede volver más lenta tu vista ya que utilizando el modal sólo estas ocultando una parte del código html, tambien considera que esta vista no se borra al cerrar el modal.  Creando el modal de manera simple Para comenzar debe de incluir lo siguiente en la vista donde lo desee utilizar para incluir la librería correspondiente.      use yii\bootstrap\Modal; Para agregar el modal puede agregar el siguiente código dentro de la misma vista.       Modal::begin([           'header' => '<h2>Hello world</h2>',           'toggleButton' => ['label' => 'click me'],      ]);           echo 'Say hello...';
Leer más

Google Plus desaparecerá el 4 de Abril de 2019

Google Plus desaparecerá el 4 de Abril de 2019 Sentimos mucho esta noticia, ya que la red social Google Plus cerrará y borrará todo su contenido, por lo que a todos nuestros seguidores los invitamos a que nos sigan por Facebook:      https://www.facebook.com/cursosdeprogramacionmexico/  via GIPHY Pasamos buenos momentos pero todo tiene un ciclo.  
Leer más

Crear fomulario HTML con checkbox sin Active Record

Imagen
Como crear formulario HTML con checkbox list sin Active Record Hay muy pocos manuales de cómo hacer esto en español, así que me di a la tarea de decirte cómo crear un formulario HTML y poner dentro un checkboxlist. Antes que nada deberás saber que existen 2 tipos de formularios en Yii2, con active record y los HTML, la diferencia es que con active record necesitas un modelo y solo se puede usar así, y el formulario HTML no necesita de un modelo. Para utilizar esta libreria necesitas incluir la siguiente linea en tu vista. use yii\helpers\Html;  use yii\helpers\Html; A continuación un ejemplo de cómo hacer un checkbox list utilizando un formulario HTML. $item["preguntas"] = [ ['id' => 1 ,  'nombre' =>'Opcion 1'  ], ['id' => 2 ,  'nombre' =>'Opcion 2'  ] ] echo Html::beginForm([     'formulario/generate-pdf/',      'evento_usuario_id' => $eventoUsuarioId],     
Leer más

hostinger

ventana bienvenida