Bootstrapを導入してみた話
オリジナルアプリのビューを１から作るのは大変そうだと思っていたら、Bootstrapというものを見つけました。名前は聞いたことがあったのですが、どんなものかは全く知らず。少し調べてみて、とりあえず使ってみようかなと。
Bootstrapとは
webページの見た目を少ない手間で美しく整えるためのcssフレームワークです。Twitterが作ったものみたいです。特徴としては、
cssやJavaScriptなどに詳しくない人でも簡単に見栄えのいいサイトを作ることができる
レスポンシブ対応もしている
という感じです。まさに私が今求めているものみたいです。
cssファイルやJavaScriptファイルが用意されていて、適切なクラス名をつけるだけでそれらの装飾を適用できる、ということなのかな？と思っています。違ってたらごめんなさい。
公式サイトはこちら。
Railsへの導入方法
調べているだけではいまいち使い方がピンとこないので、とりあえず使ってみようと思いました。
Railsアプリに導入する場合は、gemを使うことができます。多分違う方法でもできそうですが、一番分かりやすそうな方法でやりました。
GitHubはこちら。
Rails6にBootstrap4を導入しました。
まずはgemfileに以下の記述をしてbundle installします。
gem 'bootstrap', '~> 5.0.0.alpha1' gem 'jquery-rails'
BootstrapはjQueryを使うのでそれも一緒にインストールしました。
続いてapp/assets/stylesheets/application.cssというファイルがあるはずなので、拡張子を.cssから.scssに変更します。
そしてそのファイル内に以下の記述を追加して、Bootstrapのスタイルを読み込みます。
@import "bootstrap";
それから、同じapplication.scss内に初めから記述されている*= require_treeと*= require_selfを削除して、他のsassファイルを読み込む場合は@importを使います。
// これらを削除 *= require_tree *= require_self // 必要があれば@importで読み込む @import "users";
最後にapp/javascript/packs/application.jsに以下の記述を追加します。
//= require jquery3 //= require popper //= require bootstrap-sprockets
popper.jsというものを使うということらしいですが、これについてはいまいちよくわかってないです。
何はともあれ、これで導入完了です！
とりあえず使ってみた
クラス名を正しく設定すれば、自分でcssを書かなくても簡単にこなれたデザインにできます。
例えば以下のようなリンクを作りました。
<%= link_to "ボタン１", "#" %> <%= link_to "ボタン２", "#", class:"btn btn-primary" %> <%= link_to "ボタン３", "#", class:"btn btn-success" %> <%= link_to "ボタン４", "#", class:"btn btn-danger" %>
クラス名を付けただけですが、このようにボタンっぽい見た目になっています。
ボタン以外にも、フォーム、モーダル、カードなど、いろいろと作れるみたいです。
まとめ
ちょっと触ってみた感想としては、多少勉強して慣れる必要があるなと思いました。これを使ったらすぐにいい感じのデザインが作れるというわけではなさそうです。
