Bootstrap基础--选项卡

Bootstrap基础–选项卡(nav-tabs)

选项卡Tabs是Web中一种非常常用的功能。用户点击或悬浮对应的菜单项，能切换出对应的内容。

一个选项卡主要包括两个部分，其一是菜单项，其二是内容面板。

注意：选项卡中链接的锚点要与对应的面板内容容器的?相匹配。

触发切换效果

选项卡导航链接中要设置data-toggle=“tab”;
并且设置data-target=“对应内容面板的选择符(一般是?)”；
如果是链接的话，还可以通过href=“对应内容面板的选择符(一般是?)”。主要起的作用是用户点击的时候能找到该选择符所对应的面板内容tab-pane。
面板内容统一放在ta-content容器中，而且每个内容面板tab-pane都需要设置一个独立的选择符（最好是ID）与选项卡中的data-target 或 href 的值匹配。

添加fade样式

在面板中添加类名fade，可让其产生渐入的效果。在添加fade样式时，最初的默认显示的内容面板一定要记得加上in类名，不然其内容用户无法看到。

胶囊式选项卡（nav-pill）

将nav-tabs换成nav-pills.
将data-toggle="tab"换成data-toggle=“pill”

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script src="JSmin/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script><script src="JSmin/bootstrap.min.js" type="text/javascript" charset="utf-8"></script><link rel="stylesheet" type="text/css" href="CSS/bootstrap.min.css" /></head><body><h1>选项卡</h1><ul class="nav nav-tabs"><li class="active"><a href="#bulletin" data-toggle="tab">公告</a></li><li><a href="#rule" data-toggle="tab">规则</a></li><li><a href="#forum" data-toggle="tab">论坛</a></li><li><a href="#security" data-toggle="tab">安全</a></li><li><a href="#welfare" data-toggle="tab">公益</a></li></ul><div id="mytab-content" class="tab-content"><div class="tab-pane fade in active" id="bulletin">公告内容面板</div><div class="tab-pane fade" id="rule">规则内容面板</div><div class="tab-pane fade" id="forum">论坛内容面板</div><div class="tab-pane fade" id="security">安全内容面板</div><div class="tab-pane fade" id="welfare">公益内容面板</div></div><h3>js触发选项卡</h3><ul class="nav nav-tabs" id="myTab"><li class="active"><a href="#bulletin1">公告</a></li><li><a href="#rule1">规则</a></li><li><a href="#forum1">论坛</a></li><li><a href="#security1">安全</a></li><li><a href="#welfare1">公益</a></li></ul><div id="mytab-content2" class="tab-content"><div class="tab-pane fade in active" id="bulletin1">公告内容面板</div><div class="tab-pane fade" id="rule1">规则内容面板</div><div class="tab-pane fade" id="forum1">论坛内容面板</div><div class="tab-pane fade" id="security1">安全内容面板</div><div class="tab-pane fade" id="welfare1">公益内容面板</div></div><script type="text/javascript">$(function(){$('#myTab a').click(function(){$(this).tab('show')})})</script>     </body>
</html>

Bootstrap基础--选项卡相关推荐

bootstrap基础学习【菜单、按钮、导航】（四）
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>boo ...
Bootstrap基础一 CSS 概览
原文:Bootstrap<基础一> CSS 概览 HTML 5 文档类型(Doctype) Bootstrap 使用了一些 HTML5 元素和 CSS 属性.为了让这些正常工作,您需要使用 ...
Bootstrap基础二十七多媒体对象（Media Object）
Bootstrap<基础二十七> 多媒体对象(Media Object) 原文:Bootstrap<基础二十七> 多媒体对象(Media Object) Bootstrap 中 ...
Bootstrap基础二网格系统
原文:Bootstrap<基础二> 网格系统 Bootstrap 提供了一套响应式.移动设备优先的流式网格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列. 什 ...
Bootstrap 基础五表格
原文:Bootstrap <基础五>表格 Bootstrap 提供了一个清晰的创建表格的布局.下表列出了 Bootstrap 支持的一些表格元素: 标签描述 <table> ...
第87节：Java中的Bootstrap基础与SQL入门
第87节:Java中的Bootstrap基础与SQL入门前言复习什么是JQ? : write less do more 写更少的代码,做更多的事找出所有兄弟: $("div" ...
BootStrap基础教程系列-李游Leo-专题视频课程
BootStrap基础教程系列-138人已学习课程介绍 Bootstrap,来自 Twitter,是目前很受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JavaSc ...
前端三件套系例之BootStrap——BootStrap基础、 BootStrap布局
文章目录 1 BootStrap基础 1 什么是BootStrap 2 BootStrap的版本 3 BootStrap 下载 4 CDN服务 5 目录结构 6 基本模板 7 浏览器支持 8 浏览器兼 ...
Bootstrap—基础样式定义
本章主要是介绍Bootstrap默认的基础样式定义,利用这些基础的定义相互组合,完成页面的整体风格定义甚至是更具体的效果. Bootstrap应该是一个基础工具,它的好处在于已经帮你定义了一个基础的样 ...

Bootstrap基础--选项卡

Bootstrap基础–选项卡(nav-tabs)

触发切换效果

添加fade样式

胶囊式选项卡（nav-pill）

Bootstrap基础--选项卡相关推荐

最新文章

热门文章