码迷,mamicode.com
首页 > 其他好文 > 详细

bootstrap(5)关于导航

时间:2017-05-13 00:32:02      阅读:185      评论:0      收藏:0      [点我收藏+]

标签:nms   pig   aws   udt   xib   sep   gms   xmx   g++   

关于导航

首先说明一点,在Bootstrap中的导航组件都依赖于同一个.nav类,状态类是共用的,下面添加的nav样式都是基于 .nav的基类上添加的

1,导航样式

导航样式代码如下:

<ul  class="nav nav-tabs">
           <li role="presentation" class="active"><a href="#">Home</a></li>
           <li role="presentation"><a href="#">Profile</a></li>
           <li role="presentation"><a href="#">Messages</a></li>
</ul>

  

标签页:

.nav-tabs 

标签页是下面这种效果:

技术分享

胶囊式标签:

.nav-pills

胶囊式标签是下面这种效果

技术分享

2,通过在后面添加类名为  class="stacked"可以实现标签页的垂直效果

3,通过添加class="nav-justified"可以实现响应式效果

当屏幕宽度大于768px的时候,标签可以实现水平效果,当宽度小于768px的时候,标签则会发生重叠效果

 

bootstrap(5)关于导航

标签:nms   pig   aws   udt   xib   sep   gms   xmx   g++   

原文地址:http://www.cnblogs.com/qianduangaoshou/p/6847757.html

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