导航、选项卡(nav) - bootStrap4常用CSS笔记

导航一般采用ul、li来定义,否则有些效果无法实现,比如动态选项卡效果。

基础样式:

1 <ul class="nav">
2   <li class="nav-item"><a href="#" class="nav-link">导航一</a></li>
3 </ul>

 

导航样式及属性:

ul 标签可用样式及属性  
.nav 导航基类
.nav-tabs 选项卡导航
.nav-pills 胶囊导航
.nav-justified 导航均分宽度
.flex-column 垂直导航
.justify-content-start | .justify-content-center | .justify-content-end

导航选项的对齐方式:

.justify-content-start   默认,左对齐

.justify-content-center 居中对齐

.justify-content-right 右对齐

li 标签可用样式及属性  
.nav-item 指定一个选项
.dropdown 指明该选项是一个下拉菜单(下拉菜单也可以不用指定)
a标签可用样式及属性  
.nav-link 指定导航链接
.active 当前激活的导航链接
.disabled 禁用的导航链接
data-toggle = "{tab | pill }" 定义一个动态选项卡 或 动态胶囊选项卡
href = "#id" 动态导航时,指明要显示的容器ID
动态选项卡容器样式  
.tab-pane 动态选项卡容器类,必须要加

 动态下拉选项卡示例:

 1 <div class="container">
 2   <h3>定义动态下拉选项卡</h3>
 3   <ul class="nav nav-tabs" role="tablist">
 4     <li class="nav-item"><a href="#con1" class="nav-link active" data-toggle="tab">选项一</a></li>
 5     <li class="nav-item dropdown">
 6       <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">下拉选项</a>
 7       <div class="dropdown-menu">
 8         <a href="#" class="dropdown-item">下拉一</a>
 9         <a href="#" class="dropdown-item">下拉二</a>
10       </div>
11     </li>
12     <li class="nav-item"><a href="#con2" class="nav-link" data-toggle="tab">选项二</a></li>
13     <li class="nav-item"><a href="#con3" class="nav-link" data-toggle="tab">选项三</a></li>
14     <li class="nav-item"><a href="#" class="nav-link disabled">禁用选项</a></li>
15   </ul>
16   
17   <div class="tab-content"> <!-- 这个类是必须的,否则异常 -->
18     <div id="con1" class="tab-pane active">
19       选项一内容
20     </div>
21     <div id="con2" class="tab-pane fade"><!-- fade 必须加 -->
22       选项二内容
23     </div>
24     <div id="con3" class="tab-pane fade"><!-- fade 必须加 -->
25       选项三内容
26     </div>
27   </div>
28 </div>

注意:

一)选项卡标签对应内容需注意事项:

a)  要放置在类:tab-content 的容器下,这是必需的,否则会出现异常。

b)必须添加 .tab-pane 类

c)  用.active表明当前选项卡内容。其它一定要加载 .fade 类。 

posted @ 2019-05-14 16:43 网申 阅读(...) 评论(...) 编辑 收藏