Twitter Bootstrap과 jQuery UI를 동시에 사용할 수 있습니까?

108

저는 Twitter Bootstrap을 사용하고 있으며 Bootstrap에서 사용할 수없는 "자동 제안"을 사용하고 싶습니다. 반면 jQuery UI에는 자체 제안 방법이 있습니다.

둘 다 사용할 수 있습니까? 대역폭에 과부하가 걸리나요?

jquery-ui  twitter-bootstrap 
— Sanket Sahu
소스
6
jQuery UI는 6.6k (최소화 및 gzip 압축 됨)이므로 대역폭이 kb 단위로 측정되지 않는 한 문제가되지 않습니다.
— BryanH
4
이 질문을 게시 한 이후로 상황이 변경되었습니다. 이제 기존 jQuery UI 플러그인을 대체하기에 충분한 부트 스트랩 플러그인이 많이 있습니다. 이제 부트 스트랩 용으로 만들어진 플러그인과 함께 부트 스트랩을 사용합니다.
— Sanket Sahu 2013 년
1
자동 제안에 Twitter의 자동 완성 기능 ( twitter.github.io/typeahead.js/examples )을 사용하지 않는 이유 는 무엇입니까?
— koppor 2013-06-28

답변:

83

jquery-ui-bootstrap을 확인하십시오 . README에서 :

Twitter의 Bootstrap은 2011 년에 나온 제가 가장 좋아하는 프로젝트 중 하나 였지만 정기적으로 사용했기 때문에 두 가지를 원했습니다.

jQuery UI와 나란히 작업 할 수있는 기능 (여러 위젯이 시각적으로 중단되는 원인이 됨) 부트 스트랩 스타일을 사용하여 jQuery UI 위젯을 테마 화하는 기능. 나는 jQuery UI를 좋아하지만 (다른 사람들과 마찬가지로) 현재 테마 중 일부가 약간 구식으로 보입니다. 내 희망은이 테마가 똑같이 느끼는 다른 사람들에게 적절한 대안을 제공하는 것입니다. 명확히하기 위해이 프로젝트는 트위터 부트 스트랩을 목표로하거나 대체 할 의도가 없습니다. Bootstrap의 디자인에서 영감을받은 jQuery UI 호환 테마를 제공 할뿐입니다. 또한 테마가 함께 작동 할 수 있도록 주석 처리 된 몇 가지 (사소한) 섹션이있는 Bootstrap CSS 버전을 제공합니다.

— 샘 돌란
소스
62

이것을 업데이트하기 위해 부트 스트랩 v2는 더 이상 jquery ui와 충돌하지 않습니다.

https://github.com/twbs/bootstrap/issues/171

편집 : @Freshblood로 여전히 충돌하는 몇 가지 사항이 있습니다. 그러나 원래 게시 된 Twitter는이 작업을하고 있음을 시사하며 특히 v1에 비해 크게 작동합니다.

— Eonasdan
소스
10
정말 확실합니까? 여전히 jquery datepicker에 문제가 있습니다
— Freshblood
부트 스트랩 v2 및 jquery UI를 가져 와서 빈 테스트 페이지를 만들어 코드가 아닌지 확인하는 것이 좋습니다. 새 버전 이후 문제가 없었습니다
— Eonasdan
1
이 jquery ui datepicker jqueryui.com/demos/datepicker/#dropdown-month-year를 확인하십시오 . 이 설정에서 볼 수 있듯이 datepicker에는 dropdownbox 요소가 포함되어 있으므로 부트 스트랩은 이미 모든 입력 요소를 재정의합니다. 그러나 이러한 설정으로 datepicker를 사용하지 않으면 문제가 없습니다.
— Freshblood
1
입력 요소가 포함 된 위젯은 트위터 부트 스트랩 CSS 스타일과 충돌합니다.
— Freshblood
1
부정적인. 부트 스트랩의 버튼 기능은 둘 다 button()메소드를 정의하기 때문에 jQuery UI에서 작동하지 않습니다 .
— BryanH
24

나중에 참조 할 수 있도록 (Google의 최고 응답 ATM이므로) jQuery UI가 부트 스트랩 또는 사용자 지정 스타일을 재정의하지 않도록하려면 사용자 지정 다운로드를 만들고 no-theme테마를 선택해야합니다 . 여기에는 jQuery UI의 재설정 만 포함되며 다양한 요소에 대한 부트 스트랩의 스타일을 오버로드하지 않습니다.

여기에있는 동안 일부 jQuery UI 구성 요소 (예 : datepicker)에는 기본 부트 스트랩 구현이 있습니다. 네이티브 부트 스트랩 구현은 부트 스트랩 CSS 클래스, 속성 및 레이아웃을 사용하므로 나머지 프레임 워크와 더 잘 통합되어야합니다.

— T0xicCode
소스
여기에 테마가없는 테마가 표시되지 않습니다 : jqueryui.com/themeroller . 내가 그것을 놓쳤습니까 아니면 더 이상 거기에 있습니까?
— gaefan
3
jqueryui.com/download 는 사용해야하는 링크입니다. 아래로 스크롤하여 목록에서 "테마 없음"을 선택합니다.
— T0xicCode
3

