<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <!-- 处理低版本IE 4.0不考虑IE8 -->

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <!-- 移动端视口的设置 -->

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- 引入bootstrap.css -->

    <link rel="stylesheet" href="css/bootstrap.css">

    <script src="js/jquery-1.11.3.min.js"></script>

    <script src="js/bootstrap.js"></script>

    <style>

        #login{

            width:400px;

        }

    </style>

</head>

<body>

<div class="container">

    <ul class="nav nav-tabs">

        <li class="active"><a href="#a" data-toggle="tab">one</a></li>

        <li><a href="#b" data-toggle="tab">two</a></li>

        <li><a href="#c" data-toggle="tab">three</a></li>

    </ul>

    <ul class="tab-content">

        <li id="a" class="tab-pane active">aaa</li>

        <li id="b" class="tab-pane">bbb</li>

        <li id="c" class="tab-pane">ccc</li>

    </ul>

</div>

</body>

<script>

    /*

        标签页

            内容

                — tab-content

                — tab-pane

                — data-toggle="tab"

                — href对应id

                — 淡入淡出方式 fade in active

                — 鼠标移入方式 js 控制 tab("show")

                — 带下拉菜单的切换

     */

</script>

bootstrap-标签页的更多相关文章

  1. Bootstrap 标签页（Tab）插件

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

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

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

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

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

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

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

  5. 使用bootstrap标签页

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

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

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

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

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

  8. Bootstrap标签页(Tab)插件

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

  9. Bootstrap标签页

    用法 您可以通过以下两种方式启用标签页: 通过 data 属性:您需要添加 data-toggle="tab" 或 data-toggle="pill" 到锚文 ...

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

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

随机推荐

  1. spring 5种通知

    方法实现接口 package com.cn.spring.aop.impl; //加减乘除的接口类 public interface ArithmeticCalculator { int add(in ...

  2. 一种比较简单的在USB U盘中访问nandflash的方法

    u8 nandflash_write_buffer[NAND_SERECT_FULL_SIZE]; static int currentBlock = -1; static int currentPa ...

  3. JNI中的内存管理(转）

    源:JNI中的内存管理 JNI 编程简介 JNI,Java Native Interface,是 native code 的编程接口.JNI 使 Java 代码程序可以与 native code 交互 ...

  4. 【转】进程间通信方式总结（windows 和linux）

    平时看的书很多,了解的也很多,但不喜欢总结,这不昨天面试的时候被问到了进程间通信的方式,因为没有认真总结过,所以昨天答得不是特别好.现在将linux和windows的进程间通信方式好好总结一下.    ...

  5. git 常用命令--Linus Torvalds

    1.git log 显示仓库的历史记录,默认显示所有记录, 1)git log -m,显示最近的几次提交,, 2)git log --pretty=oneline  显示提交hash和注释 -p 按补 ...

  6. 2）Java学习笔记：匿名内部类

    为什么要使用匿名内部类 ①如果以前的类有一些缺陷,只是想在某一个模块进行修复,可以在引用该类的地方使用匿名内部类,在overRide方法进行修复. ②如果一个类,需要派生出很多类,而且这些类大多只是在 ...

  7. ASP.NET常用的控件怎么添加

    http://jingyan.baidu.com/article/d8072ac4224747ec95cefda2.html

  8. ajax 跨域了 cors

    <?php /** * Author: humanhuang * Date: 13-12-17 */ header('Access-Control-Allow-Origin:*'); heade ...

  9. IOC容器Unity的使用及独立配置文件Unity.Config

    [本段摘录自:IOC容器Unity 使用http://blog.csdn.net/gdjlc/article/details/8695266] 面向接口实现有很多好处,可以提供不同灵活的子类实现,增加 ...

  10. Ubuntu16.04 FTP Server 完整篇

      sudo apt-get update #更新系统 sudo apt-get install vsftpd #安装vsftpd sudo systemctl status vsftpd #判断vs ...