Bootstrapについて

Design

Aws4 request&x amz signedheaders=host&x amz signature=22b305b2f18657a3096b9f5599d966ef2ed48b6e189d20cb41fbc0646d140dee

Bootstrapについて

今回は、CSSの有名なフレームワークの一つであるBootstrapの機能について解説をしていきます。
Railsと同様に、実装に必要な記述を非常に簡略化してくれる優れものですので、ぜひ使い方を覚えてみてください。

Bootstrapとは

BootstrapとはCSSで構成された フレームワーク のことです。
フレームワークという言葉、どこかで聞き覚えはありませんか?
そうです、RailsやSinatraは Ruby という言語のフレームワークでしたね。

https://diveintocode.gyazo.com/4067ecb49f6bf712edc73a25575981ed

Railsを入れることでDBとの連携(ActiveRecord)やMVC、Railsコマンドが使用できるようになりました。

一方でBootstrapは CSS という言語のフレームワークです。

https://diveintocode.gyazo.com/4067ecb49f6bf712edc73a25575981ed

ではBootstrapではどのような機能を使用することができるようになるのでしょうか?
それは classを当てるだけでデザインを適用してくれる ことです。
試しにやってみましょう。

ビューにおけるクラスの当て方

ビューには HTML<%= %> で書かれた Ruby が混ざっています。
したがって両者はクラスの当て方が異なります。

HTMLに対しては以下のように class="" の形で書きます。

<div class="panel panel-success"></div>

一方でRubyに対しては class: "" の形で書きます。

%= link_to 'Show' blog, class: "btn btn-default" %

ブログ一覧のビューに以下のようなコードがあると思います。

(app/views/blogs/index.html.erb)

%= link_to 'Show', blog %
%= link_to 'Edit', edit_blog_path(blog) %
%= link_to 'Destroy', blog, method: :delete, data: { confirm: 'Are you sure?' } %

それに対してクラスを当ててあげます。

(app/views/blogs/index.html.erb)

%= link_to 'Show', blog, class: 'btn btn-default' %
%= link_to 'Edit', edit_blog_path(blog), class: 'btn btn-info' %
%= link_to 'Destroy', blog, method: :delete, data: { confirm: 'Are you sure?' }, class: 'btn btn-danger' %

すると以下のように、簡単にボタンがデザインされました。

https://diveintocode.gyazo.com/a4a23a3b652f569685e9cb4ce5faa17a

このようにBootstrapは簡単にデザインをすることができます。
では他にどのようなデザインを実装できるのでしょうか?

  • ボタン
  • 入力欄
  • メニューバー
  • パネル
  • ドロップダウン
  • アラート
  • タブ

この他にもクラスを当てるだけで実装できるデザインがBootstrapにはあります。
詳しくは CSSコンポーネント などを参照してみてください。

一覧にもどる

DIVE INTO CODEのことをもっと知ってみませんか?