Input groups(インプットグループ)
テキストベースの入力フォームの両側に、テキストや各種ボタンを追加しグループ表示を行います。
テキストの追加はよく使われている機能だと思います。
サンプル01-テキストを表示
機能
入力フォームの左・右・左右にテキストを表示します
テキストはグレー表示されます
コーディング
- .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を指定します