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.

— Manuel Zapata
source

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

8

Choisissez simplement Grid systemet "utilitaires réactifs" cela vous donne ceci: http://jsfiddle.net/7LVzs/

— Jmorvan
source

4

Création d'une version Grunt avec la grille Bootstrap 3.3.5 uniquement:

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

~ 10 Ko minimisés.

Si vous avez besoin d'autres parties de Bootstrap, incluez-les simplement dans /src/less/bootstrap.less.

— horgen
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
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
source

0

Cela fait un moment que cette question n'a pas été posée, mais peut-être que maintenant vous pouvez renoncer complètement à Bootstrap et utiliser CSS Grid! (c'est plus simple, plus net, plus flexible et plus rapide). Voir cet article sympa: Arrêtez d'utiliser Bootstrap - créez un modèle de grille CSS pratique pour votre interface utilisateur basée sur des composants

— Alex Firebrand
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
source