<!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. 【串线篇】概述SpringMvc和spring整合

    SpringMVC和Spring整合的目的:分工明确: SpringMVC的配置文件就来配置和网站转发逻辑以及网站功能有关的(视图解析器,文件上传解析器,支持ajax,xxx):springmvc.x ...

  2. djangorestframework-jwt 分页器 三种

    数据准备 # models class Teacher(models.Model): name = models.CharField(max_length=32) salary = models.De ...

  3. oralce存储过程

    简单的存储 create or replace procedure sayhelloworld as begin dbms_output.put_line('Hello World'); end;

  4. Qt对话框部分学习

    一.对话框部分常用内容 颜色对话框.文件对话框.字体对话框.输入对话框.消息对话框.进度对话框.错误对话框.向导对话框. 二.代码部分   //widget.h #ifndef MYWIDGET_H ...

  5. Jetson Nano系列教程0：初识Jetson Nano

    关于Jetson Nano Developer Kit Jetson nano搭载四核Cortex-A57 MPCore 处理器,采用128 核 Maxwell™  GPU.支持JetPack SDK ...

  6. vue之slot用法

    slot元素作为组件模板之中的内容分发插槽.这个元素自身将被替换. 有 name 特性的 slot 称为具名 slot. 有 slot 特性的内容将分发到名字相匹配的具名 slot. 一.单个组件 如 ...

  7. STM32例程之USB HID双向数据传输（源码下载）【转】

    程序功能 将STM32的USB枚举为HID设备. STM32使用3个端点,端点0用于枚举用,端点1和2用于数据的发送和接收. 端点长度为64,也就是单次最多可以传输64个字节数据. STM32获取上位 ...

  8. Java短路运算符和非短路运算符

    在Java中短路运算符指的是"&&"(与) 和"||"(或) ,非短路运算符指的是"&" 和"|" ...

  9. ES6数组方法

    ES6数组方法 以下方法添加到了Array.prototype对象上(isArray除外) indexOf 类似字符串的indexOf()方法 stringObject.indexOf(searchv ...

  10. 08 java代码块的概述和分类

    08.01_面向对象(代码块的概述和分类) A:代码块概述 在Java中,使用{}括起来的代码被称为代码块. B:代码块分类 根据其位置和声明的不同,可以分为局部代码块,构造代码块,静态代码块,同步代 ...