skillup

技術ブログ

UI デザイン

Bootstrapまとめ form+画像

投稿日:

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

フォーム

通常のinput

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

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

項目名:入力欄の形式

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

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

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

画像

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

参考リンク

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

-UI, デザイン
-

執筆者:


comment

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

関連記事

no image

jquery multipleについて(応用編) keepOrder

さて、複数選択だけなら前回のエントリーだけでなんとかなりますが、左の項目の順番を入れ変えて保存したい場合、難易度がかなり上がります。 公式ページには下記のように書けばOKとかいてあります。 [cray …

no image

css animationの使い方、他スクロース量でのアニメーションなど

transitionとちょっと近いですがCSSでのanimationに関して。 HTML

CSS [crayon-5bc579ad04 …

no image

lessについて(CSSライブラリ)

Contents1 lessって?1.1 スコープが使える1.2 変数が使える1.3 関数化1.4 インポート2 インストール3 コンパイル lessって? CSSの保守性を向上させるライブラリ。これ …

no image

ユーザーの行動パターン

ソフトウェアデザインにおいて必要な要素の列挙 Contents1 安全な探求2 即座の喜び3 最小限での充足4 途中での方針変更5 回答の先送り6 少しずつの組み立て7 習慣化8 空間的な記憶9 展望 …

no image

Seleniumの値基本動作まとめ

以前、「Seleniumでの画面テスト」というエントリーでのテストフレームワークとして、Seleniumを紹介しました。 上記のエントリーですが、単なるインストールと基本的な起動、簡単な文字入力ぐらい …