我是 Jekyll 的新手，想引入一些 Twitter Bootstrap 功能。有没有人这样做过，如果有，你有什么建议吗？我会选择 Jekyll-Bootstrap，但不再支持它。我已经建立了我的 Jekyll 站点，并希望有一种方法可以引入 Bootstrap。
问问题
14170 次
3 回答
41
由于 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 文件在每次构建时生成。
于 2015-02-26T08:54:07.533 回答
7
Bootstrap 4.3.1 和 Jekyll 4.0 更新
您可以使用 bunder 将 BS 安装到您的站点中
bundle install bootstrap
将其添加到 gem 文件中：
gem 'bootstrap', '~> 4.3.1'
获取BS的路径
bundle info bootstrap
将该路径添加到 _config.yml
sass:
load_paths:
- _sass
- C:/Ruby26-x64/lib/ruby/gems/2.6.0/gems/bootstrap-4.3.1/assets/stylesheets
也可以添加相对路径。
最后，将引导程序添加到style.scss
@import "bootstrap";
于 2019-11-04T20:17:14.863 回答
5
Bootstrap 4 Beta 更新
由于 Bootstrap 4 Beta 现在在 Sass 上运行，您可以使用“官方”bower 包。
这是我所做的：
1. 使用 Bower 安装 Bootstrap
bower install bootstrap#v4.0.0-beta --save将 Bootstrap 及其依赖项安装到bower_components文件夹中。
2.配置
在_config.yml中，我更改了 Sass 文件夹并bower_components从处理中排除：
sass:
sass_dir: assets/css
# Exclude from processing.
exclude:
- bower_components
3.萨斯
我更改assets/css/main.scss如下：
---
# Only the main Sass file needs front matter (the dashes are enough)
---
@charset "utf-8";
@import "variables"; // (2)
@import "../../bower_components/bootstrap/scss/bootstrap"; // (1)
// Import other styling below
// ...
(1)请注意，第二个 import 语句必须相对于 .sass 中指定的 Sass 目录_config.yml。由于我选择它作为还包含 的文件夹，main.scss因此您最喜欢的 IDE（例如 WebStorm）中的资产链接不会中断。
(2)为了覆盖 Bootstrap Sass 变量，我创建了assets/css/_variables.scss它必须在 Bootstrap 库之前导入。
4. Javascript
由于我没有找到使用附带的 JS 的方法，因此我选择包含Bootstrap 建议bower_components的 CDN 版本：
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
于 2017-10-15T18:02:52.167 回答