The code below will give you a good starting position if you need to create a one page website using
Twitter Bootstrap. It uses basic
jQuery animation techniques so there's no need to load another library. The most important elements which get it to work are highlighted in red.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap One Pager</title>
<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
<style>
.row
{
padding-top:4em;
}
figure > img
{
width:100%;
}
</style>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">My Website</a>
</div><!-- .navbar-header -->
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li><a href="
#home">Home</a></li>
<li><a href="
#about">About</a></li>
<li><a href="
#contact">Contact</a></li>
</ul>
</div><!-- .nav-collapse -->
</div><!-- .container -->
</nav>
<div class="container">
<div class="row"
name="home" id="home">
<article class="col-md-6">
<h2>Home</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quid ad utilitatem tantae pecuniae? Age, inquies, ista parva sunt. Quibus ego vehementer assentior. Quae cum essent dicta, discessimus.</p>
<p>Invidiosum nomen est, infame, suspectum. Duo Reges: constructio interrete. Quibus ego vehementer assentior. Non igitur bene.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Estne, quaeso, inquam, sitienti in bibendo voluptas? Servari enim iustitia nisi a forti viro, nisi a sapiente non potest. Cum salvum esse flentes sui respondissent, rogavit essentne fusi hostes. Audax negotium, dicerem impudens, nisi hoc institutum postea translatum ad philosophos nostros esset. Obsecro, inquit, Torquate, haec dicit Epicurus? Quamquam haec quidem praeposita recte et reiecta dicere licebit. Non dolere, inquam, istud quam vim habeat postea videro; Nobis Heracleotes ille Dionysius flagitiose descivisse videtur a Stoicis propter oculorum dolorem. Duo Reges: constructio interrete. Dici enim nihil potest verius.</p>
<p>Quid ergo attinet dicere: Nihil haberem, quod reprehenderem, si finitas cupiditates haberent? Deprehensus omnem poenam contemnet. Ego vero volo in virtute vim esse quam maximam; Omnis enim est natura diligens sui. Semper enim ex eo, quod maximas partes continet latissimeque funditur, tota res appellatur. Graecum enim hunc versum nostis omnes-: Suavis laborum est praeteritorum memoria. Hoc loco tenere se Triarius non potuit.</p>
<p>Tu quidem reddes; Dicet pro me ipsa virtus nec dubitabit isti vestro beato M.</p>
<p>Quod iam a me expectare noli. Hoc est dicere: Non reprehenderem asotos, si non essent asoti. Saepe ab Aristotele, a Theophrasto mirabiliter est laudata per se ipsa rerum scientia; Alterum significari idem, ut si diceretur, officia media omnia aut pleraque servantem vivere. Nec vero sum nescius esse utilitatem in historia, non modo voluptatem. Cur iustitia laudatur?</p>
<p>Atque hoc loco similitudines eas, quibus illi uti solent, dissimillimas proferebas. Quamquam ab iis philosophiam et omnes ingenuas disciplinas habemus; Neque enim disputari sine reprehensione nec cum iracundia aut pertinacia recte disputari potest. Ita enim vivunt quidam, ut eorum vita refellatur oratio. Unum est sine dolore esse, alterum cum voluptate. Qua tu etiam inprudens utebare non numquam. An est aliquid per se ipsum flagitiosum, etiamsi nulla comitetur infamia? Intrandum est igitur in rerum naturam et penitus quid ea postulet pervidendum; Quod ea non occurrentia fingunt, vincunt Aristonem;</p>
</article>
<figure class="col-md-6">
<img src="http://lorempixel.com/400/200/sports" alt="sports" class="img-responsive" />
<figcaption>Invidiosum nomen est, infame, suspectum. Duo Reges: constructio interrete. Quibus ego vehementer assentior. Non igitur bene.</figcaption>
</figure>
</div><!-- .row -->
<div class="row"
name="about" id="about">
<article class="col-md-6">
<h2>About</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quid ad utilitatem tantae pecuniae? Age, inquies, ista parva sunt. Quibus ego vehementer assentior. Quae cum essent dicta, discessimus.</p>
<p>Invidiosum nomen est, infame, suspectum. Duo Reges: constructio interrete. Quibus ego vehementer assentior. Non igitur bene.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Estne, quaeso, inquam, sitienti in bibendo voluptas? Servari enim iustitia nisi a forti viro, nisi a sapiente non potest. Cum salvum esse flentes sui respondissent, rogavit essentne fusi hostes. Audax negotium, dicerem impudens, nisi hoc institutum postea translatum ad philosophos nostros esset. Obsecro, inquit, Torquate, haec dicit Epicurus? Quamquam haec quidem praeposita recte et reiecta dicere licebit. Non dolere, inquam, istud quam vim habeat postea videro; Nobis Heracleotes ille Dionysius flagitiose descivisse videtur a Stoicis propter oculorum dolorem. Duo Reges: constructio interrete. Dici enim nihil potest verius.</p>
<p>Quid ergo attinet dicere: Nihil haberem, quod reprehenderem, si finitas cupiditates haberent? Deprehensus omnem poenam contemnet. Ego vero volo in virtute vim esse quam maximam; Omnis enim est natura diligens sui. Semper enim ex eo, quod maximas partes continet latissimeque funditur, tota res appellatur. Graecum enim hunc versum nostis omnes-: Suavis laborum est praeteritorum memoria. Hoc loco tenere se Triarius non potuit.</p>
<p>Tu quidem reddes; Dicet pro me ipsa virtus nec dubitabit isti vestro beato M.</p>
<p>Quod iam a me expectare noli. Hoc est dicere: Non reprehenderem asotos, si non essent asoti. Saepe ab Aristotele, a Theophrasto mirabiliter est laudata per se ipsa rerum scientia; Alterum significari idem, ut si diceretur, officia media omnia aut pleraque servantem vivere. Nec vero sum nescius esse utilitatem in historia, non modo voluptatem. Cur iustitia laudatur?</p>
<p>Atque hoc loco similitudines eas, quibus illi uti solent, dissimillimas proferebas. Quamquam ab iis philosophiam et omnes ingenuas disciplinas habemus; Neque enim disputari sine reprehensione nec cum iracundia aut pertinacia recte disputari potest. Ita enim vivunt quidam, ut eorum vita refellatur oratio. Unum est sine dolore esse, alterum cum voluptate. Qua tu etiam inprudens utebare non numquam. An est aliquid per se ipsum flagitiosum, etiamsi nulla comitetur infamia? Intrandum est igitur in rerum naturam et penitus quid ea postulet pervidendum; Quod ea non occurrentia fingunt, vincunt Aristonem;</p>
</article>
<figure class="col-md-6">
<img src="http://lorempixel.com/400/200/cats" alt="sports" class="img-responsive" />
<figcaption>Invidiosum nomen est, infame, suspectum. Duo Reges: constructio interrete. Quibus ego vehementer assentior. Non igitur bene.</figcaption>
</figure>
</div><!-- .row -->
<div class="row"
name="contact" id="contact">
<article class="col-md-6">
<h2>Contact</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quid ad utilitatem tantae pecuniae? Age, inquies, ista parva sunt. Quibus ego vehementer assentior. Quae cum essent dicta, discessimus.</p>
<p>Invidiosum nomen est, infame, suspectum. Duo Reges: constructio interrete. Quibus ego vehementer assentior. Non igitur bene.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Estne, quaeso, inquam, sitienti in bibendo voluptas? Servari enim iustitia nisi a forti viro, nisi a sapiente non potest. Cum salvum esse flentes sui respondissent, rogavit essentne fusi hostes. Audax negotium, dicerem impudens, nisi hoc institutum postea translatum ad philosophos nostros esset. Obsecro, inquit, Torquate, haec dicit Epicurus? Quamquam haec quidem praeposita recte et reiecta dicere licebit. Non dolere, inquam, istud quam vim habeat postea videro; Nobis Heracleotes ille Dionysius flagitiose descivisse videtur a Stoicis propter oculorum dolorem. Duo Reges: constructio interrete. Dici enim nihil potest verius.</p>
<p>Quid ergo attinet dicere: Nihil haberem, quod reprehenderem, si finitas cupiditates haberent? Deprehensus omnem poenam contemnet. Ego vero volo in virtute vim esse quam maximam; Omnis enim est natura diligens sui. Semper enim ex eo, quod maximas partes continet latissimeque funditur, tota res appellatur. Graecum enim hunc versum nostis omnes-: Suavis laborum est praeteritorum memoria. Hoc loco tenere se Triarius non potuit.</p>
<p>Tu quidem reddes; Dicet pro me ipsa virtus nec dubitabit isti vestro beato M.</p>
<p>Quod iam a me expectare noli. Hoc est dicere: Non reprehenderem asotos, si non essent asoti. Saepe ab Aristotele, a Theophrasto mirabiliter est laudata per se ipsa rerum scientia; Alterum significari idem, ut si diceretur, officia media omnia aut pleraque servantem vivere. Nec vero sum nescius esse utilitatem in historia, non modo voluptatem. Cur iustitia laudatur?</p>
<p>Atque hoc loco similitudines eas, quibus illi uti solent, dissimillimas proferebas. Quamquam ab iis philosophiam et omnes ingenuas disciplinas habemus; Neque enim disputari sine reprehensione nec cum iracundia aut pertinacia recte disputari potest. Ita enim vivunt quidam, ut eorum vita refellatur oratio. Unum est sine dolore esse, alterum cum voluptate. Qua tu etiam inprudens utebare non numquam. An est aliquid per se ipsum flagitiosum, etiamsi nulla comitetur infamia? Intrandum est igitur in rerum naturam et penitus quid ea postulet pervidendum; Quod ea non occurrentia fingunt, vincunt Aristonem;</p>
</article>
<figure class="col-md-6">
<img src="http://lorempixel.com/400/200/people" alt="people" class="img-responsive" />
<figcaption>Invidiosum nomen est, infame, suspectum. Duo Reges: constructio interrete. Quibus ego vehementer assentior. Non igitur bene.</figcaption>
</figure>
</div><!-- .row -->
</div><!-- .container -->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script>
(function()
{
$('.navbar-inverse .navbar-nav > li > a').click(function()
{
var target = $(this).attr('href');
var targetLoc = $(target).offset().top;
$('html, body').stop().animate(
{
scrollTop:targetLoc,
easing:'swing'
}, 1000);
return false;
});
})();
</script>
</body>
</html>
