rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-02-06 04:08:22 +01:00
Code Issues Actions Packages Releases Activity

Carousel no longer dependent on glyphicons

Browse Source 
Used laquo/raquo for control buttons
Updated docs
This commit is contained in:
Maurice Wahba 2013-07-06 22:20:56 +04:00
parent 95655e7275
commit 8a84da6341
3 changed files with 39 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
docs/assets/css/bootstrap.css vendored
View File

@ -4396,7 +4396,9 @@ a.list-group-item.active > .badge,
filter: alpha(opacity=90); filter: alpha(opacity=90);
} }
.carousel-control .glyphicon { .carousel-control .glyphicon,
.carousel-control .icon-prev,
.carousel-control .icon-next {
position: absolute; position: absolute;
top: 50%; top: 50%;
left: 50%; left: 50%;
@ -4408,6 +4410,14 @@ a.list-group-item.active > .badge,
margin-left: -10px; margin-left: -10px;
} }
.carousel-control .icon-prev:before {
content: '\00ab';
}
.carousel-control .icon-next:before {
content: '\00bb';
}
.carousel-indicators { .carousel-indicators {
position: absolute; position: absolute;
bottom: 20px; bottom: 20px;
@ -4456,7 +4466,9 @@ a.list-group-item.active > .badge,
} }
@media screen and (min-width: 768px) { @media screen and (min-width: 768px) {
.carousel-control .glyphicon { .carousel-control .glyphicon,
.carousel-control .icon-prev,
.carousel-control .icon-next {
width: 30px; width: 30px;
height: 30px; height: 30px;
margin-top: -15px; margin-top: -15px;

16
docs/javascript.html
View File

@ -1512,10 +1512,10 @@ $('#myCollapsible').on('hidden.bs.collapse', function () {
</div> </div>
</div> </div>
<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev"> <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span> <span class="icon-prev"></span>
</a> </a>
<a class="right carousel-control" href="#carousel-example-generic" data-slide="next"> <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span> <span class="icon-next"></span>
</a> </a>
</div> </div>
</div><!-- /example --> </div><!-- /example -->
@ -1541,13 +1541,17 @@ $('#myCollapsible').on('hidden.bs.collapse', function () {
<!-- Controls --> <!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev"> <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span> <span class="icon-prev"></span>
</a> </a>
<a class="right carousel-control" href="#carousel-example-generic" data-slide="next"> <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span> <span class="icon-next"></span>
</a> </a>
</div> </div>
{% endhighlight %} {% endhighlight %}
<div class="bs-callout">
<h4>Glyphicon Alternative</h4>
<p>With <a href="/css/#glyphicons">Glyphicons</a> available, you may choose to style the left and right toggle buttons with <code>.glyphicon-chevron-left</code> and <code>.glyphicon-chevron-right</code>.</p>
</div>
<h3>Optional captions</h3> <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> <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>
@ -1586,10 +1590,10 @@ $('#myCollapsible').on('hidden.bs.collapse', function () {
</div> </div>
</div> </div>
<a class="left carousel-control" href="#carousel-example-captions" data-slide="prev"> <a class="left carousel-control" href="#carousel-example-captions" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span> <span class="icon-prev"></span>
</a> </a>
<a class="right carousel-control" href="#carousel-example-captions" data-slide="next"> <a class="right carousel-control" href="#carousel-example-captions" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span> <span class="icon-next"></span>
</a> </a>
</div> </div>
</div><!-- /example --> </div><!-- /example -->

17
less/carousel.less
View File

@ -99,7 +99,7 @@
} }
// Toggles // Toggles
.glyphicon { .glyphicon, .icon-prev, .icon-next {
position: absolute; position: absolute;
top: 50%; top: 50%;
left: 50%; left: 50%;
@ -110,6 +110,17 @@
margin-top: -10px; margin-top: -10px;
margin-left: -10px; margin-left: -10px;
} }
// Non-glyphicon toggles
.icon-prev {
&:before {
content: '\00ab';
}
}
.icon-next {
&:before {
content: '\00bb';
}
}
} }
// Optional indicator pips // Optional indicator pips
@ -167,7 +178,9 @@
@media screen and (min-width: @screen-tablet) { @media screen and (min-width: @screen-tablet) {
// Scale up the controls a smidge // Scale up the controls a smidge
.carousel-control .glyphicon { .carousel-control .glyphicon,
.carousel-control .icon-prev,
.carousel-control .icon-next {
width: 30px; width: 30px;
height: 30px; height: 30px;
margin-top: -15px; margin-top: -15px;