Input groups(インプットグループ)

サンプル01-テキストを表示

@

.00

$ .00
機能

 入力フォームの左・右・左右にテキストを表示します
 テキストはグレー表示されます

コーディング
.input-group
01-04行目 テキスト・入力フォームを.input-groupで囲い、グループ表示を行います
.input-group-addon
2行目 テキストは<span>で記述し.input-group-addonを指定します

サンプル02-表示サイズを指定してインプットグループを表示

@

@

@
機能

グループ表示単位で表示サイズの指定を行います

コーディング
.input-group-lg
01行目 .input-group-lgを指定すると大きめのサイズで表示されます
.input-group-sm
09行目 .input-group-smを指定すると小さめのサイズで表示されます

サンプル03-チェックボックスやラジオボタンを追加

機能

 チェックボックスやラジオボタンを追加します

コーディング
.input-group
01-06行目 チェックボックスやラジオボタン・入力フォームを.input-groupで囲い、グループ表示を行います
.input-group-addon
02-04・09-11行目 チェックボックスやラジオボタンは<span>で囲い.input-group-addonを指定します

サンプル04-ボタンを追加

機能

 ボタンを追加します

コーディング
.input-group
01-06行目 ボタン・入力フォームを.input-groupで囲いグループ表示を行います
.input-group-btn
02-04行目 ボタンは<span>で囲い.input-group-btnを指定します

サンプル05-ドロップダウンボタンを追加

機能

 ドロップダウンボタンを追加します

コーディング
.input-group
01-13行目 ドロップダウンボタン・入力フォームを.input-groupで囲いグループ表示を行います
.input-group-btn
02-11行目 ドロップダウンボタンは<div>で囲い.input-group-btnを指定します

サンプル06-セグメントボタンを追加

機能

 セグメントボタンを追加します
 複数のボタンを配置していますが複雑にならないように使用してください

コーディング
.input-group
01-17行目 ボタン・ドロップダウンボタン・入力フォームを.input-groupで囲いグループ表示を行います
.input-group-btn
02-15行目 ボタン・ドロップダウンボタンは<div>で囲い.input-group-btnを指定します