skillup

技術ブログ

UI デザイン

Bootstrapまとめ form+画像

投稿日:

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

フォーム

通常のinput

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

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

項目名:入力欄の形式

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

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

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

画像

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

参考リンク

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

-UI, デザイン
-

執筆者:


comment

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

関連記事

no image

sassについて

以前ちょろっと勉強していたことはあるんですが、仕事で使うことになりそうなんで復習。 Contents1 sassとは2 インストール&コンパイル3 一般的な記法など4 参考リンク sassとは 一言で …

no image

cakePHP+bootstrapでのページャー

cakePHP+bootstrapでページャーのリンクを下記のように出力したいときのメモを。 ソース コントローラーのほうでは特に設定する必要なはく、HTMLのほうで下記のように設定すればOKです。 …

no image

jquery multipleについて(基本編)

selectで複数選択をするときには通常のプルダウンでも可能ですが、プラグインを使うともっとスマートに対応できます。 今回私が実装したかったのがCSVアップロードorダウンロードで項目を自由に変更した …

no image

AngularJS テーブル行のソート入れ替え&ドラック&ドロップ

受注伝票みたいなものを作ると伝票の登録画面はヘッダーと明細に分かれますね。 私が携わったプロジェクトでは、大体一画面でヘッダー情報と明細情報を入力することが一般的でした。 今回AngularJSでその …

no image

CSSのレイアウト例 その1 カラムレイアウト

本日はCSSのレイアウト例に関してよくあるものを見てみようと思います。 例によってサイトが具体的にどうなっているかを知りたい方は「プロとして恥ずかしくない 新・CSSデザインの大原則」を買いましょう。 …