rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2024-12-01 13:24:25 +01:00
Code Issues Actions Packages Releases Activity

Fixes #8385: update carousel captions

Browse Source 
* No longer hidden by default--up to users to figure that part out with
longer content
* Cleaned up styles and spacing
This commit is contained in:
Mark Otto 2013-07-19 17:36:03 -07:00
parent 8ab77191ce
commit b6238c5f20
4 changed files with 20 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
dist/css/bootstrap.css vendored
View File

@ -4410,12 +4410,12 @@ a.list-group-item.active > .badge,
.carousel-indicators {
position: absolute;
bottom: 20px;
bottom: 10px;
left: 50%;
z-index: 15;
width: 100px;
width: 120px;
padding-left: 0;
margin-left: -50px;
margin-left: -60px;
text-align: center;
list-style: none;
}
@ -4470,6 +4470,9 @@ a.list-group-item.active > .badge,
left: 20%;
padding-bottom: 30px;
}
.carousel-indicators {
bottom: 20px;
}
}
.jumbotron {

2
dist/css/bootstrap.min.css vendored
View File

File diff suppressed because one or more lines are too long

14
javascript.html
View File

@ -1508,13 +1508,13 @@ $('#myCollapsible').on('hidden.bs.collapse', function () {
</ol>
<div class="carousel-inner">
<div class="item active">
<img data-src="holder.js/900x500/auto/#777:#fff/text:First slide" alt="">
<img data-src="holder.js/900x500/auto/#777:#555/text:First slide" alt="">
</div>
<div class="item">
<img data-src="holder.js/900x500/auto/#777:#fff/text:Second slide" alt="">
<img data-src="holder.js/900x500/auto/#666:#444/text:Second slide" alt="">
</div>
<div class="item">
<img data-src="holder.js/900x500/auto/#777:#fff/text:Third slide" alt="">
<img data-src="holder.js/900x500/auto/#555:#333/text:Third slide" alt="">
</div>
</div>
<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
@ -1561,10 +1561,6 @@ $('#myCollapsible').on('hidden.bs.collapse', function () {
<h3>Optional captions</h3>
<p>Add captions to your slides easily with the <code>.carousel-caption</code> element within any <code>.item</code>. Place just about any optional HTML within there and it will be automatically aligned and formatted.</p>
<div class="bs-callout bs-callout-info">
<h4>Responsive visibility</h4>
<p><strong>Captions are hidden by default</strong> and will show up only with viewports greater than 768px wide.</p>
</div>
<div class="bs-example">
<div id="carousel-example-captions" class="carousel slide bs-docs-carousel-example">
<ol class="carousel-indicators">
@ -1581,14 +1577,14 @@ $('#myCollapsible').on('hidden.bs.collapse', function () {
</div>
</div>
<div class="item">
<img data-src="holder.js/900x500/auto/#777:#777" alt="">
<img data-src="holder.js/900x500/auto/#666:#666" alt="">
<div class="carousel-caption">
<h3>Second slide label</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<div class="item">
<img data-src="holder.js/900x500/auto/#777:#777" alt="">
<img data-src="holder.js/900x500/auto/#555:#5555" alt="">
<div class="carousel-caption">
<h3>Third slide label</h3>
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>

11
less/carousel.less
View File

@ -129,11 +129,11 @@
// -----------------------------
.carousel-indicators {
position: absolute;
bottom: 20px;
bottom: 10px;
left: 50%;
z-index: 15;
width: 100px;
margin-left: -50px;
width: 120px;
margin-left: -60px;
padding-left: 0;
list-style: none;
text-align: center;
@ -196,4 +196,9 @@
right: 20%;
padding-bottom: 30px;
}
// Move up the indicators
.carousel-indicators {
bottom: 20px;
}
}