0
0
mirror of https://github.com/twbs/bootstrap.git synced 2025-03-02 02:29:24 +01:00

add basic back to top link via affix

This commit is contained in:
Mark Otto 2013-03-30 18:41:26 -07:00
parent e560c41ed1
commit 40f671a531
3 changed files with 61 additions and 12 deletions

View File

@ -28,6 +28,26 @@ body {
padding-right: 15px; padding-right: 15px;
} }
/* Back to top link */
.bs-docs-top {
float: left;
padding: 7px 15px;
font-weight: 500;
color: #999;
background-color: #eee;
border-radius: 4px;
}
.bs-docs-top:hover {
color: #fff;
text-decoration: none;
background-color: #999;
}
.bs-docs-top.affix {
position: fixed;
right: 15px;
bottom: 15px;
}
/* Sections /* Sections

View File

@ -13,7 +13,7 @@
e.preventDefault() e.preventDefault()
}) })
// side bar // back to top
// setTimeout(function () { // setTimeout(function () {
// $('.bs-docs-sidenav').affix({ // $('.bs-docs-sidenav').affix({
// offset: { // offset: {
@ -23,6 +23,10 @@
// }) // })
// }, 100) // }, 100)
setTimeout(function () {
$('.bs-docs-top').affix()
}, 100)
// make code pretty // make code pretty
window.prettyPrint && prettyPrint() window.prettyPrint && prettyPrint()

View File

@ -3,7 +3,6 @@ layout: default
title: Bootstrap Documentation title: Bootstrap Documentation
--- ---
<div class="bs-docs-container"> <div class="bs-docs-container">
<!-- Welcome <!-- Welcome
@ -4470,20 +4469,42 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<p>Linkify list group items by using anchor tags instead of list items (that also means a parent <code>&lt;div&gt;</code> instead of an <code>&lt;ul&gt;</code>. No need for individual parents around each element.</p> <p>Linkify list group items by using anchor tags instead of list items (that also means a parent <code>&lt;div&gt;</code> instead of an <code>&lt;ul&gt;</code>. No need for individual parents around each element.</p>
<div class="bs-docs-example"> <div class="bs-docs-example">
<div class="list-group"> <div class="list-group">
<a href="#" class="list-group-item active">Cras justo odio</a> <a href="#" class="list-group-item active">
<a href="#" class="list-group-item">Dapibus ac facilisis in</a> Cras justo odio
<a href="#" class="list-group-item">Morbi leo risus</a> <span class="glyphicon glyphicon-chevron-right"></span>
<a href="#" class="list-group-item">Porta ac consectetur ac</a> </a>
<a href="#" class="list-group-item">Vestibulum at eros</a> <a href="#" class="list-group-item">Dapibus ac facilisis in
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
<a href="#" class="list-group-item">Morbi leo risus
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
<a href="#" class="list-group-item">Porta ac consectetur ac
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
<a href="#" class="list-group-item">Vestibulum at eros
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div> </div>
</div> </div>
{% highlight html linenos %} {% highlight html linenos %}
<div class="list-group"> <div class="list-group">
<a href="#" class="list-group-item active">Cras justo odio</a> <a href="#" class="list-group-item active">
<a href="#" class="list-group-item">Dapibus ac facilisis in</a> Cras justo odio
<a href="#" class="list-group-item">Morbi leo risus</a> <span class="glyphicon glyphicon-chevron-right"></span>
<a href="#" class="list-group-item">Porta ac consectetur ac</a> </a>
<a href="#" class="list-group-item">Vestibulum at eros</a> <a href="#" class="list-group-item">Dapibus ac facilisis in
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
<a href="#" class="list-group-item">Morbi leo risus
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
<a href="#" class="list-group-item">Porta ac consectetur ac
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
<a href="#" class="list-group-item">Vestibulum at eros
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div> </div>
{% endhighlight %} {% endhighlight %}
@ -6476,3 +6497,7 @@ $('[data-spy="affix"]').each(function () {
</section> </section>
</div><!-- /.container --> </div><!-- /.container -->
<a href="#welcome" class="bs-docs-top">
Back to top
</a>