twitter bootstrap - Añadiendo Bootstrap a Jekyll
twitter-bootstrap jekyll-bootstrap (2)
Soy nuevo en Jekyll y me gustaría incorporar algunas de las funciones de Twitter Bootstrap. ¿Alguien ha hecho esto y, si es así, tienes algún consejo? Habría ido con Jekyll-Bootstrap, pero ya no hay soporte para eso. He construido mi sitio Jekyll y espero que haya una forma de recuperar Bootstrap.
Actualización para Bootstrap 4 Beta
Como Bootstrap 4 Beta ahora se ejecuta en Sass , puede usar el paquete de bower "oficial".
Esto es lo que hice:
1. Instale Bootstrap utilizando Bower
bower install bootstrap#v4.0.0-beta --save para instalar Bootstrap y sus dependencias en la carpeta bower_components .
2. Configuración
En _config.yml , cambié la carpeta Sass y bower_components a bower_components del procesamiento:
sass:
sass_dir: assets/css
# Exclude from processing.
exclude:
- bower_components
3. Sass
Cambié los assets/css/main.scss siguiente manera:
---
# 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) Tenga en cuenta que la segunda declaración de importación debe ser relativa al directorio Sass especificado en _config.yml . Como lo elegí como la carpeta que también contiene main.scss , el enlace de activos en su IDE favorito (por ejemplo, WebStorm) no se romperá.
(2) Para sobrescribir las variables Bootstrap Sass, creé assets/css/_variables.scss que se debe importar antes de la biblioteca Bootstrap.
4. Javascript
Como no encontré una forma de usar el JS enviado a los bower_components , decidí incluir las versiones de CDN según lo propuesto por 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>
Como Jekyll soporta Sass de forma nativa, puedes usar bootstrap-sass .
Personalmente lo instalo con el comando bower install bootstrap-sass .
Esto instala Bootstrap y Jquery en la carpeta bower_components .
Configuración
En tu _config.yml agrega:
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
Si desea utilizar javascript, en sus _includes / footer.html agregue:
<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>
Utilizar
En css/main.scss borre el contenido anterior y agregue
---
# 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";
Puede ver todas las variables disponibles en bower_components/bootstrap-sass/assets/stylesheets/bootstrap/_variables.scss
Puedes eliminar tu vieja carpeta _sass.
Ahora su archivo css se genera en cada compilación.