日々の積み上げブログ

プログラミングを習得したい

Bootstrap

Bootstrapとは?

Bootstrapとは、レスポンシブなモバイルファーストなウェブサイトを構築するためのオープンソースCSSフレームワークです。

「ボタンにはこのCSSが良いだろう」「フォームはこれが良いだろう」といったCSS/JSを集めて、一つのパッケージとして提供してくれています。

Bootstrap

Bootstrapとレスポンシブデザイン

Bootstrapはブレークポイントグリッドシステムによって画面サイズに合わせてレイアウトを変更し、コンテンツを配置することでレスポンシブデザインに対応しています。

ブレークポイント

ブレークポイントとは、「レイアウトをユーザーの使用端末や閲覧画面のサイズに合わせてレスポンシブに変化させるための基準」のことです。 f:id:Trial_and_error:20211019132931p:plain

このように、「何をいくつ分のブロック(グリッド)で表示するか」をコントロールすることで、デザイン性・自由度共に高いコンテンツを作成することができるのです。そしてbootstrapでは、グリッドシステムを上手く使うことで簡単にレスポンシブデザインを実現することができます。

ヘッダーでは、Navbar (ナビゲーションバー)を使用することで、簡単にレスポンシブデザインを適用できます。また、body部分では.containerを用いることで、レスポンシブデザインを適用できます。

.container は段階的コンテナを生成します。ウィンドウの横幅に応じて段階的に横幅が変動します。xs(~575px)の時は 100%、sm(576~767px)の時は 540px、md(768~991px)の時は 720px、lg(992~1199px)の時は 960px、xl(1200px~)の時は 1140px 固定となります。コンテナはセンタリングされます。

Navbar (ナビゲーションバー)

とほほのBootstrap 4入門 - コンテナ - とほほのWWW入門

bootstrap導入後の例

<button class='btn btn-primary'>テスト</button> 

と記述した場合、bootstrapを導入していると

f:id:Trial_and_error:20211019133013p:plain
このようにある程度見栄えが整ったボタンが出来上がるのです。この「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.1以降のバージョンではRailsインストール時にjQueryが自動でインストールされなくなりました。他のライブラリの導入に影響が出る弊害を無くすためです。

しかし、別途jquery-railsgemをインストールすることで、jQueryを使用することが出来ます。

BootstrapJavaScriptはオプションでjQueryを使用できます。Rails 5.1以降を使用している場合は、jquery-railsgemをGemfileに追加できます。

# gemfileに追加することで、jQueryを使用できる
gem 'jquery-rails'
# bundleコマンドでインストール
$ bundle install

さらに、マニフェストファイル上で、jQueryrequireすることによりjQueryを使用できるようになります。

//= require jquery3

application.scss(マニフェストファイル)


アセットパイプラインを介してファイルを利用できるように設定します。Railsアプリの作成時に生成されるapplication.cssapplication.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です。対象の要素をもう一度クリックすると表示が消えます。 f:id:Trial_and_error:20211019133155p:plain

  • tooltips(ツールチップス)とは? ツールチップは、ユーザーがオブジェクトの上にカーソルを置くと自動的に表示され、クリックしたりカーソルを移動したり、ある程度時間が経過したら画面から消えます。 補足的な説明など、さらに情報を加えたほうがわかりやすいときに使われます。 f:id:Trial_and_error:20211019133214p:plain

参照

GitHub - twbs/bootstrap-rubygem: Bootstrap 4 rubygem for Rails / Sprockets / Hanami / etc

Railsアプリで Bootstrap 4 を利用する - Qiita

Bootstrap

Bootstrapのレスポンシブとは何か?使い方の流れもあわせて紹介 | #site_titleBootstrapのレスポンシブとは何か?使い方の流れもあわせて紹介

とほほのBootstrap 4入門 - コンテナ - とほほのWWW入門

ナビゲーションバーの実装

【入門】レスポンシブWebデザインとは?概要と作り方を丁寧解説 | カゴヤのサーバー研究室