bootstrap sass
v3.4.1
bootstrap-sassは Bootstrap 3 の Sass を利用したバージョンで、Sass を利用したアプリケーションにすぐに組み込むことができます。
これはブートストラップ3です。 Bootstrap 4の場合、Ruby を使用する場合は Bootstrap Rubygem を使用し、それ以外の場合はメイン リポジトリを使用します。
選択した環境に応じて適切なガイドを参照してください。
ルビー・オン・レール。
バウアー。
npm/Node.js。
bootstrap-sassアセット パイプラインを使用して Rails に簡単にドロップできます。
Gemfile にbootstrap-sass gem を追加し、 sass-rails gem が存在することを確認する必要があります。sass-rails gem はデフォルトで新しい Rails アプリケーションに追加されます。
gem 'bootstrap-sass', '~> 3.4.1'gem 'sassc-rails', '>= 2.1.0'
bundle installてサーバーを再起動し、パイプライン経由でファイルを利用できるようにします。
ブートストラップ スタイルをapp/assets/stylesheets/application.scssにインポートします。
// 「bootstrap-sprockets」は「bootstrap」および「bootstrap/variables」の前にインポートする必要があります@import "bootstrap-sprockets";@import "bootstrap";
アイコン フォントが機能するには、ブートbootstrapの前にbootstrap-sprocketsインポートする必要があります。
ファイルの拡張子が.scss (Sass 構文の場合は.sass ) であることを確認してください。新しい Rails アプリを生成したばかりの場合は、代わりに.cssファイルが付属している可能性があります。このファイルが存在する場合は、Sass の代わりにこのファイルが提供されるため、名前を変更します。
$ mv app/assets/stylesheets/application.css app/assets/stylesheets/application.scss
次に、 *= require_selfと*= require_tree . sass ファイルからのステートメント。代わりに、 @importを使用して Sass ファイルをインポートします。
Sass では*= require使用しないでください。使用しないと、他のスタイルシートが Bootstrap ミックスインまたは変数にアクセスできなくなります。
ブートストラップ JavaScript は jQuery に依存します。 Rails 5.1 以降を使用している場合は、 jquery-rails gem を Gemfile に追加します。
gem「jquery-rails」
$バンドルインストール
app/assets/javascripts/application.jsにブートストラップ Javascript が必要です。
//= jquery が必要//= ブートストラップ スプロケットが必要
bootstrap-sprocketsとbootstrap両方をapplication.jsに含めないでください。
bootstrap-sprockets個別の Bootstrap Javascript ファイル ( alert.jsやdropdown.jsなど) を提供し、 bootstrapすべての Bootstrap Javascript を含む連結ファイルを提供します。
Rails の gem の代わりに bootstrap-sass Bower パッケージを使用する場合は、 config/application.rbでアセットを構成します。
# Bower アセットパスroot.join('vendor', 'assets', 'bower_components').to_s.tap do |bower_path| config.sass.load_paths << bower_path
config.assets.paths << bower_pathend# ブートストラップのプリコンパイル fontsconfig.assets.precompile << %r(bootstrap-sass/assets/fonts/bootstrap/[w-]+.(?:eot|svg|ttf|woff2?)$ )# bootstrap-sass::Sass::Script::Value::Number.precision = で必要な Sass 数値の最小精度[8, ::Sass::Script::Value::Number.precision].max application.scssのブートストラップ@importステートメントを次のように置き換えます。
$icon-font-path: "bootstrap-sass/assets/fonts/bootstrap/";@import "bootstrap-sass/assets/stylesheets/bootstrap-sprockets";@import "bootstrap-sass/assets/stylesheets/bootstrap";
application.jsの Bootstrap requireディレクティブを次のように置き換えます。
//= bootstrap-sass/assets/javascripts/bootstrap-sprockets が必要です
sprockets-railsが少なくとも v2.1.4 であることを確認してください。
bootstrap-sass は Rails 3 と互換性がなくなりました。Rails 3.2 と互換性のある bootstrap-sass の最新バージョンは v3.1.1.0 です。
bootstrap-sass Bower パッケージは、node-sass 3.2.0 以降と互換性があります。次の方法でインストールできます。
$ bower install bootstrap-sass
Sass、JS、およびその他のすべてのアセットは、assets にあります。
デフォルトでは、 bower.jsonメイン フィールドには、メインの_bootstrap.scssとすべての静的アセット (フォントと JS) のみがリストされます。これはデフォルトで Wiredep などの資産マネージャーと互換性があります。
node-sass で mincer を使用する場合は、次のように Bootstrap をインポートします。
application.css.ejs.scss (注.css.ejs.scss ):
// ミンサー アセット パスのインポート ヘルパー統合@import "bootstrap-mincer";@import "bootstrap";
application.js内:
//= ブートストラップ スプロケットが必要
mincer のこの例の manifest.js も参照してください。
$ npm install bootstrap-sass
デフォルトでは、Bootstrap がすべてインポートされます。
コンポーネントを明示的にインポートすることもできます。モジュールの完全なリストを開始するには、 _bootstrap.scssファイルを_bootstrap-custom.scssとしてアセットにコピーします。次に、 _bootstrap-customから不要なコンポーネントをコメントアウトします。アプリケーションの Sass ファイルで、 @import 'bootstrap'を次のように置き換えます。
@import 'ブートストラップカスタム';
bootstrap-sass では、Sass 数値の最小精度 8 (デフォルトは 5) が必要です。
sassc-rails gem を使用すると、Ruby の精度が自動的に設定されます。 Ruby で npm または Bower バージョンを使用する場合は、次のように設定できます。
::Sass::Script::Value::Number.precision = [8, ::Sass::Script::Value::Number.precision].max
ブートストラップでは Autoprefixer を使用する必要があります。 Autoprefixer は、Can I Use の値を使用して CSS ルールにベンダー プレフィックスを追加します。
上流の Bootstrap のブラウザ互換性レベルと一致させるには、Autoprefixer のbrowsersオプションを次のように設定します。
[ 「Android 2.3」、「Android >= 4」、「Chrome >= 20」、「Firefox >= 24」、「Explorer >= 8」、「iOS >= 6」、「Opera >= 12」、「Safari」 >= 6"]
assets/javascripts/bootstrap.js 、Bootstrap の JavaScript がすべて正しい順序で連結されて含まれています。
Sprockets または Mincer を使用する場合は、個々のモジュールをロードする代わりにbootstrap-sprocketsを要求できます。
// すべてのブートストラップ JavaScript をロード//= ブートストラップ スプロケットが必要
依存関係も必要な場合は、個別のモジュールをロードすることもできます。 Bootstrap JS ドキュメントで依存関係を確認できます。
//= ブートストラップ/スクロールスパイが必要//= ブートストラップ/モーダルが必要//= ブートストラップ/ドロップダウンが必要
フォントは次のように参照されます。
"#{$アイコンフォントパス}#{$アイコンフォント名}.eot" $icon-font-pathデフォルトは、アセット パス ヘルパーが使用されている場合はbootstrap/ 、それ以外の場合は../fonts/bootstrap/です。
Compass、Sprockets、または Mincer で bootstrap-sass を使用する場合は、Bootstrap 自体の前に関連するパス ヘルパーをインポートする必要があります。次に例を示します。
@import "ブートストラップコンパス";@import "ブートストラップ";
Bootstrap を Sass ファイル ( application.scssなど) にインポートして、Bootstrap のスタイル、ミックスイン、変数をすべて取得します。
@import "ブートストラップ";
オプションの Bootstrap テーマを含めることもできます。
@import "ブートストラップ/テーマ";
ブートストラップ変数の完全なリストはここにあります。 @importディレクティブの前に変数を再定義するだけで、これらをオーバーライドできます。例:
$navbar-default-bg: #312312;$light-orange: #ff8c00;$navbar-default-color: $light-orange;@import "bootstrap";
Bootstrap は Eyeglass モジュールとして利用できます。 NPM 経由で Bootstrap をインストールした後、次の方法で Bootstrap ライブラリをインポートできます。
@import "ブートストラップ-sass/ブートストラップ"
または、Bootstrap の必要な部分のみをインポートします。
@import "bootstrap-sass/bootstrap/variables";@import "bootstrap-sass/bootstrap/mixins";@import "bootstrap-sass/bootstrap/carousel";
Bootstrap for Sass バージョンは、PATCH と呼ばれる最後の番号がアップストリーム バージョンと異なる場合があります。パッチのバージョンは、対応するアップストリーム マイナーよりも先に存在する可能性があります。これは、Sass 固有の変更をリリースする必要があるときに発生します。
v3.3.2 より前は、Bootstrap for Sass バージョンはアップストリーム バージョンを反映しており、Sass 固有の変更には追加の番号が付けられていました。これは、Bower と npm の互換性の問題により変更されました。
アップストリーム バージョンと Bootstrap for Sass バージョンの比較は次のとおりです。
| 上流 | サス |
|---|---|
| 3.3.4+ | 同じ |
| 3.3.2 | 3.3.3 |
| <= 3.3.1 | 3.3.1.x |
アップグレードする場合は、必ず CHANGELOG.md を参照してください。
bootstrap-sass 自体の開発を支援したい場合は、このセクションをお読みください。
bootstrap-sass を Bootstrap からの上流の変更と同期させることは、以前はエラーが発生しやすく、時間のかかる手動プロセスでした。 Bootstrap 3 では、これを自動化するコンバータを導入しました。
注: Bootstrap 3を使用したいだけの場合は、上記のインストール セクションを参照してください。
ブートストラップ プロジェクトに対するアップストリームの変更を、 convert rake タスクを使用して取り込めるようになりました。
以下は、メインの twbs/bootstrap リポジトリから master ブランチをプルダウンする実行例です。
rake convert
これにより、最新の LESS が Sass に変換され、最新の JS に更新されます。特定のブランチまたはバージョンを変換するには、ブランチ名またはコミット ハッシュを最初のタスク引数として渡します。
rake convert[e8a1df5f060bf7e6631554648e0abde150aedbe4]
最新のコンバータ スクリプトはここにあり、次のことを行います。
アップストリームの Bootstrap LESS ファイルを、対応する SCSS ファイルに変換します。
すべてのアップストリーム JavaScript を、 assets/javascripts/bootstrap 、 assets/javascripts/bootstrap-sprockets.jsの Sprockets マニフェスト、およびassets/javascripts/bootstrap.jsの連結にコピーします。
すべてのアップストリーム フォント ファイルをassets/fonts/bootstrapにコピーします。
version.rb のBootstrap::BOOTSTRAP_SHAブランチ sha に設定します。
このコンバータは、オリジナルの LESS を SCSS に完全に変換します。変換は自動ですが、特定の変換には指示が必要です (コンバーターの出力を参照)。 conversionのタグが付いた GitHub の問題を送信してください。
bootstrap-sass には多数の主要な貢献者がいます。
トーマス・マクドナルド
トリスタン・ハーワード
ピーター・グメソン
グレブ・マゾヴェツキー
およびその他多数の貢献者。
bootstrap-sass は、Diaspora、rails_admin、Michael Hartl の Rails チュートリアル、gitlabhq、kandan など、Web 上で素晴らしいプロジェクトを構築するために使用されます。
