[Bootstrap] layoutlt 超級懶人bootstrap編輯器

http://www.layoutit.com/ 是可以支援bootstrap2與3的網頁編輯器，
在瀏覽器上就可以快速的透過拖拉的方法完成一個網頁設計。
目前也支援簡中XD

下圖是以bootstrap3的範例示範

[Bootstrap] 利用bootstrap實作parallax效果

http://www.script-tutorials.com/bootstrap-one-page-template-with-parallax-effect/

[Bootstrap] bootsnipp 提供bootstrap為基礎的元素設計代碼

最近開始使用bootstrap，結果就找到了這個bootsnipp的網站，可讓我們工程師更加輕鬆喇!!

[jQuery Plugins] 影片在bootstrap carousel中時，當影片播放時如何停止carousel

很多網站的banner都會使用bootstrap carousel這個外掛，
當使用者點擊carousel的影片播放時，需要暫停carousel自動換頁的動作。

目前影片是採用Vimeo，所以你可以使用Froogaloop這個元件來取得Vimeo的控制。
完整範例可參考:http://developer.vimeo.com/player/js-api

一開始在用的時候，沒有認真看文件的說明，導致AddEvent的事件完全無動作，大家要注意嵌入的影片格式要包含api=1與player_id=


相關範例如下：

        var $myCarousel = $("#carousel-iangel");
        $myCarousel.on("slide.bs.carousel", function(event) {
            $.console("change slide");
            var $currentSlide = $myCarousel.find(".active iframe");
            // exit if there"s no iframe, i.e. if this is just an image and not a video player
            if (!$currentSlide.length) { return; }
            
            // pass that iframe into Froogaloop, and call api("pause") on it.
            var player = Froogaloop($currentSlide[0]);
            player.api("pause");
        });

        
        var iframe = $("#videoIntro")[0],
            player = $f(iframe); //$f 這是Froogaloop提供的方法

        // When the player is ready, add listeners for pause, finish, and playProgress
        player.addEvent("ready", function() {
            player.addEvent("play", function(id) {
                // $.console("id:" + id + " play");
                $myCarousel.carousel("pause");
            });
            player.addEvent("pause", function(id) {
                // $.console("id:" + id + " pause");
                $myCarousel.carousel("pause");
            });
            player.addEvent("finish", function(id) {
                // $.console("id:" + id + " finish");
                $myCarousel.carousel("cycle");
            });
            player.addEvent("loadProgress", function(data, id) {
                // $.console(data.seconds + "s played");
            });
        });

讓RD不再傷神的Bootstrap UI 框架

熱門的RWD框架，有興趣的朋友可以參考

http://twitter.github.com/bootstrap/getting-started.html