<!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. ios添加-webkit-overflow-scrolling依然卡顿

    项目由vue-cli2创建 在overflow: auto区域内滑动ios手机出现卡顿,搜索资料后添加-webkit-overflow-scrolling: touch ios bug: 1.滑动区域 ...

  2. nmap使用笔记

    扫描全端口判断服务 nmap ip -T4 -Pn -sV -p 1-65535 扫描端口并且标记可以爆破的服务 nmap ip --script=ftp-brute,imap-brute,smtp- ...

  3. java基础学习笔记三（多态）

    多态? 多态是同一个行为具有多个不同表现形式或形态的能力. 存在的必要条件 继承 重写 父类引用指向子类对象 比如: Parent p = new Child(); 当使用多态方式调用方法时,首先检查 ...

  4. php number_format()函数 语法

    php number_format()函数 语法 number_format()函数怎么用? php number_format()函数表示通过千位分组来格式化数字,语法是number_format( ...

  5. 跨主机网络-overlay(18)

    docker overlay跨主机网络 .环境 docker版本 Docker version -ce, build fc4de44 3台主机 192.168.55.51 host1 192.168. ...

  6. Another Blog

    I also hold a blog with thoughts of English learning. Get there ===>. It's a private blog. Actual ...

  7. [CSP-S模拟测试]:金(king)（高精度+模拟）

    题目传送门(内部题36) 输入格式 第一行一个整数$T$,表示数据组数. 接下来$T$行,每行两个空格隔开的整数$n,m$. 输出格式 对于每组数据,输出一行$"Yes"$或$&q ...

  8. PHP面试 linux基础

    Linux基础 Linux常用命令 系统安全:sudo  su   chmod   setfacl 进程管理:w  top  ps  kill  pkill  pstree  killall 用户管理 ...

  9. MySQL高级学习笔记（三）：Mysql逻辑架构介绍、mysql存储引擎

    文章目录 Mysql逻辑架构介绍 总体概览 总体概览 mysql存储引擎 查看命令 看你的 mysql 现在已提供什么存储引擎 : 看你的 mysql 当前默认的存储引擎 : 各个引擎简介 MyISA ...

  10. Codeforces 578B "Or" Game (前缀和 + 贪心)

    Codeforces Round #320 (Div. 1) [Bayan Thanks-Round] 题目链接:B. "Or" Game You are given \(n\) ...