¿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.

html css twitter-bootstrap responsive-design Manuel Zapata
fuente

Respuestas:

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
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

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