需要帮助使用bootstrap设置单页站点

时间:2014-11-15 20:33:54

标签: html5 css3 twitter-bootstrap-3

我刚刚开始使用bootstrap,我正在尝试设置onepage网站。这是我尝试创建http://www.montere.it/的示例。我遇到的问题是,每当我的所有内容一直出现在彼此的顶端时。

到目前为止,我的代码如下:

               

<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" data-target="navbarCollapse" data-toggle="collapse" class="navbar-toggle">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="#" class="navbar-brand">Brand Name</a>
</div>

<!-- Collection of nav links and other content for toggling -->
<div id="navbarCollapse" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Blog</a></li>

<!-- SUB-MENU-->
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="navigation" aria-expanded="false">Menu</a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">FOOD-1</a></li>
<li><a href="#">FOOD-2</a></li>
<li><a href="#">FOOD-3</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="navigation" aria-expanded="false">Recipe</a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Recipe-4</a></li>
<li><a href="#">Recipe-5</a></li>
<li><a href="#">Recipe-6</a></li>
</ul>
</li>
<!--END OF SUBMENU-->

<li><a href="#">Contact</a></li>
</ul>
</div><!--Navbar Collapse-->
</div><!--Container-->
</nav>
</div>


<!-- Carousel
============================================================-->
<div class="container-fluid">
<div class="row">
<div class="col-sm-12">
<div id="myCarousel" class="carousel container slide">

<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
</ol>

<div class="carousel-inner">

<div class="item active one">
<div class="carousel-caption text-center">
<h2>STORY FOR THE GODS</h2>
<p>Monte Ré porta ogni giorno a tavola un prodotto sano e certificato,<br>coltivato valorizzando l'ambiente e la nostra terra.</p>
</div>
</div>

<div class="item two">
<div class="carousel-caption text-center">
<h2>THEATER OF DREAMS</h2>
<p>Monte Ré porta ogni giorno a tavola un prodotto sano e certificato,<br>coltivato valorizzando l'ambiente e la nostra terra.</p>
</div>
</div>

<div class="item three">
<div class="carousel-caption text-center">
<h2>ROBIN VAN PERSIE</h2>
<p>Monte Ré porta ogni giorno a tavola un prodotto sano e certificato,<br>coltivato valorizzando l'ambiente e la nostra terra.</p>
</div>
</div>

<div class="item four">
<div class="carousel-caption text-center">
<h2>THE LITTLE MEXICAN PEA</h2>
<p>Monte Ré porta ogni giorno a tavola un prodotto sano e certificato,<br>coltivato valorizzando l'ambiente e la nostra terra.</p>
</div>
</div>
</div>
</div>
</div>
</div></div>



<!-- MAIN CONTENT 1
============================================================-->
<div class="container-fluid">
<div class="row">
<div class="col-sm-6">
<img src="img/siralex2.jpg" alt="#" class="imgresize">
<h4>The Greatest Manager</h4>
<p><a href="#" class="btn btn-primary btn-lg">MANUTD</a></p>
</div>

<div class="col-sm-6">
<img src="img/wenger.jpg" alt="#" class="imgresize">
<h4>The Greatest Manager</h4>
<p><a href="#" class="btn btn-primary btn-lg">MANUTD</a></p>
</div>
</div>
</div>

<div class="container-fluid">
<div class="row">
<div class="col-sm-6">
<img src="img/siralex.jpg" alt="#" class="imgresize">
<h4>The Greatest Manager</h4>
<p><a href="#" class="btn btn-primary btn-lg">MANUTD</a></p>
</div>

<div class="col-sm-6">
<img src="img/wenger2.jpg" alt="#" class="imgresize">
<h4>The Greatest Manager</h4>
<p><a href="#" class="btn btn-primary btn-lg">MANUTD</a></p>
</div>
</div>
</div>

<!-- 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="js/bootstrap.js"></script>

<script type="text/javascript">
$(document).ready(function() {
$('.carousel').carousel({interval: 5000});
});
</script>

</body>
</html>

0 个答案:

没有答案