Cargando

Español  English

Blog

Por Enrique González

Cosas que faltan en Bootstrap 3

Twitter-Bootstrap-LogoDespués de utilizar el famoso framework Bootstrap 3 para maquetar varias páginas, incluida esta que lees, a pesar de lo completo que es yo aun le echo en falta varias cosas, como por ejemplo:

Sistema de columnas: El menor media query es demasiado grande

En el sistema de columnas de Bootstrap 3, el media query más pequeño es el “xs”, que va de 0 a 768px. A mi me resulta un “gap” demasiado grande, sobre todo teniendo en cuenta que el siguiente, el “sm”, llega hasta 992px.

Por suerte muchos usuarios piensan igual, por lo que uno de ellos ha sacado un nuevo media query llamado “ms” (bootstrap_ms), que va de 480px hasta 767px, se puede ver aquí, en versión SASS:

https://gist.github.com/andyl/6360906

o compilada:

https://gist.github.com/andyl/6451936
 
Respecto a dispositivos móviles, es imposible recoger las anchuras de los miles de ellos que existen, si por ejemplo los saltos no recogen la anchura de algun dispositivo concreto, es facil hacer la modificación, solo hay que poner el media query concreto para ese dispositivo. Por ejemplo en el caso del iPad:

@media only screen and (min-width : 768px) and (max-width : 1024px)  { 
.container {
    width: 970px;
}
}

Columnas sin padding

En frameworks como Skeleton tienes los modificadores “alpha” y “omega” que quitan el padding a las columnas a izquierda o derecha. Esto no existe en Bootstrap, pero puede ser incluido de esta forma:

.row.no-gutter [class*='col-']:not(:first-child):not(:last-child) {
  padding-right:0;
  padding-left:0;
}
.row.no-gutter [class*='col-']:first-child {
  padding-right:0;
}
.row.no-gutter [class*='col-']:last-child {
  padding-left:0;
}

Algun componente Javascript adicional

Hay que reconocer que Bootstrap trae una buena colección de componentes perfectamente integrados, por eso nos gusta tanto, pero aun así yo echo de menos por ejemplo un combobox más estilizado, como por ejemplo este:

http://silviomoreto.github.io/bootstrap-select/
  • Fecha29-11-2014
  • 1

    comentarios

  • Avatar
    Hola gente, antes que nada muchas gracias por su tiempo en responder Tal vez sea una pregunta super sencilla pero la verdad que yo, que aun soy muy novato en bootstrap, no le he podido resolver, tengo una estructura bastante sencilla como
    col con fondo rojo
    col con fondo azul
    al poner esto asi, y obviamente lo hace pone las dos columnas una pegada a la otra, lo que yo quiero es dejar un margen de al menos 20px entre la columna roja y azul...... y sinceramente no le encuentro la forma, porque claro esta q si pongo un style a la col azul automaticamente la manda para abajo....... alguna sugerencia? muchas gracias
    25-02-2015 06:39
  • +

    Deja un comentario