Подтвердить что ты не робот

Добавление Bootstrap в Jekyll

Я новичок в Jekyll и хотел бы задействовать некоторые функции Twitter Bootstrap. Кто-нибудь это сделал, и если да, есть ли у вас какие-либо советы? Я бы пошел с Jekyll-Bootstrap, но больше нет поддержки. Я построил сайт Jekyll, и я надеюсь, что вы сможете найти Bootstrap.

4b9b3361

Ответ 1

Поскольку Jekyll поддерживает sass, вы можете использовать bootstrap-sass.

Я лично устанавливаю его с помощью команды bower install bootstrap-sass.

Это устанавливает Bootstrap и JQuery в папку bower_components.

Конфигурация

В вашем _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 создается в каждой сборке.

Ответ 2

Обновление для бета-версии Bootstrap 4

Поскольку Bootstrap 4 Beta теперь работает на Sass, вы можете использовать "официальный" пакет bower.

Вот что я сделал:

1. Установите Bootstrap с помощью Bower

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. Sass

Я изменил 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) Обратите внимание, что второй оператор импорта должен относиться к каталогу Sass, указанному в _config.yml. Поскольку я выбираю его как папку, которая также содержит main.scss, ссылка на ресурс в вашей любимой среде IDE (например, WebStorm) не будет прерываться.

(2) Чтобы перезаписать переменные Bootstrap Sass, я создал assets/css/_variables.scss, который нужно импортировать перед библиотекой Bootstrap.

4. Javascript

Поскольку я не нашел способ использовать JS, отправленный в bower_components, я решил включить версии CDN как было предложено 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>