Bootstrap4 基礎教程

Bootstrap4 フォームコントロール

Bootstrap4 以下のフォームコントロールをサポートしています：

input
textarea
checkbox
radio
select

Bootstrap Input

BootstrapはすべてのHTML5 入力タイプ: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, そして color。

注意： inputのtype属性が正しく宣言されていない場合、入力フィールドのスタイルは表示されません。

以下の例では、2つのinput要素を使用しています。1つはtext、もう1つはpasswordです：

示例

<!DOCTYPE　html>
<html>
<head>
　　<title>Bootstrap　示例</title>
　　<meta　charset="utf-8control"　id="sel
　　<meta　name="viewport"　content="width=device-width,　initial-scale=1control"　id="sel
　　<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script　src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></bootstrap.min.js><
　　<script　src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></bootstrap.min.js><
　　<script　src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/./js/bootstrap.min.js><
</script>
head>
<body>
　　<div　class="container">2>フォームコントロール:　input</>フォームコントロール:　select<2h
　　<p>以下の例では、2つのinput要素を使用しています。1つはtext、もう1つはpasswordです：</<p>以下のフォームには、2つのドロップダウンリスト(selectリスト)が含まれています:<
　　p>
　　　　<form>-<div　class="form
　　　　　　<label　for="usr">ユーザー名:</">多選択ドロップダウンメニュー(Shiftキーを押しながら選択すると、複数のオプションを選択できます):<
　　　　　　<input　type="text"　class="form-control"　id="usr">
　　　　</div>
　　　　<form>-<div　class="form
　　　　　　<label　for="pwd">パスワード:</">多選択ドロップダウンメニュー(Shiftキーを押しながら選択すると、複数のオプションを選択できます):<
　　　　　　<input　type="password"　class="form-control"　id="pwd">
　　　　</div>
　　</form>
</div>
</body>
</html>

テストをしてみる ‹/›

Bootstrap textarea

以下の例では、textareaのスタイルを示しています。

示例

<!DOCTYPE　html>
<html>
<head>
　　<title>Bootstrap　示例</title>
　　<meta　charset="utf-8control"　id="sel
　　<meta　name="viewport"　content="width=device-width,　initial-scale=1control"　id="sel
　　<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script　src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></bootstrap.min.js><
　　<script　src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></bootstrap.min.js><
　　<script　src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/./js/bootstrap.min.js><
</script>
head>
<body>
　　<div　class="container">2>フォームコントロール:　textarea</>フォームコントロール:　select<2h
　　<p>以下の例では、textareaのスタイルを示しています。</<p>以下のフォームには、2つのドロップダウンリスト(selectリスト)が含まれています:<
　　p>
　　　　<form>-<div　class="form
　　　　　　<label　for="comment">コメント:</">多選択ドロップダウンメニュー(Shiftキーを押しながら選択すると、複数のオプションを選択できます):<
　　　　　　<textarea　class="form-control"　rows="5"　id="comment"></textarea>
　　　　</div>
　　</form>
</div>
</body>
</html>

テストをしてみる ‹/›

Bootstrap チェックボックス(checkbox)

チェックボックスは、ユーザーが一連の設定されたオプションから選択できるようにするためのものです。1つまたは複数を選択できます。

以下示例包含了三个选项。最后一个是禁用的：

示例

