skillup

技術ブログ

UI デザイン

Bootstrapまとめ form+画像

投稿日:

前回に引き続きbootstrapネタについて。

フォーム

通常のinput

一般的なformですが、ラベルと入力欄、説明などがワンセットになっていることが多く、下記のようにまとめられます。

またradioやcheckboxなどは下記のように書けます。

項目名:入力欄の形式

今までは
項目名
入力欄
と縦に並べていましたが、幅がある程度ある場合には

「項目名 入力欄」などのように横一列に並べるほうがみやすいことも多いでしょう。その場合、下記のように書きます。

入力欄+ボタン(検索などでよくあるパターン)

画像

大きい画像+説明文みたいに画像を左寄せにし、それ以外の情報を右に寄せたいとき

参考リンク

辞書のように使えます。細かいのはほぼここで調べれば行けそう。
http://bootstrap3.cyberlab.info/components/

-UI, デザイン
-

執筆者:


comment

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

関連記事

no image

横からスクロール sidrの使い方

携帯サイトの場合、端末のサイズが小さいため、メニューなどはどう縮めてもやはり圧迫してしまいます。 そんなとき、クリックさせてスクロールさせるタイプであれば、場所が狭いことが気になりません。本日はそんな …

no image

フォーム入力のポイント

以前のエントリーにならってさらにフォーム入力のデザイン上のポイントなどを。 Contents1 選択肢は横よりも縦で2 エラーがすぐにわかる入力欄を3 会員登録ではメリットをわかりやすく4 必須項目は …

no image

transition関連

cssのanimationに関して。 例えばhoverしたときに色が変わる仕様はよくあることだと思いますが、transitionを入れることで時間差をつけることができます。 [crayon-669fc …

no image

tableでのヘッダー固定に関して+borderを描く時のコツ

Contents1 tableでのヘッダー固定について2 borderを描く時のコツ tableでのヘッダー固定について 超小ネタですが、tableのヘッダー固定に関して。 ソースは下記リンクに。 h …

no image

Bootstrapでのラジオボタンの装飾について(toggle)

ラジオボタンのようなn択式のチェックに関して、HTMLディフォルトのごついやつではなく、下記のようにボタンがへこんだものを実装したい場合の処理についてメモします。 下記のようなボタンの状態をtoggl …

アーカイブ