bootstrap sass
v3.4.1
bootstrap-sass adalah versi Bootstrap 3 yang didukung Sass, siap untuk dimasukkan langsung ke aplikasi Anda yang didukung Sass.
Ini adalah Bootstrap 3 . Untuk Bootstrap 4 gunakan rubygem Bootstrap jika Anda menggunakan Ruby, dan repo utama sebaliknya.
Silakan lihat panduan yang sesuai untuk lingkungan pilihan Anda:
Ruby di Rel.
Punjung.
npm / Node.js.
bootstrap-sass mudah untuk dimasukkan ke Rails dengan pipa aset.
Di Gemfile Anda, Anda perlu menambahkan permata bootstrap-sass , dan memastikan bahwa permata sass-rails ada - permata tersebut ditambahkan ke aplikasi Rails baru secara default.
permata 'bootstrap-sass', '~> 3.4.1'permata 'sassc-rails', '>= 2.1.0'
bundle install dan mulai ulang server Anda untuk membuat file tersedia melalui pipa.
Impor gaya Bootstrap di app/assets/stylesheets/application.scss :
// "bootstrap-sprockets" harus diimpor sebelum "bootstrap" dan "bootstrap/variables"@import "bootstrap-sprockets";@import "bootstrap";
bootstrap-sprockets harus diimpor sebelum bootstrap agar font ikon dapat berfungsi.
Pastikan file memiliki ekstensi .scss (atau .sass untuk sintaks Sass). Jika Anda baru saja membuat aplikasi Rails baru, aplikasi tersebut mungkin dilengkapi dengan file .css . Jika file ini ada, maka file tersebut akan disajikan sebagai ganti Sass, jadi ganti namanya:
$ mv aplikasi/aset/stylesheets/application.css aplikasi/aset/stylesheets/application.scss
Kemudian, hapus semua *= require_self dan *= require_tree . pernyataan dari file sass. Sebagai gantinya, gunakan @import untuk mengimpor file Sass.
Jangan gunakan *= require di Sass atau stylesheet Anda yang lain tidak akan dapat mengakses mixin atau variabel Bootstrap.
Bootstrap JavaScript bergantung pada jQuery. Jika Anda menggunakan Rails 5.1+, tambahkan permata jquery-rails ke Gemfile Anda:
permata 'jquery-rails'
$ pemasangan bundel
Memerlukan Javascript Bootstrap di app/assets/javascripts/application.js :
//= memerlukan jquery//= memerlukan sprocket bootstrap
bootstrap-sprockets dan bootstrap tidak boleh keduanya disertakan dalam application.js .
bootstrap-sprockets menyediakan file Javascript Bootstrap individual ( alert.js atau dropdown.js , misalnya), sedangkan bootstrap menyediakan file gabungan yang berisi semua Javascript Bootstrap.
Saat menggunakan paket Bower bootstrap-sass alih-alih permata di Rails, konfigurasikan aset di config/application.rb :
# Bower aset pathroot.join('vendor', 'assets', 'bower_components').to_s.tap lakukan |bower_path| config.sass.load_paths << bower_path
config.assets.paths << bower_pathend# Prakompilasi Bootstrap fontconfig.assets.precompile << %r(bootstrap-sass/assets/fonts/bootstrap/[w-]+.(?:eot|svg|ttf|woff2?)$ )# Ketepatan angka Sass minimum yang dibutuhkan oleh bootstrap-sass::Sass::Script::Value::Number.precision = [8, ::Sass::Script::Value::Number.precision].max Ganti pernyataan Bootstrap @import di application.scss dengan:
$icon-font-path: "bootstrap-sass/assets/fonts/bootstrap/";@import "bootstrap-sass/assets/stylesheets/bootstrap-sprockets";@import "bootstrap-sass/assets/stylesheets/bootstrap";
Ganti Bootstrap require arahan di application.js dengan:
//= memerlukan bootstrap-sass/assets/javascripts/bootstrap-sprockets
Harap pastikan sprockets-rails setidaknya v2.1.4.
bootstrap-sass tidak lagi kompatibel dengan Rails 3. Versi terbaru bootstrap-sass yang kompatibel dengan Rails 3.2 adalah v3.1.1.0.
Paket Bower bootstrap-sass kompatibel dengan node-sass 3.2.0+. Anda dapat menginstalnya dengan:
$ bower instal bootstrap-sass
Sass, JS, dan semua aset lainnya terletak di aset.
Secara default, kolom utama bower.json hanya mencantumkan _bootstrap.scss utama dan semua aset statis (font dan JS). Ini kompatibel secara default dengan manajer aset seperti wiredep.
Jika Anda menggunakan mincer dengan node-sass, impor Bootstrap seperti:
Dalam application.css.ejs.scss (NB .css.ejs.scss ):
// Impor jalur aset mincer helper integrasi@import "bootstrap-mincer";@import "bootstrap";
Di application.js :
//= memerlukan sprocket bootstrap
Lihat juga contoh manifest.js untuk mincer.
$ npm instal bootstrap-sass
Secara default semua Bootstrap diimpor.
Anda juga dapat mengimpor komponen secara eksplisit. Untuk memulai dengan daftar lengkap modul, salin file _bootstrap.scss ke dalam aset Anda sebagai _bootstrap-custom.scss . Kemudian beri komentar pada komponen yang tidak Anda inginkan dari _bootstrap-custom . Di file aplikasi Sass, ganti @import 'bootstrap' dengan:
@import 'bootstrap-custom';
bootstrap-sass membutuhkan presisi angka Sass minimum 8 (defaultnya adalah 5).
Presisi diatur untuk Ruby secara otomatis saat menggunakan permata sassc-rails . Saat menggunakan versi npm atau Bower dengan Ruby, Anda dapat mengaturnya dengan:
::Sass::Script::Value::Number.precision = [8, ::Sass::Script::Value::Number.precision].max
Bootstrap memerlukan penggunaan Autoprefixer. Autoprefixer menambahkan awalan vendor ke aturan CSS menggunakan nilai dari Can I Use.
Untuk mencocokkan tingkat kompatibilitas browser Bootstrap upstream, atur opsi browsers Autoprefixer ke:
[ "Android 2.3", "Android >= 4", "Chrome >= 20", "Firefox >= 24", "Explorer >= 8", "iOS >= 6", "Opera >= 12", "Safari >= 6"]
assets/javascripts/bootstrap.js berisi semua JavaScript Bootstrap, digabungkan dalam urutan yang benar.
Jika Anda menggunakan Sprocket atau Mincer, Anda dapat meminta bootstrap-sprockets untuk memuat masing-masing modul:
// Muat semua JavaScript Bootstrap //= memerlukan sprocket bootstrap
Anda juga dapat memuat modul individual, asalkan Anda juga memerlukan dependensi apa pun. Anda dapat memeriksa dependensi di dokumentasi Bootstrap JS.
//= memerlukan bootstrap/scrollspy//= memerlukan bootstrap/modal//= memerlukan bootstrap/dropdown
Font direferensikan sebagai:
"#{$icon-font-path}#{$icon-font-name}.eot" $icon-font-path defaultnya adalah bootstrap/ jika pembantu jalur aset digunakan, dan ../fonts/bootstrap/ sebaliknya.
Saat menggunakan bootstrap-sass dengan Compass, Sprockets, atau Mincer, Anda harus mengimpor path helper yang relevan sebelum Bootstrap itu sendiri, misalnya:
@import "bootstrap-compass";@import "bootstrap";
Impor Bootstrap ke file Sass (misalnya, application.scss ) untuk mendapatkan semua gaya, mixin, dan variabel Bootstrap!
@import "bootstrap";
Anda juga dapat menyertakan tema Bootstrap opsional:
@import "bootstrap/tema";
Daftar lengkap variabel Bootstrap dapat ditemukan di sini. Anda dapat menggantinya hanya dengan mendefinisikan ulang variabel sebelum direktif @import , misalnya:
$navbar-default-bg: #312312;$oranye muda: #ff8c00;$navbar-warna-default: $oranye muda;@import "bootstrap";
Bootstrap tersedia sebagai modul Kacamata. Setelah menginstal Bootstrap melalui NPM Anda dapat mengimpor perpustakaan Bootstrap melalui:
@import "bootstrap-sass/bootstrap"
atau impor hanya bagian Bootstrap yang Anda perlukan:
@import "bootstrap-sass/bootstrap/variables";@import "bootstrap-sass/bootstrap/mixins";@import "bootstrap-sass/bootstrap/carousel";
Versi bootstrap untuk Sass mungkin berbeda dengan versi upstream pada nomor terakhir yang dikenal dengan PATCH. Versi patch mungkin lebih unggul dari versi upstream minor yang sesuai. Ini terjadi ketika kita perlu merilis perubahan khusus Sass.
Sebelum v3.3.2, versi Bootstrap untuk Sass digunakan untuk mencerminkan versi upstream, dengan nomor tambahan untuk perubahan khusus Sass. Ini diubah karena masalah kompatibilitas Bower dan npm.
Versi upstream vs versi Bootstrap untuk Sass adalah:
| Hulu | Kelancangan |
|---|---|
| 3.3.4+ | sama |
| 3.3.2 | 3.3.3 |
| <= 3.3.1 | 3.3.1.x |
Selalu lihat CHANGELOG.md saat melakukan upgrade.
Jika Anda ingin membantu pengembangan bootstrap-sass itu sendiri, baca bagian ini.
Menjaga bootstrap-sass tetap sinkron dengan perubahan upstream dari Bootstrap dulunya merupakan proses manual yang rawan kesalahan dan memakan waktu. Dengan Bootstrap 3 kami telah memperkenalkan konverter yang mengotomatiskan hal ini.
Catatan: jika Anda hanya ingin menggunakan Bootstrap 3, lihat bagian instalasi di atas.
Perubahan upstream pada proyek Bootstrap sekarang dapat dilakukan menggunakan tugas convert rake.
Berikut ini contoh proses yang akan menarik cabang master dari repo twbs/bootstrap utama:
rake convert
Ini akan mengonversi LESS terbaru ke Sass dan memperbarui ke JS terbaru. Untuk mengonversi cabang atau versi tertentu, berikan nama cabang atau hash penerapan sebagai argumen tugas pertama:
rake convert[e8a1df5f060bf7e6631554648e0abde150aedbe4]
Skrip konverter terbaru terletak di sini dan melakukan hal berikut:
Mengonversi file Bootstrap LESS upstream menjadi file SCSS yang cocok.
Menyalin semua JavaScript upstream ke dalam assets/javascripts/bootstrap , manifes Sprockets di assets/javascripts/bootstrap-sprockets.js , dan rangkaian di assets/javascripts/bootstrap.js .
Menyalin semua file font upstream ke dalam assets/fonts/bootstrap .
Setel Bootstrap::BOOTSTRAP_SHA di version.rb ke cabang sha.
Konverter ini sepenuhnya mengubah LESS asli menjadi SCSS. Konversi terjadi secara otomatis tetapi memerlukan instruksi untuk transformasi tertentu (lihat keluaran konverter). Silakan kirimkan masalah GitHub yang ditandai dengan conversion .
bootstrap-sass memiliki sejumlah kontributor utama:
Thomas McDonald
Tristan Harward
Peter Gumeson
Gleb Mazovetskiy
dan sejumlah besar kontributor lainnya.
bootstrap-sass digunakan untuk membangun beberapa proyek mengagumkan di seluruh web, termasuk Diaspora, rails_admin, Tutorial Rails Michael Hartl, gitlabhq dan kandan.
