bootstrap3.x와 jquery 3.x 버전 충돌 문제

bootstrapk.com 에서는 정말 반갑게도 한글로 bootstrap 관련 내용들이 잘 정리되어있다.

시작하기의 부트스트랩 CDN에는 MaxCDN에서  제공하는 주소가 표시된다.

<!-- 합쳐지고 최소화된 최신 CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">

<!-- 부가적인 테마 -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">

<!-- 합쳐지고 최소화된 최신 자바스크립트 -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>

 

맨 하단에 javascript가 있는데 bootstrap은 jquery를 내부적으로 사용한다.

2019.09월 현재 jquery 버전은 3.4.1 버전인데 3.3.2 버전 bootstrap의 jquery는 1.x의 jquery를 사용한다.

+function ($) {
  'use strict';
  var version = $.fn.jquery.split(' ')[0].split('.')
  if ((version[0] < 2 && version[1] < 9) || (version[0] == 1 && version[1] == 9 && version[2] < 1)) {
    throw new Error('Bootstrap\'s JavaScript requires jQuery version 1.9.1 or higher')
  }
}(jQuery);

 

따라서 위의 설정으로 둘을 같이 쓰려면 1.x 대의 jquery를 사용해야 한다.

 

 

그런데 사실상 bootstrap의 버전은 이미 업데이트 되었고 bootstrapk.com 사이트가 업데이트가 안된 것이다.

 

bootstrap은 3.x 버전에서는 3.4.1 버전이 마지막이다.  https://www.bootstrapcdn.com/legacy/bootstrap/ 를 방문하면 버전별 bootstrap을 다운받을 수 있다. CDN을 사용할 계획이라면 버전만 확인하면 된다.

Bootstrap Legacy

 

가장 마지막 3.x인 3.4.1 버전의 bootstrap.js를 살펴보면 3 이상의 버전이면 사용할 수 있게 변경되어있다.

+function ($) {
  'use strict';
  var version = $.fn.jquery.split(' ')[0].split('.')
  if ((version[0] < 2 && version[1] < 9) || (version[0] == 1 && version[1] == 9 && version[2] < 1) || (version[0] > 3)) {
    throw new Error('Bootstrap\'s JavaScript requires jQuery version 1.9.1 or higher, but lower than version 4')
  }
}(jQuery);

 

따라서 처음의 CDN 주소를 아래와 같이 수정해서 사용하자.

 

<!-- 합쳐지고 최소화된 최신 CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">

<!-- 부가적인 테마 -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css">

<!-- jquery 로딩 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<!-- 합쳐지고 최소화된 최신 자바스크립트 -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>