Bootstrap 4 only works with bootstrap-select v1.13.0+. By default, bootstrap-select automatically detects the version of Bootstrap being used. However, there are some instances where the version detection won't work. See the documentation for more information.
Bootstrap 4는 bootstrap-select v1.13.0 이상의 버전에서만 작동합니다. bootstrap-select는 사용중인 Bootstrap의 버전을 자동으로 감지합니다.
그러나 버전 감지가 작동하지 않는 경우가 있습니다. 자세한 내용은 documentation을 참조하세요
Because there are some changes in class names and layout between Bootstrap 3 and Bootstrap 4, bootstrap-select needs to know the version of Bootstrap you are using. By default, bootstrap-select automatically detects the version of Bootstrap. However, there are some instances where the version detection does not work properly (e.g. Bootstrap is being loaded asynchronously or there is a namespace collision). For now, bootstrap-select defaults to using Bootstrap 3 formatting if version detection fails. This will be changed in the next major release.
부트스트랩 3과 부트스트랩 4 사이에는 클래스 이름과 레이아웃이 일부 변경되었기 때문에 bootstrap-select는 사용 중인 부트스트랩 버전을 알아야 합니다.
기본적으로 bootstrap-select는 부트스트랩 버전을 자동으로 감지합니다. 그러나 버전 감지가 제대로 작동하지 않는 경우가 있습니다.
(예: 부트스트랩이 비동기식으로 로드되거나 네임스페이스 충돌이 있음). 현재 bootstrap-select는 버전 감지에 실패할 경우 기본적으로 Bootstrap 3 형식을 사용합니다.
이는 다음 주요 릴리스에서 변경될 예정입니다.
bootstrap-select를 자동 초기화하기 위해 select 요소에 selectpicker 클래스를 추가합니다.
<select class="selectpicker"> <option>Mustard</option> <option>Ketchup</option> <option>Barbecue</option> </select>
Via JavaScript
// To style only selects with the my-select class $('.my-select').selectpicker();
$('select').selectpicker();
JavaScript를 통해 부트스트랩 선택을 호출하는 경우 코드를 .ready() 블록으로 감싸거나 페이지 하단(마지막 부트스트랩 선택 인스턴스 뒤)에 배치해야 합니다.
$(function() { $('select').selectpicker(); });
프로그래밍 방식으로 JavaScript를 사용하여 select를 업데이트하려면, 먼저 select를 조작한 다음, refresh 메소드를 사용하여 새로운 상태와 일치하도록 UI를 업데이트합니다.
이 메소드는 options를 제거 또는 추가할때나, JavaScript로 select를 비활성화/활성화할 때 필요합니다.
$('.selecpicker').selecpicker('refresh');
Apps의 RMR 프로젝트 추가 모달에서 '최근 3년 프로젝트'를 불러오는 것은 JavaScript로 options를 동적으로 생성하므로
options를 동적으로 추가 생성하는 ajax함수의 success 내부에 $('selectpicker').selectpicker('refresh');를 추가함
data-live-search=“true” 속성을 전달하여 search input을 추가할 수 있습니다.
<select if="openProj" class="form-control" name="openProjSeq" title="최근 3년 프로젝트 목록">
<select if="openProj" class="form-control selectpicker" name="openProjSeq" data-live-search="true" title="최근 3년 프로젝트 목록">
$(function() { $('.selectpicker').selectpicker(); });
가장 먼저 선행되어야 하는 것 : 플러그인 라이브러리 추가
프로젝트 > src > main > webapp > resource > bootstrapSource > plugins > bootstrap-select 폴더 생성 > 1.13.14폴더 생성 > css폴더, js폴더에 추가됨