diff options
| -rw-r--r-- | bootstrap.css | 71 | ||||
| -rw-r--r-- | bootstrap.min.css | 15 | ||||
| -rw-r--r-- | docs/javascript.html | 117 | ||||
| -rw-r--r-- | js/bootstrap-carousel.js | 78 | ||||
| -rw-r--r-- | lib/mixins.less | 2 | ||||
| -rw-r--r-- | lib/modals.less | 2 | ||||
| -rw-r--r-- | lib/thumbnails.less | 50 |
7 files changed, 324 insertions, 11 deletions
diff --git a/bootstrap.css b/bootstrap.css index ade32d9ba..f9f174c3d 100644 --- a/bootstrap.css +++ b/bootstrap.css @@ -6,7 +6,7 @@ * http://www.apache.org/licenses/LICENSE-2.0 * * Designed and built with all the love in the world @twitter by @mdo and @fat. - * Date: Thu Jan 5 01:33:17 PST 2012 + * Date: Thu Jan 5 01:36:56 PST 2012 */ html, body { margin: 0; @@ -491,7 +491,7 @@ address { } code, pre { padding: 0 3px 2px; - font-family: Menlo, Monaco, Courier New, monospace; + font-family: Menlo, Monaco, "Courier New", monospace; font-size: 12px; color: #404040; -webkit-border-radius: 3px; @@ -2587,6 +2587,8 @@ i { top: 50%; left: 50%; z-index: 11000; + max-height: 500px; + overflow: auto; width: 560px; margin: -250px 0 0 -250px; background-color: #ffffff; @@ -2908,6 +2910,71 @@ a.thumbnail:hover { .thumbnail .caption { padding: 9px; } +.carousel { + position: relative; +} +.carousel .carousel-inner { + overflow: hidden; + width: 100%; + position: relative; +} +.carousel .item { + display: none; + position: relative; + -webkit-transition: 0.6s ease-in-out left; + -moz-transition: 0.6s ease-in-out left; + -ms-transition: 0.6s ease-in-out left; + -o-transition: 0.6s ease-in-out left; + transition: 0.6s ease-in-out left; +} +.carousel .active, .carousel .next, .carousel .prev { + display: block; +} +.carousel .next, .carousel .prev { + position: absolute; + top: 0; + width: 100%; +} +.carousel .next { + left: 100%; +} +.carousel .prev { + left: -100%; +} +.carousel .next.left, .carousel .prev.right { + left: 0%; +} +.carousel .active.left { + left: -100%; +} +.carousel .active.right { + left: 100%; +} +.carousel .nav { + width: auto; + -webkit-border-radius: 0; + -moz-border-radius: 0; + border-radius: 0; + height: 50px; + position: absolute; + top: 50%; + margin: -25px 0 0; + cursor: pointer; + background: rgba(0, 0, 0, 0.7); + color: white; + font-size: 42px; + left: 5px; + font-weight: 100; + padding: 0 15px; +} +.carousel .nav.right { + right: 5px; + left: auto; +} +.carousel .nav:hover { + text-decoration: none; + background: rgba(0, 0, 0, 0.8); +} .hidden { display: none; visibility: hidden; diff --git a/bootstrap.min.css b/bootstrap.min.css index 65fd2649b..4f091262d 100644 --- a/bootstrap.min.css +++ b/bootstrap.min.css @@ -87,7 +87,7 @@ blockquote{padding-left:15px;margin-bottom:18px;border-left:5px solid #eee;}bloc blockquote small{display:block;line-height:18px;color:#bfbfbf;}blockquote small:before{content:'\2014 \00A0';} blockquote.pull-right{float:right;}blockquote.pull-right p,blockquote.pull-right small{text-align:right;} address{display:block;margin-bottom:18px;line-height:18px;} -code,pre{padding:0 3px 2px;font-family:Menlo, Monaco, Courier New, monospace;font-size:12px;color:#404040;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;} +code,pre{padding:0 3px 2px;font-family:Menlo,Monaco,"Courier New",monospace;font-size:12px;color:#404040;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;} code{padding:1px 3px;background-color:#fee9cc;} pre{display:block;padding:8.5px;margin:0 0 9px;font-size:12px;line-height:18px;background-color:#f5f5f5;border:1px solid #ccc;border:1px solid rgba(0, 0, 0, 0.15);-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;white-space:pre;white-space:pre-wrap;word-break:break-all;}pre.prettyprint{margin-bottom:18px;} pre code{padding:0;background-color:transparent;} @@ -396,7 +396,7 @@ i{background-image:url(docs/assets/img/glyphicons-halflings-sprite.png);backgrou .pagination.centered{text-align:center;} .modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:10000;background-color:#000000;}.modal-backdrop.fade{opacity:0;} .modal-backdrop,.modal-backdrop.fade.in{filter:alpha(opacity=80);-moz-opacity:0.8;opacity:0.8;} -.modal{position:fixed;top:50%;left:50%;z-index:11000;width:560px;margin:-250px 0 0 -250px;background-color:#ffffff;border:1px solid #999;border:1px solid rgba(0, 0, 0, 0.3);*border:1px solid #999;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;-webkit-box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);-moz-box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);-webkit-background-clip:padding-box;-moz-background-clip:padding-box;background-clip:padding-box;}.modal .close{margin-top:7px;} +.modal{position:fixed;top:50%;left:50%;z-index:11000;max-height:500px;overflow:auto;width:560px;margin:-250px 0 0 -250px;background-color:#ffffff;border:1px solid #999;border:1px solid rgba(0, 0, 0, 0.3);*border:1px solid #999;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;-webkit-box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);-moz-box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);-webkit-background-clip:padding-box;-moz-background-clip:padding-box;background-clip:padding-box;}.modal .close{margin-top:7px;} .modal.fade{-webkit-transition:opacity .3s linear, top .3s ease-out;-moz-transition:opacity .3s linear, top .3s ease-out;-ms-transition:opacity .3s linear, top .3s ease-out;-o-transition:opacity .3s linear, top .3s ease-out;transition:opacity .3s linear, top .3s ease-out;top:-25%;} .modal.fade.in{top:50%;} .modal-header{padding:5px 15px;border-bottom:1px solid #eee;} @@ -442,5 +442,16 @@ i{background-image:url(docs/assets/img/glyphicons-halflings-sprite.png);backgrou a.thumbnail:hover{border-color:#0069d6;-webkit-box-shadow:0 1px 4px rgba(0, 105, 214, 0.25);-moz-box-shadow:0 1px 4px rgba(0, 105, 214, 0.25);box-shadow:0 1px 4px rgba(0, 105, 214, 0.25);} .thumbnail>img{display:block;max-width:100%;} .thumbnail .caption{padding:9px;} +.carousel{position:relative;}.carousel .carousel-inner{overflow:hidden;width:100%;position:relative;} +.carousel .item{display:none;position:relative;-webkit-transition:0.6s ease-in-out left;-moz-transition:0.6s ease-in-out left;-ms-transition:0.6s ease-in-out left;-o-transition:0.6s ease-in-out left;transition:0.6s ease-in-out left;} +.carousel .active,.carousel .next,.carousel .prev{display:block;} +.carousel .next,.carousel .prev{position:absolute;top:0;width:100%;} +.carousel .next{left:100%;} +.carousel .prev{left:-100%;} +.carousel .next.left,.carousel .prev.right{left:0%;} +.carousel .active.left{left:-100%;} +.carousel .active.right{left:100%;} +.carousel .nav{width:auto;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;height:50px;position:absolute;top:50%;margin:-25px 0 0;cursor:pointer;background:rgba(0, 0, 0, 0.7);color:white;font-size:42px;left:5px;font-weight:100;padding:0 15px;}.carousel .nav.right{right:5px;left:auto;} +.carousel .nav:hover{text-decoration:none;background:rgba(0, 0, 0, 0.8);} .hidden{display:none;visibility:hidden;} @media (max-width: 480px){.modal{width:auto;margin:0;} .horizontal-form .control-group>label{float:none;width:auto;padding-top:0;text-align:left;} .horizontal-form .controls{margin-left:0;} .horizontal-form .control-list{padding-top:0;} .horizontal-form .form-actions{padding-left:0;} .modal{position:fixed;top:20px;left:20px;right:20px;width:auto;}.modal .close{padding:10px;}}@media (max-width: 768px){.container{width:auto;padding:0 20px;} .row{margin-left:0;} .row>[class*="span"]{float:none;display:block;width:auto;margin:0;} .nav{position:absolute;top:0;left:0;width:180px;padding-top:40px;list-style:none;} .nav,.nav>li:last-child a{-webkit-border-radius:0 0 4px 0;-moz-border-radius:0 0 4px 0;border-radius:0 0 4px 0;} .nav>li{float:none;display:none;} .nav>li>a{float:none;background-color:#222;} .nav>.active{display:block;position:absolute;top:0;left:0;} .navbar ul .active>a{background-color:transparent;} .nav>.active a:after{display:inline-block;width:0;height:0;margin-top:8px;margin-left:6px;text-indent:-99999px;vertical-align:top;border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid #ffffff;filter:alpha(opacity=100);-moz-opacity:1;opacity:1;content:"↓";} .nav>.active a:hover{background-color:rgba(255, 255, 255, 0.05);}}@media (min-width: 768px) and (max-width: 940px){.container{width:748px;} .span1{width:44px;} .span2{width:108px;} .span3{width:172px;} .span4{width:236px;} .span5{width:300px;} .span6{width:364px;} .span7{width:428px;} .span8{width:492px;} .span9{width:556px;} .span10{width:620px;} .span11{width:684px;} .span12{width:748px;} .offset1{margin-left:64px;} .offset2{margin-left:128px;} .offset3{margin-left:192px;} .offset4{margin-left:256px;} .offset5{margin-left:320px;} .offset6{margin-left:384px;} .offset7{margin-left:448px;} .offset8{margin-left:512px;} .offset9{margin-left:576px;} .offset10{margin-left:640px;} .offset11{margin-left:704px;} .offset12{margin-left:768px;}} diff --git a/docs/javascript.html b/docs/javascript.html index d5aebbacd..1cba7766f 100644 --- a/docs/javascript.html +++ b/docs/javascript.html @@ -117,6 +117,10 @@ <td><a href="./javascript.html#collapse">bootstrap-collapse.js</a></td> <td>The collapse plugin offers simple, generic collapsible element support for making accordions and other collapsible ui components.</td> </tr> + <tr> + <td><a href="./javascript.html#carousel">bootstrap-carousel.js</a></td> + <td>A plugin for rotating through elements. A merry-go-round.</td> + </tr> </tbody> </table> <h3>Is javascript necessary?</h3> @@ -720,7 +724,7 @@ $('a[data-toggle="tab"]').on('shown', function (e) { <pre class="prettyprint linenums">$(".alert-message").alert('close')</pre> <h3>Events</h3> <p>Bootstrap's alert class exposes a few events for hooking into alert functionality. </p> - <table class="zebra-striped"> + <table class="bordered-table striped-table"> <thead> <tr> <th style="width: 150px;">Event</th> @@ -1002,6 +1006,110 @@ $('#myCollapsible').on('hidden', function () { </div> </section> + <!-- Carousel + ================================================== --> + + <section id="carousel"> + <div class="page-header"> + <h1>Carousel <small>bootstrap-carousel.js</small></h1> + </div> + <div class="row"> + <div class="span3 columns"> + <p>A generic plugin for cycling through elements. A merry-go-round.</p> + <a href="../js/bootstrap-carousel.js" target="_blank" class="btn primary">Download</a> + </div> + <div class="span9 columns"> + <h3>Using bootstrap-carousel.js</h3> + <pre class="prettyprint linenums">$('.carousel').carousel()</pre> + <h3>Options</h3> + <table class="bordered-table striped-table"> + <thead> + <tr> + <th style="width: 100px;">Name</th> + <th style="width: 50px;">type</th> + <th style="width: 50px;">default</th> + <th>description</th> + </tr> + </thead> + <tbody> + <tr> + <td>interval</td> + <td>number</td> + <td>5000</td> + <td>The amount of type to delay between automatically cycling an item.</td> + </tr> + </tbody> + </table> + <h3>Markup</h3> + <p>Data attributes are integral to the carousel plugin. Check out the example code below for the various markup types.</p> +<pre class="prettyprint linenums"> +<div class="thumbnail carousel"> + + <!-- items --> + <div class="carousel-inner">…</div> + + <!-- navigation --> + <a class="nav" href="#myCarousel" data-slide="next">&lt;</a> + <a class="nav" href="#myCarousel" data-slide="prev">&gt;</a> + +</div> +</pre> +<h3>Methods</h3> +<h4>.carousel(options)</h4> +<p>Initializes the carousel with an optional options <code>object</code> and starts cycling through items.</p> +<pre class="prettyprint linenums"> +$('.myCarousel').carousel({ + interval: 2000 +})</pre> +<h4>.carousel('cycle')</h4> +<p>Cycles through the carousel items from left to right.</p> +<h4>.carousel('pause')</h4> +<p>Stops the carousel from cycling through items.</p> +<h4>.carousel('prev')</h4> +<p>Cycles to the previous item.</p> +<h4>.carousel('next')</h4> +<p>Cycles to the next item.</p> + <h3>Demo</h3> + + <!-- carousel --> + + <div id="myCarousel" class="thumbnail carousel slide"> + + <div class="carousel-inner"> + <div class="item active"> + <img src="http://placehold.it/1100x400" alt=""> + <div class="caption"> + <h5>First Thumbnail label</h5> + <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> + </div> + </div> + + <div class="item"> + <img src="http://placehold.it/1100x400" alt=""> + <div class="caption"> + <h5>Second Thumbnail label</h5> + <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> + </div> + </div> + + <div class="item"> + <img src="http://placehold.it/1100x400" alt=""> + <div class="caption"> + <h5>Third Thumbnail label</h5> + <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> + </div> + </div> + </div> + + <a class="left nav" href="#myCarousel" data-slide="prev">«</a> + <a class="right nav" href="#myCarousel" data-slide="next">»</a> + + </div> + + </div> + </div> + </section> + <!-- Footer ================================================== --> <footer class="footer"> @@ -1028,6 +1136,7 @@ $('#myCollapsible').on('hidden', function () { <script src="../js/bootstrap-popover.js"></script> <script src="../js/bootstrap-button.js"></script> <script src="../js/bootstrap-collapse.js"></script> + <script src="../js/bootstrap-carousel.js"></script> <script src="assets/js/application.js"></script> <script> $(function () { @@ -1036,13 +1145,14 @@ $('#myCollapsible').on('hidden', function () { selector: "a[rel=twipsy]" }) - //popover demo + // popover demo $("a[rel=popover]") .popover() .click(function(e) { e.preventDefault() }) + // button state demo $('#fat-btn') .click(function () { var btn = $(this) @@ -1051,6 +1161,9 @@ $('#myCollapsible').on('hidden', function () { btn.button('reset') }, 3000) }) + + // carousel demo + $('#myCarousel').carousel() }) </script> </body> diff --git a/js/bootstrap-carousel.js b/js/bootstrap-carousel.js index ed4b8f3fa..fa5247c97 100644 --- a/js/bootstrap-carousel.js +++ b/js/bootstrap-carousel.js @@ -25,12 +25,63 @@ /* CAROUSEL CLASS DEFINITION * ========================= */ - var Carousel = function () { - + var Carousel = function (element, options) { + this.$element = $(element) + this.options = $.extend({}, $.fn.carousel.defaults, options) + this.options.slide && this.slide(this.options.slide) } Carousel.prototype = { + cycle: function () { + this.interval = setInterval($.proxy(this.next, this), this.options.interval) + return this + } + + , pause: function () { + clearInterval(this.interval) + return this + } + + , next: function () { + return this.slide('next') + } + + , prev: function () { + return this.slide('prev') + } + + , slide: function (type) { + var $active = this.$element.find('.active') + , $next = $active[type]() + , isCycling = this.interval + , direction = type == 'next' ? 'left' : 'right' + , fallback = type == 'next' ? 'first' : 'last' + , that = this + + isCycling && this.pause() + + $next = $next.length ? $next : this.$element.find('.item')[fallback]() + + if (!$.support.transition && this.$element.hasClass('slide')) { + $active.removeClass('active') + $next.addClass('active') + } else { + $next.addClass(type) + $next[0].offsetWidth // force reflow + $active.addClass(direction) + $next.addClass(direction) + this.$element.one($.support.transition.end, function () { + $next.removeClass([type, direction].join(' ')).addClass('active') + $active.removeClass(['active', direction].join(' ')) + }) + } + + isCycling && this.cycle() + + return this + } + } @@ -41,11 +92,30 @@ return this.each(function () { var $this = $(this) , data = $this.data('carousel') - if (!data) $this.data('carousel', (data = new Carousel(this))) - if (typeof option == 'string') data[option].call($this) + , options = typeof option == 'object' && option + if (!data) $this.data('carousel', (data = new Carousel(this, options))) + if (typeof option == 'string' || (option = options.slide)) data[option]() + else data.cycle() }) } + $.fn.carousel.defaults = { + interval: 5000 + } + $.fn.carousel.Constructor = Carousel + + /* CAROUSEL DATA-API + * ================= */ + + $(function () { + $('body').on('click.carousel.data-api', '[data-slide]', function ( e ) { + var $this = $(this) + , $target = $($this.attr('data-target') || $this.attr('href')) + , options = !$target.data('modal') && $.extend({}, $target.data(), $this.data()) + $target.carousel(options) + }) + }) + }( window.jQuery )
\ No newline at end of file diff --git a/lib/mixins.less b/lib/mixins.less index 83a3a31f9..32d3a83ac 100644 --- a/lib/mixins.less +++ b/lib/mixins.less @@ -60,7 +60,7 @@ font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; } .monospace() { - font-family: Menlo, Monaco, Courier New, monospace; + font-family: Menlo, Monaco, "Courier New", monospace; } } .shorthand(@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight) { diff --git a/lib/modals.less b/lib/modals.less index 4d2b92cbc..96f9a488e 100644 --- a/lib/modals.less +++ b/lib/modals.less @@ -23,6 +23,8 @@ top: 50%; left: 50%; z-index: 11000; + max-height: 500px; + overflow: auto; width: 560px; margin: -250px 0 0 -250px; background-color: @white; diff --git a/lib/thumbnails.less b/lib/thumbnails.less index 9e25f5027..6ac3cb51f 100644 --- a/lib/thumbnails.less +++ b/lib/thumbnails.less @@ -32,3 +32,53 @@ a.thumbnail:hover { .thumbnail .caption { padding: 9px; } + +.carousel { + + position: relative; + + .carousel-inner { + overflow: hidden; + width: 100%; + position: relative; + } + + .item { + display: none; + position: relative; + .transition(.6s ease-in-out left); + } + + .active, .next, .prev { display: block; } + + .next, .prev { + position: absolute; + top: 0; + width: 100%; + } + + .next { left: 100%; } + .prev { left: -100%; } + .next.left, .prev.right { left: 0% } + + .active.left { left: -100% } + .active.right { left: 100% } + + .nav { + width: auto; + .border-radius(0); + height: 50px; + position: absolute; + top: 50%; + margin: -25px 0 0; + cursor: pointer; + background: rgba(0, 0, 0, 0.7); + color: white; + font-size: 42px; + left: 5px; + font-weight: 100; + padding: 0 15px; + &.right { right: 5px; left: auto; } + &:hover { text-decoration: none; background: rgba(0, 0, 0, 0.8); } + } +}
\ No newline at end of file |