Ajouter Bootstrap à Jekyll
Je suis nouveau à Jekyll et je voudrais tirer dans une partie de la fonctionnalité Twitter Bootstrap. Quelqu'un a fait cela, et si oui, avez-vous des conseils? Je serais allé avec Jekyll-Bootstrap, mais il n'y a plus de support pour cela. J'ai construit mon site Jekyll et j'espère qu'il y a un moyen de tirer dans Bootstrap.
2 réponses
Comme Jekyll supporte nativement sass, vous pouvez utiliser bootstrap-Sass .
Je l'installe personnellement avec la commande bower install bootstrap-sass.
Cela installe Bootstrap et Jquery dans le dossier bower_components.
Configuration
Dans votre _config.YML ajouter:
sass:
# loading path from site root
# default to _sass
sass_dir: bower_components/bootstrap-sass/assets/stylesheets
# style : nested (default), compact, compressed, expanded
# :nested, :compact, :compressed, :expanded also works
# see http://sass-lang.com/documentation/file.SASS_REFERENCE.html#output_style
# on a typical twitter bootstrap stats are :
# nested 138,7kB, compact 129,1kB, expanded 135,9 kB, compressed 122,4 kB
style: compressed
Javascript
Si vous voulez utiliser javascript, dans votre _includes / footer.html ajouter :
<script src="{{ site.baseurl }}/bower_components/jquery/dist/jquery.min.js"></script>
<script src="{{ site.baseurl }}/bower_components/bootstrap-sass/assets/javascripts/bootstrap.min.js"></script>
Utiliser
Dans css/main.scss supprimer le contenu précédent et ajouter
---
# Only the main Sass file needs front matter (the dashes are enough)
---
@charset "utf-8";
/* path to glyphicons */
$icon-font-path: "/bower_components/bootstrap-sass/assets/fonts/bootstrap/";
/* custom variable */
$body-bg: red;
/* any style customization must be before the bootstrap import */
@import "bootstrap";
Vous pouvez tout voir les variables disponibles dans bower_components/bootstrap-sass/assets/stylesheets/bootstrap/_variables.scss
Vous pouvez supprimer votre ancien dossier _sass.
Maintenant votre fichier css est généré à chaque build.
Mise à jour pour Bootstrap 4 Beta
Comme Bootstrap 4 Beta fonctionne maintenant sur Sass , Vous pouvez utiliser le paquet bower "officiel".
Voici ce que j'ai fait:
1. Installer Bootstrap en utilisant Bower
bower install bootstrap#v4.0.0-beta --save pour installer Bootstrap et ses dépendances dans le dossier bower_components.
2. Configuration
Dans _config.yml, j'ai changé le dossier Sass et exclu bower_components du traitement:
sass:
sass_dir: assets/css
# Exclude from processing.
exclude:
- bower_components
3. Sass
J'ai changé assets/css/main.scss comme suivant:
---
# Only the main Sass file needs front matter (the dashes are enough)
---
@charset "utf-8";
@import "variables"; // (2)
@import "../../bower_components/bootstrap/scss/bootstrap"; // (1)
// Import other styling below
// ...
(1) notez que la deuxième instruction import doit être relative au répertoire Sass spécifié dans _config.yml. Puisque je le choisis pour être le dossier qui contient également le main.scss, la liaison d'actif dans votre IDE préféré (par exemple WebStorm) ne se cassera pas.
(2) pour écraser les variables Bootstrap Sass, j'ai créé assets/css/_variables.scss qui doit être importé avant la bibliothèque Bootstrap.
4. Javascript
Puisque je n'ai pas trouvé un moyen d'utiliser les JS expédiés dans bower_components, j'ai choisi d'inclure les versions CDN Comme proposé par Bootstrap :
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>