bootstrap sass
v3.4.1
bootstrap-sass es una versión de Bootstrap 3 con tecnología Sass, lista para instalarse directamente en sus aplicaciones con tecnología Sass.
Este es Bootstrap 3 . Para Bootstrap 4 , use Bootstrap rubygem si usa Ruby, y el repositorio principal en caso contrario.
Consulte la guía adecuada para el entorno de su elección:
Rubí sobre rieles.
Cenador.
npm/Node.js.
bootstrap-sass es fácil de introducir en Rails con la canalización de activos.
En su Gemfile necesita agregar la gema bootstrap-sass y asegurarse de que la gema sass-rails esté presente; se agrega a las nuevas aplicaciones Rails de forma predeterminada.
gema 'bootstrap-sass', '~> 3.4.1'gema 'sassc-rails', '>= 2.1.0'
bundle install y reinicie su servidor para que los archivos estén disponibles a través de la canalización.
Importe estilos Bootstrap en app/assets/stylesheets/application.scss :
// "bootstrap-sprockets" debe importarse antes que "bootstrap" y "bootstrap/variables"@import "bootstrap-sprockets";@import "bootstrap";
bootstrap-sprockets debe importarse antes de bootstrap para que funcionen las fuentes de los iconos.
Asegúrese de que el archivo tenga la extensión .scss (o .sass para la sintaxis Sass). Si acaba de generar una nueva aplicación Rails, es posible que venga con un archivo .css . Si este archivo existe, se entregará en lugar de Sass, así que cámbiele el nombre:
$ mv aplicación/activos/hojas de estilo/aplicación.css aplicación/activos/hojas de estilo/aplicación.scss
Luego, elimine todos los *= require_self y *= require_tree . declaraciones del archivo sass. En su lugar, utilice @import para importar archivos Sass.
No utilice *= require en Sass o sus otras hojas de estilo no podrán acceder a los mixins o variables de Bootstrap.
Bootstrap JavaScript depende de jQuery. Si estás usando Rails 5.1+, agrega la gema jquery-rails a tu Gemfile:
gema 'jquery-rails'
$ instalación del paquete
Requerir Bootstrap Javascripts en app/assets/javascripts/application.js :
//= requiere jquery//= requiere bootstrap-sprockets
bootstrap-sprockets y bootstrap no deben incluirse en application.js .
bootstrap-sprockets proporciona archivos Bootstrap Javascript individuales ( alert.js o dropdown.js , por ejemplo), mientras que bootstrap proporciona un archivo concatenado que contiene todos los Bootstrap Javascripts.
Cuando utilice el paquete bootstrap-sass Bower en lugar de la gema en Rails, configure los recursos en config/application.rb :
# Rutas de activos de Bowerroot.join('vendor', 'assets', 'bower_components').to_s.tap do |bower_path| config.sass.load_paths << ruta_bower
config.assets.paths << bower_pathend# Precompilar fuentes Bootstrapconfig.assets.precompile << %r(bootstrap-sass/assets/fonts/bootstrap/[w-]+.(?:eot|svg|ttf|woff2?)$ )# Precisión mínima del número de Sass requerida por bootstrap-sass::Sass::Script::Value::Number.precision = [8, ::Sass::Script::Valor::Número.precisión].max Reemplace las declaraciones Bootstrap @import en application.scss con:
$icon-font-path: "bootstrap-sass/assets/fonts/bootstrap/";@import "bootstrap-sass/assets/stylesheets/bootstrap-sprockets";@import "bootstrap-sass/assets/stylesheets/bootstrap";
Reemplace la directiva Bootstrap require en application.js con:
//= requiere bootstrap-sass/assets/javascripts/bootstrap-sprockets
Asegúrese de que sprockets-rails tenga al menos la versión 2.1.4.
bootstrap-sass ya no es compatible con Rails 3. La última versión de bootstrap-sass compatible con Rails 3.2 es v3.1.1.0.
El paquete bootstrap-sass Bower es compatible con node-sass 3.2.0+. Puedes instalarlo con:
$ instalación de bower bootstrap-sass
Sass, JS y todos los demás activos se encuentran en activos.
De forma predeterminada, el campo principal bower.json enumera solo el _bootstrap.scss principal y todos los activos estáticos (fuentes y JS). Esto es compatible por defecto con administradores de activos como wiredep.
Si usa mincer con node-sass, importe Bootstrap así:
En application.css.ejs.scss (NB .css.ejs.scss ):
// Importar rutas de activos de Mincer ayudante integración@import "bootstrap-mincer";@import "bootstrap";
En application.js :
//= requiere piñones de arranque
Vea también este ejemplo de manifest.js para mincer.
$ npm instala bootstrap-sass
De forma predeterminada, se importa todo Bootstrap.
También puede importar componentes explícitamente. Para comenzar con una lista completa de módulos, copie el archivo _bootstrap.scss en sus activos como _bootstrap-custom.scss . Luego comente los componentes que no desea de _bootstrap-custom . En el archivo Sass de la aplicación, reemplace @import 'bootstrap' con:
@import 'bootstrap-personalizado';
bootstrap-sass requiere una precisión mínima del número de Sass de 8 (el valor predeterminado es 5).
La precisión se establece para Ruby automáticamente cuando se usa la gema sassc-rails . Cuando utilices la versión npm o Bower con Ruby, puedes configurarlo con:
::Sass::Script::Valor::Número.precisión = [8, ::Sass::Script::Valor::Número.precisión].max
Bootstrap requiere el uso de Autoprefixer. Autoprefixer agrega prefijos de proveedores a las reglas CSS usando valores de Can I Use.
Para igualar el nivel de compatibilidad del navegador de Bootstrap, configure la opción de browsers de Autoprefixer en:
[ "Android 2.3", "Android >= 4", "Chrome >= 20", "Firefox >= 24", "Explorer >= 8", "iOS >= 6", "Opera >= 12", "Safari >= 6"]
assets/javascripts/bootstrap.js contiene todo el JavaScript de Bootstrap, concatenado en el orden correcto.
Si usa Sprockets o Mincer, puede requerir bootstrap-sprockets en su lugar para cargar los módulos individuales:
// Cargar todo el JavaScript Bootstrap //= requiere bootstrap-sprockets
También puede cargar módulos individuales, siempre que también requiera dependencias. Puede consultar las dependencias en la documentación de Bootstrap JS.
//= requiere arranque/scrollspy//= requiere arranque/modal//= requiere arranque/desplegable
Se hace referencia a las fuentes como:
"#{$icon-font-path}#{$icon-font-name}.eot" $icon-font-path tiene como valor predeterminado bootstrap/ si se utilizan ayudantes de ruta de activos, y ../fonts/bootstrap/ en caso contrario.
Cuando utilice bootstrap-sass con Compass, Sprockets o Mincer, debe importar los ayudantes de ruta relevantes antes que Bootstrap, por ejemplo:
@import "bootstrap-compass";@import "bootstrap";
Importe Bootstrap a un archivo Sass (por ejemplo, application.scss ) para obtener todos los estilos, mixins y variables de Bootstrap.
@importar "arranque";
También puedes incluir un tema Bootstrap opcional:
@import "arranque/tema";
La lista completa de variables de Bootstrap se puede encontrar aquí. Puede anularlos simplemente redefiniendo la variable antes de la directiva @import , por ejemplo:
$navbar-default-bg: #312312;$naranja claro: #ff8c00;$navbar-default-color: $naranja claro;@import "bootstrap";
Bootstrap está disponible como módulo Eyeglass. Después de instalar Bootstrap a través de NPM, puede importar la biblioteca Bootstrap a través de:
@importar "bootstrap-sass/bootstrap"
o importe solo las partes de Bootstrap que necesita:
@import "bootstrap-sass/bootstrap/variables";@import "bootstrap-sass/bootstrap/mixins";@import "bootstrap-sass/bootstrap/carrusel";
La versión Bootstrap para Sass puede diferir de la versión anterior en el último número, conocido como PATCH. La versión del parche puede estar por delante de la versión menor correspondiente. Esto sucede cuando necesitamos publicar cambios específicos de Sass.
Antes de v3.3.2, la versión Bootstrap para Sass solía reflejar la versión anterior, con un número adicional para cambios específicos de Sass. Esto se cambió debido a problemas de compatibilidad con Bower y npm.
Las versiones anteriores frente a las versiones Bootstrap para Sass son:
| Río arriba | Hablar con descaro a |
|---|---|
| 3.3.4+ | mismo |
| 3.3.2 | 3.3.3 |
| <= 3.3.1 | 3.3.1.x |
Consulte siempre CHANGELOG.md cuando actualice.
Si desea ayudar con el desarrollo de bootstrap-sass, lea esta sección.
Mantener bootstrap-sass sincronizado con los cambios ascendentes de Bootstrap solía ser un proceso manual propenso a errores y que requería mucho tiempo. Con Bootstrap 3 hemos introducido un convertidor que automatiza esto.
Nota: si solo desea utilizar Bootstrap 3, consulte la sección de instalación anterior.
Los cambios ascendentes en el proyecto Bootstrap ahora se pueden implementar usando la tarea convert de rake.
A continuación se muestra un ejemplo de ejecución que desplegaría la rama master del repositorio principal de twbs/bootstrap:
rake convert
Esto convertirá el último LESS a Sass y lo actualizará al último JS. Para convertir una rama o versión específica, pase el nombre de la rama o el hash de confirmación como primer argumento de la tarea:
rake convert[e8a1df5f060bf7e6631554648e0abde150aedbe4]
El script de conversión más reciente se encuentra aquí y hace lo siguiente:
Convierte archivos Bootstrap LESS ascendentes en su archivo SCSS correspondiente.
Copia todo el JavaScript ascendente en assets/javascripts/bootstrap , un manifiesto de Sprockets en assets/javascripts/bootstrap-sprockets.js y una concatenación en assets/javascripts/bootstrap.js .
Copia todos los archivos de fuentes ascendentes en assets/fonts/bootstrap .
Establece Bootstrap::BOOTSTRAP_SHA en version.rb en la rama sha.
Este convertidor convierte completamente LESS original a SCSS. La conversión es automática pero requiere instrucciones para ciertas transformaciones (ver salida del convertidor). Envíe los problemas de GitHub etiquetados con conversion .
bootstrap-sass tiene varios contribuyentes importantes:
Thomas McDonald
Tristán Harward
Peter Gumeson
Gleb Mazovetskiy
y un número significativo de otros contribuyentes.
bootstrap-sass se utiliza para crear algunos proyectos increíbles en toda la web, incluidos Diaspora, rails_admin, Michael Hartl's Rails Tutorial, gitlabhq y kandan.
