twitter-bootstrap – 添加引导到Jekyll

前端之家收集整理的这篇文章主要介绍了twitter-bootstrap – 添加引导到Jekyll前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我是新来的Jekyll,并希望提供一些Twitter Bootstrap功能。有没有人这样做,如果有的话,你有什么建议吗?我会和Jekyll-Bootstrap一起去,但不再支持。我已经建立了我的Jekyll网站,希望有一个方法来拉入Bootstrap。

解决方法

由于Jekyll本身支持sass,您可以使用 bootstrap-sass

我个人使用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文件是在每个构建中生成的。

猜你在找的Bootstrap相关文章