Vscodeガイド.入力グループ
input-group
入力グループは、ID、Eメール、金額などのテキストの入力を支援するタグです.
div class=「input-groop」で宣言します.
prepend//append
input-groupクラスの
input-group prependを宣言します.
spqnを使用してidext入力ボックスの前に@タグを貼り付けます.
prependとappendはそれぞれ
前と後で宣言されたマークですが.
両者の機能には違いはありません.テキストの前か後ろかです.
著者の識別を容易にするために、別の名前として使用されます.
prependとappendを用いて入力グループを作成した.
lg//sm
lgおよびsmタグを使用すると、ある程度サイズを大きくまたは小さくすることができる.
checkbox//radio
checkboxラベルを使用してチェックボックスを作成できます.
radioラベルを使用して、円形のチェックボックスを作成できます.
addon
追加情報を追加する場合は、input-groupでbutton classを作成できます.
dropdown//dropup
ドロップダウン/ドロップダウンラベルを簡単に追加することもできます.
data-bs-toggle="dropdown"
data-bs-toggle=“dropdown”
buttonラベルにinput-groupクラスを宣言して挿入すればいいです.
添付ファイルの分割
分割ボタンを追加する場合は、
ボタンラベルを2回だけ作成するだけです.
ここまでです.
入力グループは、ID、Eメール、金額などのテキストの入力を支援するタグです.
div class=「input-groop」で宣言します.
<body>
<div class="container">
<h1> 입력 그룹 </h1>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">@</span>
</div>
<input type="text" class="form-control" placeholder="아이디">
</div>
<br>prepend//append
input-groupクラスの
input-group prependを宣言します.
spqnを使用してidext入力ボックスの前に@タグを貼り付けます.
prependとappendはそれぞれ
前と後で宣言されたマークですが.
両者の機能には違いはありません.テキストの前か後ろかです.
著者の識別を容易にするために、別の名前として使用されます.
<div class="input-group">
<input type="text" class="form-control" placeholder="이메일">
<div class="input-group-append">
<span class="input-group-text">@example.com</span>
</div>
</div>
<br>
<div class="input-group">
<input type="text" class="form-control">
<div class="input-group-append">
<span class="input-group-text">cm</span>
</div>
</div>
<br>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">금액</span>
</div>
<input type="text" class="form-control">
<div class="input-group-append">
<span class="input-group-text">원</span>
</div>
</div>prependとappendを用いて入力グループを作成した.
lg//sm
lgおよびsmタグを使用すると、ある程度サイズを大きくまたは小さくすることができる.
<h4> 입력 그룹 크기조절 </h4>
<div class="input-group input-group-lg">
<input type="text" class="form-control">
<div class="input-group-append">
<span class="input-group-text">cm</span>
</div>
</div>
<br>
<div class="input-group">
<input type="text" class="form-control">
<div class="input-group-append">
<span class="input-group-text">cm</span>
</div>
</div>
<br>
<div class="input-group input-group-sm">
<input type="text" class="form-control">
<div class="input-group-append">
<span class="input-group-text">cm</span>
</div>
</div>
<hr>checkbox//radio
checkboxラベルを使用してチェックボックスを作成できます.
radioラベルを使用して、円形のチェックボックスを作成できます.
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text"><input type="checkbox"></span>
</div>
<input type="text" class="form-control">
</div>
<br>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text"><input type="radio"></span>
</div>
<input type="text" class="form-control">
</div>addon
追加情報を追加する場合は、input-groupでbutton classを作成できます.
<h4> 입력 그룹 버튼 애드온 추가 </h4>
<div class="input-group">
<div class="input-group-prepend">
<button class="btn btn-dark" type="button">Go!</button>
</div>
<input type="text" class="form-control">
</div>
<br>
<div class="input-group">
<input type="text" class="form-control">
<div class="input-group-append"><!--prepend append는 기능적으로 차이가 없지만 앞뒤를 구분하고 식별하기 쉽게해주기 위해 다르게 씁니다.-->
<button class="btn btn-dark" type="button">Go!</button>
</div>
</div>
<br>dropdown//dropup
ドロップダウン/ドロップダウンラベルを簡単に追加することもできます.
data-bs-toggle="dropdown"
data-bs-toggle=“dropdown”
buttonラベルにinput-groupクラスを宣言して挿入すればいいです.
<h4> 입력 그룹 분할된 버튼 추가 </h4>ㅠㅛ
<div class="input-group">
<div class="input-group-prepend">
<button type="button" class="btn btn-primary"> 버튼1 </button>
<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown"data-bs-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a class="dropdown-item" href="#">메뉴 1</a></li>
<li><a class="dropdown-item" href="#">메뉴 2</a></li>
<li><a class="dropdown-item" href="#">메뉴 3</a></li>
<li class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">다른 메뉴 </a></li>
</ul>
</div>
<input type="text" class="form-control">
</div>
<br>添付ファイルの分割
分割ボタンを追加する場合は、
ボタンラベルを2回だけ作成するだけです.
<h4> 입력 그룹 분할된 버튼 추가 </h4>
<div class="input-group">
<div class="input-group-prepend">
<button type="button" class="btn btn-primary"> 버튼1 </button>
<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown"data-bs-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a class="dropdown-item" href="#">메뉴 1</a></li>
<li><a class="dropdown-item" href="#">메뉴 2</a></li>
<li><a class="dropdown-item" href="#">메뉴 3</a></li>
<li class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">다른 메뉴 </a></li>
</ul>
</div>
<input type="text" class="form-control">
</div>
<br>
<div class="input-group">
<input type="text" class="form-control">
<div class="input-group-prepend dropup">
<button type="button" class="btn btn-primary"> 버튼1 </button>
<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a class="dropdown-item" href="#">메뉴 1</a></li>
<li><a class="dropdown-item" href="#">메뉴 2</a></li>
<li><a class="dropdown-item" href="#">메뉴 3</a></li>
<li class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">다른 메뉴 </a></li>
</ul>
</div>
</div>
</div>
</body>ここまでです.
Reference
この問題について(Vscodeガイド.入力グループ), 我々は、より多くの情報をここで見つけました https://velog.io/@nugoory20/VSCode부트스트랩.-입력그룹テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol