首页 > 代码库 > bootstrap(5)关于导航

bootstrap(5)关于导航

2024-09-21 16:07:58   205人阅读

关于导航

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

1，导航样式

导航样式代码如下：

<ul  class="nav nav-tabs">
           <li role="presentation" class="active"><a href="http://www.mamicode.com/#">Home</a></li>
           <li role="presentation"><a href="http://www.mamicode.com/#">Profile</a></li>
           <li role="presentation"><a href="http://www.mamicode.com/#">Messages</a></li>
</ul>

　　

标签页：

.nav-tabs 

标签页是下面这种效果：

技术分享

胶囊式标签：

.nav-pills

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

技术分享

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

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

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

 

bootstrap(5)关于导航


联系
我们