저는 Twitter Bootstrap을 사용하고 있으며 Bootstrap에서 사용할 수없는 “자동 제안”을 사용하고 싶습니다. 반면 jQuery UI에는 자체 제안 방법이 있습니다.
둘 다 사용할 수 있습니까? 대역폭에 과부하가 걸리나요?
답변
jquery-ui-bootstrap을 확인하십시오 . README에서 :
Twitter의 Bootstrap은 2011 년에 나온 제가 가장 좋아하는 프로젝트 중 하나 였지만 정기적으로 사용했기 때문에 두 가지를 원했습니다.
jQuery UI와 나란히 작업 할 수있는 기능 (여러 위젯이 시각적으로 중단되는 원인이 됨) 부트 스트랩 스타일을 사용하여 jQuery UI 위젯을 테마 화하는 기능. 나는 jQuery UI를 좋아하지만 (다른 사람들과 마찬가지로) 현재 테마 중 일부가 약간 구식으로 보입니다. 내 희망은이 테마가 똑같이 느끼는 다른 사람들에게 적절한 대안을 제공하는 것입니다. 명확히하기 위해이 프로젝트는 트위터 부트 스트랩을 목표로하거나 대체 할 의도가 없습니다. Bootstrap의 디자인에서 영감을받은 jQuery UI 호환 테마를 제공 할뿐입니다. 또한 테마가 함께 작동 할 수 있도록 주석 처리 된 몇 가지 (사소한) 섹션이있는 Bootstrap CSS 버전을 제공합니다.
답변
이것을 업데이트하기 위해 부트 스트랩 v2는 더 이상 jquery ui와 충돌하지 않습니다.
https://github.com/twbs/bootstrap/issues/171
편집 : @Freshblood로 여전히 충돌하는 몇 가지 사항이 있습니다. 그러나 원래 게시 된 Twitter는이 작업을하고 있음을 시사하며 특히 v1에 비해 크게 작동합니다.
답변
나중에 참조 할 수 있도록 (Google의 최고 응답 ATM이므로) jQuery UI가 부트 스트랩 또는 사용자 지정 스타일을 재정의하지 않도록하려면 사용자 지정 다운로드를 만들고 no-theme테마를 선택해야합니다 . 여기에는 jQuery UI의 재설정 만 포함되며 다양한 요소에 대한 부트 스트랩의 스타일을 오버로드하지 않습니다.
여기에있는 동안 일부 jQuery UI 구성 요소 (예 : datepicker)에는 기본 부트 스트랩 구현이 있습니다. 네이티브 부트 스트랩 구현은 부트 스트랩 CSS 클래스, 속성 및 레이아웃을 사용하므로 나머지 프레임 워크와 더 잘 통합되어야합니다.
답변
나의 제한된 경험에서 나는 또한 문제를 마주하고 있습니다. JQuery 요소 (예 : 버튼)는 부트 스트랩 CSS를 사용하여 스타일을 지정할 수 있습니다. 그러나 JQuery UI 탭을 만들고 각 탭의 맨 아래에 부트 스트랩 전용 입력 (입력 추가 클래스 사용)을 잠그고 싶은 문제가 발생합니다. 첫 번째 만 올바르게 배치됩니다. 따라서 JQuery 탭 + 부트 스트랩 버튼 = 아마 아닐 것입니다.
답변
부트 스트랩은 여전히 Jquery UI에서 작동하지 않습니다. 예를 들어, modal.Bootstrap은 멋진 스타일을 가지고 있지만 트위터 뒤에있는 프레임 워크로는 그다지 좋지 않습니다.
답변
자바 스크립트 네임 스페이스 충돌이 발생하는 경우 Bootstrap의 noConflict()기능을 사용 하여 jQuery UI에 기능을 양도 할 수 있습니다 .
답변
이 질문은 특히 jQuery-UI 자동 제안 기능을 언급하지만 질문 제목은 더 일반적입니다. 부트 스트랩 3은 jQuery UI에서 작동합니까? jQUI datepicker (팝업 캘린더) 기능에 문제가있었습니다. datepicker 문제를 해결했으며 솔루션이 다른 jQUI / BS 문제에 도움이되기를 바랍니다.
오늘 부트 스트랩 3.3.7과 함께 작동하기 위해 최신 jQueryUI (버전 1.12.1) datepicker를 얻는 데 어려움을 겪었습니다. 무슨 일이 일어 났는지 달력이 표시되지만 닫히지는 않습니다.
jQUI 및 BS의 버전 문제로 밝혀졌습니다. 최신 버전의 Bootstrap을 사용하고 있었는데 다음 버전의 jQUI 및 jQuery로 다운 그레이드해야한다는 것을 알았습니다.
jQueryUI-1.9.2 (테스트 완료-작동)
jQuery-1.9.1 또는 2.1.4 (테스트 완료-둘 다 작동합니다. 다른 버전도 작동 할 수 있지만 작동합니다.)
Bootstrap 3.3.7 (테스트 완료-작동 함)
사용자 지정 테마를 사용하고 싶었 기 때문에 jQUI의 사용자 지정 다운로드를 구축했습니다 (모든 상호 작용, 대화 상자, 진행률 표시 줄 및 사용하지 않는 몇 가지 효과와 같은 몇 가지 제거). 그리고 “Cupertino”를 선택했는지 확인했습니다. 내 테마로 하단에.
이렇게 설치했습니다.
<head>
...etc...
<link rel="stylesheet" href="css/font-awesome.min.css">
<link rel="stylesheet" href="css/cupertino/jquery-ui-1.9.2.custom.min.css">
<link rel="stylesheet" href="css/bootstrap-3.3.7.min.css">
<!-- <script src="js/jquery-1.9.1.min.js"></script> -->
<script src="js/jquery-2.1.4.min.js"></script>
<script src="js/jquery-ui-1.9.2.custom.min.js"></script>
<script src="js/bootstrap-3.3.7.min.js"></script>
...etc...
</head>관심있는 사람들을 위해 CSS 폴더는 다음과 같습니다.
[css]
- bootstrap-3.3.7.min.css
- font-awesome.min.css
- style.css
- [cupertino]
- jquery-ui-1.9.2.custom.min.css
[images]
- ui-bg_diagonals-thick_90_eeeeee_40x40.png
- ui-bg_glass_100_e4f1fb_1x400.png
- ui-bg_glass_50_3baae3_1x400.png
- ui-bg_glass_80_d7ebf9_1x400.png
- ui-bg_highlight-hard_100_f2f5f7_1x100.png
- etc (8 more files that were in the downloaded jQUI zip file)