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里添加

  1. sass:
  2. # loading path from site root
  3. # default to _sass
  4. sass_dir: bower_components/bootstrap-sass/assets/stylesheets
  5.  
  6. # style : nested (default),compact,compressed,expanded
  7. # :nested,:compact,:compressed,:expanded also works
  8. # see http://sass-lang.com/documentation/file.SASS_REFERENCE.html#output_style
  9. # on a typical twitter bootstrap stats are :
  10. # nested 138,7kB,compact 129,1kB,expanded 135,9 kB,compressed 122,4 kB
  11. style: compressed

使用Javascript

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

  1. <script src="{{ site.baseurl }}/bower_components/jquery/dist/jquery.min.js"></script>
  2. <script src="{{ site.baseurl }}/bower_components/bootstrap-sass/assets/javascripts/bootstrap.min.js"></script>

使用

在css / main.scss中删除以前的内容添加

  1. ---
  2. # Only the main Sass file needs front matter (the dashes are enough)
  3. ---
  4. @charset "utf-8";
  5.  
  6. /* path to glyphicons */
  7. $icon-font-path: "/bower_components/bootstrap-sass/assets/fonts/bootstrap/";
  8.  
  9. /* custom variable */
  10. $body-bg: red;
  11.  
  12. /* any style customization must be before the bootstrap import */
  13. @import "bootstrap";

您可以看到bower_components / bootstrap-sass / assets / stylesheets / bootstrap / _variables.scss中可用的所有变量

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

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

猜你在找的Bootstrap相关文章