Bootstrap 4 베타와 함께 Popper.js를 사용하는 방법
저는 구식이므로 소스 코드를 1.12.0으로 다운로드 한 후 다음을 수행했습니다.
<script src="/popper.js-1.12.0/dist/popper.js"></script>
<script src="/bootstrap-4.0.0-beta/dist/js/bootstrap.js"></script>
그러나 나는 얻는다 :
Uncaught SyntaxError: Unexpected token export
온라인 2294에서 다음과 같이 말합니다.
export default Popper;
package.json파일에main 지정된 dist 대상 을 항목 으로 사용하려고합니다 .
이 경우 umd빌드 ( dist/umd/popper.js)를 찾고 있습니다.
UMD는 무엇입니까?
UMD 패턴 (다른 사람의 사이에 예를 들어 RequireJS) 일반적으로 하루 중 가장 인기있는 스크립트 로더와 함께 제공 호환성을 시도합니다. 대부분의 경우 AMD를 기본으로 사용하며 CommonJS 호환성을 처리하기 위해 특수 케이스가 추가되었습니다.
즉, UMD 번들은 <script>태그 를 통해로드 되고 전역 범위 ( window) 내에 삽입 될 수 있지만 필요한 경우 RequireJS와 같은 CommonJS 로더와 함께 작동합니다.
Popper를 사용하려면 Bootstrap 4 에서 umd 경로에 있는 파일을 사용해야합니다 .
다음 CDN 버전 중 하나가 작동합니다.
https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.5/umd/popper.js https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.5/umd /popper.min.js
다른 답변 / 댓글은 버전을 언급 하지만 문제는 버전 관리와 관련이 없습니다 .
항상 작동해야하기 때문에 Bootstrap의 popper 포함 예제 를 사용하는 것은 결코 나쁜 습관 이 아닙니다. 현재 부트 스트랩 4는 안전한 선택 인 포퍼 1.11을 권장하지만 버전 1.12.5도 잘 작동합니다.
참고 : umd, esm 및 일반 ol 'popper 파일과 혼동하는 이유는 무엇입니까? 의도는 유연한 모듈 패키징이지만 실제로는 더 간단하게 만들 수 있습니다. 이 게시물 은 새로운 모듈 유형의 몇 가지 문제를 설명합니다.
Bootstrap 문서에서 참조하는 Popper.js 버전을 사용하는지 확인하십시오.
https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js
당으로 포퍼의 문서 :
Popper.js는 현재 UMD, ESM 및 ESNext의 3 가지 대상을 염두에두고 제공됩니다.
UMD-범용 모듈 정의 : AMD, RequireJS 및 글로벌;
ESM-ES 모듈 : 사양을 지원하는 웹팩 / 롤업 또는 브라우저 용;
ESNext : dist /에서 사용 가능하며 webpack 및 babel-preset-env와 함께 사용할 수 있습니다. 귀하의 필요에 맞는 것을 사용하십시오. 태그와 함께 가져 오려면 UMD를 사용하세요.
나는 같은 문제가 있었다. 다른 접근 방식을 시도했지만 이것은 나를 위해 일했습니다. http://getbootstrap.com/ 에서 지침을 읽으십시오 .
CDN 링크 (jQuery, Popper 및 Bootstrap)를 주어진 순서대로 (중요) 복사합니다.
<head>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
</head>
부트 스트랩의 번들 버전을 사용하면됩니다!
<script src="./node_modules/jquery/dist/jquery.min.js"></script>
<!-- <script src="./node_modules/popper.js/dist/popper.min.js"></script> -->
<!-- <script src="./node_modules/bootstrap/dist/js/bootstrap.min.js"></script> -->
<script src="./node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
Fez Vrasta에 따르면.
Visual Studio 내에서 NuGet 패키지 관리자를 통해 popper를 검색하는 경우 popper.js 스크립트 참조 경로가 umd 폴더를 사용하고 있는지 확인 합니다.
MVC ASP.Net BundleConfig 예제 :
bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
"~/Scripts/umd/popper.js", //path with umd
"~/Scripts/bootstrap.js",
"~/Scripts/respond.js"));
직접 스크립트 참조 예 :
<script src="~/Scripts/umd/popper.js" type="text/javascript"></script>
별도의 컨테이너 :
당신이 허용 대답을 다음과 툴팁이 잘못된 위치에 여전히 경우, 수 각 도구 팁에 대해 다른 컨테이너를 가지고 있기 때문에 수.
툴팁을 요소의 부모 근처에 배치 할 수 있도록 시도합니다 .
const initializeTooltips = function () {
$('[data-toggle="tooltip"]').each(function() {
$(this).tooltip({container: $(this).parent()});
});
};
$(document).ready(function () {
initializeTooltips();
});
jsfiddle에서 직접 시도하십시오 .
참고 URL : https://stackoverflow.com/questions/45694811/how-to-use-popper-js-with-bootstrap-4-beta
'programing tip' 카테고리의 다른 글
| == 또는 .Equals () (0) | 2020.12.08 |
|---|---|
| Safari 브라우저를 사용하여 요소를 검사하는 방법 (0) | 2020.12.07 |
| pom.xml의 줄 1에서 알 수없는 오류가 발생하는 이유는 무엇입니까? (0) | 2020.12.07 |
| fadeOut () 및 slideUp () 동시에? (0) | 2020.12.07 |
| Android에서 ResultReceiver 사용 (0) | 2020.12.07 |