首页 > 其他分享 >简单的Bootstrap Tabs选项卡

简单的Bootstrap Tabs选项卡

时间:2024-12-23 10:31:52浏览次数:3  
标签:选项卡 Tabs Bootstrap li tabs nav tab role div

这是一款非常简单的Bootstrap Tabs选项卡美化特效。该特效在原生Bootstrap Tabs选项卡的基础上,通过css3来对它进行了一些美化效果。

 

在线预览   下载

 

 使用方法

在页面中引入jquery和bootstrap相关文件。

<link href="path/to/css/bootstrap.min.css" rel="stylesheet"> <script src="path/to/js/jquery.min.js"></script> <script src="path/to/js/bootstrap.min.js"></script>
 HTML结构

该Bootstrap Tabs选项卡使用下面的HTML结构:

<div class="container">     <div class="row">         <div class="col-md-offset-3 col-md-6">             <div class="tab" role="tabpanel">                 <!-- Nav tabs -->                 <ul class="nav nav-tabs" role="tablist">                     <li role="presentation" class="active"><a href="#Section1" aria-controls="home" role="tab" data-toggle="tab">Section 1</a></li>                     <li role="presentation"><a href="#Section2" aria-controls="profile" role="tab" data-toggle="tab">Section 2</a></li>                     <li role="presentation"><a href="#Section3" aria-controls="messages" role="tab" data-toggle="tab">Section 3</a></li>                 </ul>                 <!-- Tab panes -->                 <div class="tab-content tabs">                     <div role="tabpanel" class="tab-pane fade in active" id="Section1">                         <h3>选项卡 1</h3>                         <p>....</p>                     </div>                     <div role="tabpanel" class="tab-pane fade" id="Section2">                         <h3>选项卡 2</h3>                         <p>...</p>                     </div>                     <div role="tabpanel" class="tab-pane fade" id="Section3">                         <h3>选项卡 3</h3>                         <p>....</p>                     </div>                 </div>             </div>         </div>     </div> </div>
 CSS样式

通过下面的CSS代码来对选项卡进行美化。

