首页 > 程序开发 > web前端 > HTML/CSS > 正文
Bootstrap导航元素
2016-01-08       个评论    来源:Yvette Lau的专栏  
收藏    我要投稿

 

表格导航或标签

使用ul,li无序列表,给ul加上class .nav和.nav-tabs

 


 



<script type="text/javascript" src = "bootstrap-3.3.4-dist/jquery-2.1.4.min.js"></script><script type="text/javascript" src = "bootstrap-3.3.4-dist/js/bootstrap.min.js"></script>



 

\

 

点击某个导航时,给其li加上class .active
.nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover { color: #555;
  cursor: default;
  background-color: #fff;
  border: 1px solid #ddd;
  border-bottom-color: transparent;
 
}

胶囊式的导航菜单

 

 

基本的胶囊式导航菜单

 

如果需要把标签改成胶囊的样式,只需要使用 class .nav-pills 代替 .nav-tabs 即可。


 




 

\

 

.nav-pills > li {
 
float: left;
 
}
 
.nav-pills > li.active > a, .nav-pills > li.active > a:focus, .nav-pills > li.active > a:hover {
 
color: #FFF;
 
background-color: #337AB7;
}

 

 

垂直的胶囊式导航菜单

在使用 class .nav、.nav-pills 的同时使用 class .nav-stacked,让胶囊垂直堆叠。

 

 

 


\

 

 

加上.nav-stacked能使得胶囊垂直的原因:
 
.nav-stacked > li {
 
float: none;
 
}

 

 

两端对齐的导航

您可以在屏幕宽度大于 768px 时,通过在分别使用.nav、.nav-tabs 或.nav、.nav-pills的同时使用 class .nav-justified,让标签式或胶囊

 

式导航菜单与父元素等宽。在更小的屏幕上,导航链接会堆叠。

 



为了更好的看出效果,给.container加上背景色

 

\

 

小屏幕时:

\

 

禁用链接

li可以添加.active可以显示目前是此菜单的状态,同样可以给其添加.disabled,使其显示为不可用状态,同时会禁用该链接

 

的:hover状态。

 

 


点击复制链接 与好友分享!回本站首页
相关TAG标签 元素
上一篇:移动端 h5开发相关内容总结——CSS篇
下一篇:Web前端开发实战6:CSS实现导航菜单结合二级下拉式菜单的简单变换
相关文章
图文推荐
文章
推荐
点击排行

关于我们 | 联系我们 | 广告服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训
版权所有: 红黑联盟--致力于做实用的IT技术学习网站