web-dev-qa-db-fra.com

Bootstrap 4 générateur de génération personnalisé / téléchargement

Est-ce que quelqu'un connait un alpha/bêta bootstrap 4 générateur personnalisé, identique à celui disponible pour bootstrap 3 à Personnalisation et téléchargement =?)?

https://getbootstrap.com/docs/4.0/customize/ toujours indisponible

csstwitter-bootstrapcustomizationbootstrap-4beta
20
Yatko

Comme discuté ici , il n'y aura pas de personnaliseur pour Bootstrap 4. Cela signifie que vous devrez configurer des outils de construction pour vous-même. Ceci est mon flux de travail ( dans NodeJS):

  1. Créer un nouveau projet avec npm init
  2. Installez Bootstrap avec npm install bootstrap
  3. Installez des outils de construction. Pour rendre cela facile et ne nécessiter qu'une seule commande, nous allons utiliser scss-powertools ( j'en suis l'auteur). Si vous ne voulez pas l'utiliser, vous devez vous-même préparer la compilation, les préfixes, les minifications (et les peluches). Exécuter : npm install scss-powertools --save-dev
  4. Créez le fichier SCSS dans un dossier scss (à la racine de votre projet), comme scss/name.scss
  5. Dans le fichier SCSS import Bootstrap avec @import "bootstrap/scss/bootstrap"; ou importez les composants individuels selon vos besoins
  6. Ajouter un nouveau script à package.json: "build": "scss-powertools scss/name.scss output/compiled.css"
  7. Courir npm run build, vous trouverez votre CSS compilé dans output/compiled.css (ou tout ce que vous avez spécifié comme option dans la commande de construction)

Remarque! scss-powertools ne minimise pas par défaut. Pour l'activer, utilisez le --production drapeau. Vous pouvez trouver toutes les informations à ce sujet ici .

Une configuration simple peut être trouvée à partir de ceci Gist .

Vous pouvez trouver mon flux de travail précédent ici . Dans celui-ci, je devais tout mettre en place, de la compilation au chargement manuel.

13
Klooven

Bonne question! Bootstrap 3 avait une page de personnalisation comme vous l'avez noté.

Vous pouvez utiliser cet outil de compilation: https://bootstrap.build/ . Je ne sais pas si c'est le remplacement de la page de personnalisation de BS3 ou quelque chose de nouveau. Cela ressemble à un bel éditeur.

Ou vous pouvez créer une version personnalisée de Bootstrap 4 avec SASS.

Ce lien fournit des informations supplémentaires sur la création d'un thème: https://getbootstrap.com/docs/4.0/getting-started/theming/

7
Jess

Il ne semble pas que l'équipe Bootstrap va proposer un personnaliseur comme dans la v3.

Comme mentionné dans d'autres réponses, bootstrap.build existe et dispose d'une interface utilisateur très agréable et donne accès à la plupart des variables et options. Malheureusement, il ne semble pas que la mise à jour soit aussi rapide que l'équipe Bootstrap publie des mises à jour).

pgrade-bootstrap.bootply.com est une autre option mais ne donne aucune indication quant à la version v4 utilisée. Il n’a qu’un accès limité aux variables et aux options.

bootstrapcustomizer.com fournit un accès complet à toutes les variables et options et est tenu à jour avec les versions v4. Ce n'est pas une interface utilisateur aussi agréable que bootstrap.build, mais ça marche.

(Divulgation: j'ai créé bootstrapcustomizer.com)

6
johna