向Jekyll添加Bootstrap [英] Adding Bootstrap to Jekyll

问题描述

我是Jekyll的新手，并且想了解一些Twitter Bootstrap功能.有没有人做过，如果有，您有什么建议吗?我本来会选择Jekyll-Bootstrap的，但是已经不再支持它了.我已经建立了我的Jekyll网站，并希望有一种引入Bootstrap的方法.

I'm new to Jekyll and would like to pull in some of the Twitter Bootstrap functionality. Has anyone done this and, if so, do you have any advice? I would have gone with Jekyll-Bootstrap, but there is no longer support for it. I have built my Jekyll site and am hoping there's a way to pull in Bootstrap.

推荐答案

由于Jekyll本机支持sass，因此您可以使用 bootstrap-sass .

As Jekyll natively supports sass, you can use bootstrap-sass.

我亲自使用bower install bootstrap-sass命令安装它.

I personally install it with the bower install bootstrap-sass command.

这会将Bootstrap和Jquery安装在bower_components文件夹中.

This installs Bootstrap and Jquery in the bower_components folder.

在您的_config.yml中添加:

In your _config.yml add :

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

如果要使用javascript，请在​​_includes/footer.html中添加:

Javascript

If you want to use javascript, in your _includes/footer.html add :

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

使用

在css/main.scss中，删除先前的内容并添加

Use

In css/main.scss delete previous content and add

---
# 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";

您可以在bower_components/bootstrap-sass/assets/stylesheets/bootstrap/_variables.scss

您可以删除旧的_sass文件夹.

You can remove you old _sass folder.

现在，您的css文件是在每次构建时生成的.

Now your css file is generated at each build.

这篇关于向Jekyll添加Bootstrap的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！