나의 제한된 경험에서 나는 또한 문제를 마주하고 있습니다. JQuery 요소 (예 : 버튼)는 부트 스트랩 CSS를 사용하여 스타일을 지정할 수 있습니다. 그러나 JQuery UI 탭을 만들고 각 탭의 맨 아래에 부트 스트랩 전용 입력 (입력 추가 클래스 사용)을 잠그고 싶은 문제가 발생합니다. 첫 번째 만 올바르게 배치됩니다. 따라서 JQuery 탭 + 부트 스트랩 버튼 = 아마 아닐 것입니다.

— 플럭스 커패시터
소스
2

부트 스트랩은 여전히 ​​Jquery UI에서 작동하지 않습니다. 예를 들어, modal.Bootstrap은 멋진 스타일을 가지고 있지만 트위터 뒤에있는 프레임 워크로는 그다지 좋지 않습니다.

— 루시안 포 바타 누
소스
2

자바 스크립트 네임 스페이스 충돌이 발생하는 경우 Bootstrap의 noConflict()기능을 사용 하여 jQuery UI에 기능을 양도 할 수 있습니다 .

— user1618143
소스
2

이 질문은 특히 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)
— Cssyphus
소스
1

로컬에 저장하지 않고 제공하는 링크를 사용하면 성능이 향상 될 수 있습니다. 클라이언트는 일부 경우 스크립트가 이미 캐시되어있을 수 있습니다. jQueryUI의 경우 필요할 때까지로드하지 않는 것이 좋습니다. 둘 다 최소화되어 있지만 콘솔을 실행하고 네트워크 탭을보고로드하는 데 걸리는 시간을 확인할 수 있습니다. 처음 다운로드되면 캐시에 저장되므로 나중에 걱정할 필요가 없습니다. 예 둘 다 사용하지만 CDN을 사용하십시오.

— 안드레이
소스
1

네, 둘 다 사용할 수 있습니다. twitter의 Node.js 부트 스트랩은 jquery 플러그인 모음입니다. jQuery UI와 충돌이 없어야합니다.

대역폭 과부하와 관련하여 모든 js 파일을로드하기위한 요청을 처리하는 방법에 따라 다릅니다. 각 파일에 대해 요청하기 위해 서버에 여러 요청을 만들고 싶지 않다면 함께 추가하고 최소화하십시오. 또는 필요하지 않은 js 부트 스트랩 플러그인을 제거 할 수도 있습니다. 매우 모듈 식입니다.

— 베니 치아
소스
4
모든 JS는 적절하게 네임 스페이스가 지정되어 있지만 걱정해야 할 것은 CSS 충돌입니다. 부트 스트랩 탭에 JUI 위젯을 포함하는 경우 우선 순위는 무엇입니까?
— btown
부트 스트랩에서 나쁘게 보이는 것은 jQuery의 CSS만이 아닙니다. Bootstrap은 종종을 사용하여 CSS를 전면적으로 변경합니다.이 경우 !important끊임없이 재정의하고 수정해야하며 때로는 해키 코드를 사용해야합니다. 나는 Bootstrap을 싫어하고 적어도 Bootstrap의 클래스를 사용하지 않는 요소로 인해 더 이상 사용되지 않을 때까지 사용을 권장하지 않습니다. (이것은 원래 디자이너의없는 고장 나는 트위터의 원래의 devs 그들이 인기있는 라이브러리가되기 위하여 노력하고 있었는지 예상 의심한다.)
— 마이클 Scheper
0

jquery ui를 사용하여 사이트를 개발했으며 향후 개발 및 스타일링을 위해 부트 스트랩을 연결하려고 시도했지만 거의 모든 것을 중단합니다.

그래서 그들은 호환되지 않습니다.

— 님 침프 스키
소스
0

이것이 jquery ui 및 bootstrap.js 에서 Google의 최고 결과이기 때문입니다. 커뮤니티 위키로 추가하기로 결정했습니다.

나는 사용하고있다 :

  • 부트 스트랩 v3.2.0
  • jquery-2.1.0
  • jquery-ui-1.10.3

어떻게 든 bootstrap.js를 포함하면 jquery ui 자동 완성 의 드롭 다운이 비활성화됩니다. 됩니다.

내 세 가지 해결 방법 :

  • bootstrap.js 제외
  • typeahead lib에 이상
  • bootstrap.js에서 bootstrap.min.js로 이동 (이상하지만 나를 위해 일했습니다)
— JP Hellemons
소스
jquery ui 부트 스트랩의 조합도 도구 설명과 날짜 선택기를 비활성화합니다.
— Vipul Hadiya 2014
-3

data-role = "none"은 이들이 함께 작동하도록하는 열쇠입니다. 부트 스트랩을 터치하고 싶은 요소에 적용 할 수 있지만 jquery 모바일은 무시할 수 있습니다. 입력 type = "text"class = "form-control"placeholder = "Search" data-role = "none"

— 디 네시 케 타팔
소스
1
이 질문은 부트 스트랩 및 JQuery와 - UI에 대한 JQuery와 모바일 아니었다
— TJ
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.