twitter-bootstrap – 添加引导到Jekyll

我个人使用bower install bootstrap-sass命令安装它。

这将在Bower_components文件夹中安装Bootstrap和Jquery。

组态

在你的_config.yml里添加：

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中添加：

<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中删除以前的内容并添加

---
# 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文件夹。

现在你的css文件是在每个构建中生成的。