テクノロジー
2017年10月3日Bootstrapについて
![](https://diveintocode.s3-ap-northeast-1.amazonaws.com/uploads/eye_catch/blog/39/tips_Bootstrap.png?X-Amz-Expires=600&X-Amz-Date=20240727T041535Z&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIAIWFR7K2KHQDYVHJA/20240727/ap-northeast-1/s3/aws4_request&X-Amz-SignedHeaders=host&X-Amz-Signature=02648c1ba6bdd1b2df8618085a5cd442038dc0561cd2eadc31d621b43c048ca3)
CSSの有名なフレームワークの一つであるBootstrapの機能について解説をしていきます。
Bootstrapについて
今回は、CSSの有名なフレームワークの一つであるBootstrapの機能について解説をしていきます。
Railsと同様に、実装に必要な記述を非常に簡略化してくれる優れものですので、ぜひ使い方を覚えてみてください。
Bootstrapとは
BootstrapとはCSSで構成された フレームワーク
のことです。
フレームワークという言葉、どこかで聞き覚えはありませんか?
そうです、RailsやSinatraは Ruby
という言語のフレームワークでしたね。
Railsを入れることでDBとの連携(ActiveRecord)やMVC、Railsコマンドが使用できるようになりました。
一方でBootstrapは CSS
という言語のフレームワークです。
では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' %
すると以下のように、簡単にボタンがデザインされました。
このようにBootstrapは簡単にデザインをすることができます。
では他にどのようなデザインを実装できるのでしょうか?
- ボタン
- 入力欄
- 表
- メニューバー
- パネル
- ドロップダウン
- アラート
- タブ
この他にもクラスを当てるだけで実装できるデザインがBootstrapにはあります。
詳しくは CSS や コンポーネント などを参照してみてください。