<!DOCTYPE　html>
<html>
<head>
　　<title>Bootstrap　示例</title>
　　<meta　charset="utf-8control"　id="sel
　　<meta　name="viewport"　content="width=device-width,　initial-scale=1control"　id="sel
　　<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script　src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></bootstrap.min.js><
　　<script　src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></bootstrap.min.js><
　　<script　src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/./js/bootstrap.min.js><
</script>
head>
<body>
　　<div　class="container">2>フォームコントロール:　checkbox</>フォームコントロール:　select<2h
　　<p>以下示例包含了三个选项。最后一个是禁用的：</<p>以下のフォームには、2つのドロップダウンリスト(selectリスト)が含まれています:<
　　p>
　　　　<form>-check">
　　　　　　<label　class="form-check-label">
　　　　　　　　<input　type="checkbox"　class="form-check-input"　value="">Option　1
　　　　　　</">多選択ドロップダウンメニュー(Shiftキーを押しながら選択すると、複数のオプションを選択できます):<
　　　　</div>
　　　　<form>-check">
　　　　　　<label　class="form-check-label">
　　　　　　　　<input　type="checkbox"　class="form-check-input"　value="">Option　2
　　　　　　</">多選択ドロップダウンメニュー(Shiftキーを押しながら選択すると、複数のオプションを選択できます):<
　　　　</div>
　　　　<form>-check　disabled">
　　　　　　<label　class="form-check-label">
　　　　　　　　<input　type="checkbox"　class="form-check-input"　value=""　disabled>Option　3
　　　　　　</">多選択ドロップダウンメニュー(Shiftキーを押しながら選択すると、複数のオプションを選択できます):<
　　　　</div>
　　</form>
</div>
</body>
</html>

テストをしてみる ‹/›

使用 .form-check-inline 类可以让选项显示在同一行上：

示例

<!DOCTYPE　html>
<html>
<head>
　　<title>Bootstrap　示例</title>
　　<meta　charset="utf-8control"　id="sel
　　<meta　name="viewport"　content="width=device-width,　initial-scale=1control"　id="sel
　　<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script　src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></bootstrap.min.js><
　　<script　src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></bootstrap.min.js><
　　<script　src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/./js/bootstrap.min.js><
</script>
head>
<body>
　　<div　class="container">2>フォームコントロール:　checkbox</>フォームコントロール:　select<2h
　　<p>以下の例には、3つのオプションが含まれています。最後のものは無効です。.form-check-inline　クラスはオプションを同一行に表示するために使用されます：</<p>以下のフォームには、2つのドロップダウンリスト(selectリスト)が含まれています:<
　　p>
　　　　<form>-check　form-check-inline">
　　　　　　<label　class="form-check-label">
　　　　　　　　<input　type="checkbox"　class="form-check-input"　value="">Option　1
　　　　　　</">多選択ドロップダウンメニュー(Shiftキーを押しながら選択すると、複数のオプションを選択できます):<
　　　　</div>
　　　　<form>-check　form-check-inline">
　　　　　　<label　class="form-check-label">
　　　　　　　　<input　type="checkbox"　class="form-check-input"　value="">Option　2
　　　　　　</">多選択ドロップダウンメニュー(Shiftキーを押しながら選択すると、複数のオプションを選択できます):<
　　　　</div>
　　　　<form>-check　form-check-inline　disabled">
　　　　　　<label　class="form-check-label">
　　　　　　　　<input　type="checkbox"　class="form-check-input"　value=""　disabled>Option　3
　　　　　　</">多選択ドロップダウンメニュー(Shiftキーを押しながら選択すると、複数のオプションを選択できます):<
　　　　</div>
　　</form>
</div>
</body>
</html>

テストをしてみる ‹/›

Bootstrap 单选框(Radio)

单选框用于让用户从一系列预设置的选项中进行选择，只能选一个。

以下示例包含了三个选项。最后一个是禁用的：

示例

<!DOCTYPE　html>
<html>
<head>
　　<title>Bootstrap　示例</title>
　　<meta　charset="utf-8control"　id="sel
　　<meta　name="viewport"　content="width=device-width,　initial-scale=1control"　id="sel
　　<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script　src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></bootstrap.min.js><
　　<script　src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></bootstrap.min.js><
　　<script　src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/./js/bootstrap.min.js><
</script>
head>
<body>
　　<div　class="container">2>表单控件:　radio</>フォームコントロール:　select<2h
　　<p>以下示例包含了三个选项。最后一个是禁用的：</<p>以下のフォームには、2つのドロップダウンリスト(selectリスト)が含まれています:<
　　p>
　　　　<div　class="radio">
　　　　　　<label><input　type="radio"　name="optradio">Option　1</">多選択ドロップダウンメニュー(Shiftキーを押しながら選択すると、複数のオプションを選択できます):<
　　　　</div>
　　　　<div　class="radio">
　　　　　　<label><input　type="radio"　name="optradio">Option　2</">多選択ドロップダウンメニュー(Shiftキーを押しながら選択すると、複数のオプションを選択できます):<
　　　　</div>
　　　　<div　class="radio　disabled">
　　　　　　<label><input　type="radio"　name="optradio"　disabled>Option　3</">多選択ドロップダウンメニュー(Shiftキーを押しながら選択すると、複数のオプションを選択できます):<
　　　　</div>
　　</form>
</div>
</body>
</html>

