Rails4/Bootstrap
をテンプレートにして作成
[
トップ
] [
新規
|
一覧
|
検索
|
最終更新
|
ヘルプ
|
ログイン
]
開始行:
&tag(Rails4/Bootstrap);
*目次 [#fdfd846d]
#contents
*関連ページ [#ja90a0ec]
[[TwitterBootstrapWithRails]]
*参考情報 [#bb976556]
-[[Ruby on Rails 4.0正式リリースとBootstrapの正しい設定法...
-[[Rails 4でRSpecとTwitter Bootstrap - tobioka.net - You ...
*bootstrap-sassを使って導入 [#a5457844]
**概要 [#nd4589d1]
-bootstrap3を入れる場合、bootstrap-sassというのを使ったほ...
-[[bootstrap-sass という gem について - willnet.in:http:/...
-[[Rails4 に bootstrap-sass で Twitter Bootstrap3 を導入 ...
-[[Rails 4 で Twitter Bootstrap と Font Awesome を利用す...
**Gemfileの編集 [#q9863aaa]
-Gemfileに追加。
#pre{{
gem 'bootswatch-rails', '~> 3.2.4'
gem 'font-awesome-sass'
}}
-bundle installを実行
bundle install --path vendor/bundle
*twitter-bootstrap-railsを使って導入 [#b38c3ce8]
**Gemfileの編集 [#z023d628]
-sass-railsをコメントアウト
#gem 'sass-rails', '~> 4.0.2'
-以下を追加
#pre{{
gem 'less-rails'
gem 'therubyracer'
gem 'twitter-bootstrap-rails'
#gem 'execjs'
}}
※lessうんたらのエラーがでた場合、次のようにしないとだめか...
gem 'twitter-bootstrap-rails', :git => 'git://github.com...
-bundle install実行
bundle install --path vendor/bundle
**Bootstrapを使ったテンプレートの生成 [#h27f2de7]
-rails gで生成する。
#pre{{
$ bundle exec rails g bootstrap:install
$ bundle exec rails g bootstrap:layout application
}}
-この段階で一応Bootstrapスタイルが適用される。
**調整 [#o74e59f3]
***ナビゲーションバーがかぶるのを修正 [#yc91306b]
-app/assets/stylesheets/bootstrap_and_overrides.css.less...
#pre{{
@import "twitter/bootstrap/bootstrap";
body {
padding-top: 60px;
}
@import "twitter/bootstrap/responsive";
}}
*トラブルシューティング [#gee90148]
**「cannot load such file -- sass 」 が表示された。 [#jd...
-途中から、sassからlessに変更した場合?application.cssが以...
#pre{{
/*
* This is a manifest file that'll be compiled into appli...
* listed below.
*
* Any CSS and SCSS file within this directory, lib/asset...
* or vendor/assets/stylesheets of plugins, if any, can b...
*
* You're free to add application-wide styles to this fil...
* compiled file, but it's generally better to create a n...
*
*= require bootstrap_and_overrides
*/
}}
**エラーメッセージの色などがかわらない [#c4937038]
-bootstrap_and_overrides.css.lessに追加
#pre{{
#error_explanation {
.alert();
.alert-error();
.alert-block();
}
.field_with_errors {
.control-group.error();
}
}}
**bootstrap_flashメッセージが表示されない [#c39edece]
-[[The helper bootstrap_flash not working in Rails 4.1.0 ...
終了行:
&tag(Rails4/Bootstrap);
*目次 [#fdfd846d]
#contents
*関連ページ [#ja90a0ec]
[[TwitterBootstrapWithRails]]
*参考情報 [#bb976556]
-[[Ruby on Rails 4.0正式リリースとBootstrapの正しい設定法...
-[[Rails 4でRSpecとTwitter Bootstrap - tobioka.net - You ...
*bootstrap-sassを使って導入 [#a5457844]
**概要 [#nd4589d1]
-bootstrap3を入れる場合、bootstrap-sassというのを使ったほ...
-[[bootstrap-sass という gem について - willnet.in:http:/...
-[[Rails4 に bootstrap-sass で Twitter Bootstrap3 を導入 ...
-[[Rails 4 で Twitter Bootstrap と Font Awesome を利用す...
**Gemfileの編集 [#q9863aaa]
-Gemfileに追加。
#pre{{
gem 'bootswatch-rails', '~> 3.2.4'
gem 'font-awesome-sass'
}}
-bundle installを実行
bundle install --path vendor/bundle
*twitter-bootstrap-railsを使って導入 [#b38c3ce8]
**Gemfileの編集 [#z023d628]
-sass-railsをコメントアウト
#gem 'sass-rails', '~> 4.0.2'
-以下を追加
#pre{{
gem 'less-rails'
gem 'therubyracer'
gem 'twitter-bootstrap-rails'
#gem 'execjs'
}}
※lessうんたらのエラーがでた場合、次のようにしないとだめか...
gem 'twitter-bootstrap-rails', :git => 'git://github.com...
-bundle install実行
bundle install --path vendor/bundle
**Bootstrapを使ったテンプレートの生成 [#h27f2de7]
-rails gで生成する。
#pre{{
$ bundle exec rails g bootstrap:install
$ bundle exec rails g bootstrap:layout application
}}
-この段階で一応Bootstrapスタイルが適用される。
**調整 [#o74e59f3]
***ナビゲーションバーがかぶるのを修正 [#yc91306b]
-app/assets/stylesheets/bootstrap_and_overrides.css.less...
#pre{{
@import "twitter/bootstrap/bootstrap";
body {
padding-top: 60px;
}
@import "twitter/bootstrap/responsive";
}}
*トラブルシューティング [#gee90148]
**「cannot load such file -- sass 」 が表示された。 [#jd...
-途中から、sassからlessに変更した場合?application.cssが以...
#pre{{
/*
* This is a manifest file that'll be compiled into appli...
* listed below.
*
* Any CSS and SCSS file within this directory, lib/asset...
* or vendor/assets/stylesheets of plugins, if any, can b...
*
* You're free to add application-wide styles to this fil...
* compiled file, but it's generally better to create a n...
*
*= require bootstrap_and_overrides
*/
}}
**エラーメッセージの色などがかわらない [#c4937038]
-bootstrap_and_overrides.css.lessに追加
#pre{{
#error_explanation {
.alert();
.alert-error();
.alert-block();
}
.field_with_errors {
.control-group.error();
}
}}
**bootstrap_flashメッセージが表示されない [#c39edece]
-[[The helper bootstrap_flash not working in Rails 4.1.0 ...
ページ名:
![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
