便利なBootstrapデザイン

この記事はアピリッツの技術ブログ「DoRuby」から移行した記事です。情報が古い可能性がありますのでご注意ください。

rickNo40です。
管理画面デザインをデザイナーが作ることはあまりないので、各ブラウザの調整など苦労したりします。
そこで、簡単に綺麗な管理画面が作成できるのがBootstrapです。
少々触る機会があったのでよく使ったデザインを少しだけ紹介下記全てクラス名

「col-md-?」
?部分は1~12の数字になります。
これは、1つのブロックを12分割し指定した分割分の領域を使用します。
入力フォームの幅を調整したり、
1行に幾つか要素を置くときに2,4,2,4で分割したりと便利です。

「text-left,text-center,text-right」
左寄せ・中央寄せ・右寄せですね。
使いたい時に、あぁまたcss設定しなきゃなんてならず、class名指定するだけなので楽です。

「table」
テーブルの基本デザイン
管理画面の大抵の画面がこれを使用して作ればいいです。

「table-striped」
テーブルで１行毎に色を変えてくれます。
縦結合する場合はだめですが、一覧表示するときは良い感じです。

「table-bordered」
テーブルの枠を表示します。
線があると無いとではやっぱり引き締まり具合が違います。
提供する管理画面なんかだったらborderはつけたが方がいいかと自分は思います。

「table-condensed」
テーブルの余白を縮めます
bootstarp基本的に余白多いんですよね。
1画面に収める量を増やしたい場合は、つけたほうがいいです。

「form-group,form-control」
入力フォーム系にはとりあえず付けておけばいいかと

「input-groupで囲んでinput-group-addon」
入力フォームの前や後ろに単位などをつけたりできます。
普通に書くと入力フォームと高さが微妙に違ってたりなんてことがあるので結構便利です。

と、こんな感じでルールが決まっているとそれを設定するだけなのでとても楽です。
Bootstrapでつくったからといって必ず綺麗になるわけでもありませんが、
少し試してみるのもいいかと思います。