<!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. python继承的实例

    class SchoolMember(object):#定义学校 member=0#默认成员为0个 amount=0#默认学费为0元 def __init__(self,name,age,sex):# ...

  2. html5 js控制音乐播放

      <!DOCTYPE HTML><html><head><meta charset="UTF-8"><script lang ...

  3. 19、手把手教你Extjs5（十九）模块Grid的其他功能的设想

    经过对自定义模块和Grid的设计和编码,现在已经能对一个有配置信息的模块来生成界面并进行一些简单的CURD操作.由于这是一个全解释性的前台的架构,因此你想到的任何新主意都可以放到所有的模块中. 比如对 ...

  4. Android线程之基本用法

    一: 在android中有两种实现线程thread的方法: 一种是,扩展java.lang.Thread类 另一种是,实现Runnable接口 二: Thread类代表线程类,它的两个最主要的方法是: ...

  5. linux下配置ip地址四种方法(图文)

    (1)Ifconfig命令   第一种使用ifconfig命令配置网卡的ip地址.此命令通常用来零时的测试用,计算机启动后 ip地址的配置将自动失效.具体用法如下.Ipconfig  ethx   i ...

  6. angular中ui calendar的一些使用心得

    ui calendar是封装fullcalendar的一款angular指令插件 官方地址:http://angular-ui.github.io/ui-calendar/ fullcalendar ...

  7. FastJson的用法

    一.简单数据的序列化 pubic class UserInfo implements Serializable{ private String name; private int age; publi ...

  8. DataTabel DataSet 对象 转换成json

    public class DataTableConvertJson    { #region dataTable转换成Json格式        /// <summary>         ...

  9. 洛谷 P1359 租用游艇

    题目描述 长江游艇俱乐部在长江上设置了n 个游艇出租站1,2,-,n.游客可在这些游艇出租站租用游艇,并在下游的任何一个游艇出租站归还游艇.游艇出租站i 到游艇出租站j 之间的租金为r(i,j),1& ...

  10. AndroidManifest.xml文件

    AndroidManifest.xml常用标签解读 1.全局篇(包名,版本信息) 2.组件篇(四大组件) Activity Service Content Provider Broadcast Rec ...