1.  ---恢复内容开始---
  2.  
  3.  <!DOCTYPE html>
  4.  <html>
  5.  <head>
  6.  <title>Bootstrap 实例</title>
  7.  <meta charset="utf-8">
  8.  <meta name="viewport" content="width=device-width, initial-scale=1">
  9.  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/css/bootstrap.min.css">
  10.  <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
  11.  <script src="https://cdn.staticfile.org/popper.js/1.12.5/umd/popper.min.js"></script>
  12.  <script src="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/js/bootstrap.min.js"></script>
  13.  </head>
  14.  <body>
  15.  
  16.  <div class="container">
  17.  <h2>选项卡切换</h2>
  18.  <br>
  19.  <!-- Nav tabs -->
  20.  <ul class="nav nav-tabs" role="tablist">
  21.  <li class="nav-item">
  22.  <a class="nav-link active" data-toggle="tab" href="#home">Home</a>
  23.  </li>
  24.  <li class="nav-item">
  25.  <a class="nav-link" data-toggle="tab" href="#menu1">Menu </a>
  26.  </li>
  27.  <li class="nav-item">
  28.  <a class="nav-link" data-toggle="tab" href="#menu2">Menu </a>
  29.  </li>
  30.  </ul>
  31.  
  32.  <!-- Tab panes -->
  33.  <div class="tab-content">
  34.  <div id="home" class="container tab-pane active"><br>
  35.  <h3>HOME</h3>
  36.  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  37.  </div>
  38.  <div id="menu1" class="container tab-pane fade"><br>
  39.  <h3>Menu </h3>
  40.  <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  41.  </div>
  42.  <div id="menu2" class="container tab-pane fade"><br>
  43.  <h3>Menu </h3>
  44.  <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
  45.  </div>
  46.  </div>
  47.  </div>
  48.  
  49.  </body>
  50.  </html>--
  51.  
  52.  ---恢复内容结束---
  53.  
  54.  <!DOCTYPE html>
  55.  <html>
  56.  <head>
  57.  <title>Bootstrap 实例</title>
  58.  <meta charset="utf-8">
  59.  <meta name="viewport" content="width=device-width, initial-scale=1">
  60.  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/css/bootstrap.min.css">
  61.  <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
  62.  <script src="https://cdn.staticfile.org/popper.js/1.12.5/umd/popper.min.js"></script>
  63.  <script src="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/js/bootstrap.min.js"></script>
  64.  </head>
  65.  <body>
  66.  
  67.  <div class="container">
  68.  <h2>选项卡切换</h2>
  69.  <br>
  70.  <!-- Nav tabs -->
  71.  <ul class="nav nav-tabs" role="tablist">
  72.  <li class="nav-item">
  73.  <a class="nav-link active" data-toggle="tab" href="#home">Home</a>
  74.  </li>
  75.  <li class="nav-item">
  76.  <a class="nav-link" data-toggle="tab" href="#menu1">Menu </a>
  77.  </li>
  78.  <li class="nav-item">
  79.  <a class="nav-link" data-toggle="tab" href="#menu2">Menu </a>
  80.  </li>
  81.  </ul>
  82.  
  83.  <!-- Tab panes -->
  84.  <div class="tab-content">
  85.  <div id="home" class="container tab-pane active"><br>
  86.  <h3>HOME</h3>
  87.  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  88.  </div>
  89.  <div id="menu1" class="container tab-pane fade"><br>
  90.  <h3>Menu </h3>
  91.  <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  92.  </div>
  93.  <div id="menu2" class="container tab-pane fade"><br>
  94.  <h3>Menu </h3>
  95.  <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
  96.  </div>
  97.  </div>
  98.  </div>
  99.  
  100.  </body>
  101.  </html>--

