<!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. OpenCV常用基本处理函数（4）简单变换，阈值等

    几何变换 缩放 img=cv2.imread('messi5.jpg') # 下面的 None 本应该是输出图像的尺寸,但是因为后边我们设置了缩放因子 # 因此这里为 None res=cv2.res ...

  2. springboot 依赖

    <parent> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot ...

  3. jsp中$使用不了

    导入了jstl <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>为啥 ...

  4. eureka学习(一)

    eureka是一个注册中心,与zookeeper不同的是,eureka是restful格式的调用,zk是rpc,还有就是zk保证一致和容错,eureka则是可用和容错. 使用时首先要加入依赖 < ...

  5. sql server 建表，增删改练习

    use master --drop database Class create database Class on primary( name='Class', filename='D:\SQLTes ...

  6. Database基础(七)：部署集群基础环境、MySQL-MMM架构部署、MySQL-MMM架构使用

    一.部署集群基础环境 目标: 本案例要求为MySQL集群准备基础环境,完成以下任务操作: 数据库授权 部署MySQL双主多从结构 配置本机hosts解析记录 方案: 使用4台RHEL 6虚拟机,如下图 ...

  7. Linux系统之-常用命令及技巧

    一. 通用命令:1.date :print or set the system date and time2. stty -a: 可以查看或者打印控制字符(Ctrl-C, Ctrl-D, Ctrl-Z ...

  8. thinkphp5 图片上传七牛云

    <?php namespace app\cxc\controller; use Qiniu\Auth; use Qiniu\Storage\UploadManager; use think\Co ...

  9. Tomcat负载均衡、调优核心应用进阶学习笔记（五）：Tomcat调优和Tomcat监控（差评）

    文章目录 tomcat调优 tomcat监控 tomcat调优 vi catalina.sh # --------------------------------------------------- ...

  10. VMware Workstation Pro 15.5.0 官方版本及激活密钥

    0x01:下载连接: https://download3.vmware.com/software/wkst/file/VMware-workstation-full-15.5.1-15018445.e ...