diff options
Diffstat (limited to 'docs')
| -rw-r--r-- | docs/assets/css/bootstrap.css | 16 | ||||
| -rw-r--r-- | docs/javascript.html | 16 |
2 files changed, 24 insertions, 8 deletions
diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css index e79177efa..888d0bbc8 100644 --- a/docs/assets/css/bootstrap.css +++ b/docs/assets/css/bootstrap.css @@ -4390,7 +4390,9 @@ a.list-group-item.active > .badge, filter: alpha(opacity=90); } -.carousel-control .glyphicon { +.carousel-control .glyphicon, +.carousel-control .icon-prev, +.carousel-control .icon-next { position: absolute; top: 50%; left: 50%; @@ -4402,6 +4404,14 @@ a.list-group-item.active > .badge, margin-left: -10px; } +.carousel-control .icon-prev:before { + content: '\00ab'; +} + +.carousel-control .icon-next:before { + content: '\00bb'; +} + .carousel-indicators { position: absolute; bottom: 20px; @@ -4450,7 +4460,9 @@ a.list-group-item.active > .badge, } @media screen and (min-width: 768px) { - .carousel-control .glyphicon { + .carousel-control .glyphicon, + .carousel-control .icon-prev, + .carousel-control .icon-next { width: 30px; height: 30px; margin-top: -15px; diff --git a/docs/javascript.html b/docs/javascript.html index af58be40f..089aa60ec 100644 --- a/docs/javascript.html +++ b/docs/javascript.html @@ -1518,10 +1518,10 @@ $('#myCollapsible').on('hidden.bs.collapse', function () { </div> </div> <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 class="right carousel-control" href="#carousel-example-generic" data-slide="next"> - <span class="glyphicon glyphicon-chevron-right"></span> + <span class="icon-next"></span> </a> </div> </div><!-- /example --> @@ -1547,13 +1547,17 @@ $('#myCollapsible').on('hidden.bs.collapse', function () { <!-- Controls --> <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 class="right carousel-control" href="#carousel-example-generic" data-slide="next"> - <span class="glyphicon glyphicon-chevron-right"></span> + <span class="icon-next"></span> </a> </div> {% 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> <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> @@ -1592,10 +1596,10 @@ $('#myCollapsible').on('hidden.bs.collapse', function () { </div> </div> <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 class="right carousel-control" href="#carousel-example-captions" data-slide="next"> - <span class="glyphicon glyphicon-chevron-right"></span> + <span class="icon-next"></span> </a> </div> </div><!-- /example --> |