Share
Bienvenido a esta serie que cubre el marco de la interfaz de usuario y CSS de Bootstrap (BS) de Twitter.
En mi libro, Twitter Bootstrap En pocas palabras, senté las bases iniciales y empecé a comenzar con Bootstrap 2..
Sin embargo, desde que se publicó ese libro, Bootstrap 3 se ha convertido en la versión principal..
En esta serie, continuaremos construyendo sobre esa base y avanzando hacia el uso de BS v3. Veremos dónde las cosas son diferentes y, a medida que exploramos las nuevas características, veremos que una gran parte de lo que estaba presente en v2 todavía es aplicable a v3.
Si aún no has leído el libro en Bootstrap 2, te animo a que lo hagas, ya que me referiré a él en varios puntos a lo largo de esta serie..
¿Por qué? Creo que para comprender todo el panorama de Bootstrap, debes examinarlo desde el principio. Debe ser capaz de comprender lo que se propuso lograr y cómo.
Podrá seguir solo esta serie y aprender los conceptos básicos de BS v3, pero obtendrá una comprensión mucho más profunda si lee el libro v2 primero..
Entonces, ¿qué ha cambiado de v2 a v3??
Bastante.
El cambio principal entre las dos versiones es que v3 ahora es "Mobile First". Bootstrap v2 era un kit de CSS de diseño receptivo, pero sus funciones móviles y de respuesta siempre eran el segundo lugar de sus funciones de interfaz de usuario ricas. De hecho, para que las cosas de respuesta funcionen correctamente, tenía que incluir un segundo archivo CSS cuyo único propósito era habilitar las funciones de respuesta, móviles y nada más..
En v3 toda esta situación ha sido completamente revertida. El marco completo ahora es compatible con dispositivos móviles y responde de manera inmediata, y ahora requiere un trabajo adicional para adaptar sus diseños a formatos de pantalla más grandes. No me malinterpretes, de ninguna manera es una gran cantidad de trabajo. La mayor parte de lo que necesita cambiar es simplemente intercambiar clases y estructurar su marca HTML correctamente.
El otro gran cambio está en el nombramiento de clases y llamadas a la API. Muchos de los nombres de clase que se introdujeron en v2 ahora están en desuso o han sido renombrados a algo más adecuado para su propósito previsto.
También ha habido un gran esfuerzo para cambiar el nombre de las clases para que sean más consistentes. Por ejemplo, en v2, para los artículos que apuntaban al color de error RED, tuvimos las siguientes clases:
Accentsconagua
btn-peligro error de texto tr.error .importante .importante .error progreso-peligro Ahora, en v3, estos se han consolidado para que la denominación sea similar en todos los componentes de la siguiente manera:
btn-peligro peligro de texto .peligro .peligro progreso-barra-peligro Como puede ver, la consistencia es ahora un jugador importante en las clases de v3, y se han realizado muchos otros cambios similares en todo el marco.
También ha habido algunos cambios menores. Por ejemplo, el modelo de caja usado por Bootstrap ahora se ha mejorado considerablemente, con todos los elementos ahora usando casillero como el modelo de tamaño de caja de CSS por defecto.
El sistema de cuadrícula también se ha ampliado y mejorado, y en lugar de ser un sistema de cuadrícula monolítico con clases opcionales, ahora consta de cuatro niveles de tamaños de cuadrícula dirigidos específicamente a teléfonos, tabletas, computadoras de escritorio y computadoras de escritorio grandes.
Todas las cosas de JavaScript ahora también han sido separadas por nombres para reducir el conflicto con otro código JavaScript; los eventos disponibles ahora tienen un mejor nombre para reflejar su propósito y están mucho más claramente documentados.
Modales y Barras de navegación se han mejorado enormemente en términos de capacidad de respuesta, y junto con los cambios de denominación de clase, las clases de tamaño para todos los componentes (Inc Nav Modals) ahora se han alineado.
En cuanto a los componentes, algunos de los componentes más antiguos y menos utilizados han sido desaprobados y eliminados, el más notable de los cuales es el Acordeón componente. Pero no se desespere, el acordeón ha sido reemplazado por un nuevo panel plegable Componente que es mucho más flexible que su antecesor..
También tenemos un nuevo, estrecho. jumbotron, nuevo panel tipos, lista de grupos, y mucho más.
Finalmente, el único que cambia todo el mundo Se dará cuenta es el aspecto y la sensación: TWB V3 es plano. Tiene una nueva interfaz de un solo color, pero con esquinas redondeadas planas..
Las clases flotantes ya no tienen buenos efectos graduados en ellas, y las barras de progreso y los botones ya no se ven semi-3D como lo hicieron en v2. En cambio, lo que los mantenedores de Twitter Bootstrap han decidido hacer es facilitar la personalización de la apariencia de los elementos que están en el CSS..
Los mantenedores incluso han puesto a disposición un tema "Bootstrap" que hace que v3 se parezca al diseño original v2 para comenzar. En la última parte de esta serie, te mostraré lo sencillo que es ahora anular las distintas clases y mostrarte cómo revisar el tema plano para que adquieras tu propia apariencia..
Por ahora, sin embargo, si desea la experiencia v2, deberá asegurarse de que también incluya el archivo CSS apropiado según sea necesario. Si desea mantener el valor predeterminado de v3, no necesita nada extra.
Cuando se lanzó BS2 por primera vez, la única forma de obtenerlo era a través de una descarga desde el sitio web del proyecto. Esto fue cubierto extensamente en el primer libro con una discusión en profundidad de exactamente qué archivos estaban en el archivo zip y por qué.
Debido a que tanta gente estaba usando Bootstrap, no pasó mucho tiempo antes de que estuviera disponible de forma gratuita en un CDN por parte de las personas que ejecutan MaxCDN. Esta tradición ha continuado en la base de código de v3, y ahora puede simplemente obtener su instalación v3 estándar elegida utilizando las siguientes etiquetas de script HTML:
Si utiliza las versiones de CDN, recuerde que también deberá asegurarse de incluir una copia reciente de JQuery; Ninguna de las funciones de BS3 JS funcionará a menos que usted lo haga..
Además del enlace CDN, ahora también hay una descarga directa en el sitio getbootstrap.com, no solo para el paquete estándar de JavaScript y CSS como se describe en el libro anterior, sino también un enlace directo a un archivo zip del original “ Fuentes "menos" y una conversión a "Sass" para aquellas personas que deseen poder incluir una versión totalmente personalizable del kit en su propio sistema de compilación utilizando herramientas como Grunt para automatizar las cosas..
Además de las nuevas fuentes, ahora también puede usar Bower para instalar todo lo que necesita usando lo siguiente desde la línea de comandos de las carpetas de su proyecto:
Bower instalar bootstrap
Bower es un sistema de paquetes y andamios HTML diseñado para automatizar gran parte de la placa de la caldera de la aplicación. No es necesario que lo entiendas para entender BS v3, pero una rápida búsqueda en Google de "Bower" mostrará muchas referencias para profundizar tu comprensión..
En una nota similar, BS v3 también se puede instalar con el administrador de paquetes de NuGet si está trabajando en Visual Studio. Al igual que Bower, esto automatizará gran parte del proceso de instalación y configuración de los archivos necesarios. Sin embargo, tenga cuidado: hay muchos paquetes Bootstrap disponibles en NuGet, algunos de los cuales le causarán más trabajo del que le ahorran..
Finalmente, el personalizador de TWB todavía está disponible. Se ha reestructurado y reconstruido en gran medida para ofrecer más opciones y una visión más fácil e intuitiva de lo que está cambiando y por qué.
De hecho, ahora es tan fácil cambiar las cosas con el personalizador que su diseñador o equipo de diseño puede hacer el 90 por ciento del trabajo necesario para establecer los colores y la marca de su descarga antes de que incluso se descarguen los archivos necesarios. Esto permite que su departamento de diseño comience a elegir colores y diseños de manera inmediata, mientras trabaja en los diseños de página y código adicional para la interactividad requerida. Entonces, todo lo que se requiere es que simplemente reemplace sus archivos predeterminados con los archivos que le proporcionaron sus diseñadores, y debería ocurrir un cambio instantáneo de tema.
Oficialmente, BS v3 solo es compatible con la última ronda de navegadores compatibles con HTML 5 e Internet Explorer 10 y superior.
En realidad, el marco también es compatible con IE8 y IE9; Sin embargo, hay algunas características de CSS3 y HTML5 que no funcionan como se esperaba. En particular, si desea que los elementos de respuesta funcionen correctamente, deberá utilizar responder.js, que puedes descargar desde este repositorio de GitHub.
Una vez que agregues responder para su proyecto, es básicamente una expectativa general de lo que fue y no se agregó a los distintos navegadores, en varios momentos.
Las partes que más se notarán como faltantes son las siguientes:
Para IE8:
radio del borde es no soportado.sombra de la caja es no soportado.transformar es no soportado.transición es no soportado.marcador de posición el texto es no soportado.Básicamente, esto significa que el texto del marcador de posición en los elementos de entrada no se mostrará, y cualquier cosa que use esquinas redondeadas o sombras, o que tenga algún tipo de transición o transformación en el elemento, no se mostrará correctamente.
Para IE9:
radio del borde es soportado.sombra de la caja es soportado.transformar es apoyado (pero solo con -Sra prefijo).transición es no soportado.marcador de posición el texto es no soportado.Las cosas mejoran ligeramente en lo que respecta a IE9. Las esquinas redondeadas y las sombras paralelas ahora están bien, y las transformaciones también funcionarán, siempre que tengan un -Sra versión prefijo.
Las transiciones y los marcadores de posición en los elementos de entrada, sin embargo, todavía están tristemente perdidos.
La matriz de soporte oficial para la versión actual de BS3 en los navegadores actuales se ve así:
| Cromo | Firefox | ES DECIR | Ópera | Safari | |
|---|---|---|---|---|---|
| Androide | ✓ | ✗ | ✗ | ||
| iOS | ✓ | ✗ | ✓ | ||
| Mac OS X | ✓ | ✓ | ✓ | ✓ | |
| Windows | ✓ | ✓ | ✓ | ✓ | ✗ |
Si está apuntando a IE9 y IE8, y está usando responder.js Para apoyar esos esfuerzos, tenga en cuenta los siguientes puntos:
Tendrá que referirse a la responder.js docs si está alojando CSS, etc. en un dominio diferente (por ejemplo, un CDN) para mitigar problemas entre dominios.
La seguridad del navegador le causará problemas con expediente:// y @importar referencias de recursos basados.
Específico a @importar es eso responder.js no puede leer las reglas correctamente, lo que es importante para los usuarios de Drupal, ya que Drupal utiliza @importar bastante pesado.
Los modos de compatibilidad de IE más antiguos impedirán que Bootstrap funcione completamente, no solo con responder.js, así que tenga cuidado si está probando la compatibilidad con versiones anteriores utilizando un IE moderno en modo de emulación; lo más probable es que los resultados no ser lo que esperas.
Este tutorial representa un capítulo de Bootstrap 3 sucintamente, un libro electrónico gratuito del equipo en Syncfusion.
