bootstrap sass
v3.4.1
bootstrap-sass ist eine Sass-basierte Version von Bootstrap 3, die direkt in Ihre Sass-basierten Anwendungen integriert werden kann.
Das ist Bootstrap 3 . Verwenden Sie für Bootstrap 4 das Bootstrap-Rubygem, wenn Sie Ruby verwenden, andernfalls das Haupt-Repo.
Bitte beachten Sie den entsprechenden Leitfaden für die Umgebung Ihrer Wahl:
Ruby auf Schienen.
Laube.
npm / Node.js.
bootstrap-sass lässt sich mit der Asset-Pipeline einfach in Rails einfügen.
In Ihrer Gem-Datei müssen Sie das bootstrap-sass -Gem hinzufügen und sicherstellen, dass das sass-rails Gem vorhanden ist – es wird standardmäßig zu neuen Rails-Anwendungen hinzugefügt.
gem 'bootstrap-sass', '~> 3.4.1'gem 'sassc-rails', '>= 2.1.0'
bundle install und starten Sie Ihren Server neu, um die Dateien über die Pipeline verfügbar zu machen.
Bootstrap-Stile in app/assets/stylesheets/application.scss importieren:
// „bootstrap-sprockets“ muss vor „bootstrap“ und „bootstrap/variables“ importiert werden@import „bootstrap-sprockets“;@import „bootstrap“;
bootstrap-sprockets müssen vor bootstrap importiert werden, damit die Symbolschriftarten funktionieren.
Stellen Sie sicher, dass die Datei die Erweiterung .scss (oder .sass für Sass-Syntax) hat. Wenn Sie gerade eine neue Rails-App generiert haben, enthält diese möglicherweise stattdessen eine .css Datei. Wenn diese Datei vorhanden ist, wird sie anstelle von Sass bereitgestellt. Benennen Sie sie daher um:
$ mv app/assets/stylesheets/application.css app/assets/stylesheets/application.scss
Entfernen Sie dann alle *= require_self und *= require_tree . Aussagen aus der Sass-Datei. Verwenden Sie stattdessen @import , um Sass-Dateien zu importieren.
Verwenden Sie *= require nicht in Sass, da Ihre anderen Stylesheets sonst nicht auf die Bootstrap-Mixins oder -Variablen zugreifen können.
Bootstrap-JavaScript hängt von jQuery ab. Wenn Sie Rails 5.1+ verwenden, fügen Sie das jquery-rails Gem zu Ihrer Gemfile hinzu:
gem 'jquery-rails'
$ Bundle-Installation
Bootstrap-Javascripts in app/assets/javascripts/application.js erforderlich:
//= Jquery erforderlich //= Bootstrap-Sprockets erforderlich
bootstrap-sprockets und bootstrap sollten nicht beide in application.js enthalten sein.
bootstrap-sprockets stellt einzelne Bootstrap-Javascript-Dateien bereit (z. B. alert.js oder dropdown.js ), während bootstrap eine verkettete Datei bereitstellt, die alle Bootstrap-Javascripts enthält.
Wenn Sie das Bootstrap-Sass-Bower-Paket anstelle des Gems in Rails verwenden, konfigurieren Sie Assets in config/application.rb :
# Bower Asset pathsroot.join('vendor', 'assets', 'bower_components').to_s.tap do |bower_path| config.sass.load_paths << Bower_Pfad
config.assets.paths << bower_pathend# Bootstrap-Schriftarten vorkompilierenconfig.assets.precompile << %r(bootstrap-sass/assets/fonts/bootstrap/[w-]+.(?:eot|svg|ttf|woff2?)$ )# Mindestgenauigkeit der Sass-Zahlen, die erforderlich ist bootstrap-sass::Sass::Script::Value::Number.precision = [8, ::Sass::Script::Value::Number.precision].max Ersetzen Sie Bootstrap @import -Anweisungen in application.scss durch:
$icon-font-path: "bootstrap-sass/assets/fonts/bootstrap/";@import "bootstrap-sass/assets/stylesheets/bootstrap-sprockets";@import "bootstrap-sass/assets/stylesheets/bootstrap";
Ersetzen Sie die Bootstrap- require -Direktive in application.js durch:
//= Erforderlich Bootstrap-Sass/Assets/Javascripts/Bootstrap-Sprockets
Bitte stellen Sie sicher, dass sprockets-rails mindestens v2.1.4 ist.
Bootstrap-Sass ist nicht mehr mit Rails 3 kompatibel. Die neueste Version von Bootstrap-Sass, die mit Rails 3.2 kompatibel ist, ist v3.1.1.0.
Das Bootstrap-Sass Bower-Paket ist mit Node-Sass 3.2.0+ kompatibel. Sie können es installieren mit:
$ Bower Bootstrap-Sass installieren
Sass, JS und alle anderen Vermögenswerte befinden sich unter Vermögenswerte.
Standardmäßig werden im Hauptfeld bower.json nur die Hauptdatei _bootstrap.scss und alle statischen Assets (Schriftarten und JS) aufgeführt. Dies ist standardmäßig mit Vermögensverwaltern wie wiredep kompatibel.
Wenn Sie Mincer mit Node-Sass verwenden, importieren Sie Bootstrap wie folgt:
In application.css.ejs.scss (NB .css.ejs.scss ):
// Import Mincer Asset Paths Helper Integration@import "bootstrap-mincer";@import "bootstrap";
In application.js :
//= Bootstrap-Sprockets erforderlich
Siehe auch dieses Beispiel manifest.js für Mincer.
$ npm installiere Bootstrap-Sass
Standardmäßig wird Bootstrap vollständig importiert.
Sie können Komponenten auch explizit importieren. Um mit einer vollständigen Liste der Module zu beginnen, kopieren Sie die Datei _bootstrap.scss als _bootstrap-custom.scss in Ihre Assets. Kommentieren Sie dann nicht gewünschte Komponenten aus _bootstrap-custom aus. Ersetzen Sie in der Sass-Anwendungsdatei @import 'bootstrap' durch:
@import 'bootstrap-custom';
Bootstrap-Sass erfordert eine Sass-Zahlengenauigkeit von mindestens 8 (Standard ist 5).
Bei Verwendung des sassc-rails -Gems wird die Präzision für Ruby automatisch festgelegt. Wenn Sie die npm- oder Bower-Version mit Ruby verwenden, können Sie sie wie folgt festlegen:
::Sass::Script::Value::Number.precision = [8, ::Sass::Script::Value::Number.precision].max
Bootstrap erfordert die Verwendung von Autoprefixer. Autoprefixer fügt CSS-Regeln Herstellerpräfixe hinzu und verwendet dabei Werte aus „Can I Use“.
Um dem Grad der Browserkompatibilität von Upstream-Bootstrap zu entsprechen, setzen Sie die browsers von Autoprefixer auf:
[ „Android 2.3“, „Android >= 4“, „Chrome >= 20“, „Firefox >= 24“, „Explorer >= 8“, „iOS >= 6“, „Opera >= 12“, „Safari >= 6"]
assets/javascripts/bootstrap.js enthält das gesamte JavaScript von Bootstrap, verkettet in der richtigen Reihenfolge.
Wenn Sie Sprockets oder Mincer verwenden, können Sie stattdessen bootstrap-sprockets zum Laden der einzelnen Module anfordern:
// Alles Bootstrap-JavaScript laden //= Bootstrap-Sprockets erfordern
Sie können auch einzelne Module laden, sofern Sie auch Abhängigkeiten benötigen. Sie können Abhängigkeiten in der Bootstrap JS-Dokumentation überprüfen.
//= Bootstrap/Scrollspy erfordern//= Bootstrap/Modal erfordern//= Bootstrap/Dropdown erfordern
Die Schriftarten werden wie folgt bezeichnet:
„#{$icon-font-path}#{$icon-font-name}.eot“ $icon-font-path ist standardmäßig bootstrap/ wenn Asset-Pfad-Helfer verwendet werden, andernfalls ../fonts/bootstrap/ .
Wenn Sie Bootstrap-Sass mit Compass, Sprockets oder Mincer verwenden, müssen Sie die entsprechenden Pfadhelfer vor Bootstrap selbst importieren, zum Beispiel:
@import "bootstrap-compass";@import "bootstrap";
Importieren Sie Bootstrap in eine Sass-Datei (z. B. application.scss ), um alle Stile, Mixins und Variablen von Bootstrap zu erhalten!
@import „bootstrap“;
Sie können auch ein optionales Bootstrap-Theme einbinden:
@import „bootstrap/theme“;
Die vollständige Liste der Bootstrap-Variablen finden Sie hier. Sie können diese überschreiben, indem Sie einfach die Variable vor der @import -Direktive neu definieren, z. B.:
$navbar-default-bg: #312312;$light-orange: #ff8c00;$navbar-default-color: $light-orange;@import "bootstrap";
Bootstrap ist als Eyeglass-Modul verfügbar. Nach der Installation von Bootstrap über NPM können Sie die Bootstrap-Bibliothek importieren über:
@import „bootstrap-sass/bootstrap“
oder importieren Sie nur die Teile von Bootstrap, die Sie benötigen:
@import "bootstrap-sass/bootstrap/variables";@import "bootstrap-sass/bootstrap/mixins";@import "bootstrap-sass/bootstrap/carousel";
Die Bootstrap-for-Sass-Version kann sich in der letzten Nummer, bekannt als PATCH, von der Upstream-Version unterscheiden. Die Patch-Version ist möglicherweise der entsprechenden Upstream-Minor-Version voraus. Dies geschieht, wenn wir Sass-spezifische Änderungen veröffentlichen müssen.
Vor v3.3.2 spiegelte die Bootstrap for Sass-Version die Upstream-Version wider, mit einer zusätzlichen Nummer für Sass-spezifische Änderungen. Dies wurde aufgrund von Bower- und NPM-Kompatibilitätsproblemen geändert.
Die Upstream-Versionen im Vergleich zu den Bootstrap for Sass-Versionen sind:
| Stromaufwärts | Sass |
|---|---|
| 3.3.4+ | Dasselbe |
| 3.3.2 | 3.3.3 |
| <= 3.3.1 | 3.3.1.x |
Beziehen Sie sich beim Upgrade immer auf CHANGELOG.md.
Wenn Sie bei der Entwicklung von Bootstrap-Sass selbst helfen möchten, lesen Sie diesen Abschnitt.
Früher war es ein fehleranfälliger und zeitaufwändiger manueller Prozess, Bootstrap-Sass mit den Upstream-Änderungen von Bootstrap synchron zu halten. Mit Bootstrap 3 haben wir einen Konverter eingeführt, der dies automatisiert.
Hinweis: Wenn Sie nur Bootstrap 3 verwenden möchten, lesen Sie den Installationsabschnitt oben.
Upstream-Änderungen am Bootstrap-Projekt können jetzt mithilfe der Aufgabe „Rake convert “ übernommen werden.
Hier ist ein Beispiellauf, der den Master-Zweig aus dem Haupt-Twbs/Bootstrap-Repo herunterlädt:
rake convert
Dadurch wird das neueste LESS in Sass konvertiert und auf das neueste JS aktualisiert. Um einen bestimmten Zweig oder eine bestimmte Version zu konvertieren, übergeben Sie den Zweignamen oder den Commit-Hash als erstes Aufgabenargument:
rake convert[e8a1df5f060bf7e6631554648e0abde150aedbe4]
Das neueste Konverterskript befindet sich hier und führt Folgendes aus:
Konvertiert Upstream-Bootstrap-LESS-Dateien in die entsprechende SCSS-Datei.
Kopiert das gesamte Upstream-JavaScript in assets/javascripts/bootstrap , ein Sprockets-Manifest unter assets/javascripts/bootstrap-sprockets.js und eine Verkettung unter assets/javascripts/bootstrap.js .
Kopiert alle Upstream-Schriftartendateien nach assets/fonts/bootstrap .
Setzt Bootstrap::BOOTSTRAP_SHA in version.rb auf den Zweig-Sha.
Dieser Konverter wandelt das ursprüngliche LESS vollständig in SCSS um. Die Konvertierung erfolgt automatisch, erfordert jedoch Anweisungen für bestimmte Transformationen (siehe Konverterausgabe). Bitte reichen Sie GitHub-Probleme mit dem Tag conversion ein.
Bootstrap-Sass hat eine Reihe wichtiger Mitwirkender:
Thomas McDonald
Tristan Harward
Peter Gumeson
Gleb Mazovetskiy
und eine beträchtliche Anzahl anderer Mitwirkender.
Bootstrap-Sass wird verwendet, um einige großartige Projekte im gesamten Web zu erstellen, darunter Diaspora, Rails_admin, Michael Hartls Rails Tutorial, Gitlabhq und Kandan.
