<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title>个人中心2</title>

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

        <script src="https://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

        <script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>

    </head>

    <body>

        <ul class="nav nav-tabs">

            <li role="presentation" class="active"><a href="#menu1" data-toggle="tab">Home</a></li>

            <li role="presentation"><a href="#menu2" data-toggle="tab">Profile</a></li>

            <li role="presentation"><a href="#menu3" data-toggle="tab">Messages</a></li>

        </ul>

        <div class="tab-content">

            <div id="menu1" class="container tab-pane active">

            </div>

            <div id="menu2" class="container tab-pane ">

            </div>

            <div id="menu3" class="container tab-pane fade">

            </div>

        </div>

    </body>

</html>

注意：不要忘记写  【data-toggle="tab"】，没写这个不会触发点击按钮切换选项卡的事件。

附上 效果图：

bootstrap tab选项卡的更多相关文章

  1. bootstrap建立响应式网站——tab选项卡

    1.bootstrap给我们提供了标签页 细细看了一下bootstrap的标签页源码,对tab选项卡有了更深的理解.其实说来也简单,以前自己写js和css时没有意识到整体的划分.就是分为两部分:一部分 ...

  2. BootStrap实现左侧或右侧竖式tab选项卡

    BootStrap实现左侧或右侧竖式tab选项卡 代码如下: <div style="height: 100px;"> <div class="col- ...

  3. bootstrap tab切换如何让鼠标移动自动切换内容

    bootstrap集成了很多功能,比如nav-tabs组件,可以将相似的内容集中在一个区块中展示.bootstrap tab切换默认是要点击才会切换的,如何实现鼠标移动就自动切换呢?如下图所示,光标移 ...

  4. 解决Twitter Bootstrap Tab URL链接问题

    例如这样的一个Tabs 代码: <ul class="nav nav-tabs" id="myTab"> <li class="ac ...

  5. angularjs 中的路由 与 bootstrap标签选项卡的冲突 解决方案

    当项目中使用了angularjs 的路由,则所有 像a标签的href 的链接都会走路由,实现页面跳转,那么有些地方需要使用选项卡,就会带来麻烦. 路由使用如下图: 某页面需要使用bootstrap的选 ...

  6. 基于CkEditor实现.net在线开发之路（4）快速布局，工具箱，模板载入，tab选项卡简单说明与使用

    上一章给常用的from表单控件属性页面,进行了简单说明和介绍,但是由于是在网页中做界面设计,操作肯定没有桌面应用程序方便,便捷,为了更方便的布局与设计,今天我主要说一下快速布局,工具箱,tab选项卡, ...

  7. 可轮播滚动的Tab选项卡

    前段时间有试着搭建个后台主题ui框架,有用到可支持滚动的Tab选项卡,模仿着H+后台主题ui框架中的代码造轮子改造了下,可惜代码在公司,不能把代码外发出来(感觉这样被限制了很多,对于这样的公司没办法, ...

  8. android tab选项卡的使用

    项目做完了,写写博客,在项目中遇到的一些问题,或者是自己觉得很不错的东西.这一篇主要是想和大家分享一下我在项目中封装的一个东西,就是tab选项卡.先看看效果图: 我在网上看了很多有关选项卡的demo, ...

  9. js基础练习一之tab选项卡

    最近在学习前端,当然包括js,css,html什么的,在听课时做的一些小练习,记录下来: 实例一: --Tab选项卡-- <script type="text/javascript&q ...

随机推荐

  1. 动态调用webservice时 ServiceDescriptionImporter类在vs2010无法引用的解决方法 （转）

    本文转自:http://blog.csdn.net/limlimlim/article/details/8647038 [导读]ServiceDescriptionImporter是创建Web Ser ...

  2. 分类：logistic回归

    import numpy as np import matplotlib.pyplot as plt x=np.linspace(-1,1,200) y=1/(1+np.exp(10*x-1)) pl ...

  3. ovs 数据包的处理过程

    Openvswitch的内核模块openvswitch.ko会在网卡上注册一个函数netdev_frame_hook,每当有网络包到达网卡的时候,这个函数就会被调用. static struct sk ...

  4. jquery设置滚动条样式

    HTML结构 下面是该滚动条插件工作所必须的HTML结构: <div id="about" class="nano">     <div cl ...

  5. [.Net] - 使用 iTextSharp 生成基于模板的 PDF，生成新文件并保留表单域

    背景 基于 PDF Template 预填充表单项,生成一份新的 PDF 文件,并保留表单域允许继续修改. 代码段 using iTextSharp.text.pdf; /* Code Snippet ...

  6. TypeScript 命名空间

    随着代码的不断增加,我们需要有组织的组合代码.TypeScript在1.x版本中提供了命名空间的方式进行代码组织,这也是TypeScript官方代码的组织方式.同时,TypeScript还实现了Jav ...

  7. 消息中间件——RabbitMQ（十）RabbitMQ整合SpringBoot实战！（全）

    前言 1. SpringBoot整合配置详解 publisher-confirms,实现一个监听器用于监听Broker端给我们返回的确认请求:RabbitTemplate.ConfirmCallbac ...

  8. Git使用总结（二）：分支管理

    1.创建分支 a.直接创建 git branch dev(分支名) b.基于某个历史版本创建分支 git branch dev HEAD 2.查看分支 git branch -av 3.删除分支 gi ...

  9. SQL——UPDATE（改）

    一.UPDATE语句基本用法 UPADTE语句用于修改表中已存在的记录. UPDATE语句语法: UPDATE 表名 SET 列名1 = 值1,列名2 = 值2... WHERE 条件语句; 演示st ...

  10. Scala Map与Tuple

    创建Map // 创建一个不可变的Map val ages = Map("Leo" -> 30, "Jen" -> 25, "Jack&q ...