首页 > bootstrap和ui-bootstrap

bootstrap和ui-bootstrap

项目要用到下拉列表的组件,直接把bootstrap3.3.5的拿来用了,页面引入了bootstrap.js这个问题文件,后面用到模态框,ui-bootstrap,看到有两个bootstrap.js,就同一类一下,把引用改为ui-bootstrap中的bootstrap.js了,突然下拉列表就不能用了,换回去就可以了
这是为什么?两个有什么区别呢?

主要功能就是上面的a标签点击后会打开下面的ul
引入bootstrap.js就可以实现
引入ui-bootstrap中的bootstrap.js就不行


<div class="dropdown" ng-click="getResource()">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown" nav-fold>
                    <span>资源中心</span>
                    <span class="caret"></span>
                </a>
                <div class="dropdown-menu topbar_list">
                    <div class="top_baseResource">
                        <div class="top_resourceTitle">
                            <strong>基础资源库</strong>
                        </div>
                        <div class="top_resourceContent">
                            <ul>
                                <li ng-repeat="baseResource in baseResources.ITEMS | limitTo : 11">
                                    <img class="nav_icon" ng-src="resourceCenter/img/{{baseResource.REPOSITORYICON}}.png">
                                    <span ng-bind="baseResource.VIEWNAME"></span>
                                </li>
                                <li>
                                    <a ui-sref="resourceCenter.baseResource" go-to-url="turnoff" url-index="0" display-state="displayState">更多>></a>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="top_recomResource">
                        <div class="top_resourceTitle">
                            <strong>复合资源库</strong>
                        </div>
                        <div class="top_resourceContent">
                            <ul>
                                <li ng-repeat="recomResource in recomResources.ITEMS | limitTo : 11">
                                    <img class="nav_icon" ng-src="resourceCenter/img/{{recomResource.REPOSITORYICON}}.png">
                                    <span ng-bind="recomResource.VIEWNAME"></span>
                                </li>
                                <li>
                                    <a ui-sref="resourceCenter.recomResource" go-to-url="turnoff" url-index="1" display-state="displayState">更多>></a>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="top_cacheResource">
                        <div class="top_resourceTitle">
                            <strong>数据缓存库</strong>
                        </div>
                        <div class="top_resourceContent">
                            <ul>
                                <li ng-repeat="cacheResource in cacheResources.ITEMS | limitTo : 5">
                                    <img class="nav_icon" ng-src="resourceCenter/img/{{cacheResource.REPOSITORYICON}}.png">
                                    <span ng-bind="cacheResource.VIEWNAME"></span>
                                </li>
                                <li>
                                    <a ui-sref="resourceCenter.cacheResource" go-to-url="turnoff" url-index="2" display-state="displayState">更多>></a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>

ui-bootstrap.js和 bootstrap.js不一样,一个事基于angular的,一个是基于jq的。如果你用的angular就不用jq的了


bootstrap 有一些组件是需要用 JavaScript 实现,所以就需要 bootstrap.js (它是基于JQuery实现的),而 ui-bootstrap 是这些组件基于 angular 实现的,所以如果你使用 ui-bootstrap ,就不要引入 bootstrap.js 到你的页面了。

【热门文章】
【热门文章】