我在这里遇到了一个问题,我感觉有一个简单而干净的解决方案,我还没有找到…
我的Cake- PHP-Application看起来像这样：

>项目文件夹

> app
>供应商
> composer.json

Cake-PHP和我想要使用的外部文件安装在vendors-folder中.
在供应商中,我有一个twitter bootstrap包,它有一个css-和一个js文件,我想包含在我的视图中,但它不可访问,因为那些文件不会保留在我的Cake的webroot-Folder中-PHP项目.
现在我的问题是 – 如何在Cake-PHP项目中使这两个文件都可访问,而不将它们复制到webroot文件夹？使用符号链接对我来说有点像脏黑客…
必须有一个干净的解决方案,因为否则使用Cake-PHP与Composer将没有任何意义.
我的composer.json看起来像这样：

{
"name": "MyProject","version": "0.0.0","require": {
    "PHP": ">=5.5.11","cakePHP/cakePHP": "2.6.3","composer/installers": "*","twbs/bootstrap": "3.3.4","components/jquery": "2.1.3"
},"extra" : {
  "installer-paths":{
      "plugins/{$name}":["type:cakePHP-plugin"],"app/webroot/bootstrap":["twbs/bootstrap"]
  }
},"config": {
    "vendor-dir": "vendors"
}

顺便说一句：composer忽略了bootstrap的给定installpath,因为包没有类型……

使用tws / bootstrap将需要额外的步骤来安装这些资产.这通常通过符号链接或复制来完成.

例如,在向Symfony2添加Bootstrap时,您需要

"require" : {
     "mopa/bootstrap-bundle": "dev-master","twbs/bootstrap": "dev-master",},"scripts": {
        "post-install-cmd": [
            /* sensio commands **/
            "Mopa\\Bundle\\BootstrapBundle\\Composer\\ScriptHandler::postInstallSymlinkTwitterBootstrap"
        ],"post-update-cmd": [
            /* sensio commands **/
            "Mopa\\Bundle\\BootstrapBundle\\Composer\\ScriptHandler::postInstallSymlinkTwitterBootstrap"
        ]
    },

一个包是资产本身,其他包为资产提供集成和“postInstall”处理程序.

对于Cake,您必须找到执行tws / boostrap安装工作的包 – 也许这样的包在Cake社区中.

但我建议使用更简单的东西,它开箱即用：

{
    "require": {
        "slywalker/boost_cake": "*"
    }
}

然后使用启用CakePlugin :: load(‘BoostCake’);并添加您需要的帮助程序.

正如@ndm指出的那样：您还可以决定使用Composer“桥梁”与其他资产经理(间接).其中一个是https://github.com/francoispluchino/composer-asset-plugin

或者您可以直接与bower,npm等资产经理合作.

由于角度2没有配备完整的丰富组件,我决定在角度2内使用自举.我知道这不是最好的主意,因为它打破了虚拟圆顶问题,但我没有其他解决方案.我遇到的问题是角度2组件不会在popover html中呈现.有人有解决方案吗？

我正在看Renderer类,它似乎是我的解决方案,但我无法让它工作.这是一些代码：

>我的父组件,用于保存弹出窗口

ngAfterViewInit() {
// viewChild is updated after the view has been initialized

    var elements = jQuery(this.elementRef.nativeElement).find('[data-toggle="popover"]');
    jQuery.each(elements,jQuery.proxy(function(index,element){
            var eventId = jQuery(element).prop('id');
            jQuery(element).popover({ html : true,placement: 'top',container: 'body',content: this.getEventContent(eventId) }); 
    },this));     
}
getEventContent(eventId){
    var selectedEvent = this.getEvent(eventId);
    var button = jQuery('<button type="button"></button>');

    var angularViewHolder= jQuery('<div></div>');

    this.renderer.createElement(angularViewHolder[0],'event-view')
    button.attr('id',eventId);
    return selectedEvent.description + '<br />' + 
        button[0].outerHTML + angularViewHolder[0].outerHTML;  
}

我需要在popover中呈现的事件视图组件

import {Component,View} from 'angular2/core';
@Component({
    selector: 'event-view',template: '<div>Application details for application id: <h1>{{id}}</h1> will be loaded here!</div>',inputs: ['id']
})

export class EventView {
    id: string;
    constructor() {

    }
}

我认为我的解决方案将在Renderer.renderComponent,但我不知道如何使用它.

你可以简单地说

像这样初始化一个正常的bootstrap popover

let popOver = $('[rel="popover"]');

popOver.popover({
    container: 'body',html: true,content: function () {
        return $('#myContent').removeClass('hide');
    }
}).click(function(e) {
    e.preventDefault();
});

popOver.on('show.bs.popover',(event) => {
    this.popover_initialized = true;
});

popOver.on('hide.bs.popover',(event) => {
    $(".popover[role=tooltip]").addClass('hide');

    event.preventDefault();
    event.stopImmediatePropagation();
});

然后你只需要在激活弹出窗口的元素上定义一个要调用的函数

showToolTip(){
    if(!this.popover_initialized){
        return;
    }

    $(".popover[role=tooltip]").removeClass('hide');
}

所以,第一次bootstrap初始化一个普通的popover,但我们阻止默认情况下销毁html内容,然后你只需添加一个’hide’类,然后当你想再次激活它时你只需删除该类,适用于角度指令,绑定等

有没有办法在没有自动循环的情况下初始化Twitter Bootstrap Carousel？设置间隔：false最初不会循环,但是一旦您单击next或prev,它就会再次开始循环.我根本不希望它循环.

编辑

这是我用来初始化它的jquery代码：

$(function() {
    $('#carousel').carousel({interval: false});
});

要在轮播中显示图像：

image_tag('image.png',:'data-target' => '#carousel',:'data-slide-to' => 1)

您可以通过在.carousel div标记中添​​加data-interval =“false”来停止Bootstrap的轮播在页面加载时循环. (我无法得到上述任何一种解决方案.)

有没有办法使用鼠标滚动更改Twitter Bootstrap Carousel上的幻灯片？

问候

正如巴拉克奥巴马所说：“是的,你可以”.以下代码将执行您想要的操作：

$(''#myCarousel'').bind(''mousewheel'',function(e){$(this).carousel(''next'');});

我一直在使用Bootstrap的旋转木马类，它已经直到目前为止，但我有一个问题是，不同的高度的图像导致箭头反弹上下调整到新的高度。

这是我用于我的轮播的代码：

<div id="myCarousel">
    <div>
        <div>
            <img src="image_url_300height"/>
            <div>
                <h4>...</h4>
                <p>...</p>
            </div>
        </div>
        <div>
            <img src="image_url_700height" />
        </div>
    </div>
    <!-- Carousel nav -->
    <ahref="#myCarousel" data-slide="prev">&lsaquo;</a>
    <ahref="#myCarousel" data-slide="next">&rsaquo;</a>
</div>

问题也在这个jsfiddle(不可否认，我发现这是一个单独的问题，同时试图解决这个问题！)

我的问题是：如何强制旋转木马保持在固定的高度(小提琴的第二个缩略图)和中心较小的图像，同时保持字幕和箭头在相对于旋转木马的静态位置？

它看起来较少bootstrap / CSS强制自动高度，以避免拉伸图像时，宽度必须更改为响应。我切换它，使宽度自动和固定的高度。

<div>
  <imgsrc="http://upload.wikimedia.org/...">
  ...
</div>

然后我定义img类的personCarouselImg像这样：

.peopleCarouselImg img {
  width: auto;
  height: 225px;
  max-height: 225px;
}

我把我的高度固定为225px。我让宽度自动调整，以保持高宽比正确。

这似乎对我有用。