web-dev-qa-db-fra.com

Ajout de Bootstrap à Jekyll

Jekyll n’est pas au courant et aimerais utiliser certaines des fonctionnalités de Twitter Bootstrap. Quelqu'un l'a-t-il fait 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 existe un moyen de tirer parti de Bootstrap.

twitter-bootstrapjekylljekyll-bootstrap
25
maximos

Comme Jekyll prend en charge nativement sass, vous pouvez utiliser bootstrap-sass .

Personnellement, je l'installe avec la commande bower install bootstrap-sass.

Cela installe Bootstrap et Jquery dans le dossier bower_components.

Configuration

Dans votre _config.yml, ajoutez:

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, ajoutez:

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

Utilisation

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 voir toutes 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 construction.

37
David Jacquel

Mise à jour pour Bootstrap 4 Beta

Comme Bootstrap 4 Beta fonctionne maintenant sur Sass , vous pouvez utiliser le paquet "officiel" de Bower.

Voici ce que j'ai fait:

1. Installez 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 suit:

---
# 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 d'importation doit être relative au répertoire Sass spécifié dans _config.yml. Étant donné que j'ai choisi le dossier contenant également le main.scss, l'actif lié dans votre IDE favori (par exemple, WebStorm) ne sera pas endommagé. 

(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

N'ayant pas trouvé le moyen d'utiliser le JS fourni dans bower_components, j'ai choisi d'inclure les versions CDN proposées 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>
1
Jonas Vogel