码迷,mamicode.com
首页 > Web开发 > 详细

使用bootstrap制作网站导航

时间:2017-09-24 22:16:15      阅读:305      评论:0      收藏:0      [点我收藏+]

标签:fixed   primary   and   ace   use   port   sla   mes   ext   

除了制作选项卡和下拉菜单,bootstrap还能编写出美观的网站导航栏

一、仿知乎导航栏

<body>
 <
nav class="navbar navbar-default navbar-fixed-top"> <!-- navbar-default 指导航栏的默认样式 navbar-fixed-top 指导航栏在顶部固定定位 --> <div class=container> <!-- 将contianer放在 nav标签内可以保证导航栏在 左右方向上覆盖住整个窗口 --> <div class="navbar-header"> <a href="#" class="navbar-brand"><img src="img/zhihulogo.png" /></a> <!-- logo应该放在类名为 navbar-header 的div元素里 --> </div> <form class="navbar-form navbar-left"> <!-- navbar-left 指元素向左浮动 --> <div class="input-group"> <input type="text" class="form-control" style="320px" placeholder="search your xxx"/> <span class="input-group-addon"><a href="#"><span class="glyphicon glyphicon-search"></span></a></span> </div> </form> <ul class="nav navbar-nav navbar-left"> <li><a href="#">首页</a></li> <li><a href="#">话题</a></li> <li><a href="#">发现</a></li> </ul> <ul class="nav navbar-nav navbar-right"> <li><a href="#"><span class="glyphicon glyphicon-user"></span>注册知乎</a></li> <li><a href="#">登录</a></li> </ul> <button class="btn btn-primary navbar-btn navbar-right">提问</button> </div> </nav> </body>
<style>

body{margin-top: 50px;}
.myBtnStyle .dropdown-menu span{
margin:5px;
}
.myBtnStyle .dropdown-menu {
animation: 0.5s linear fadeIn;
}
@keyframes fadeIn {
0%{opacity:0;transform: translateY(-20);}
100%{opacity: 1;transform: translateY(0);}
}
tab-content {
border:1px solid #999; border-top: none;border-radius: 0 0 5px 5px;
}
.container {
width: 960px
}
.navbar-default{
background: linear-gradient(to bottom,#086ed5, #055db5) !important;
}
.navbar-header{
margin-top: -3px;
}
.navbar-nav a {
color:snow !important;
}

</style>

 

 

样式如图所示

技术分享

 

使用bootstrap制作网站导航

标签:fixed   primary   and   ace   use   port   sla   mes   ext   

原文地址:http://www.cnblogs.com/sticktong/p/7588710.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!