月別: 2015年11月

BootStrapを使ってみる Form 前編

今度は入力フォーム
正直見た目としてはあまり代わり映えしないけど。
前半は各Formの基本から

基本形はform-groupクラスで囲ってラベル等をグルーピング、
Inputタグにform-coltrolクラスを指定する

・form-groupに属するlabelをクリックしてもinputタグ領域をクリックするのと同等の動きをする。
・横幅はWidth100%なので、このままでは横には並べられない(※横に並べる方法は後編で)

ちなみにソースに書かれたplaceholderはHTML5の新機能

              

Text入力

20151125_01

              

TextArea

20151125_06

              

File入力

20151125_02

              

チェックボックス

20151125_03

              

ラジオボタン

20151125_05

              

リスト

20151125_04

              

後編に続く

ふちねこ

ベローチェのふちねこコンプした。

元々カフェなんて、打ち合わせ以外で行かない人なので、
完全にふちねこのために通ったさ。

DSCN1185

これはドリンクを3杯分のレシートで1個もらえます。
レシートは1杯分のを3枚でも可。とにかく3杯分ならいいのだ。
コンプには15杯ドリンクを注文すればいいんですが、
そんな高レベルな羞恥プレーはできないので、
ちまちまと集めました。

http://fuchineko.chatnoir-company.com/

各店舗の在庫数までwebから確認できるので
欲しい人はこれを参考に。

しかし残念なのはこれ、あんまり安定しない。
コップのフチにつけていても、
気がつくとポロッと落ちている。

まぁいいんだけどね。そんなことは大した問題では無いのだ。
この可愛さの前では

Bootstrapを使ってみる Table編

まずは基本形

20151108_01

これはtableタグにtableクラスを指定しただけの状態。
これだけで何かシャープな感じがする。
コードは以下

theadとtbodyのタグを指定してヘッダと表データを明確に区別すると
表示も変わります。
表内のデータはthタグを指定すると強調されます。

20151108_02

 

table-striped

table-stripedクラスを追加で指定すると、
奇数行に背景色が付くようになる。

20151108_03

 

table-bordered

table-borderedクラスを追加で指定すると、枠線が付き、
従来のテーブル表示に近い形に

20151108_04

 

table-hover

table-hoverクラスを追加で指定すると、
マウスカーソルを合わせた行の色が変わるようになる。
もちろんマウスカーソルを外すと元の色に戻る

20151108_04

 

Condensed table

table-condensedクラスを追加で指定すると、
通常に比べてコンパクトな表になる。
公式の説明みると各Cellのpaddingが半分になっている模様

20151108_05

 

Contextual classes

tr、td、thにクラスを指定することでbuttonの時のように色付けが可能。
trで行単位。
td、thでセル単位に色付けが可能
指定可能なクラスは以下

    • active
      success
      info
      warning
      danger
  • 20151108_06