Vscodeガイド.ボタングループ
div class="btn-group"
ボタン・グループを作成する手順は、次のとおりです.
div class=「btn-group」のクラス
すべてのボタンを挿入します.
ボタンをツールバー形式に変換するには:
duv class=btn-toolbarと宣言
ボタンのセットを挿入します.
btn-group-lg//btn-group-sm
ボタン・グループのサイズを変更する場合は、次の操作を行います.
ボタングループを宣言する場合は、btn-group-lgまたはbtn-group-smを追加するだけです.
dropdown
ネストされたボタンのリストは、ドロップダウンメニューから作成できます.
data-bs-toggle=「dropdown」の構文宣言を使用すればよい.
btn-group-vertical
btn-group-垂直
ボタングループを垂直に配置できます.
まずはここまで
ボタン・グループを作成する手順は、次のとおりです.
div class=「btn-group」のクラス
すべてのボタンを挿入します.
<body>
<div class="container">
<h1> 버튼그룹 </h1>
<h4>일반적인 버튼 </h4>
<button type="button" class="btn btn-outline-primary btn-lg">버튼 1 </button>
<button type="button" class="btn btn-outline-primary btn-lg">버튼 2 </button>
<button type="button" class="btn btn-outline-primary btn-sm">버튼 3 </button>
<button type="button" class="btn btn-outline-primary btn-sm">버튼 4 </button>
<button type="button" class="btn btn-outline-primary">버튼 1 </button>
<button type="button" class="btn btn-outline-primary">버튼 2 </button>
<button type="button" class="btn btn-outline-primary">버튼 3 </button>
<button type="button" class="btn btn-outline-primary">버튼 4 </button>
<hr>
<h4>버튼 그룹으로 묶은 후 모습 </h4>
<div class="btn-group">
<button type="button" class="btn btn-outline-primary">버튼 1 </button>
<button type="button" class="btn btn-outline-primary">버튼 2 </button>
<button type="button" class="btn btn-outline-primary">버튼 3 </button>
<button type="button" class="btn btn-outline-primary">버튼 4 </button>
</div>
ボタンをツールバー形式に変換するには:
duv class=btn-toolbarと宣言
ボタンのセットを挿入します.
<h4>버튼 그룹을 툴바 형식으로 변환 </h4>
<div class="btn-toolbar">
<div class="btn-group">
<button type="button" class="btn btn-outline-primary">버튼 1 </button>
<button type="button" class="btn btn-outline-primary">버튼 2 </button>
<button type="button" class="btn btn-outline-primary">버튼 3 </button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-outline-primary">버튼 4 </button>
<button type="button" class="btn btn-outline-primary">버튼 5 </button>
</div>
</div>btn-group-lg//btn-group-sm
ボタン・グループのサイズを変更する場合は、次の操作を行います.
ボタングループを宣言する場合は、btn-group-lgまたはbtn-group-smを追加するだけです.
<h4>버튼 그룹을 이용해서 버튼 크기 일괄 조절 </h4>
<div class="btn-group btn-group-lg">
<button type="button" class="btn btn-outline-primary">버튼 1 </button>
<button type="button" class="btn btn-outline-primary">버튼 2 </button>
<button type="button" class="btn btn-outline-primary">버튼 3 </button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-outline-primary">버튼 1 </button>
<button type="button" class="btn btn-outline-primary">버튼 2 </button>
<button type="button" class="btn btn-outline-primary">버튼 3 </button>
</div>
<div class="btn-group btn-group-sm">
<button type="button" class="btn btn-outline-primary">버튼 1 </button>
<button type="button" class="btn btn-outline-primary">버튼 2 </button>
<button type="button" class="btn btn-outline-primary">버튼 3 </button>
</div>dropdown
ネストされたボタンのリストは、ドロップダウンメニューから作成できます.
data-bs-toggle=「dropdown」の構文宣言を使用すればよい.
<h4>중첩하기 </h4>
<div class="btn-group">
<button type="button" class="btn btn-outline-primary">버튼 1 </button>
<button type="button" class="btn btn-outline-primary">버튼 2 </button>
<div class="btn-group">
<button type="button" data-bs-toggle="dropdown" class="btn btn-outline-primary dropdown-bs-toggle"> 클릭 <span class="caret"> </span>
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" tabindex="-1" href="#">메뉴 1</a></li>
<li><a class="dropdown-item" tabindex="-1" href="#">메뉴 2</a></li>
</ul>
</div>
</div>btn-group-vertical
btn-group-垂直
ボタングループを垂直に配置できます.
<h4>수직정렬 하기 </h4>
<div class="btn-group-vertical">
<button type="button" class="btn btn-outline-primary">버튼 1 </button>
<button type="button" class="btn btn-outline-primary">버튼 2 </button>
<div class="btn-group">
<button type="button" data-bs-toggle="dropdown" class="btn btn-outline-primary dropdown-bs-toggle"> 클릭 <span class="caret"> </span>
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" tabindex="-1" href="#">메뉴 1</a></li>
<li><a class="dropdown-item" tabindex="-1" href="#">메뉴 2</a></li>
</ul>
</div>
</div>まずはここまで
Reference
この問題について(Vscodeガイド.ボタングループ), 我々は、より多くの情報をここで見つけました https://velog.io/@nugoory20/VSCode부트스트랩.-버튼그룹テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol