skillup

技術ブログ

UI デザイン

Bootstrapまとめ form+画像

投稿日:

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

フォーム

通常のinput

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

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

項目名:入力欄の形式

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

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

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

画像

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

参考リンク

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

-UI, デザイン
-

執筆者:


comment

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

関連記事

no image

laravel Mix

Contents1 laravel Mix2 インストール laravel Mix 実務でlessを使っていて便利なのですが、コンパイルをatomのプラグインで行っていました。 ※保存されると自動的に …

no image

CSSで背景画像の出力 ~透過編~

前回CSSで大きな背景画像のなかにhtmlを置く方法をメモしたんですが、背景画像を透過させたいときなどのメモを書いておきます。 一般的に画像の透過といえばCSSでopacity:0.6とかやれば簡単な …

no image

cakePHPのSSL設定+jQueryのError Loading Page

cakeで作ったアプリの認証画面でhttps環境だとError Loading Pageというエラーメッセージがでてしまい、ログインできないという事象が発生。 最初はSSLが原因かとおもっていたんです …

no image

timepickerについて

日付を入力するときに直接、文字入力するのがメンドイことからカレンダーが表示されるプラグインを使っている人は多いでしょう。 私も日頃Datepickerというライブラリを使っています。が、このプラグイン …

no image

一般的なWebサイト制作について

実務で通常のWebサイトを作成するというお仕事が。 Webサイトを改めて作成するっていう経験からはだいぶ遠のいてましたんで、これを機にスキルをまとめたいなーって思います。 サイト作成といっても本格的な …