<!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. 分布式数据库Google Spanner原理分析

    Spanner 是Google的全球级的分布式数据库 (Globally-Distributed Database) .Spanner的扩展性达到了令人咋舌的全球级,可以扩展到数百万的机器,数已百计的 ...

  2. vs2012中的小技巧2

    vs代码前面出现.......,解决方法是:点击菜单编辑——高级——查看空白

  3. BZOJ 1101 [POI2007]Zap ——Dirichlet积

    [题目分析] Dirichlet积+莫比乌斯函数. 对于莫比乌斯函数直接筛出处理前缀和. 对于后面向下取整的部分,可以分成sqrt(n)+sqrt(m)部分分别计算 学习了一下线性筛法. 积性函数可以 ...

  4. AppBarLayout学习笔记

    LinearLayout的子类 AppBarLayout要点: 功能:让子View(AppBar)可以选择他们自己的滚动行为. 注意:需要依赖CoordinatorLayout作为父容器,同时也要求一 ...

  5. 设置git账号并生成新的ssh（切换电脑用户之后）

    1.设置账号 2.设置邮箱 3.检查确认 4. 5.check-----成功~

  6. UVa 10034 - Freckles

    题目大意:给出n个点的坐标(x,y),要求用线段将n个点连接起来,求最小的线段和. 最小生成树问题,用Kruskal算法进行求解,其中用到了并查集.将所有的点连接,构成一张图,对每一条边进行编号,两点 ...

  7. Twisted源码分析系列01-reactor

    转载自:http://www.jianshu.com/p/26ae331b09b0 简介 Twisted是用Python实现的事件驱动的网络框架. 如果想看教程的话,我觉得写得最好的就是Twisted ...

  8. MVC 视图-模型，动态更新

    <!DOCTYPE html> <html> <head> <title>Binding</title> <script src=&q ...

  9. Delphi中的窗体创建与销毁

    Delphi中的窗体,有模式窗体与非模式窗体两种.两种窗体的调用方式不同,模式窗体使用ShowModal显示,非模式窗体使用Show显示.当显示模式窗体的时候你是不能操作本程序的其他窗体的,你不能把焦 ...

  10. 《R包的分类介绍》

    R分析空间数据(Spatial Data) R机器学习包(Machine Learning) R多元统计包(Multivariate Statistics) R药物(代谢)动力学数据分析包 R计算计量 ...