Bye bye V.2.3.2, wellcome V.3.
Hoy Bootstrap a fondo.
En el último post hicimos un resume de las propiedades, de como trabajar, de las columnas los "span"...
http://jdalebrook.blogspot.com.es/2013/11/bootstrap-fondo.html
Hoy analizaremos las diferencias que aporta la nueva versión con respecto a lo que contamos y proseguiremos con las posibilidades de este framework.
Novedades:
1º Nueva herramient BOWER
La primera novedad que nos encontramos es la opción de instalar con bower.
Una nueva herramienta del equipo de bootstrap con la que podrás manejar estilos, javascript...
http://bower.io/
Hoy no profundizaremos acerca de esta nueva herramienta del equipo Twitter.
2º Responsive activado por defecto.
En el último post comentábamos que la dotación responsive vendría desactivada por defecto.
En esta nueva versión, ya no es necesario activarla, viene por defecto "on".
(Para desactivarla sí tu proyecto no debiese trabajar en "responsive" seguir el proceso inverso a la activación que narrábamos ayer.)
"Resumen rápido: qutar <meta> en los CSS, cambiar el valor de "width" para todos los container al tamáno que necesiteis, y sí usais una nabvar eliminar todas las propiedades de acople y desacople. (Collapsing/expanding)".
Desde la misma web http://getbootstrap.com/examples/non-responsive/ te dan la opción de descargar la versión no responsive.
3º Opciones de migración:
Las versiones anteriores no son compatibles con esta nueva V.3.
¿Qué no nos servirá?
Bootstrap 2.x
Bootstrap 3.0
.container-fluid
.container
.row-fluid
.row
.span*
.col-md-*
.offset*
.col-md-offset-*
.brand
.navbar-brand
.nav-collapse
.navbar-collapse
.nav-toggle
.navbar-toggle
.btn-navbar
.navbar-btn
.hero-unit
.jumbotron
.icon-*
.glyphicon .glyphicon-*
.btn
.btn .btn-default
.btn-mini
.btn-xs
.btn-small
.btn-sm
.btn-large
.btn-lg
.alert-error
.alert-danger
.visible-phone
.visible-xs
.visible-tablet
.visible-sm
.visible-desktop
.visible-md
.hidden-phone
.hidden-xs
.hidden-tablet
.hidden-sm
.hidden-desktop
.hidden-md
.input-small
.input-sm
.input-large
.input-lg
.control-group
.form-group
.checkbox.inline .radio.inline
.checkbox-inline .radio-inline
.input-prepend .input-append
.input-group
.add-on
.input-group-addon
.img-polaroid
.img-thumbnail
ul.unstyled
.list-unstyled
ul.inline
.list-inline
.muted
.text-muted
.text-error
.text-danger
.table .error
.table .danger
.bar
.progress-bar
.bar-*
.progress-bar-*
.accordion
.panel-group
.accordion-group
.panel .panel-default
.accordion-heading
.panel-heading
.accordion-body
.panel-collapse
.accordion-inner
.panel-body
.alert-error
.alert-danger
Las nuevas herramientas y elementos dados se resumen en:
Elementos
Descripción
Paneles
.panel .panel-default .panel-body .panel-title .panel-heading .panel-footer.panel-collapse
Listas de grupos
.list-group .list-group-item .list-group-item-text .list-group-item-heading
Iconos "responsvie"
.glyphicon
Jumbotron (Template)
.jumbotron
grid talla xs(<768px)
.col-xs-*
grid sm(≥768px)
.col-sm-*
grid md(≥992px)
.col-md-*
grid lg (≥1200px)
.col-lg-*
Utilida responsive (≥1200px)
.visible-lg .hidden-lg
Offsets
.col-sm-offset-* .col-md-offset-* .col-lg-offset-*
Empujar
.col-sm-push-* .col-md-push-* .col-lg-push-*
Tirar
.col-sm-pull-* .col-md-pull-* .col-lg-pull-*
Grupos input
.input-group .input-group-addon .input-group-btn
Controles formularios
.form-control .form-group
Tamaños botones
.btn-group-xs .btn-group-sm .btn-group-lg
Texto Barra Nav
.navbar-text
Cabecera NavBar
.navbar-header
Justificar tabs / pills
.nav-justified
Imágenes responsive
.img-responsive
Columnas contextuales
.success .danger .warning .active
Paneles contextuales
.panel-success .panel-danger .panel-warning .panel-info
Modal
.modal-dialog .modal-content
Miniaturas
.img-thumbnail
Well sizes
.well-sm .well-lg
Alertas links
.alert-link
Element
Removed from 2.x
3.0 Equivalent
Acciones form
.form-actions
N/A
Form. Busqueda.
.form-search
N/A
Contenedor fluido
.container-fluid
.container (no more fixed grid)
Columna fluida
.row-fluid
.row (no more fixed grid)
Controladores Contenedor
.controls
N/A
Controladores columna
.controls-row
.row or .form-group
Navbar inner
.navbar-inner
N/A
Navbar vertical dividers
.navbar .divider-vertical
N/A
Dropdown submenu
.dropdown-submenu
N/A
Tab alignments
.tabs-left .tabs-right.tabs-below
N/A
Nav lists
.nav-list .nav-header
No direct equivalent, but list groups and .panel-groups are similar.
6º Soporte para navegadores.
Bootstrap está realizado para ser compatible con la mayoría de los navegadores.
- Chrome (Mac, Windows, iOS, and Android)
- Safari (Mac and iOS only, as the Windows version is being abandoned)
- Firefox (Mac, Windows)
- Internet Explorer
- Opera (Mac, Windows)
IE8 en los que no se verán ni los border radius, box-shadows, transform, transition, placeholder...
Aunque a partir de la versión 9 del navegador trabajará sin problemas. (Tip IE9: Transform -ms prefix)
Para asegurar más compatibilidad a nuestra web, bootsrap nos recomienda
cuidado con respond.js en tanto a expresiones file:// @import box-sixing: border box;
Nos insta a usar
<meta http-equiv="X-UA-Compatible" content="IE=edge">
Para asegurarnos el último motor de render IE.
Es recomendable leer:
https://github.com/scottjehl/Respond/blob/master/README.md#support--caveats
Con IE10 en W8 y Windows Phone 8 podrían aparecer algunos fallos debido a que IE no distingue entre device width y vieport width. Para solucionarlo debemos añadir código para parchearlo.
@-ms-viewport { width: device-width; }
@-webkit-viewport { width: device-width; }
@-moz-viewport { width: device-width; }
@-ms-viewport { width: device-width; }
@-o-viewport { width: device-width; }
@viewport { width: device-width; }
if (navigator.userAgent.match(/IEMobile\/10\.0/)) { var msViewportStyle = document.createElement("style") msViewportStyle.appendChild( document.createTextNode( "@-ms-viewport{width:auto!important}" ) ) document.getElementsByTagName("head")[0].appendChild(msViewportStyle)} Más info.
http://timkadlec.com/2013/01/windows-phone-8-and-device-width/
Por otro lado tendremos incompatibilidades con safari el cual no interpreta en alguna de sus versiones bien el código col-*-1 y tendremos que trabajar con .pull -right. o calcular el espacio manualmente.
No hay comentarios:
Publicar un comentario