bootstrap sass
v3.4.1
bootstrap-sass est une version Sass de Bootstrap 3, prête à être intégrée directement dans vos applications Sass.
Il s'agit de Bootstrap 3 . Pour Bootstrap 4, utilisez le rubygem Bootstrap si vous utilisez Ruby, et le dépôt principal sinon.
Veuillez consulter le guide approprié pour l'environnement de votre choix :
Ruby sur Rails.
Tonnelle.
npm/Node.js.
bootstrap-sass est facile à intégrer dans Rails avec le pipeline d'actifs.
Dans votre Gemfile, vous devez ajouter la gemme bootstrap-sass et vous assurer que la gemme sass-rails est présente - elle est ajoutée aux nouvelles applications Rails par défaut.
gem 'bootstrap-sass', '~> 3.4.1' gem 'sassc-rails', '>= 2.1.0'
bundle install et redémarrez votre serveur pour rendre les fichiers disponibles via le pipeline.
Importez les styles Bootstrap dans app/assets/stylesheets/application.scss :
// "bootstrap-sprockets" doit être importé avant "bootstrap" et "bootstrap/variables"@import "bootstrap-sprockets";@import "bootstrap";
bootstrap-sprockets doivent être importés avant bootstrap pour que les polices d'icônes fonctionnent.
Assurez-vous que le fichier a l'extension .scss (ou .sass pour la syntaxe Sass). Si vous venez de générer une nouvelle application Rails, elle peut être accompagnée d'un fichier .css . Si ce fichier existe, il sera servi à la place de Sass, alors renommez-le :
$ mv app/assets/stylesheets/application.css app/assets/stylesheets/application.scss
Ensuite, supprimez tous les *= require_self et *= require_tree . déclarations du fichier sass. Utilisez plutôt @import pour importer des fichiers Sass.
N'utilisez pas *= require dans Sass ou vos autres feuilles de style ne pourront pas accéder aux mixins ou variables Bootstrap.
Bootstrap JavaScript dépend de jQuery. Si vous utilisez Rails 5.1+, ajoutez la gem jquery-rails à votre Gemfile :
gemme 'jquery-rails'
$ installation groupée
Exiger des Javascripts Bootstrap dans app/assets/javascripts/application.js :
//= nécessite jquery //= nécessite des pignons d'amorçage
bootstrap-sprockets et bootstrap ne doivent pas tous deux être inclus dans application.js .
bootstrap-sprockets fournit des fichiers Javascript Bootstrap individuels ( alert.js ou dropdown.js , par exemple), tandis que bootstrap fournit un fichier concaténé contenant tous les Javascripts Bootstrap.
Lorsque vous utilisez le package bootstrap-sass Bower au lieu de la gemme dans Rails, configurez les actifs dans config/application.rb :
# Chemins d'actifs Bowerroot.join('vendor', 'assets', 'bower_components').to_s.tap do |bower_path| config.sass.load_paths << bower_path
config.assets.paths << bower_pathend# Précompile Bootstrap fontsconfig.assets.precompile << %r(bootstrap-sass/assets/fonts/bootstrap/[w-]+.(?:eot|svg|ttf|woff2?)$ )# Précision minimale du nombre Sass requise par bootstrap-sass::Sass::Script::Value::Number.precision = [8, ::Sass::Script::Value::Number.precision].max Remplacez les instructions Bootstrap @import dans application.scss par :
$icon-font-path : "bootstrap-sass/assets/fonts/bootstrap/";@import "bootstrap-sass/assets/stylesheets/bootstrap-sprockets";@import "bootstrap-sass/assets/stylesheets/bootstrap";
Remplacez la directive Bootstrap require dans application.js par :
//= nécessite bootstrap-sass/assets/javascripts/bootstrap-sprockets
Veuillez vous assurer que sprockets-rails sont au moins v2.1.4.
bootstrap-sass n'est plus compatible avec Rails 3. La dernière version de bootstrap-sass compatible avec Rails 3.2 est la v3.1.1.0.
Le package bootstrap-sass Bower est compatible avec node-sass 3.2.0+. Vous pouvez l'installer avec :
$ bower installer bootstrap-sass
Sass, JS et tous les autres actifs sont situés dans les actifs.
Par défaut, le champ principal bower.json répertorie uniquement le _bootstrap.scss principal et tous les actifs statiques (polices et JS). Ceci est compatible par défaut avec les gestionnaires d'actifs tels que wiredep.
Si vous utilisez mincer avec node-sass, importez Bootstrap comme ceci :
Dans application.css.ejs.scss (NB .css.ejs.scss ) :
// Importation des chemins d'actifs du hachoir intégration d'assistance@import "bootstrap-mincer";@import "bootstrap";
Dans application.js :
//= nécessite des pignons d'amorçage
Voir aussi cet exemple manifest.js pour hachoir.
$ npm installer bootstrap-sass
Par défaut, tout Bootstrap est importé.
Vous pouvez également importer des composants explicitement. Pour commencer avec une liste complète des modules, copiez le fichier _bootstrap.scss dans vos actifs sous le nom _bootstrap-custom.scss . Ensuite, commentez les composants dont vous ne souhaitez pas _bootstrap-custom . Dans le fichier Sass de l'application, remplacez @import 'bootstrap' par :
@import 'bootstrap-custom';
bootstrap-sass nécessite une précision minimale du nombre Sass de 8 (la valeur par défaut est 5).
La précision est définie automatiquement pour Ruby lors de l'utilisation de la gemme sassc-rails . Lorsque vous utilisez la version npm ou Bower avec Ruby, vous pouvez la définir avec :
::Sass::Script::Value::Number.precision = [8, ::Sass::Script::Value::Number.precision].max
Bootstrap nécessite l'utilisation d'Autoprefixer. Autoprefixer ajoute des préfixes de fournisseur aux règles CSS en utilisant les valeurs de Can I Use.
Pour correspondre au niveau de compatibilité du navigateur Bootstrap en amont, définissez l'option browsers d'Autoprefixer sur :
[ "Android 2.3", "Android >= 4", "Chrome >= 20", "Firefox >= 24", "Explorer >= 8", "iOS >= 6", "Opera >= 12", "Safari >= 6"]
assets/javascripts/bootstrap.js contient tout le JavaScript de Bootstrap, concaténé dans le bon ordre.
Si vous utilisez Sprockets ou Mincer, vous pouvez demander à la place bootstrap-sprockets pour charger les modules individuels :
// Charger tout le JavaScript Bootstrap // = nécessite des pignons d'amorçage
Vous pouvez également charger des modules individuels, à condition que vous ayez également besoin de dépendances. Vous pouvez vérifier les dépendances dans la documentation Bootstrap JS.
//= nécessite bootstrap/scrollspy//= nécessite bootstrap/modal//= nécessite bootstrap/dropdown
Les polices sont référencées comme suit :
"#{$icon-font-path}#{$icon-font-name}.eot" $icon-font-path est par défaut bootstrap/ si des assistants de chemin d'actifs sont utilisés, et ../fonts/bootstrap/ sinon.
Lorsque vous utilisez bootstrap-sass avec Compass, Sprockets ou Mincer, vous devez importer les assistants de chemin pertinents avant Bootstrap lui-même, par exemple :
@import "bootstrap-compass";@import "bootstrap";
Importez Bootstrap dans un fichier Sass (par exemple, application.scss ) pour obtenir tous les styles, mixins et variables de Bootstrap !
@import "bootstrap" ;
Vous pouvez également inclure un thème Bootstrap facultatif :
@import "bootstrap/thème" ;
La liste complète des variables Bootstrap peut être trouvée ici. Vous pouvez les remplacer en redéfinissant simplement la variable avant la directive @import , par exemple :
$navbar-default-bg : #312312;$orange clair : #ff8c00;$navbar-default-color : $orange clair;@import "bootstrap";
Bootstrap est disponible en tant que module Eyeglass. Après avoir installé Bootstrap via NPM, vous pouvez importer la bibliothèque Bootstrap via :
@import "bootstrap-sass/bootstrap"
ou importez uniquement les parties de Bootstrap dont vous avez besoin :
@import "bootstrap-sass/bootstrap/variables";@import "bootstrap-sass/bootstrap/mixins";@import "bootstrap-sass/bootstrap/carousel";
La version Bootstrap pour Sass peut différer de la version amont par le dernier numéro, connu sous le nom de PATCH. La version du correctif peut être antérieure à la version mineure correspondante en amont. Cela se produit lorsque nous devons publier des modifications spécifiques à Sass.
Avant la version 3.3.2, la version Bootstrap pour Sass reflétait la version en amont, avec un numéro supplémentaire pour les modifications spécifiques à Sass. Cela a été modifié en raison de problèmes de compatibilité Bower et npm.
Les versions en amont par rapport aux versions Bootstrap pour Sass sont :
| En amont | Toupet |
|---|---|
| 3.3.4+ | même |
| 3.3.2 | 3.3.3 |
| <= 3.3.1 | 3.3.1.x |
Reportez-vous toujours à CHANGELOG.md lors de la mise à niveau.
Si vous souhaitez aider au développement de bootstrap-sass lui-même, lisez cette section.
Garder bootstrap-sass synchronisé avec les modifications en amont de Bootstrap était auparavant un processus manuel long et sujet aux erreurs. Avec Bootstrap 3, nous avons introduit un convertisseur qui automatise cela.
Remarque : si vous souhaitez simplement utiliser Bootstrap 3, consultez la section d'installation ci-dessus.
Les modifications en amont du projet Bootstrap peuvent désormais être intégrées à l'aide de la tâche convert de rake.
Voici un exemple d'exécution qui extrairait la branche master du dépôt principal twbs/bootstrap :
rake convert
Cela convertira le dernier LESS en Sass et mettra à jour vers le dernier JS. Pour convertir une branche ou une version spécifique, transmettez le nom de la branche ou le hachage de validation comme premier argument de la tâche :
rake convert[e8a1df5f060bf7e6631554648e0abde150aedbe4]
Le dernier script de conversion se trouve ici et effectue les opérations suivantes :
Convertit les fichiers Bootstrap LESS en amont en fichier SCSS correspondant.
Copie tout le JavaScript en amont dans assets/javascripts/bootstrap , un manifeste Sprockets dans assets/javascripts/bootstrap-sprockets.js et une concaténation dans assets/javascripts/bootstrap.js .
Copie tous les fichiers de polices en amont dans assets/fonts/bootstrap .
Définit Bootstrap::BOOTSTRAP_SHA dans version.rb sur la branche sha.
Ce convertisseur convertit entièrement l'original LESS en SCSS. La conversion est automatique mais nécessite des instructions pour certaines transformations (voir sortie du convertisseur). Veuillez soumettre les problèmes GitHub marqués avec conversion .
bootstrap-sass compte un certain nombre de contributeurs majeurs :
Thomas McDonald
Tristan Harward
Peter Gumeson
Gleb Mazovetski
et un nombre important d'autres contributeurs.
bootstrap-sass est utilisé pour créer des projets impressionnants sur tout le Web, notamment Diaspora, rails_admin, le didacticiel Rails de Michael Hartl, gitlabhq et kandan.
