twitter-bootstrap 将 Bootstrap 添加到 Jekyll
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28733425/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Adding Bootstrap to Jekyll
提问by maximos
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 的新手，想引入一些 Twitter Bootstrap 功能。有没有人这样做过，如果是这样，你有什么建议吗？我会选择 Jekyll-Bootstrap，但不再支持它。我已经建立了我的 Jekyll 站点，并希望有一种方法可以引入 Bootstrap。
回答by David Jacquel
As Jekyll natively supports sass, you can use bootstrap-sass.
由于 Jekyll 本身支持 sass，您可以使用bootstrap-sass。
I personally install it with the bower install bootstrap-sasscommand.
我个人用bower install bootstrap-sass命令安装它。
This installs Bootstrap and Jquery in the bower_componentsfolder.
这会在bower_components文件夹中安装 Bootstrap 和 Jquery 。
Configuration
配置
In your _config.yml add :
在你的 _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
If you want to use javascript, in your _includes/footer.html add :
如果你想使用 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>
Use
利用
In css/main.scssdelete previous content and add
在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";
You can see all variables available in bower_components/bootstrap-sass/assets/stylesheets/bootstrap/_variables.scss
你可以看到所有可用的变量 bower_components/bootstrap-sass/assets/stylesheets/bootstrap/_variables.scss
You can remove you old _sass folder.
您可以删除旧的 _sass 文件夹。
Now your css file is generated at each build.
现在您的 css 文件在每次构建时生成。
回答by Jonas Vogel
Update for Bootstrap 4 Beta
Bootstrap 4 Beta 更新
As Bootstrap 4 Beta now runs on Sass, you could use the "official" bower package.
由于 Bootstrap 4 Beta 现在在 Sass 上运行，您可以使用“官方” bower 包。
Here's what I did:
这是我所做的：
1. Install Bootstrap using Bower
1. 使用 Bower 安装 Bootstrap
bower install bootstrap#v4.0.0-beta --saveto install Bootstrap and its dependencies to the bower_componentsfolder.
bower install bootstrap#v4.0.0-beta --save将 Bootstrap 及其依赖项安装到该bower_components文件夹中。
2. Configuration
2. 配置
In _config.yml, I changed the Sass folder and excluded bower_componentsfrom processing:
在 中_config.yml，我更改了 Sass 文件夹并bower_components从处理中排除：
sass:
sass_dir: assets/css
# Exclude from processing.
exclude:
- bower_components
3. Sass
3. 萨斯
I changed assets/css/main.scssas following:
我改变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)Note that the second import statement has to be relative to the Sass directory specified in _config.yml. Since I choose it to be the folder that also contains the main.scss, the asset linking in your favourite IDE (e.g. WebStorm) won't break.
(1)注意第二个import语句必须是相对于_config.yml. 由于我选择它作为还包含 的文件夹main.scss，因此您最喜欢的 IDE（例如 WebStorm）中的资产链接不会中断。
(2)To overwrite Bootstrap Sass variables, I created assets/css/_variables.scsswhich has to be imported before the Bootstrap library.
(2)为了覆盖 Bootstrap Sass 变量，我创建assets/css/_variables.scss了必须在 Bootstrap 库之前导入的变量。
4. Javascript
4. Javascript
Since I did not find a way to use the JS shipped into bower_components, I choosed to include the CDN versions as proposed by Bootstrap:
由于我没有找到使用 JS 的方法bower_components，我选择包含Bootstrap 建议的 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>
回答by JerryGoyal
Update for Bootstrap 4.3.1 & Jekyll 4.0
Bootstrap 4.3.1 和 Jekyll 4.0 的更新
you can use bunder to install BS into your site
您可以使用 bunder 将 BS 安装到您的站点中
bundle install bootstrap
add it to gem file:
将其添加到 gem 文件中：
gem 'bootstrap', '~> 4.3.1'
get the path of BS
获取BS的路径
bundle info bootstrap
Add that path to _config.yml
将该路径添加到 _config.yml
sass:
load_paths:
- _sass
- C:/Ruby26-x64/lib/ruby/gems/2.6.0/gems/bootstrap-4.3.1/assets/stylesheets
relative path can also be added instead.
也可以添加相对路径。
Finally, add bootstrap to style.scss
最后，将引导程序添加到 style.scss
@import "bootstrap";
