Despué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:
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:
http://silviomoreto.github.io/bootstrap-select/
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/
gonzalo