a:hover,a:focus{     outline: none;     text-decoration: none; } .tab .nav-tabs{     position: relative;     border-bottom: none; } .tab .nav-tabs li{     text-align: center;     margin-right: 10px; } .tab .nav-tabs li a{     display: block;     font-size: 16px;     font-weight: 600;     color: #444;     padding: 10px 15px;     background: transparent;     margin-right: 0;     border: none;     border-radius: 0;     overflow: hidden;     position: relative;     z-index: 1;     transition: all 0.5s ease 0s; } .tab .nav-tabs li a:before{     content: "";     width: 100%;     height: 3px;     background: #de7921;     position: absolute;     top: 92%;     left: 0;     transition: all 0.3s ease 0s; } .tab .nav-tabs li a:hover:before, .tab .nav-tabs li.active a:before, .tab .nav-tabs li.active a:hover:before{     top: 0; } .tab .nav-tabs li a:after{     content: "";     width: 100%;     height: 100%;     background: #fff;     position: absolute;     top: 100%;     left: 0;     z-index: -1;     transition: all 0.3s ease 0s; } .tab .nav-tabs li a:hover:after, .tab .nav-tabs li.active a:after, .tab .nav-tabs li.active a:hover:after{     top: 0; } .nav-tabs li.active a, .nav-tabs li.active a:focus, .nav-tabs li.active a:hover, .nav-tabs li a:hover{     border: none; } .tab .tab-content{     padding: 30px 15px 20px;     background: #fff;     font-size: 14px;     color: #555;     line-height: 26px; } .tab .tab-content h3{     font-size: 24px;     margin-top: 0; } @media only screen and (max-width: 479px){     .tab .nav-tabs li{ width: 100%; } }                  

标签:选项卡,Tabs,Bootstrap,li,tabs,nav,tab,role,div
From: https://www.cnblogs.com/liylllove/p/18623359

相关文章

  • Bootstrap颜色拾取器插件
    BootstrapColorpicker是一款基于Bootstrap的jquery颜色选择器插件。该jquery颜色选择器插件允许你选取颜色,它提供多种颜色格式:hex,rgb,rgba,hsl,hsla,并提供功能强大的API来控制颜色拾取器。 在线预览 下载 使用方法在页面中引入bootstrap,jquery和bootstrap-colorpicker.css......
  • 【Python GUI 编程】tkinter:Ttk 选项卡 Notebook
    在本文中,将介绍如何使用TkinterNotebook小部件创建选项卡。Notebook是由TkinterTtk模块引入的强大小部件。允许开发者创建包含多个选项卡的界面,每个选项卡可以包含不同的内容。创建Notebook小部件,请使用如下构造函数:notebook=ttk.Notebook(master,**kw)添加选项卡......
  • Bootstrap3 Toast消息框插件
    Bootoast是一款Bootstrap3Toast消息框插件。通过Bootoast插件你可以非常方便的制作Toast消息框效果,并且插件提供了各种参数来控制Toast消息框。 在线预览 下载  使用方法在页面中引入bootstrap.min.css文件,bootoast.css,以及jquery和bootoast.js文件。<linkrel="sty......
  • 基于Bootstrap的jquery表格编辑插件
    Bootstable是一款基于Bootstrap的jquery表格编辑插件。通过该jquery表格编辑插件,会自动为表格添加编辑和删除按钮,使表格可以动态编辑。在线预览下载 该jquery表格编辑插件的特点还有:可以对指定表格单元格进行编辑。可以删除表格行。可以添加新的表格行。 使用方法在......
  • 基于Bootstrap的Markdown编辑器插件
    Bootstrap-Markdown是一款基于Bootstrap的所见即所得的Markdown编辑器。Bootstrap-Markdown使用简单,并提供大量的API来控制Markdown编辑器的行为,非常实用。在线预览   下载  使用方法在页面中引入bootstrap相关文件,jquery,以及bootstrap-markdown.min.css和bootstrap-m......
  • Bootstrap popover功能扩展jquery插件
    这是一款Bootstrappopover功能扩展jquery插件。该jquery插件在原生Bootstrappopover功能的基础上,添加了一些新的功能,例如自动定位,支持情景模式等。在线演示 下载  使用方法在页面中引入jquery和bootstrap相关文件,以及bootstrap-popover-x.css和bootstrap-popover-x.js......
  • 如何为在线客服系统的 Web Api 后台主程序添加 Bootstrap 启动页面
    背景我在业余时间开发了一款自己的独立产品:升讯威在线客服与营销系统。这个系统的核心后台主程序,在最早期是完全没有页面,经常有朋友部署之后,一访问是404,以为没有部署成功。我一看这肯定不行啊,可后台主程序是一个WebApi项目,没有页面,怎么办呢?1.x的实现方式通过WebApi接......
  • Bootstrap多级下拉菜单插件
    bootstrap-submenu是一款在原生bootstrapDropdowns组件的基础上进行扩展,可以生成多级子菜单的多级下拉菜单插件。原生的bootstrap下拉菜单只有一层,通过bootstrap-submenu插件,可以生成多级子菜单。在线预览下载 安装可以通过npm和bower来安装bootstrap-submenu插件。$np......
  • [BootstrapBlazor] Blazor 使用 Mermaid 渲染详细图表
    BootstrapBlazor是一套基于Bootstrap和Blazor的企业级组件库,无缝整合了Bootstrap框架与Blazor技术。它提供了一整套强大的工具,使开发者能够轻松创建响应式和交互式的Web应用程序。项目地址Gitee:https://gitee.com/LongbowEnterprise/BootstrapBlazorGitHub:https://g......
  • bootstrap4标签输入框插件
    这是一款基于Bootstrap4的标签输入框插件。该插件使用Bootstrap4badge组件来制作标签输入和移除的效果。 在线演示 下载  使用方法在页面中引入下面的文件。<linkhref="bootstrap.min.css"rel="stylesheet"type="text/css"/><linkhref="jquery-tagsinp......