Bootstrap4 基本教程

Bootstrap4 カスタムフォーム Bootstrap4 フォームコントロール

Bootstrap4 入力フィールドグループ

我们也可以使用 .input-group クラスを使用してフォームの入力フィールドに追加するスタイルを追加します、例えばアイコン、テキストまたはボタン。

使用 .input-group-prepend クラスを使用して入力フィールドの前にテキスト情報を追加します、.input-group-append クラスを使用して入力フィールドの後ろに追加します。

最後に、.inputを使用する必要があります-group-text クラスを使用してテキストのスタイルを設定します。

Bootstrap4 示例

<!DOCTYPE　html>
<html>
<head>
　　<title>Bootstrap　示例</title>
　　<meta　charset="utf-8">
　　<meta　name="viewport"　content="width=device-width,　initial-scale=1">
　　<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"></script>
　　<script　src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script　src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="container　mt-3">
　　<h2>入力フィールドグループ</h2>
　　<p>　.input-group　.input-group クラスを使用してフォームの入力フィールドに追加するスタイルを追加します、例えばアイコン、テキストまたはボタン、.input-group-prepend　クラスを使用して前に追加、.input-group-append　後ろに追加。</p>
　　<p>使用　.input-group-text　クラスを使用してテキストのスタイルを設定。</p>
　　
　　<form　action="/action_page.php">
　　　　<div　class="input-group　mb-3">
　　　　　　<div　class="input-group-prepend">
　　　　　　　　<span　class="input-group-text">@</span>
　　　　　　</div>
　　　　　　<input　type="text"　class="form-control"　placeholder="ユーザー名"　id="usr"　name="username">
　　　　</div>
　　　　<div　class="input-group　mb-3">
　　　　　　<input　type="text"　class="form-control"　placeholder="Email"　id="mail"　name="email">
　　　　　　<div　class="input-group-append">
　　　　　　　　<span　class="input-group-text">@oldtoolbag.com</span>
　　　　　　</div>
　　　　</div>
　　　　<button　type="submit"　class="btn　btn-primary">提出</button>
　　</form>
</div>
</body>
</html>

テストしてみる ‹/›

実行結果は以下の通りです：

入力ボックスのサイズ

使用 .input-group-sm　クラスを使用して小さな入力ボックスを設定、.input-group-lg　クラスを使用して大きな入力ボックスを設定：

Bootstrap4 示例

<!DOCTYPE　html>
<html>
<head>
　　<title>Bootstrap　示例</title>
　　<meta　charset="utf-8">
　　<meta　name="viewport"　content="width=device-width,　initial-scale=1">
　　<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"></script>
　　<script　src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script　src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="container　mt-3">
　　<h1>入力ボックスのサイズ</h1>
　　<p>使用　.input-group-sm　クラスを使用して小さな入力ボックスを設定、.input-group-lg　クラスを使用して大きな入力ボックスを設定：</p>
　　<form>
　　　　<div　class="input-group　mb-3　input-group-sm">
　　　　　　<div　class="input-group-prepend">
　　　　　　　　<span　class="input-group-text">小</span>
　　　　　　</div>
　　　　　　<input　type="text"　class="form-control">
　　　　</div>
　　</form>
　　<form>
　　　　<div　class="input-group　mb-3">
　　　　　　<div　class="input-group-prepend">
　　　　　　　　<span　class="input-group-text">デフォルト</span>
　　　　　　</div>
　　　　　　<input　type="text"　class="form-control">
　　　　</div>
　　</form>
　　<form>
　　　　<div　class="input-group　mb-3　input-group-lg">
　　　　　　<div　class="input-group-prepend">
　　　　　　　　<span　class="input-group-text">Large</span>
　　　　　　</div>
　　　　　　<input　type="text"　class="form-control">
　　　　</div>
　　</form>
</div>
</body>
</html>

テストしてみる ‹/›

実行結果は以下の通りです：

複数の入力ボックスとテキスト

Bootstrap4 示例

<!DOCTYPE　html>
<html>
<head>
　　<title>Bootstrap　示例</title>
　　<meta　charset="utf-8">
　　<meta　name="viewport"　content="width=device-width,　initial-scale=1">
　　<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"></script>
　　<script　src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script　src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="container　mt-3">
　　<h2>複数の入力ボックスとテキスト</h2>
　　
　　<form>
　　　　<div　class="input-group　mb-3">
　　　　　　<div　class="input-group-prepend">
　　　　　　　　<span　class="input-group-text">Person</span>
　　　　　　</div>
　　　　　　<input　type="text"　class="form-control"　placeholder="First　Name">
　　　　　　<input　type="text"　class="form-control"　placeholder="Last　Name">
　　　　</div>　　
　　</form>
　　
　　<form>
　　　　<div　class="input-group　mb-3">
　　　　　　<div　class="input-group-prepend">
　　　　　　　　<span　class="input-group-text">One</span>
　　　　　　　　<span　class="input-group-text">Two</span>
　　　　　　　　<span　class="input-group-text">Three</span>
　　　　　　</div>
　　　　　　<input　type="text"　class="form-control">
　　　　</div>
　　</form>
</div>
</body>
</html>

テストしてみる ‹/›

実行結果は以下の通りです：

チェックボックスとラジオボタン

テキスト情報はチェックボックスとラジオボタンで置き換えることができます：

Bootstrap4 示例

