<!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. Laravel 事务中使用悲观锁

    laravel 提供了方便快捷的数据库事务使用方式,在使用中遇到过几个容易混淆和被误导的地方,这里做个记录,希望哪里写的不对的地方各位大神指点一下 laravel 事务分为手动方式和自动方式. 但如果 ...

  2. MySQL事务调优

    原创转载请注明出处:https://www.cnblogs.com/agilestyle/p/11429239.html 数据库事务 数据库事务是数据库系统执行过程中的一个逻辑处理单元,保证一个数据库 ...

  3. mangodb数据库

    阅读目录 一 简介 二 MongoDB基础知识 三 安装 四 基本数据类型 五 CRUD操作 六 可视化工具 七 pymongo 一 简介 MongoDB是一款强大.灵活.且易于扩展的通用型数据库1. ...

  4. BlueStore-先进的用户态文件系统《二》-BlueFS

    https://zhuanlan.zhihu.com/p/46362124 简介 上一篇文章中,介绍了BlueStore的诞生背景.逻辑架构以及设计思想,提到了在BlueStore中元数据都是存放在R ...

  5. PHP filter_input_array() 函数

    定义和用法 filter_input_array() 函数从脚本外部获取多项输入(比如表单输入),并进行过滤. 该函数对过滤多个输入变量很有用,无需重复调用 filter_input(). 该函数可从 ...

  6. Linux 下虚拟机——Virtual Box

    下面介绍几款可以在Linux下运行的虚拟机 VMware,VirtualBox, QEMU, Xen.(其中我只用过VirtualBox 和Xen, 我是新手,其他两个没时间折腾,所以下面的资料都几乎 ...

  7. CentOS 6.9 安装配置zeromq、jzmq

    官方安装配置链接 安装zeromq 步骤一.准备C语言环境 yum -y install gcc-c++ 步骤二.解压缩zeromq tar -zxf zeromq-4.1.6.tar.gz 步骤三. ...

  8. 提供 web前端、H5、html页面 技术服务

    如有前端页面的需求请在评论区留言  第一时间进行回复

  9. idea 使用github

    [Toc] #一.首先下载github for window 客户端,或者git客户端 这里只演示gitHub客户端,安装git客户端的话,git.exe很容易找得到. 附上网址:https://de ...

  10. java sigar 系统监控

    <dependency> <groupId>org</groupId> <artifactId>sigar</artifactId> < ...