¿Cómo obtener solo la cuadrícula receptiva de Bootstrap 3?

109

Necesito agregar características de diseño receptivo a mi aplicación web usando Twitter Bootstrap. Solo quiero el comportamiento receptivo, no estoy interesado en la tipografía, los componentes o cualquier otra cosa incluida en Bootstrap.

Obtuve una versión personalizada de Bootstrap simplemente seleccionando el sistema de cuadrícula. Sin embargo, cuando agrego el CSS generado a mi aplicación, todos mis estilos se arruinan (encabezado, enlaces y otros). ¿Por qué está pasando eso? ¿Cómo puedo obtener un CSS Bootstrap solo con el sistema de cuadrícula? Me gustaría evitar una modificación manual de los archivos Bootstrap.

— Manuel Zapata
fuente

159

Vaya a http://getbootstrap.com/customize/ y seleccione lo que desee del marco BS3 y luego haga clic en "Compilar y descargar" y obtendrá el CSS y JS que eligió.

Personalizador de Bootstrap

Abra el CSS y elimine todo menos la cuadrícula. También incluyen algunas cosas de normalización. Y deberá ajustar todos los estilos de su sitio al tamaño de la caja: border-box - http://www.w3schools.com/cssref/css3_pr_box-sizing.asp

— Christina
fuente

Gracias Christina. Esperaba que hubiera una forma de obtener solo los estilos de cuadrícula.

— Manuel Zapata

8

No, también descargan el material de apoyo, normalize y scaffolding.less (que tiene el cuadro de borde global) que requiere que ajuste todas las cosas que tienen relleno. Como antes, su caja tenía un relleno de 10px y el total era de 200px, pero el interior era de 180px, por lo que tenía que establecer el ancho en 180px, ahora establece el ancho en 200px o simplemente nada y lo pega en una clase de columna de cuadrícula.

— Christina

box-sizingrestablecer información: css-tricks.com/… & paulirish.com/2012/box-sizing-border-box-ftw

— Costa

todavía eso tiene normalize.css

— rab

@rab: eso se menciona en la respuesta. Elimínelo si lo desea, pero es útil.

— Christina

17

Pedido zirafa / arranque de la red de sólo . Contiene solo la cuadrícula de arranque y las utilidades receptivas que necesita (sin reinicio ni nada), y simplifica la complejidad de trabajar directamente con los archivos LESS .

— burrbrown
fuente

8

Simplemente elija Grid systemy "utilidades receptivas" le da esto: http://jsfiddle.net/7LVzs/

— Jmorvan
fuente

4

Hizo una compilación de Grunt solo con la cuadrícula Bootstrap 3.3.5:

https://github.com/horgen/grunt-builds/tree/master/bootstrap-grid

~ 10 KB minimizados.

Si necesita otras partes de Bootstrap, simplemente inclúyalas en /src/less/bootstrap.less.

— horgen
fuente

1

Sugeriría usar http://getpreboot.com/ de MDO en su lugar. A partir de la v2, se preboottransfieren los mixins / variables MENOS utilizados para crear el sistema de cuadrícula Bootstrap 3.0 y es mucho más liviano que usar el generador de CSS. De hecho, si solo incluye, preboot.lessNO hay gastos generales porque todo el archivo está formado por mixins / variables y, por lo tanto, solo se usan en la precompilación y no en la salida final.

— srquinn
fuente

1

Parece que ahora puede descargar solo la cuadrícula en las nuevas funciones de descarga de Bootstrap 4.

— Richard Clifford
fuente

0

Ha pasado un tiempo desde que se hizo esta pregunta, pero tal vez ahora pueda renunciar a Bootstrap por completo y usar CSS Grid. (es más simple, más ordenado, más flexible y más rápido). Vea este interesante artículo: Deje de usar Bootstrap: cree una plantilla de cuadrícula CSS práctica para su interfaz de usuario basada en componentes

— Alex Firebrand
fuente

0

En Bootstrap 4, ya hay archivos separados en su GitHub. Usted puede encontrarlos aquí

https://github.com/twbs/bootstrap/tree/main/dist/css

— Hari Das
fuente