将 Bootstrap 添加到 Jekyll [英] 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.

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

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.

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