0
0
mirror of https://github.com/twbs/bootstrap.git synced 2024-11-29 11:24:18 +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;
}
/* 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

View File

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

View File

@ -3,7 +3,6 @@ layout: default
title: Bootstrap Documentation
---
<div class="bs-docs-container">
<!-- 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>
<div class="bs-docs-example">
<div class="list-group">
<a href="#" class="list-group-item active">Cras justo odio</a>
<a href="#" class="list-group-item">Dapibus ac facilisis in</a>
<a href="#" class="list-group-item">Morbi leo risus</a>
<a href="#" class="list-group-item">Porta ac consectetur ac</a>
<a href="#" class="list-group-item">Vestibulum at eros</a>
<a href="#" class="list-group-item active">
Cras justo odio
<span class="glyphicon glyphicon-chevron-right"></span>
</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>
{% highlight html linenos %}
<div class="list-group">
<a href="#" class="list-group-item active">Cras justo odio</a>
<a href="#" class="list-group-item">Dapibus ac facilisis in</a>
<a href="#" class="list-group-item">Morbi leo risus</a>
<a href="#" class="list-group-item">Porta ac consectetur ac</a>
<a href="#" class="list-group-item">Vestibulum at eros</a>
<a href="#" class="list-group-item active">
Cras justo odio
<span class="glyphicon glyphicon-chevron-right"></span>
</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>
{% endhighlight %}
@ -6476,3 +6497,7 @@ $('[data-spy="affix"]').each(function () {
</section>
</div><!-- /.container -->
<a href="#welcome" class="bs-docs-top">
Back to top
</a>