¿Que hay de nuevo en Bootstrap 3?

Publicado por BIAlita en Noticias
Bootstrap 3
5.0 de 5 basado en 1 voto(s)
  / 1
PocoMucho 

Aunque sé que no es una versión estable, en esta ocasión quiero mostrar el desarrollo web con Bootstrap 3, como no lo he utilizado y ya lo debo implementar en nuevos sitios, decidí hacer una prueba rápida y saber que ha cambiado respecto a la versión anterior.

Este video es para conocerlo, no lo voy a implementar en algún sitio en producción, es algo básico, porque no lo había probado hasta hoy.

Primero bajamos Bootstrap 3, lo descomprimimos y hay que buscar  la carpeta dist que es donde viene los archivos de Bootstrap,  la hoja de estilos y el js.

Si se requiere utilizar sólo un js, como collapse o dropdown para los menús, no tenemos que bajar el js con todos los plugin,  para éste ejemplo tomaremos el js completo.

De este enlace tomamos el código de ejemplo, que debe de ir en el index.html:

<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap 101 Template</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link href="/css/bootstrap.min.css" rel="stylesheet" media="screen">
    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="/../../assets/js/html5shiv.js"></script>
      <script src="/../../assets/js/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>Hello, world!</h1>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script GARBAGE></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="/js/bootstrap.min.js"></script>
  </body>
</html>

En el video pueden ver como se agrega el texto de ejemplo con las diferentes clases. Lo que realmente cambió fueron los siguientes elementos, que hay que aprender a utilizar:

 Tiny grid (<768 px) .col-xs-* 
 Small grid (>768 px) .col-sm-*
 Medium grid (>992 px) .col-md-* 
 Large grid (>1200 px) .col-lg-* 

 

Antes teníamos que utilizar los span, de acuerdo a la cantidad de columnas que fueramos a utilizar, y se comportaban distinto dependiendo de la resolución, ahora  los elementos son más semánticos.

Algo importante que se elminó en esta versión fueron el container-fluid row-fluid, ahora ambos se basan en porcentajes.

Para el proximo video, ya lo implementaré en un sitio real y trataré de utilizar todos sus componentes para discutir los errores o mejoras que se podrían hacer.

Video Bootstrap3

 

Te agradecería nos regalaras un +1 o votaras el artículo en la parte superior para seguir creando contenidos interesantes

 

Soy CEO de . Fundadora y co-administradora del grupo Joomla en México, también cuento con un Canal de YouTube sobre SEO Joomla y Wordpress que te invito visitar. Estoy certificada en Google Adwords y Google Analytics. Sígueme en mi perfil de Google + y salúdame para conocerte.