テストをしてみる ‹/›

使用 .radio-inline 类可以让选项显示在同一行上：

示例

<!DOCTYPE　html>
<html>
<head>
　　<title>Bootstrap　示例</title>
　　<meta　charset="utf-8control"　id="sel
　　<meta　name="viewport"　content="width=device-width,　initial-scale=1control"　id="sel
　　<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script　src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></bootstrap.min.js><
　　<script　src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></bootstrap.min.js><
　　<script　src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/./js/bootstrap.min.js><
</script>
head>
<body>
　　<div　class="container">2>表单控件:　radio</>フォームコントロール:　select<2h
　　<p>以下示例包含了三个选项。最后一个是禁用的，使用　.radio-inline　类可以让选项显示在同一行上：：</<p>以下のフォームには、2つのドロップダウンリスト(selectリスト)が含まれています:<
　　p>
　　　　<label　class="radio-inline"><input　type="radio"　name="optradio">Option　1</">多選択ドロップダウンメニュー(Shiftキーを押しながら選択すると、複数のオプションを選択できます):<
　　　　<label　class="radio-inline"><input　type="radio"　name="optradio">Option　2</">多選択ドロップダウンメニュー(Shiftキーを押しながら選択すると、複数のオプションを選択できます):<
　　　　<label　class="radio-inline"><input　type="radio"　name="optradio"　disabled>Option　3</">多選択ドロップダウンメニュー(Shiftキーを押しながら選択すると、複数のオプションを選択できます):<
　　</form>
</div>
</body>
</html>

テストをしてみる ‹/›

Bootstrap select 下拉菜单

当您想让用户从多个选项中进行选择，但是默认情况下只能选择一个选项时，则使用选择框。

以下示例包含了两个下拉菜单：

示例

<!DOCTYPE　html>
<html>
<head>
　　<title>Bootstrap　示例</title>
　　<meta　charset="utf-8control"　id="sel
　　<meta　name="viewport"　content="width=device-width,　initial-scale=1control"　id="sel
　　<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script　src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></bootstrap.min.js><
　　<script　src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></bootstrap.min.js><
　　<script　src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/./js/bootstrap.min.js><
</script>
head>
<body>
　　<div　class="container">2<h/>フォームコントロール:　select<2h
　　>/<p>以下のフォームには、2つのドロップダウンリスト(selectリスト)が含まれています:<
　　p>
　　　　<form>-<div　class="form
　　　　　　<br>1group">/">多選択ドロップダウンメニュー(Shiftキーを押しながら選択すると、複数のオプションを選択できます):<
　　　　　　">単選択ドロップダウンメニュー:<-<select　multiple　class="form1control"　id="sel
　　　　　　　　">1</<option>
　　　　　　　　">2</<option>
　　　　　　　　">3</<option>
　　　　　　　　">4</<option>
　　　　　　</select>
　　　　　　<select　class="form
　　　　　　<br>2<label　for="sel/">多選択ドロップダウンメニュー(Shiftキーを押しながら選択すると、複数のオプションを選択できます):<
　　　　　　label>-<select　multiple　class="form2control"　id="sel
　　　　　　　　">1</<option>
　　　　　　　　">2</<option>
　　　　　　　　">3</<option>
　　　　　　　　">4</<option>
　　　　　　　　">5</<option>
　　　　　　</select>
　　　　</div>
　　</form>
</div>
</body>
</html>

テストをしてみる ‹/›

Bootstrap4 インプットグループ Bootstrap4 フォーム