Bootstrap4 基本教程

Bootstrap4 カスタムフォーム

　　 Bootstrap4 ブラウザのデフォルトのスタイルを置き換えるために、フォームのスタイルをカスタマイズできます。

カスタム複選ボックス

カスタムの複選ボックスを作成するには、<div>を親要素として設定し、クラスを.customに設定します。-controlと.custom-checkbox、複選ボックスはその<div>内に子要素として配置され、次に複選ボックスが設定されます。 type="checkbox"、クラスは.customにします。-control-input。

チェックボックスのテキストは label タグ、タグは　.custom　を使用します-control-label　クラス、label の 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>カスタムチェックボックスを設定するには、<div>を親要素として設定し、クラスは.customにします。-controlと.custom-checkbox、チェックボックスはこの<div>の子要素として配置し、チェックボックスはtype="checkbox"、クラスは.customに設定します。-control-input。</p>
　　<p>チェックボックスのテキストはlabelタグを使用し、タグは.customを使用します。<-control-label　クラス、labelのfor属性値はチェックボックスのidと一致する必要があります。</p>
　　<form　action="/action_page.php">
　　　　<div　class="custom-control custom-checkbox　mb-3">
　　　　　　<input　type="checkbox"　class="custom-control-input"　id="customCheck"　name="example1">
　　　　　　<label　class="custom-control-label"　for="customCheck">カスタムチェックボックス</label>
　　　　</div>
　　　　<input　type="checkbox"　id="defaultCheck"　name="example2">
　　　　<label　for="defaultCheck">デフォルトチェックボックス</label>
　　　　<br>
　　　　<button　type="submit"　class="btn　btn-primary">提出</button>
　　</form>
</div>
</body>
</html>

テストしてみてください ‹/›

実行後の効果は以下の通りです:

カスタムラジオボタン

カスタムラジオボタンを設定するには、 <div> を親要素として設定し、クラスは.customにします。-controlと.custom-radio、ラジオボタンはこのdivの子要素として配置し、 <div> 内に設定し、ラジオボタンは type="radio"、クラスは.customにします。-control-input。

ラジオボタンのテキストは label タグ、タグは　.custom　を使用します-control-label　クラス、label の for 属性値はラジオボタンのidと一致する必要があります。 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>カスタムラジオボタンを設定するには、divを親要素として設定し、クラスは.customにします。-controlと.custom-radio、チェックボックスはこのdivの子要素として配置し、ラジオボタンはtype="radio"、クラスは.customに設定します。-control-input。</p>
　　<p>ラジオボタンのテキストはlabelタグを使用し、タグは.customを使用します。<-control-label　クラス、labelのfor属性値はラジオボタンのidと一致する必要があります。</p>
　　<form　action="/action_page.php">
　　　　<div　class="custom-control custom-radio">
　　　　　　<input type="radio" class="custom-control-input"　id="customRadio"　name="example1">
　　　　　　<label　class="custom-control-label"　for="customRadio">カスタムラジオボタン</label>
　　　　</div>　　　　
　　　　<input　type="radio"　id="defaultRadio"　name="example2">
　　　　<label for="defaultRadio">デフォルトのラジオボタン</label>
　　　　<br>
　　　　<button　type="submit"　class="btn　btn-primary">提出</button>
　　</form>
</div>
</body>
</html>

テストしてみてください ‹/›

実行後の効果は以下の通りです:

カスタムコントロールを同じ行に表示

外部要素上で.customを使用できます-control-inlineクラスを使用してカスタムフォームコントロールを囲み、これによりカスタムフォームコントロールが同じ行に表示されます：

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>外部要素上で.customを使用できます-control-inlineクラスを使用してカスタムフォームコントロールを囲み、これによりカスタムフォームコントロールが同じ行に表示されます：</p>
　　<form　action="/action_page.php">
　　　　<div　class="custom-control custom-radio custom-control-inline">
　　　　　　<input type="radio" class="custom-control-input" id="customRadio1" name="example1">
　　　　　　<label　class="custom-control-label" for="customRadio1">カスタムラジオボタン　1</label>
　　　　</div>
　　　　<div　class="custom-control custom-radio custom-control-inline">
　　　　　　<input type="radio" class="custom-control-input" id="customRadio2" name="example2">
　　　　　　<label　class="custom-control-label" for="customRadio2">カスタムラジオボタン　2</label>
　　　　</div>
　　　　<button　type="submit"　class="btn　btn-primary">提出</button>
　　</form>
</div>
</body>
</html>

