5-2. 선택 메뉴
■ 선택 메뉴
Bootstrap에서 선택 메뉴의 스타일을 지정하려면 <select> 요소에 클래스 .form_select를 추가하세요.
<div class="container mt-3">
<h3>선택 메뉴</h3>
<form>
<label for="select1" class="form-label">선택해 주세요</label>
<select class="form-select" id="select1" name="sel1">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
<br>
<label for="select2" class="form-label">선택해 주세요</label>
<select multiple class="form-select" id="select2" name="sel2">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
<button type="submit" class="btn btn-primary mt-3">확인</button>
</form>
</div>
ex5-5.html의 실행 결과
■ 선택 메뉴의 크기
선택 메뉴의 크기를 변경하려면 클래스 .form-select-sm 또는 .form-select-lg를 사용하세요
<div class="container mt-3">
<h3>선택 메뉴의 크기</h3>
<form>
<label for="select1" class="form-label">선택해 주세요</label>
<select class="form-select form-select-lg" id="select1" name="sel1">
<option>1</option>
<option>2</option>
</select>
<br>
<label for="select2" class="form-label">선택해 주세요</label>
<select class="form-select" id="select2" name="sel2">
<option>1</option>
<option>2</option>
</select>
<br>
<label for="select3" class="form-label">선택해 주세요</label>
<select class="form-select form-select-sm" id="select3" name="sel3">
<option>1</option>
<option>2</option>
</select>
</form>
</div>
ex5-6.html의 실행 결과
