Share
Entonces, ¿qué implica la migración de Bootstrap 2 a Bootstrap 3? En verdad, no mucho.
A pesar de los muchos cambios, todavía no hay una gran cantidad para que usted realmente cambie, y los cambios que necesita hacer son generalmente solo nombres de clase cuando corresponde.
Una de las cosas que podría querer hacer, especialmente si ha estado utilizando BS solo para el desarrollo de aplicaciones web en general y no para dispositivos móviles o cualquier otro tipo de diseño sensible, es deshabilitar las funciones de respuesta en BS3.
Esto es bastante fácil de hacer, pero no recomendado en absoluto.
Puedes lograr esto de la siguiente manera:
Accentsconagua
metaetiqueta que contiene el ancho del dispositivo y otra información de tamaño inicial al encabezado de su documento. anchuraen sus elementos que están marcados con una clase de envase, y asegúrate de usar estilo = 'ancho: xxx! importante'cuando lo hagas. barra de navegaciónconstructos dentro de su documento. col-xs- *Clases y ninguno de los otros cuatro niveles.. Si está apuntando a IE8 e IE9, todavía necesitará asegurarse de usar respond.js, incluso si desactiva la capacidad de respuesta como se describe.
Como mencioné anteriormente, ha habido muchos cambios de nombre de clase entre las dos versiones, y muchas clases han sido desaprobadas y retiradas.
Una cosa que (y que ya tiene si nos fijamos en Stack Overflow) será una sorpresa para muchos es el retiro de las clases de ancho de fluido..
En la versión 2, si quería un contenedor elástico de ancho completo, tenía que hacer algo como lo siguiente:
Un titular
Algún texto de párrafo
En la versión 3 del envasey fluido de filalas clases ya no existen.
Entonces, ¿cómo se obtiene un recipiente de fluido? Simple: tu no.
En lugar de envolver sus contenidos en una envasey luego un fila, simplemente no los envuelves en nada.
Aún puede usar el sistema de cuadrícula para proporcionar contenedores adjuntos para su contenido, de modo que las cosas se alineen bien con la cuadrícula de Bootstrap, pero ya no necesite colocar un contenedor alrededor de esas colecciones de De hecho, si usas Entonces el siguiente cambio de clase más grande es el propio sistema de red. En la versión 2, típicamente creaste grillas de la siguiente manera: Este código le daría dos contenedores que llenaban ordenadamente los 12 cuadrados de la cuadrícula horizontalmente que tenían todos los diseños (normalmente una barra lateral). En la versión 3, la cuadrícula de "nivel medio" es ahora equivalente a la v2 Sin embargo, mientras que la versión 2 tenía solo un nivel de tamaño de cuadrícula, la versión 3 ahora tiene cuatro niveles. Cada nivel se adapta al dispositivo de destino principal esperado en el que anticipa que se ejecutará su producto final. Estas unidades de cuadrícula ahora se nombran como sigue: Las consultas de medios se utilizan internamente para BS3 para decidir cuál de las clases de cuadrícula mencionadas anteriormente se usarán, y los diferentes tamaños se definen de la siguiente manera: Puede codificar múltiples versiones de su cuadrícula para que BS3 decida qué tipo usar al apuntar a múltiples pantallas. Por ejemplo si hiciste lo siguiente: BS3 ocultará y mostrará los contenedores según sea necesario, dependiendo del ancho de la pantalla del dispositivo y del funcionamiento de las consultas de medios. Al igual que con las versiones anteriores del sistema de cuadrícula, hay 12 columnas horizontalmente en todos los diferentes tamaños, por lo que, independientemente del tamaño de cuadrícula que se muestre, siempre obtendrá 12 cuadrículas en cada dispositivo. Sin embargo, el ancho de la columna sí cambia, por lo que es posible que deba planificar el contenido de esas cuadrículas para aprovechar los diferentes tamaños. Los tamaños para cada uno de ellos son los siguientes: El margen del canal en todos los casos se mantendrá en 15 píxeles a cada lado del contenedor de la cuadrícula, lo que dará un margen total de 30 píxeles. Este tamaño será coherente independientemente del nivel de tamaño de cuadrícula que esté utilizando. La anidación y las compensaciones funcionan como lo hicieron anteriormente, pero al igual que con las propias cuadrículas, a través de un ligero cambio de nombre de las clases reales utilizadas. Para aplicar un offset, simplemente use La anidación se realiza simplemente anidando contenedores bajo el control de la Los siguientes ejemplos muestran la forma correcta de lograr ambas técnicas: Este ejemplo le dará una cuadrícula que se parece a la siguiente: Este ejemplo le dará un diseño de la siguiente manera: BS3 también trae algo nuevo a la tabla cuando se trata de compensar y anidar, y eso es algo que se llama ordenación de columnas.. Si desea que sus columnas se presenten en un orden diferente a como las define en su documento HTML, entonces puede usar el nuevo Si los procesa en su documento, como se esperaba, obtendrá lo siguiente: Sin embargo, si modifica el código anterior para agregar modificadores de inserción y extracción de la siguiente manera: Cuando renderice su documento, debería ver su cambio de diseño de la siguiente manera: Finalmente, si estás usando el Menos En las versiones de origen CSS de Bootstrap, tiene control completo sobre los tamaños de cuadrícula al cambiar las siguientes variables: Así que ahora que tenemos el nuevo sistema de red bajo control, ¿hay algo más que deba saber?? El más astuto de ustedes puede estar pensando: "Pero eso es una locura, con todos esos conjuntos múltiples de Tomemos el código del ejemplo de código anterior 4 y lo reescribimos para hacer esto de la manera recomendada: Bien, entonces podrías terminar con la lista de clases del infierno en tus elementos, pero un conjunto de marcado se adaptará a todos los tamaños de pantalla y se redimensionará a sí mismo cuando sea necesario. Esto también funciona con las distintas clases de desplazamiento, orden y anidación.. Además de los que ya hemos discutido, los siguientes nombres de clase también deben cambiarse si está migrando de un diseño V2 a un diseño V3 (Nota: la siguiente tabla se tomó directamente de los documentos de Bootstrap 3 y era correcta en el momento de escribir. Sin embargo, a medida que Bootstrap madura, esto puede no ser así). Como se mencionó anteriormente, la mayoría de los cambios se han realizado para adecuar el esquema de denominación utilizado por las distintas clases. Pero muchos de ellos también han sido renombrados porque su propósito general ha cambiado. Vamos a entrar con más detalle en los próximos tutoriales de esta serie, pero por ahora, si está haciendo una conversión, la Tabla 2 le indicará todo lo que necesita para volver a configurar un diseño v2 a v3. Es posible que desee considerar el uso de un trabajo personalizado en algo como una tarea Grunt.js, de modo que cuando ejecute su sistema de compilación, estos cambios se realicen automáticamente. Esto permitirá que sus desarrolladores sigan siendo productivos usando v2 mientras se mueven gradualmente a v3. Entonces, ¿qué se ha agregado exactamente a Bootstrap que es nuevo y qué se ha eliminado exactamente?? Comenzaremos con lo que se eliminó, y cubriremos lo que se agregó más detalladamente en el tutorial sobre "Características CSS modificadas". Es más importante que sepa lo que se eliminó en este tutorial, ya que este es el tutorial que usted describe. Es probable que se refiera a cuando migre sus diseños Primero comenzaremos con lo que se ha eliminado en lo que respecta a los formularios, y desafortunadamente, eso es bastante. Ya no tenemos un tipo específico para un formulario de búsqueda También se ha ido la clase que se usa normalmente para mostrar errores de validación., Continuando con las formas, las principales. Desde un punto de vista de control individual, el Para las pestañas, la Continuando con las pestañas, la clase para trabajar con contenido en una configuración de pestañas basada en píldoras también se ha eliminado, lo que significa que Finalmente, los diversos En la mayoría de los casos, no hay equivalentes directos en v3 para estas clases, aunque hay algunas similitudes en otras clases que pueden resultar útiles. Por ejemplo, En la guía de migración en el sitio web de Bootstrap 3 hay una tabla de referencia rápida para todo esto.. Este tutorial representa un capítulo de Bootstrap 3 sucintamente, un libro electrónico gratuito del equipo en Syncfusion.envasey fila(las versiones no fluidas aún existen) entonces terminará con todo su contenido en la columna central de 1024 píxeles, y podrá usar todo el ancho de la página si no lo hace.. Migración del sistema de Grid
lapsoclases, por lo que para volver a escribir el código anterior para V3, simplemente haga lo siguiente:
col-xs- * col-sm- * col-md- * col-lg- *
col-xs- *= Auto dimensionado, sin dimensiones fijas col-sm- *= 60 píxeles col-md- *= 78 píxeles col-lg- *= 95 píxeles col-md-offset- *, recordando reemplazar el Marylandcon xs, sm, o lgsegún sea necesario, dependiendo del tamaño de su cuadrícula. col-xx- *clases dentro de la otra, donde cambiarán de tamaño y se comportarán como lo hicieron en versiones anteriores de BS.
col-xx-pull- *y col-xx-push- *clases para empujar o tirar de sus diseños de cuadrícula en el orden que desee. Por ejemplo: 
@ rejilla-columnas: controla el número de cuadrículas horizontalmente (por defecto 12) @ rejilla-ancho de canal: el margen total alrededor de cada cuadrícula (por defecto 30 píxeles) @ grid-float-breakpoint: el tamaño mínimo por debajo del cual tenemos dispositivos "extra pequeños" (768 píxeles predeterminados) col-xx-xxClases, todas para pantallas de diferentes tamaños, también podría crear cuatro sitios diferentes, ¡con cuatro resoluciones diferentes en mente! ”Para ser honesto, no te culparía, excepto por una cosa: cada uno de estos nuevos niveles de tamaño de diseño son diseñado para trabajar en el mismo marcado, al mismo tiempo, y ocupar el mismo espacio. Otras migraciones
Nombre de clase de la versión 2 de Bootstrap Nombre de clase de la versión 3 de Bootstrap .control-group.warning .control-group.error .control-group.success .form-group.has- * .checkbox.inline .radio.inline .casilla de verificación en línea .radio en línea .input-prepend .añadir entrada .grupo de entrada .Añadir.entrada-grupo-addon .img-polaroid.img-miniatura ul.unstyled.lista-sin estilo ul.inline.lista en línea .apagado.texto silenciado .etiqueta.etiqueta .label-default .etiqueta importante.etiqueta-peligro .error de texto.peligro de texto .mesa .error.mesa. peligro .bar.barra de progreso .bar-*.barra de progreso-* .acordeón.grupo de paneles .grupo de acordeon.panel. panel-por defecto .acordeón.encabezado del panel .acordeon-cuerpo.colapso del panel .acordeon interno.panel-cuerpobúsqueda de formas, y la barra sombreada que normalmente se encuentra al pie de una forma forma-accionesTambién ha sido desaprobado en v3.. control-grupo-info, y su contraparte de ayuda, ayuda en línea. Ninguna de estas cuatro clases tiene un reemplazo recomendado en la base del código v3, lo que significa que para construir equivalentes de ellas, deberá usar otros elementos y clases cuando corresponda.. controlesLa clase utilizada para envolver conjuntos de control completos se ha ido, junto con fila de controles. En su lugar, se recomienda utilizar filao lo nuevo grupo de formas clase. Las formas también han perdido la mayoría de las clases de tamaño; las clases de tamaño fijo como entrada mini, entrada pequeña, medio de entrada, entrada-grande, entrada-xlarge, y entrada-xxlargeSe han ido todos, junto con la clase de control de nivel de bloque. nivel de bloque de entrada. En su lugar, ahora se recomienda controlar los tamaños de los elementos del formulario utilizando control de formaen combinación con los nuevos tamaños y diseños disponibles en el sistema de cuadrícula. inversoSe han eliminado las clases de los botones y otros controles similares, y también hemos perdido el menú desplegable-submenúclase a favor de usar solo botones desplegables divididos para crear la misma funcionalidad. pestañas-izquierda, pestañas a la derecha, y pestañas abajolas clases ya no existen, lo que significa que ahora solo tenemos la capacidad de colocar pestañas en la parte superior del contenido, alineadas a la izquierda. panel de pastillasy contenido de pastillasAhora debería usar el general contenido de la pestaña y panel de pestañasclases. barra de navegaciónLas clases no están exentas de bajas: navbar-inner, divisor-barra de navegación vertical, lista de navegación, y encabezado de navegaciónYa no forman parte del marco.. lista de navegacióny encabezado de navegaciónpuede ser recreado usando Listagrupos.
