Bootstrapでのselectの使い方を紹介｜selectを正しく使いこなそう
Bootstrapでのselectの使い方とは？
今回は、Bootstrapでのselectの使い方について説明します。
selectとは、セレクトボックスのことです。
複数の要素から選択できます。
ここでは、
・基本的な使い方
・optgroup
・複数選択可能なセレクトボックス
・カスタムコントロール
・無効化
について紹介します。
Bootstrapでのselectの使い方に興味のある方はぜひご覧ください。
基本的な使い方
Bootstrapでのセレクトボックスの基本的な使い方を紹介します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<div class="form-group"> <label for="select1">Select:</label> <select id="select1" class="form-control"> <option>Select item1</option> <option>Select item2</option> <option>Select item3</option> </select> </div> selectedを指定すると、初期選択状態を指定できます。 <div class="form-group"> <label for="select2">Select:</label> <select id="select2" class="form-control"> <option>Select item1</option> <option selected="selected">Select item2</option> <option>Select item3</option> </select> </div> |
See the Pen
bootstrap_select1 by kskumd (@kskumd)
on CodePen.
optgroup
Bootstrapではセレクトボックスの選択肢をグループ化できます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<div class="form-group"> <label for="select1">Select:</label> <select id="select1" class="form-control"> <optgroup label="Group1"> <option>Group1 item1</option> <option>Group1 item2</option> <option>Group1 item3</option> </optgroup> <optgroup label="Group2"> <option>Group2 item1</option> <option>Group2 item1</option> <option>Group2 item1</option> </optgroup> </select> </div> |
See the Pen
bootstrap_select2 by kskumd (@kskumd)
on CodePen.
このように、Bootstrapではセレクトボックスの選択肢をグループ化できます。
複数選択可能なセレクトボックス
Bootstrapでは、multipleを指定することで、複数選択可能なセレクトボックスにできます。
|
1 2 3 4 5 6 7 8 |
<div class="form-group"> <label for="select1">Select:</label> <select id="select1" class="custom-select" multiple> <option>Select item1</option> <option>Select item2</option> <option>Select item3</option> </select> </div> |
See the Pen
bootstrap_select3 by kskumd (@kskumd)
on CodePen.
このように、Bootstrapではmultipleを指定することで、複数選択可能なセレクトボックスにできます。
カスタムコントロール
Bootstrapでは、カスタムコントロールを使用して、セレクトボックスのサイズを変更できます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<div class="form-group"> <label for="custom-select-1">custom-select:</label> <select id="custom-select-1" class="custom-select"> <option>Select item1</option> <option>Select item2</option> <option>Select item3</option> </select> </div> <div class="form-group"> <label for="custom-select-2">custom-select-sm:</label> <select id="custom-select-2" class="custom-select custom-select-sm"> <option>Select item1</option> <option>Select item2</option> <option>Select item3</option> </select> </div> <div class="form-group"> <label for="custom-select-3">custom-select-lg:</label> <select id="custom-select-3" class="custom-select custom-select-lg"> <option>Select item1</option> <option>Select item2</option> <option>Select item3</option> </select> </div> |
See the Pen
bootstrap_select4 by kskumd (@kskumd)
on CodePen.
無効化
Bootstrapでは、disabledを指定することで、セレクトボックスを無効化できます。
|
1 2 3 4 5 6 7 8 |
<div class="form-group"> <label for="select1">Select:</label> <select disabled id="select1" class="form-control"> <option>Select item1</option> <option>Select item2</option> <option>Select item3</option> </select> </div> |
See the Pen
bootstrap_select5 by kskumd (@kskumd)
on CodePen.
selectを正しく使いこなそう！
いかがでしたでしょうか。
Bootstrapでのselectの使い方について説明しました。
selectとは、セレクトボックスのことで、複数の要素から選択が可能です。
ここでは、
・基本的なselectの使い方
・optgroup
・複数選択可能なセレクトボックス
・カスタムコントロール
・無効化
について紹介しました。
ぜひご自身でソースコードを書いて、理解を深めてください。
