[英]Bootstrap 3 Navbar with Icons & Carousel
我正在使用bootstrap3創建一個網站。 不幸的是,即使觀看了許多視頻,我仍然遇到問題。
我希望導航欄上的徽標保留在左側(我擁有),其他要鏈接到頁面其他區域的圖標也要向左-不幸的是,我還沒有通過html / css來解決這個問題。 請查看www.frobot.net以查看我要模擬的內容。 本質上,文本旁邊有多個圖標。
我希望導航欄具有白色背景,並使其具有確定的底部,而不是與網站的其余部分嚙合,如果這有意義的話。 截至目前,導航工具尚沒有一致的水平白色區域。
我為三個圖像設置了一個輪播,只有第一個圖像出現。
有人可以指出我代碼中的問題嗎?
HTML:
<!DOCTYPE html>
<html>
<head>
<!-- Website Title & Description for Search Engine purposes -->
<title>THE BEST YOGURT</title>
<meta name="description" content="Frozen Yogurt">
<!-- Mobile viewport optimized -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<!-- Bootstrap CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap-glyphicons.css" rel="stylesheet">
<!-- Custom CSS -->
<link rel="stylesheet" href="css/style.css">
<!-- Include Modernizr in the head, before any other Javascript -->
<script src="js/modernizr-2.6.2.min.js"></script>
</head>
<body>
<div class="container" id="main">
<nav class="navbar navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">
<img src="img/logo.png" alt="#Logo">
</a>
</div>
<div class="navbar navbar-custom">
<div class="navbar-header">
<a class="icons" href="icons">
<link href='http://fonts.googleapis.com/css?family=Titillium+Web' rel='stylesheet' type='text/css'>
<a href="#"><img src="img/froyo.png" alt="Froyo"<li>FROYO</li></a>
<a href="#"><img src="img/story.png" alt="Bots"<li>BOTS</li></a>
<a href="#"><img src="img/team.png" alt="Press"<li>PRESS</li></a>
<a href="#"><img src="img/talk.png" alt="Team"<li>TEAM</li></a>
<a href="#"><img src="img/contact.png" alt="Contact"<li>CONTACT</li></a>
</div>
</nav><!--End Nav Bar -->
</div>
<!-- Carousel Begins -->
<div class="carousel-slide" id="myCarousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li class="active" data-slide-to="0" data-target="#myCarousel"></li>
<li data-slide-to="1" data-target="#myCarousel"></li>
<li data-slide-to="2" data-target="#myCarousel"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active" id="slide1">
<div class="carousel-caption">
<h4></h4>
<p></p>
</div><!-- end carousel-caption-->
</div><!-- end item -->
<div class="item" id="slide2">
<div class="carousel-caption">
<h4></h4>
<p></p>
</div><!-- end carousel-caption-->
</div><!-- end item -->
<div class="item" id="slide3">
<div class="carousel-caption">
<h4></h4>
<p></p>
</div><!-- end carousel-caption-->
</div><!-- end item -->
</div><!-- carousel-inner -->
<!-- Controls -->
<a class="left carousel-control" data-slide="prev" href="#myCarousel"><span class="icon-prev"></span></a>
<a class="right carousel-control" data-slide="next" href="#myCarousel"><span class="icon-next"></span></a>
</div><!-- end myCarousel -->
<div class="row" id="FroYo">
<a href="#"><img src="img/contact-para-bg.png" alt="Bots"</a>
</body>
</html>
CSS:
/* --------------------------------------
Layout
-------------------------------------- */
.nav-bar {
position:fixed;
top:0;
background-color:white;
padding-top:30px;
padding-left:100px;
}
.navbar-brand {
padding: 13px 15px;
background-color:white;
}
.icons {
margin:0;
padding-top: 25px;
padding-right: 200px;
padding-left:100px;
background-color:white;
}
.icons a{
font-family: 'Titillium Web', sans-serif;
text-decoration: none;
float: left;
display: block;
padding: 20px 15px;
color:gray;
background-color:white;
}
.icons a:hover{
color:purple;
}
* --------------------------------------
Carousel
-------------------------------------- */
#myCarousel {
margin-top: 300px;
background-color:gray;
}
.carousel-caption {
font-size: 24px;
}
.carousel-caption h4 {
font-size: 32px;
}
#myCarousel .item { height: 700px; }
#slide1 {
background: url('../img/best-slide.png') top center no-repeat;
}
#slide2 {
background: url('../img/good.png') top center no-repeat;
}
#slide3 {
background: url('../img/slide3.png') top center no-repeat;
}
您可以在導航欄上放置底部邊框,並修改邊框的CSS,以在導航欄和頁面的其余部分之間留出空間。 您還忘記了data-ride="carousel"
的div標簽中的data-ride="carousel"
。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.