Skip to content
GitLab
Commit 2d092dfe authored by Jacob Thornton's avatar Jacob Thornton
Browse files

start playing with carousel stuff

parent 12868933
17 merge requests!14752.0 wip,!1403warningText and warningBackground docs fix,!985Fix id anchor javascript,!906Twipsy now respects custom classes,!13512.0 wip - relative font sizes,!1315[2.0-wip] Fix mustache glob when building,!1268[wip-2.0] IE 7/8 Typehead JS fix,!12362.0 wip - Fix for issue #1202,!1219Removed dotted outline on navbar dropdown menu,!1210Missing icon class from examples,!1195Fixed display of secondary container,!1090Fixed typo,!1084Default `.border-radius-custom` values,!1064Typo Fix in tables.less,!10572.0 wip,!1052Missing data attribute to close modal,!10212.0 wip
Hide whitespace changes
Inline Side-by-side
Showing
with 106 additions and 5 deletions
+106 -5
bootstrap.css
+ 9
- 1
View file @ 2d092dfe
......@@ -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: Sat Dec 24 22:30:43 PST 2011
* Date: Sun Dec 25 21:24:32 PST 2011
*/
html, body {
margin: 0;
......@@ -2385,6 +2385,8 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
top: 50%;
left: 50%;
z-index: 11000;
max-height: 500px;
overflow: auto;
width: 560px;
margin: -250px 0 0 -250px;
background-color: #ffffff;
......@@ -2662,6 +2664,12 @@ a.thumbnail:hover {
.thumbnail .caption {
padding: 9px;
}
.carousel .item {
display: none;
}
.carousel .active {
display: block;
}
.hidden {
display: none;
visibility: hidden;
......
bootstrap.min.css
+ 3
- 1
View file @ 2d092dfe
......@@ -312,7 +312,7 @@ button.btn::-moz-focus-inner,input[type=submit].btn::-moz-focus-inner{padding:0;
.pagination .next a{border:0;}
.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;}
......@@ -350,5 +350,7 @@ button.btn::-moz-focus-inner,input[type=submit].btn::-moz-focus-inner{padding:0;
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 .item{display:none;}
.carousel .active{display:block;}
.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;}}@media (max-width: 768px){.container{width:auto;padding:0 20px;} .row{margin-left:0;} [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;}}
docs/javascript.html
+ 65
- 1
View file @ 2d092dfe
......@@ -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#collapse">bootstrap-carousel.js</a></td>
<td>Carousel add</td>
</tr>
</tbody>
</table>
<h3>Is javascript necessary?</h3>
......@@ -1002,6 +1006,61 @@ $('#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>The carousel plugin creates a carousel douh..</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>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"></pre>
<h3>Demo</h3>
<!-- carousel -->
<div class="thumbnail carousel">
<div class="item active">
<img src="http://placehold.it/1100x350" alt="">
<div class="caption">
<h5>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 active">
<img src="http://placehold.it/1100x350" alt="">
<div class="caption">
<h5>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/1100x350" alt="">
<div class="caption">
<h5>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>
</div>
</div>
</section>
<!-- Footer
================================================== -->
<footer class="footer">
......@@ -1028,6 +1087,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 +1096,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 +1112,9 @@ $('#myCollapsible').on('hidden', function () {
btn.button('reset')
}, 3000)
})
// carousel demo
$('.carousel').carousel()
})
</script>
</body>
......
js/bootstrap-carousel.js
+ 19
- 2
View file @ 2d092dfe
......@@ -25,12 +25,29 @@
/* CAROUSEL CLASS DEFINITION
* ========================= */
var Carousel = function () {
var Carousel = function (element) {
this.$element = $(element)
this.cycle()
}
Carousel.prototype = {
cycle: function () {
this.interval = setInterval($.proxy(this.right, this), 500)
}
, pause: function () {
clearInterval(this.interval)
}
, right: function () {
}
, left: function () {
}
}
......
lib/modals.less
+ 2
- 0
View file @ 2d092dfe
......@@ -22,6 +22,8 @@
top: 50%;
left: 50%;
z-index: 11000;
max-height: 500px;
overflow: auto;
width: 560px;
margin: -250px 0 0 -250px;
background-color: @white;
......
lib/thumbnails.less
+ 8
- 0
View file @ 2d092dfe
......@@ -32,3 +32,11 @@ a.thumbnail:hover {
.thumbnail .caption {
padding: 9px;
}
.carousel .item {
display: none;
}
.carousel .active {
display: block;
}
\ No newline at end of file
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment