Bootstrap实现的标签页内容切换显示效果示例
更新时间:2017年05月25日 10:50:13 作者:骑小猪追火车
这篇文章主要介绍了Bootstrap实现的标签页内容切换显示效果,结合完整实例形式分析了基于Bootstrap实现的标签页内容切换显示功能相关操作技巧,非常简单实用,需要的朋友可以参考下
本文实例讲述了Bootstrap实现的标签页内容切换显示效果。分享给大家供大家参考,具体如下:
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Bootstrap 实例 - 标签页(Tab)插件</title> <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="external nofollow" rel="stylesheet"> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script> </head> <body> <ul id="myTab" class="nav nav-tabs"> <li class="active col-md-4"><a href="#dingcan" rel="external nofollow" data-toggle="tab">订餐</a></li> <li class="col-md-4"><a href="#yonghu" rel="external nofollow" data-toggle="tab">用户中心</a></li> <li class="col-md-4"><a href="#dingdan" rel="external nofollow" data-toggle="tab">订单中心</a></li> </ul> <div id="myTabContent" class="tab-content"> <div class="tab-pane fade in active" id="dingcan"> <p>订餐</p> </div> <div class="tab-pane fade" id="yonghu"> <p>用户中心</p> </div> <div class="tab-pane fade" id="dingdan"> <p>订单中心</p> </div> </div> </body> </html>
PS:关于bootstrap布局,这里再为大家推荐一款本站的在线可视化布局工具供大家参考使用:
在线bootstrap可视化布局编辑工具:
http://tools.jb51.net/aideddesign/layoutit
希望本文所述对大家基于bootstrap的程序设计有所帮助。
您可能感兴趣的文章:
- Bootstrap标签页(Tab)插件切换echarts不显示问题的解决
- Bootstrap开发中Tab标签页切换图表显示问题的解决方法
- 基于Bootstrap的标签页组件及bootstrap-tab使用说明
- Bootstrap标签页(Tab)插件使用方法
- 简单实现Bootstrap标签页
- BootStrap框架个人总结(bootstrap框架、导航条、下拉菜单、轮播广告carousel、栅格系统布局、标签页tabs、模态框、菜单定位)
- Bootstrap每天必学之标签页(Tab)插件
- JS表格组件神器bootstrap table详解(基础版)
- Bootstrap Table使用方法详解
- bootstrap-closable-tab可实现关闭的tab标签页插件
相关文章
详解如何让InstantClick兼容MathJax、百度统计等
本篇文章主要介绍了如何让InstantClick兼容MathJax、百度统计等,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧2017-09-09JavaScript如何使用dhtmlXTreeObject的loadJSONObject绘制目录树
这篇文章主要介绍了JavaScript如何使用dhtmlXTreeObject的loadJSONObject绘制目录树,需要引入dhtmlXTreeObject的css和js文件,这里还需要注意js的引用顺序,本文给大家介绍的非常详细,需要的的朋友参考下吧2023-11-11bootstrap select2插件用ajax来获取和显示数据的实例
今天小编就为大家分享一篇bootstrap select2插件用ajax来获取和显示数据的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧2018-08-08
最新评论