Come ottenere solo la griglia reattiva da Bootstrap 3?

109

Devo aggiungere funzionalità di responsive design alla mia applicazione web utilizzando Twitter Bootstrap. Voglio solo un comportamento reattivo, non sono interessato alla tipografia, ai componenti o ad altre cose incluse in Bootstrap.

Ho ottenuto una versione Bootstrap personalizzata semplicemente selezionando il sistema a griglia. Tuttavia, quando aggiungo il CSS generato alla mia applicazione, tutti i miei stili sono incasinati (intestazione, collegamenti e altri). Perché sta succedendo? Come posso ottenere un Bootstrap CSS solo con il sistema a griglia? Vorrei evitare una modifica manuale dei file Bootstrap.

— Manuel Zapata
fonte

159

Vai su http://getbootstrap.com/customize/ e seleziona quello che vuoi dal framework BS3, quindi fai clic su "Compila e scarica" e otterrai il CSS e JS che hai scelto.

Bootstrap Customizer

Apri il CSS e rimuovi tutto tranne la griglia. Includono anche alcune cose di normalizzazione. E dovrai adattare tutti gli stili del tuo sito alle dimensioni della scatola: border-box - http://www.w3schools.com/cssref/css3_pr_box-sizing.asp

— Christina
fonte

Grazie Christina. Mi aspettavo che ci fosse un modo per ottenere solo gli stili della griglia.

— Manuel Zapata

8

No, scaricano anche il materiale di supporto, normalize e scaffolding.less (che ha il border-box globale) che richiede di regolare tutte le cose che hanno padding. Come prima, la tua scatola aveva 10px padding e il totale era 200px, ma l'interno era 180px, quindi dovevi impostare la larghezza su 180px, ora imposti la larghezza su 200px o semplicemente niente e inseriscila in una classe di colonne della griglia.

— Christina

box-sizingreimpostare le informazioni: css-tricks.com/… & paulirish.com/2012/box-sizing-border-box-ftw

— Costa

ancora che ha normalize.css

— rab

@rab - è menzionato nella risposta. Rimuovilo se vuoi, ma è utile.

— Christina

17

Checkout zirafa / bootstrap-grid-only . Contiene solo la griglia di bootstrap e le utilità reattive di cui hai bisogno (nessun ripristino o altro) e semplifica la complessità del lavoro diretto con i file LESS .

— BurrBrown
fonte

8

Basta scegliere Grid systeme "utilità reattive" ti dà questo: http://jsfiddle.net/7LVzs/

— Jmorvan
fonte

4

Crea una build Grunt solo con la griglia Bootstrap 3.3.5:

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

~ 10 KB ridotti al minimo.

Se hai bisogno di altre parti da Bootstrap, includile in /src/less/bootstrap.less.

— horgen
fonte

1

Suggerirei di utilizzare invece http://getpreboot.com/ di MDO . A partire dalla v2, prebootporta indietro i mixin / variabili MENO utilizzati per creare il sistema di griglia Bootstrap 3.0 ed è molto più leggero rispetto all'utilizzo del generatore CSS. Infatti se includi solo preboot.lessNON c'è overhead perché l'intero file è composto da mixin / variabili e quindi vengono usati solo in pre-compilazione e non nell'output finale.

— srquinn
fonte

1

Sembra che tu possa scaricare solo la griglia ora sulle nuove funzionalità di download di Bootstrap 4.

— Richard Clifford
fonte

0

È passato un po 'di tempo da quando è stata posta questa domanda, ma forse ora puoi rinunciare del tutto a Bootstrap e utilizzare CSS Grid! (è più semplice, più ordinato, più flessibile e più veloce). Leggi questo fantastico articolo: Smetti di usare Bootstrap: crea un pratico modello CSS Grid per la tua interfaccia utente basata su componenti

— Alex Firebrand
fonte

0

In Bootstrap 4, ci sono già file separati nel loro GitHub. Li puoi trovare qui

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

— Hari Das
fonte