Comment obtenir uniquement la grille réactive de Bootstrap 3?

109

Je dois ajouter des fonctionnalités de conception réactive à mon application Web à l'aide de Twitter Bootstrap. Je veux juste le comportement réactif, je ne suis pas intéressé par la typographie, les composants ou tout autre élément inclus dans Bootstrap.

J'ai eu une version personnalisée de Bootstrap en sélectionnant simplement le système de grille. Cependant, lorsque j'ajoute le CSS généré à mon application, tous mes styles sont foirés (en-tête, liens et autres). Pourquoi cela se produit-il? Comment puis-je obtenir un CSS Bootstrap avec uniquement le système de grille? Je voudrais éviter une modification manuelle des fichiers Bootstrap.

html css twitter-bootstrap responsive-design Manuel Zapata
la source

Réponses:

159

Allez sur http://getbootstrap.com/customize/ et basculez exactement ce que vous voulez dans le framework BS3, puis cliquez sur "Compiler et télécharger" et vous obtiendrez le CSS et le JS que vous avez choisis.

Personnalisateur Bootstrap

Ouvrez le CSS et supprimez tout sauf la grille. Ils incluent également des éléments de normalisation. Et vous devrez ajuster tous les styles de votre site au box-sizing: border-box - http://www.w3schools.com/cssref/css3_pr_box-sizing.asp

Christina
la source
Merci Christina. Je m'attendais à ce qu'il y ait un moyen d'obtenir uniquement les styles de grille.
Manuel Zapata
8
Non, ils téléchargent également les éléments de support, normalisent et scaffolding.less (qui a la bordure globale) qui vous oblige à ajuster tout ce qui a un rembourrage. Comme avant, votre boîte avait un rembourrage de 10 pixels et le total était de 200 pixels, mais l'intérieur était de 180 pixels, vous deviez donc définir la largeur sur 180 pixels, maintenant vous définissez la largeur sur 200 px ou tout simplement rien et collez-la dans une classe de colonne de grille.
Christina
box-sizingréinitialiser les informations: css-tricks.com / ... & paulirish.com/2012/box-sizing-border-box-ftw
Costa
encore qui a normalize.css
rab
@rab - c'est mentionné dans la réponse. Supprimez-le si vous le souhaitez, mais c'est utile.
Christina
17

Checkout zirafa / bootstrap-grid-only . Il ne contient que la grille d'amorçage et les utilitaires réactifs dont vous avez besoin (pas de réinitialisation ou quoi que ce soit), et simplifie la complexité de travailler directement avec les fichiers LESS .

brun brun
la source
1

Je suggérerais plutôt d' utiliser http://getpreboot.com/ de MDO . À partir de la v2, prebootle port arrière des mixins / variables MOINS utilisés pour créer le système de grille Bootstrap 3.0 est beaucoup plus léger que l'utilisation du générateur CSS. En fait, si vous incluez uniquement, preboot.lessil n'y a PAS de surcharge car le fichier entier est composé de mixins / variables et n'est donc utilisé que dans la pré-compilation et non dans la sortie finale.

srquinn
la source
1

Il semble que vous ne pouvez télécharger que la grille maintenant sur les nouvelles fonctionnalités de téléchargement de Bootstrap 4s.

Richard Clifford
la source
0

Dans Bootstrap 4, il existe déjà des fichiers séparés dans leur GitHub. Vous pouvez les trouver ici

https://github.com/twbs/bootstrap/tree/main/dist/css
Hari Das
la source