<!DOCTYPE html>

<html>

<head>

    <title></title>

    <link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css">

</head>

<body>

	<ul class="nav nav-tabs">

	   <li class="active"><a href="#home" data-toggle="tab">首页</a></li>

	   <li><a href="#profile" data-toggle="tab">最新</a></li>

	   <li><a href="#message" data-toggle="tab">热门</a></li>

	   <li><a href="#settings" data-toggle="tab">排行</a></li>

        </ul>

	<div class="tab-content">

		<div class="tab-pane active" id="home">

			<p>我是首页内容</p>

		</div>

		<div class="tab-pane" id="profile">

			<p> 我是最新内容</p>

		</div>

		<div class="tab-pane" id="message">

			<p>我是热门内容</p>

		</div>

		<div class="tab-pane" id="settings">

			<p>我是排行内容</p>

		</div>

	</div>

</body>

<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>

<script type="text/javascript" src="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

</html>

bootstrap 标签页的使用(tab)的更多相关文章

  1. Bootstrap 标签页（Tab）插件

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

  2. Bootstrap标签页(Tab)插件事件

    事件 下表列出了标签页(Tab)插件中要用到的事件.这些事件可在函数中当钩子使用. 事件 描述 实例 show.bs.tab 该事件在标签页显示时触发,但是必须在新标签页被显示之前.分别使用 even ...

  3. 第二百四十五节，Bootstrap标签页和工具提示插件

    Bootstrap标签页和工具提示插件 学习要点: 1.标签页 2.工具提示 本节课我们主要学习一下 Bootstrap 中的标签页和工具提示插件. 一．标签页选项卡 标签页也就是通常所说的选项卡功能 ...

  4. 解决Bootstrap 标签页(Tab)插件切换echarts不显示问题

    1.参考连接:https://blog.csdn.net/qq_24313955/article/details/78363981 问题描述:在echarts跟bootstrap选项卡整合的时候,默认 ...

  5. bootstrap 标签页tab切换js（含报错原因）

    booststrap 标签页的tab切换,相信大家已经都很熟悉了,在boot官网示例以及其他网站已经很多罗列相关代码的了,这里就不赘述了.这里主要贴下让boot标签页默认显示哪个标签页的js. 主要留 ...

  6. Bootstrap标签页(Tab)插件

    标签页(Tab)在Bootstrap导航元素一章中简介过,通过结合一些data属性,您可以轻松地创建一些标签页界面.通过这个插件您可以把内容放置在标签页或胶囊式标签页甚至是下拉菜单标签页中. 用法 您 ...

  7. 解决Bootstrap标签页(Tab)插件切换echarts不显示问题

    1.参考连接:https://blog.csdn.net/qq_24313955/article/details/78363981 问题描述:在echarts跟bootstrap选项卡整合的时候,默认 ...

  8. Bootstrap 标签页和工具提示插件

    一．标签页 标签页也就是通常所说的选项卡功能. //基本用法 <ul class="nav nav-tabs"> <li class="active&q ...

  9. 使用bootstrap标签页

    关键字:使用标签页,静态调用html页面(使用iframe内联框架) 完整代码如下: <!DOCTYPE html> <html lang="en"> &l ...

随机推荐

  1. ELK Stack 7.1.1之集群搭建

    一. 环境准备:3台Linux服务器,系统为CentOS 7.5 角色划分:3台机器全部安装jdk1.8,全部安装elasticsearch (后续都简称为es集群) 主节点上需要安装kibana与l ...

  2. docker容器管理-含静态Ip(10)

    docker run命令详解 docker run -t #表示分配一个伪终端 -i #表示让容器的标准输入打开,不跟这个参数容器启不来 -d #后台运行 -P #dockerfile中EXPOSE ...

  3. mysql5.6配置详解

    系统 4核 16G Centos6.5 x64 优化后测试结果如下 #mysqlslap #--concurrency=2 #--iterations=1 #--number-int-cols=10 ...

  4. 用define 宏定义注释符号

    上面对define 的使用都很简单,再看看下面的例子:#define BSC //#define BMC /*#define EMC */D),BSC my single-line commentE) ...

  5. MySQL replace 和 replace into 的用法

    mysql replace实例说明: UPDATE tb1 SET f1=REPLACE(f1, 'abc', 'def'); REPLACE(str,from_str,to_str) 在字符串 st ...

  6. sqlserver 找不到驱动，显示项目缺少class办法

    maven使用 <dependency> <groupId>com.microsoft.sqlserver</groupId> <artifactId> ...

  7. Java面试题一览

    Java面试题一览

  8. thymeleaf数组下标

    <tr th:if="${exercisers != null}"th:each="exerciser:${exercisers}"> <td ...

  9. 深入JAVA虚拟机笔记-垃圾收集器与内存分配策略

    第三章:垃圾收集器与内存分配 问题:1.哪些内存需要回收 2.什么时候回收 3.怎么回收 回收方法区:

  10. ZABBIX 忘记登录密码

    ZABBIX 忘记登录密码 摘要 有些童鞋会忘记zabbix的登陆密码,今天给大家写一篇找回登陆密码~       ZABBIX 忘记登录密码 zabbix 刚刚在群里吹牛逼,由于账号比较多,脑子容易 ...