发表新帖
发表新帖

Can I use Twitter Bootstrap and jQuery UI at the same time?

前端 未结
关注
13 828
栀梦
栀梦 2020-11-28 20:48

I am using Twitter Bootstrap and I want to use an \"auto-suggest\" which is not available in Bootstrap, whereas jQuery UI has its own methods for auto-suggest.

Can I

相关标签:
13条回答
  • 天涯浪人
    2020-11-28 21:03

    Because this is the top result on google on jquery ui and bootstrap.js I decided to add this as community wiki.

    I am using:

    • Bootstrap v3.2.0
    • jquery-2.1.0
    • jquery-ui-1.10.3

    and somehow when I include bootstrap.js it disables the dropdown of the jquery ui autocomplete.

    my three workarounds:

    • exclude bootstrap.js
    • or more to typeahead lib
    • move from bootstrap.js to bootstrap.min.js (strange, but worked for me)
    0 讨论(0)
  • 青春惊慌失措
    2020-11-28 21:04

    If you're running into javascript namespace collisions, you can use Bootstrap's noConflict() function make it cede functionality to jQuery UI.

    0 讨论(0)
  • 说谎
    2020-11-28 21:09

    Although this question specifically mentions jQuery-UI autosuggest feature, the question title is more general: does bootstrap 3 work with jQuery UI? I was having trouble with the jQUI datepicker (pop-up calendar) feature. I solved the datepicker problem and hope the solution will help with other jQUI/BS issues.

    I had a difficult time today getting the latest jQueryUI (ver 1.12.1) datepicker to work with bootstrap 3.3.7. What was happening is that the calendar would display but it would not close.

    Turned out to be a version problem with jQUI and BS. I was using the latest version of Bootstrap, and found that I had to downgrade to these versions of jQUI and jQuery:

    jQueryUI - 1.9.2 (tested - works)
    jQuery - 1.9.1 or 2.1.4 (tested - both work. Other vers may work, but these work.)
    Bootstrap 3.3.7 (tested - works)

    Because I wanted to use a custom theme, I also built a custom download of jQUI (removed a few things like all the interactions, dialog, progressbar and a few effects I don't use) -- and made sure to select "Cupertino" at the bottom as my theme.

    I installed them thus:

    <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>

    For those interested, the CSS folder looks like this:

    [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)
    0 讨论(0)
  • 不要未来只要你来
    2020-11-28 21:12

    just to update this, bootstrap v2 no longer conflicts with jquery ui

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

    Edit: as @Freshblood there are a few things that still conflict. However, as originally posted Twitter suggests that they are working on this and it largely works, specially compared to v1.

    0 讨论(0)
  • 故里飘歌
    2020-11-28 21:13

    For future reference (since this is google's top answer ATM), to prevent jQuery UI from overriding bootstrap's or your custom style, you need to create a custom download and select the no-theme theme. That will only include jQuery UI's resets, and not overload bootstrap's style for various elements.

    While we're at it, some jQuery UI components (such as datepicker) have a native bootstrap implementation. The native bootstrap implementations will use the bootstrap css classes, attributes and layouts, so should have a better integration with the rest of the framework.

    0 讨论(0)
  • 别跟我提以往
    2020-11-28 21:17

    In my limited experience I am coming across issues as well. It appears that JQuery elements (such as buttons) can be styled using bootstrap CSS. However, I am experiencing issues having created a JQuery UI tab and wanting to lock a bootstrap only input (using the input-append class) to the bottom of each tab, only the first sits correctly. So, JQuery tabs + Bootstrap buttons = probably not.

    0 讨论(0)
 看不清?
提交回复
热议问题