テストしてみてください ‹/›

実行後の効果は以下の通りです:

カスタム選択メニュー

カスタム選択メニューを作成する場合、 <select> 要素に.customを追加します-selectクラス:

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>カスタム選択メニューを作成する場合、select要素に.customを追加できます-selectクラス:/p>
　　<form>
　　<select name="cars" class="custom-select-sm">
　　　　<option selected>カスタム選択メニュー</option>
　　　　<option value="Google">Google</option>
　　　　<option value="w3codebox">w3codebox</option>
　　　　<option value="Taobao">Taobao</option>
　　</select>
　</form>
</div>
</body>
</html>

テストしてみてください ‹/›

実行後の効果は以下の通りです:

カスタム選択メニューのサイズを設定する場合、.customを使用できます-select-sm、.custom-select-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">
　　<h2>カスタム選択メニューのサイズ</h2>
　　<p>カスタム選択メニューのサイズを設定する場合、.customを使用できます-select-sm、.custom-select-lgを使用してサイズを設定します:/p>
　　<form>
　　　　<!--　小　-->
　　　　<select name="cars" class="custom-select-sm">
　　　　　　<option selected>小さいカスタム選択メニュー</option>
　　　　　　<option value="Google">Google</option>
　　　　　　<option value="w3codebox">w3codebox</option>
　　　　　　<option value="Taobao">Taobao</option>
　　　　</select>
　　　
　　　　<!--　大　-->
　　　　<select name="cars" class="custom-select-lg">
　　　　　　<option selected>大きなカスタム選択メニュー</option>
　　　　　　<option value="Google">Google</option>
　　　　　　<option value="w3codebox">w3codebox</option>
　　　　　　<option value="Taobao">Taobao</option>
　　　　</select>
　　</form>
</div>
</body>
</html>

テストしてみてください ‹/›

実行後の効果は以下の通りです:

カスタムスライダーコントロール

私たちは、 input 　として type="range" のフィールドに.customを追加します-rangeクラスを使用してカスタムスライダーコントロールを設定します:

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>私たちは、type="range"のinputフィールドに.customを追加できます-range　クラスを使用してカスタムスライダーコントロールを設定します:</p>
　　<form　action="/action_page.php">
　　　　<label　for="customRange">カスタムスライダーコントロール</label>
　　　　<input　type="range"　class="custom-range"　id="customRange"　name="points1">
　　　　<label　for="defaultRange">デフォルトのスライダーコントロール</label>
　　　　<input　type="range"　id="defaultRange"　name="points2">
　　　　<p><button　type="submit"　class="btn　btn-primary">提出</button></p>
　　</form>
</div>
</body>
</html>

テストしてみてください ‹/›

実行後の効果は以下の通りです:

カスタムファイルアップロードコントロール

親要素に　.custom　を追加できます .custom-file クラス、その後　input に設定します type="file" 并み．custom　を追加します-file-input:

アップロードコントロールのテキストは label タグ、タグは　.custom　を使用します-file-label　クラス、label の 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>親要素に　.custom　を追加できます-file　クラス、その後　input　を　type="file"　に設定し　.custom　を追加します-control-label:</p>
　　<form　action="/action_page.php">
　　　　<p>カスタムアップロードファイルスタイル:</p>/p>
　　　　<div　class="custom-file　mb-3">
　　　　　　<input　type="file"　class="custom-file-input"　id="customFile"　name="filename">
　　　　　　<label　class="custom-file-label"　for="customFile">ファイルを選択</label>
　　　　</div>
　　　　
　　　　<p>デフォルトのアップロードファイルスタイル:</p>/p>
　　　　<input　type="file"　id="myFile"　name="filename2">
　　
　　　　<div　class="mt-3">
　　　　　　<button　type="submit"　class="btn　btn-primary">提出</button>
　　　　</div>
　　</form>
</div>
</body>
</html>

テストしてみてください ‹/›

実行後の効果は以下の通りです:

Bootstrap4 スライダー Bootstrap4 インプットグループ