じぶんメモ

プログラミングのメモ、日常のメモとか。

railsにbootstrapを導入する

以下に、gemを使用したrailsへのbootstrapの導入方法を記載する。

1.Gemの導入

以下のGemをGemfileに記載する。

gem 'twitter-bootstrap-rails'
# bootstrapはlessで記述されているのでless-railsが必要
gem 'less-rails'
# 同様に、less-railsの導入にrubyracerが必要
gem 'therubyracer', platforms: :ruby

bundle installを実行。

2.Gem導入後

以下のコマンドを実行し、assetsに必要なjsファイル、cssファイルを生成する。

rails g bootstrap:install

これでOK。

navを使用した際に、コンテンツがメニューバーの後ろに隠れてしまう場合

.navbar-fixed-topを使用すると、navタグの後に書いた内容が、
メニューバーの後ろに隠れてしまう。
解決策としては、bodyタグのpadding-topをいじり、
メニューバーより下に内容が表示されるようにすること。
bootstrapの公式サイトで記載されている。

getbootstrap.com