Bootstrap
Bootstrapとは?
Bootstrapとは、レスポンシブなモバイルファーストなウェブサイトを構築するためのオープンソースの
CSSフレームワークです。
「ボタンにはこのCSSが良いだろう」「フォームはこれが良いだろう」といったCSS/JSを集めて、一つのパッケージとして提供してくれています。
Bootstrapとレスポンシブデザイン
Bootstrapはブレークポイントとグリッドシステムによって画面サイズに合わせてレイアウトを変更し、コンテンツを配置することでレスポンシブデザインに対応しています。
ブレークポイント
ブレークポイントとは、「レイアウトをユーザーの使用端末や閲覧画面のサイズに合わせてレスポンシブに変化させるための基準」のことです。
このように、「何をいくつ分のブロック（グリッド）で表示するか」をコントロールすることで、デザイン性・自由度共に高いコンテンツを作成することができるのです。そしてbootstrapでは、グリッドシステムを上手く使うことで簡単にレスポンシブデザインを実現することができます。
ヘッダーでは、Navbar (ナビゲーションバー)を使用することで、簡単にレスポンシブデザインを適用できます。また、body部分では.containerを用いることで、レスポンシブデザインを適用できます。
.container は段階的コンテナを生成します。ウィンドウの横幅に応じて段階的に横幅が変動します。xs(～575px)の時は 100%、sm(576～767px)の時は 540px、md(768～991px)の時は 720px、lg(992～1199px)の時は 960px、xl(1200px～)の時は 1140px 固定となります。コンテナはセンタリングされます。
とほほのBootstrap 4入門 - コンテナ - とほほのWWW入門
bootstrap導入後の例
<button class='btn btn-primary'>テスト</button>
と記述した場合、bootstrapを導入していると
このようにある程度見栄えが整ったボタンが出来上がるのです。この「class='btn btn-primary'」の部分がbootstrapに認識され、それに適合したレイアウトを適応させてくれています。
bootstrapはその他にも、画面を12分割して配置を指定できるグリッドシステムや、レスポンシブデザインなど始めとする、多くの便利な機能を提供しています。
Bootstrapのver4系をインストールする
↑WebpackerがインストールされてないRails5以前のアプリを対象にしたBootstrap4を導入する手順
Railsアプリで Bootstrap 4 を利用する - Qiita
GitHub - twbs/bootstrap-rubygem: Bootstrap 4 rubygem for Rails / Sprockets / Hanami / etc
導入手順
Gemfile
Gemfileでbootstrapを指定してインストールする。
Bootstrapは※jQueryに依存するため、(デフォルトでjQueryがインストールされない)Rails5.1以上ではjquery-railsもGemfileに追記する。
gem 'bootstrap', '~> 4.1.1' gem 'jquery-rails'
# Gemfileに追記したgemをbundleでインストール # bundleでインストールすることにより、gemのバージョン管理がしやすくなる $ bundle install
※注意点
sprockets-railsがv2.3.2.以上である必要がある。
# sprockets-railsのバージョン確認方法 $ bundle show |fgrep sprockets-rails * sprockets-rails (3.2.1)
※jQuery
Rails5.１以降のバージョンではRailsインストール時にjQueryが自動でインストールされなくなりました。他のライブラリの導入に影響が出る弊害を無くすためです。
しかし、別途jquery-railsgemをインストールすることで、jQueryを使用することが出来ます。
BootstrapJavaScriptはオプションでjQueryを使用できます。Rails 5.1以降を使用している場合は、jquery-railsgemをGemfileに追加できます。
# gemfileに追加することで、jQueryを使用できる gem 'jquery-rails'
# bundleコマンドでインストール
$ bundle install
さらに、マニフェストファイル上で、jQueryをrequireすることによりjQueryを使用できるようになります。
//= require jquery3
application.scss(マニフェストファイル)
アセットパイプラインを介してファイルを利用できるように設定します。Railsアプリの作成時に生成されるapplication.cssをapplication.scssにリネームするなどして、.scss(Sass構文の場合は.sass)ファイルを用意する。
# .cssファイルを.scssファイルにリネームする(拡張子の変更）
$ mv app/assets/stylesheets/application.css app/assets/stylesheets/application.scss
app/assets/stylesheets/application.scss(どのファイルからも読み込まれるstylesheetsファイル)でbootstrapファイルが読み込まれるようにimportさせます。
つまり、わざわざCSSの記述を個別に書くのではなく、bootstrapをimportして全てのファイルで読み込まれるapplication.scssファイルで読み込むことで、全てのページでbootstrapが適応されることになります。
//カスタムブートストラップ変数は、ブートストラップの前に設定またはインポートする必要があります。 // Custom bootstrap variables must be set or imported *before* bootstrap. @import "bootstrap" ;
※注意点
- Sassファイルでは
＊= require、＊= require_treeを削除する - Sassファイルではインポートに
@importを利用する - Sassファイルで
＊= requireを利用すると他のスタイルシートではBootstrapのmixinや変数を利用できなくなる
application.js(マニフェストファイル)
Bootstrapと依存関係をapplication.jsに追記します。
# どのアセットファイルを読み込むかを記述する //= require jquery3 //= require popper //= require bootstrap-sprockets
- Bootstrapのtooltipsやpopoverは配置を
popper.jsに依存しているので、importする必要があります。 - bootstrapの依存gemに
popper_jsが指定されているため新たにインストールは不要です。(自動でインストール済み) Bootstrap gemはpopper_jsに依存してます。 コンパイルを高速化したい場合は
bootstrap-sprocketsの代わりにbootstrapを指定します。popover(ポップオーバー)とは？ 対象の要素をクリックしたときに小さな領域を表示するJavascriptです。対象の要素をもう一度クリックすると表示が消えます。
tooltips(ツールチップス)とは？ ツールチップは、ユーザーがオブジェクトの上にカーソルを置くと自動的に表示され、クリックしたりカーソルを移動したり、ある程度時間が経過したら画面から消えます。 補足的な説明など、さらに情報を加えたほうがわかりやすいときに使われます。
参照
GitHub - twbs/bootstrap-rubygem: Bootstrap 4 rubygem for Rails / Sprockets / Hanami / etc
Railsアプリで Bootstrap 4 を利用する - Qiita
Bootstrapのレスポンシブとは何か？使い方の流れもあわせて紹介 | #site_titleBootstrapのレスポンシブとは何か？使い方の流れもあわせて紹介