bootstrap tab页的更多相关文章

  1. bootstrap Tab页切换

    <ul class="nav nav-tabs" id="otherInfoTab"> <li class="active" ...

  2. JS组件系列——基于Bootstrap Ace模板的菜单和Tab页效果分享（你值得拥有）

    前言:最近园子里多了许多谈语言.谈环境.谈逼格(格局)的文章,看看笑笑过后,殊不知其实都是然并卵.提升自己的技术才是王道.之前博主分享过多篇bootstrap组件的文章,引起了很多园友的关注和支持,看 ...

  3. 在bootstrap ace样式框架上修改的后台管理型模板(Tab页后台管理模板)

    后台管理模板开始用frameset布局,但是有时候会遮挡比如上面导航或者左边导航的二级三级弹出菜单,因为宽度被限制了,所以有时候就用easyui或者ext的,但是样式不好看,然后看到了bootstra ...

  4. JS组件系列——基于Bootstrap Ace模板的菜单Tab页效果优化

    前言:之前发表过一篇  JS组件系列——基于Bootstrap Ace模板的菜单和Tab页效果分享(你值得拥有) ,收到很多园友的反馈,当然也包括很多诟病,因为上篇只是将功能实现了,很多细节都没有处理 ...

  5. Bootstrap 标签页（Tab）插件

    摘自: http://www.runoob.com/bootstrap/bootstrap-tab-plugin.html Bootstrap 标签页(Tab)插件 标签页(Tab)在 Bootstr ...

  6. 值得分享的Bootstrap Ace模板实现菜单和Tab页效果（转）

    Ace模板地址:http://code.google.com/p/ace-engine/wiki/AceTemplate(有时会打不开) Ace英文官网:http://wrapbootstrap.co ...

  7. JS组件系列——基于Bootstrap Ace模板的菜单和Tab页效果

    Ace模板地址:http://code.google.com/p/ace-engine/wiki/AceTemplate(有时会打不开) Ace英文官网:http://wrapbootstrap.co ...

  8. Bootstrap 基于Bootstrap和JQuery实现动态打开和关闭tab页

    基于Bootstrap和JQuery实现动态打开和关闭tab页   by:授客 QQ:1033553122 1.   测试环境 JQuery-3.2.1.min.j Bootstrap-3.3.7-d ...

  9. Bootstrap技术: 如何给nav导航组件的tab页增加关闭按钮以及动态的添加和关闭tab页

    先给出示例html代码 <div> <!-- Nav tabs --> <ul class="nav nav-tabs" role="tab ...

随机推荐

  1. display，visibility，meta知识

    <div style="display:">显示</div><div style="display:none;">隐藏不占位 ...

  2. 【Docker入门】

    目录 Linux容器 Docker的优势 Docker三大概念 安装使用Docker 补充知识 [Docker入门] 发布文章 "qq_41964425" @ *** 所谓Dock ...

  3. 今日SGU 5.16

    SGU 119 题意:给你N.A0.B0,然后问所有X.Y,若A0X+B0Y能被N整除,则AX+BY也能被N整除,求所有的A.B.(0<=A.B<N) 收获:枚举 因为a0x+b0y=k1 ...

  4. 关于idea开发工具常用的快捷键

    自动补全缺失的import    alt+enter 自动优化import ctrl+alt+o 自动补全返回代码:IDEA的ctrl+alt+v ,eclipse的CTRL+F1 main    p ...

  5. 停止复制代理后AWT缓存组的行为

    AWT缓存组中尽管大多数时候数据是从TimesTen到Oracle,但也存在数据从Oracle到TimesTen的情形. 数据从TimesTen下沉到Oracle依靠复制代理,数据从Oracle到Ti ...

  6. 设置eclipse中的字体大小

  7. EC2 开启 IPV6 访问 和 禁止重启后自动分配IP地址

    EC2 开启 IPV6 访问 和 禁止重启后自动分配IP地址进入 VPC 控制台,对当前 VPC 添加 IPV6 CIDR 块对该 VPC 的路由表进行修改,添加其它路由,第一个空填::/0,第二个空 ...

  8. C#变量引用与全局变量

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...

  9. 8.ZOrder

    T3LayerZorder.h #pragma once #include "cocos2d.h" USING_NS_CC; class T3LayerZorder:public ...

  10. EF中执行Sql语句

    Entity Framework是微软出品的高级ORM框架,大多数.NET开发者对这个ORM框架应该不会陌生.本文主要罗列在.NET(ASP.NET/WINFORM)应用程序开发中使用Entity F ...