<!DOCTYPE　html>
<html>
<head>
　　<title>Bootstrap　示例</title>
　　<meta　charset="utf-8">
　　<meta　name="viewport"　content="width=device-width,　initial-scale=1">
　　<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"></script>
　　<script　src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script　src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="container　mt-3">
　　<h2>チェックボックスとラジオボタン</h2>
　　<p>テキスト情報はチェックボックスとラジオボタンで置き換えることができます：</p>
　　<form>
　　　　<div　class="input-group　mb-3">
　　　　　　<div　class="input-group-prepend">
　　　　　　　　<div　class="input-group-text">
　　　　　　　　　　<input　type="checkbox">　
　　　　　　　　</div>
　　　　　　</div>
　　　　　　<input　type="text"　class="form-control"　placeholder="w3codebox">
　　　　</div>
　　</form>
　　
　　<form>
　　　　<div　class="input-group　mb-3">
　　　　　　<div　class="input-group-prepend">
　　　　　　　　<div　class="input-group-text">
　　　　　　　　　　<input　type="radio">　
　　　　　　　　</div>
　　　　　　</div>
　　　　　　<input　type="text"　class="form-control"　placeholder="GOOGLE">
　　　　</div>
　　</form>
</div>
</body>
</html>

テストしてみる ‹/›

実行結果は以下の通りです：

入力ボックスにボタンチームを追加

Bootstrap4 示例

<!DOCTYPE　html>
<html>
<head>
　　<title>Bootstrap　示例</title>
　　<meta　charset="utf-8">
　　<meta　name="viewport"　content="width=device-width,　initial-scale=1">
　　<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"></script>
　　<script　src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script　src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="container　mt-3">
　　<h1>入力ボックスにボタンチームを追加</h1>
　　<div　class="input-group　mb-3">
　　　　<div　class="input-group-prepend">
　　　　　　<button　class="btn　btn-outline-secondary"　type="button">Basic　Button</button>　　
　　　　</div>
　　　　<input　type="text"　class="form-control"　placeholder="Some　text">
　　</div>
　　<div　class="input-group　mb-3">
　　　　<input　type="text"　class="form-control"　placeholder="Search">
　　　　<div　class="input-group-append">
　　　　　　<button　class="btn　btn-success"　type="submit">Go</button>　　
　　　　　</div>
　　</div>
　　<div　class="input-group　mb-3">
　　　　<input　type="text"　class="form-control"　placeholder="Something　clever..">
　　　　<div　class="input-group-append">
　　　　　　<button　class="btn　btn-primary"　type="button">OK</button>　　
　　　　　　<button　class="btn　btn-danger"　type="button">キャンセル</button>　　
　　　　　</div>
　　</div>
</div>
</body>
</html>

テストしてみる ‹/›

実行結果は以下の通りです：

ドロップダウンメニューの設定

エンター・フィールドにドロップダウンメニューを追加する場合、.dropdownクラスを使用する必要はありません。

Bootstrap4 示例

<!DOCTYPE　html>
<html>
<head>
　　<title>Bootstrap　示例</title>
　　<meta　charset="utf-8">
　　<meta　name="viewport"　content="width=device-width,　initial-scale=1">
　　<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"></script>
　　<script　src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script　src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="container　mt-3">
　　<h2>ドロップダウンメニューの設定</h2>
　　<p>エンター・フィールドにドロップダウンメニューを追加する場合、.dropdownクラスを使用する必要はありません。</p>
　　<form>
　　　　<div　class="input-group　mt-3　mb-3">
　　　　　　<div　class="input-group-prepend">
　　　　　　　　<button　type="button"　class="btn　btn-outline-secondary　dropdown-toggle"　data-toggle="dropdown">
　　　　　　　　　　ウェブサイトを選択
　　　　　　　　</button>
　　　　　　　　<div　class="dropdown-menu">
　　　　　　　　　　<a　class="dropdown-item"　href="https://www.google.com">GOOGLE</a>
　　　　　　　　　　<a　class="dropdown-item"　href="https://ja.oldtoolbag.com">w3codebox</a>
　　　　　　　　　　<a　class="dropdown-item"　href="https://www.taobao.com">TAOBAO</a>
　　　　　　　　</div>
　　　　　　</div>
　　　　　　<input　type="text"　class="form-control"　placeholder="ウェブサイトのアドレス">
　　　　</div>
　　</form>
</div>
</body>
</html>

テストしてみる ‹/›

実行結果は以下の通りです：

エンター・フィールド・グループラベル

エンター・フィールド・グループをラベルで設定することで、ラベルのfor属性がエンター・フィールド・グループのidと一致し、ラベルをクリックするとエンター・フィールドがフォーカスされます：

Bootstrap4 示例

<!DOCTYPE　html>
<html>
<head>
　　<title>Bootstrap　示例</title>
　　<meta　charset="utf-8">
　　<meta　name="viewport"　content="width=device-width,　initial-scale=1">
　　<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"></script>
　　<script　src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script　src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="container　mt-3">
　　<h2>インプットグループラベル</h2>
　　<p>インプットグループのラベルを設定する際には、インプットグループのラベルのfor属性がインプットグループのidに対応する必要があります。</p>
　　<p>タグをクリックするとインプットフィールドにフォーカスが移動します：</p>
　　<form>
　　　　<label　for="demo">ここにあなたのメールアドレスを入力してください:</label>
　　　　<div　class="input-group　mb-3">
　　　　　　<input　type="text"　class="form-control"　placeholder="Email"　id="demo"　name="email">
　　　　　　<div　class="input-group-append">
　　　　　　　　<span　class="input-group-text">@oldtoolbag.com</span>
　　　　　　</div>
　　　　</div>
　　</form>
</div>
</body>
</html>

テストしてみる ‹/›

実行結果は以下の通りです：

Bootstrap4 カスタムフォーム Bootstrap4 フォームコントロール