Se reporter à travailler pour nav et la barre de navigation
J'ai quelques html pour une mise en page d'une page d'un site pour le logiciel de la bibliothèque de mon groupe de recherche fait. C'est fait avec bootstrap 3. Ce que je voudrais obtenir la barre de navigation qui se produit juste en dessous de la jumbotron pour devenir fixe en haut de la page une fois qu'il se défile. J'aimerais aussi un comportement similaire pour le rappel de l'élément dans la colonne de gauche de la page lorsque la page défile et qu'ils atteignent le haut - qu'ils deviennent alors fixe et y rester. En lisant, je comprends que les Apposer dans twitter bootstrap est le chemin à parcourir à ce sujet, mais je ne suis pas tout à fait sûr que je ne peux comprendre comment faire de ce droit.
Avec le code HTML ci-dessous ce qui se passe est, après le défilement jusqu'à présent, la barre de navigation qui doivent occuper la page devient écrasé - la barre de navigation des liens de se déplacer vers une ligne en dessous de la barre de navigation de la marque et le bar ne pas s'étend sur la page. Une fois que j'ai de comprendre comment l'utiliser apposer avec la barre de navigation, je l'espère, à utiliser avec l'élément nav. Quelqu'un peut-il expliquer ce que je dois faire pour obtenir l'effet? Je suis assez nouveau à la conception web trucs.
Grâce,
Ben.
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>SOFTWARE - GETTING STARTED WITH SOFTWARE</title>
<link rel="stylesheet" href="css/bootstrap.css" type="text/css"/>
</head>
<body>
<style>
.jumbotron {
margin-bottom: 0px;
}
</style>
<!-- Start of main container -->
<div class="container-fluid main">
<div class="row-fluid">
<div class="jumbotron">
<h1> Getting Started </h1>
<p> Installing SOFTWARE on your machine is easy for most systems.
This guide will get you up and running.
</p>
</div>
</div>
<!--Here's thestart of the navabar I'm trying to affix -->
<div class="row-fluid" data-spy="affix" data-offset-top="200">
<div class="navbar navbar-inverse">
<div class="navbar-header">
<a class="navbar-toggle" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="navbar-brand" href="#">SOFTWARE</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="#">Home</a></li>
<li><a href="#">About SOFTWARE</a></li>
<li class="active"><a href="#">Getting Started</a></li>
<li><a href="#">Quick Start</a></li>
<li><a href="#">Full Documentation</a></li>
<li><a href="#">Contact</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Download <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">GitHub Repository</a></li>
<li><a href="#">Download TAR</a></li>
<li><a href="#">Download ZIP</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<!-- Begin Layout for Getting Started Page -->
<div class="row-fluid">
<div class="col-lg-3">
<ul class="nav nav-pills nav-stacked sidemenu">
<li><a href="#">Introduction</a></li>
<li><a href="#">Installing R</a></li>
<li><a href="#">R Recommendations</a></li>
<li><a href="#">Installing HybRIDS from GitHub</a></li>
<li><a href="#">Installing HybRIDS from Source File</a></li>
<li><a href="#">Installing HybRIDS from Binary File</a></li>
</ul>
</div>
<div class="col-lg-9 whitep">
<h1 class="whitep">Introduction</h1>
<p>
Installation text
Installation text
Installation text
Installation text
Installation text
</p>
<hr>
<h1>Installing R</h1>
<p>
R is simple to install for most operating systems. If you use a Mac or PC or Linux system, the process for installing it is like for installing any other software on that system.
</p>
<p>
TEST text to fill page to test scrolling behaviour...
</p>
<p>
TEST
</p>
<p>
TEST
</p>
<p>
TEST
</p>
<p>
TEST
</p>
<p>
TEST
</p>
<p>
TEST
</p>
<p>
TEST
</p>
<p>
TEST
</p>
<p>
TEST
</p>
<p>
TEST
</p>
<p>
TEST
</p>
<p>
TEST
</p>
<p>
TEST
</p>
<p>
TEST
</p>
<p>
TEST
</p>
</div>
</div>
</div> <!--End of main Container-->
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="js/bootstrap.js"></script>
</body>
</html>
OriginalL'auteur Ward9250 | 2013-08-26
Vous devez vous connecter pour publier un commentaire.
Comme indiqué dans le Bootstrap docs, vous devez définir les classes CSS pour les vl et de la barre de navigation lorsque le
affix
coups de pied dans...De sorte que vous aurez besoin d'avoir un peu de CSS pour le dessus de la barre de navigation et la navigation..
Ici est un Bootply de démonstration à l'aide de
affix
avec à la fois le haut et le côté de nav: http://bootply.com/69848Lorsque la barre de navigation de lien point à l'intérieur d'ancrage (scrollspy) le apposé en haut barre de navigation du chevauchement entre le contenu dans cet exemple. Voir: stackoverflow.com/questions/18799688/...
Un problème avec cette méthode est que la barre latérale de nav perd son bloc d'affichage lorsque apposée et plus occupe la largeur de la colonne.
OriginalL'auteur Zim