Bootstrap 5 선택 메뉴

선택 메뉴

선택 메뉴(하나를 선택합니다):

다중 선택 메뉴(CTRL 또는 SHIFT를 누르거나 마우스로 드래그하여 여러 개를 선택할 수 있습니다):

사용자가 여러 가지 옵션을 선택할 수 있도록 허용하려면 선택 메뉴를 사용하세요。

Bootstrap 5에서 선택 메뉴의 스타일을 설정하려면 다음을 사용하세요： .form-select 클래스를 <select> 요소에 추가하세요：

예제

<select class="form-select">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
</select>

직접 시험해보세요

선택 메뉴의 크기

사용하세요 .form-select-lg 또는 .form-select-sm 클래스를 사용하여 선택 메뉴의 크기를 변경할 수 있습니다：

예제

<select class="form-select form-select-lg">
<select class="form-select">
<select class="form-select form-select-sm">

직접 시험해보세요

선택 메뉴 비활성화

사용하세요 disabled 선택 메뉴를 비활성화하는 속성：

예제

<select class="form-select" disabled>
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
</select>

직접 시험해보세요

데이터 목록

Bootstrap는 데이터 목록의 스타일을 설정할 수 있으며, 이는 <input> 요소의 предопределенная список опций является:

리스트에서 사용하시는 브라우저를 선택하세요：

예제

<label for="browser" class="form-label">리스트에서 사용하시는 브라우저를 선택하세요：</label>
<input class="form-control" list="browsers" name="browser" id="browser">
<datalist id="browsers">
  <option value="Edge">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>

직접 시험해보세요