问题
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.
回答1:
As Jekyll natively supports sass, you can use bootstrap-sass.
I personally install it with the bower install bootstrap-sass
command.
This installs Bootstrap and Jquery in the bower_components
folder.
Configuration
In your _config.yml add :
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
If you want to use javascript, in your _includes/footer.html add :
<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.scss
delete previous content and add
---
# 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
You can remove you old _sass folder.
Now your css file is generated at each build.
回答2:
Update for Bootstrap 4 Beta
As Bootstrap 4 Beta now runs on Sass, you could use the "official" bower package.
Here's what I did:
1. Install Bootstrap using Bower
bower install bootstrap#v4.0.0-beta --save
to install Bootstrap and its dependencies to the bower_components
folder.
2. Configuration
In _config.yml
, I changed the Sass folder and excluded bower_components
from processing:
sass:
sass_dir: assets/css
# Exclude from processing.
exclude:
- bower_components
3. Sass
I changed assets/css/main.scss
as following:
---
# 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.
(2) To overwrite Bootstrap Sass variables, I created assets/css/_variables.scss
which has to be imported before the Bootstrap library.
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:
<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>
回答3:
Update for Bootstrap 4.3.1 & Jekyll 4.0
you can use bunder to install BS into your site
bundle install bootstrap
add it to gem file:
gem 'bootstrap', '~> 4.3.1'
get the path of BS
bundle info bootstrap
Add that path to _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
@import "bootstrap";
https://getbootstrap.com/docs/4.3/getting-started/download/
来源:https://stackoverflow.com/questions/28733425/adding-bootstrap-to-jekyll