mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-25 22:41:20 +02:00
Code Issues Releases Wiki Activity

placeholder design for carousel

Browse Source
This commit is contained in:
Jacob Thornton
2012-01-02 19:13:02 -08:00
parent 0c3bf7275c
commit 8b58a1c3d9
4 changed files with 92 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
docs/javascript.html
View File

@@ -118,8 +118,8 @@
<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>
<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>
@@ -1015,7 +1015,7 @@ $('#myCollapsible').on('hidden', function () {
</div>
<div class="row">
<div class="span3 columns">
<p>The carousel plugin creates a carousel douh..</p>
<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">
@@ -1023,19 +1023,40 @@ $('#myCollapsible').on('hidden', function () {
<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>
<pre class="prettyprint linenums">
&lt;div class="thumbnail carousel"&gt;
&lt;!-- navigation --&gt;
&lt;a class="nav" href="#myCarousel" data-show="next"&gt;&amp;lt;&lt;/a&gt;
&lt;a class="nav" href="#myCarousel" data-show="previous"&gt;&amp;gt;&lt;/a&gt;
&lt;!-- items --&gt;
&lt;div class="item active"&gt;
&lt;img src="http://placehold.it/1100x350"&gt;
&lt;div class="caption"&gt;
&lt;h5&gt;Thumbnail label&lt;/h5&gt;
&lt;p&gt;Cras justo odio, dapibus ac facilisis in, egestas eget quam. &lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class="item"&gt;
&lt;img src="http://placehold.it/1100x350"&gt;
&lt;div class="caption"&gt;
&lt;h5&gt;Thumbnail label&lt;/h5&gt;
&lt;p&gt;Donec id elit non mi porta gravida at eget metus.&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
</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 id="myCarousel" class="thumbnail carousel">
<a class="left nav" href="#myCarousel" data-show="next">&laquo;</a>
<a class="right nav" href="#myCarousel" data-show="previous">&raquo;</a>
<div class="item active">
<img src="http://placehold.it/1100x350" alt="">
@@ -1053,10 +1074,16 @@ $('#myCollapsible').on('hidden', function () {
</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>