web-dev-qa-db-fra.com

Bootstrap 4 système de grille flexible uniquement

Donc, dans bootstrap3, nous avions l'option `` Personnaliser et télécharger '', que nous ne pouvions télécharger que ce dont nous avions besoin. Maintenant que bootstrap 4 prend en charge flexbox, je veux seulement télécharger le système de grille flexible de bootstrap 4 et je ne peux plus voir cette option. Y a-t-il un moyen de le faire ce ?

csstwitter-bootstraptwitter-bootstrap-4bootstrap-4
12
Manishoo

MISE À JOUR (JUILLET 2019)

Avec la sortie de v4 vous pouvez simplement utiliser soit bootstrap-grid.css ou bootstrap-grid.min.css, il inclut uniquement système de grille et tilitaires flex

SS

Ancienne réponse:

À ce stade Alpha, vous pouvez basculer entre vrai/faux pour utiliser flexbox (si vous utilisez un préprocesseur CSS) selon bootstrap V4 Alpha docs

Le support de Flexbox est enfin arrivé à Bootstrap. Optez pour les nouveaux styles de mise en page CSS en appuyant simplement sur une variable ou en échangeant une feuille de style.

Comment ça marche:

Si vous êtes familier avec la modification de variables dans Sass - ou tout autre préprocesseur CSS - vous serez à l'aise pour passer en mode flexbox.

  1. Ouvrez le _variables.scss fichier et recherchez le $enable-flex variable.
  2. Changez-le de false en true.
  3. Recompilez, et c'est fait!

Alternativement, si vous n'avez pas besoin des fichiers source Sass, vous pouvez échanger la CSS par défaut Bootstrap compilée avec la variation compilée flexbox. Head à la page de téléchargement pour plus d'informations.

14
dippas

Au moment de répondre à cette question, si vous téléchargez le .Zip compilé trouvé ici , il est livré avec un dossier css qui a trois feuilles de style,

  • bootstrap-grid.css
  • bootstrap-normalize.css
  • bootstrap.css

Le bootstrap-grid le fichier n'a que la grille CSS et rien d'autre, c'est ce que vous recherchez.

6
Jacob Raccuia

si vous voulez simplement utiliser flex-grid. je recommande

https://www.flexible-grid.com

https://github.com/kenangundogan/flexible-grid

flexible-grid/
    ├── scss
        ├── flexible-grid.scss
        ├── _variables.scss
        ├── _definitions.scss
        ├── _wrapper.scss
        ├── _array-list.scss
        ├── _attribute.scss
        ├── _grid.scss
        └── _normalize.scss
1
kenan gündoğan

Mise à jour 2019, Bootstrap 4.3 +

Vous pouvez obtenir la grille uniquement en utilisant bootstrap-grid.css inclus dans le téléchargement Bootstrap 4. http://getbootstrap.com/docs/4.1/getting-started/contents/#css-files

Cela inclut la grille, flexbox et afficher les utilitaires, mais pas tous les utilitaires comme les bordures, l'espacement, etc. Si vous voulez une option supplémentaire "Personnaliser et télécharger", vous devez reconstruire Bootstrap en utilisant SASS, ou utilisez un outil tiers comme themestr.app

Réponse originale, Bootstrap 4 alpha (flexbox en option)

Il peut y avoir des téléchargements personnalisables à l'avenir, mais le seul moyen actuellement consiste à activer le $enable-flex variable. Voici un exemple d'utilisation de SASS.

$enable-flex:true;

http://codeply.com/go/JbGGN4Ok3A

À partir de Bootstrap 4 alpha 6, flexbox est maintenant la valeur par défaut: http://www.codeply.com/go/p/bootstrap_4 .0.alpha.6

0
Zim