技术教程 Bootstrap实现的标签页内容切换显示效果示例 正文

Bootstrap实现的标签页内容切换显示效果示例

2019-11-22,,,,

本文实例讲述了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.kunjuke.com/aideddesign/layoutit

希望本文所述对大家基于bootstrap的程序设计有所帮助。

您可能感兴趣的文章:

  • Bootstrap标签页（Tab）插件使用方法
  • 简单实现Bootstrap标签页
  • BootStrap框架个人总结(bootstrap框架、导航条、下拉菜单、轮播广告carousel、栅格系统布局、标签页tabs、模态框、菜单定位)
  • Bootstrap每天必学之标签页（Tab）插件
  • 使用BootStrap实现标签切换原理解析
  • Bootstrap的Carousel配合dropload.js实现移动端滑动切换图片
  • 基于Bootstrap框架实现图片切换
  • Bootstrap基本插件学习笔记之标签切换(17)
  • Bootstrap选项卡动态切换效果
  • Bootstrap 最常用的JS插件系列总结（图片轮播、标签切换等）
  • 很棒的Bootstrap选项卡切换效果
  • BootStrap中Tab页签切换实例代码
  • 基于Bootstrap实现tab标签切换效果

《Bootstrap实现的标签页内容切换显示效果示例.doc》

下载本文的Word格式文档，以方便收藏与打印。

Copyright 2023. 昆居客 - IT编程,互联网信息技术文档大全!