<!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. 转 Zabbix 3.2.6通过SNMP和iDRAC监控DELL服务器

    https://www.cnblogs.com/saneri/p/7772641.html

  2. PL/SQL developer 开发小技能 and ash show command PL/SQL EXECUTE 以及注释

    ##sample  test windows 调试存储过程, 总体指导思想使用pl/sql test windows 调试存储过程,存储过程调试 可以用  run  to next exception ...

  3. OHEM(online hard example mining)

    最早由RGB在论文<Training Region-based Object Detectors with Online Hard Example Mining>中提出,用于fast-rc ...

  4. matplot中的对象

    figure:图表,可以理解为一个空间,二维情况下是一个平面 axes:坐标系,空间中的坐标系,一个空间可以有多个坐标系 axis:坐标轴,坐标系中的一个坐标轴,一个坐标轴只属于一个坐标系 画点:sc ...

  5. 【嵌入式硬件Esp32】ESP32使用visual studio cod界面

     如何下载安装IDE Visual Studio Code大家可以在微软的官网上根据自身的开发平台下载,至于安装方法就是无脑式地按Next就好了,下载地址如下所示: Visual Studio Cod ...

  6. 常见问题:MySQL/事务隔离

    数据库并行产生的问题 A事务撤销时,将B事务更改的数据撤销. A事务提交时,将B事务更改的同行数据覆盖. 脏读:A事务读取到了B事务未提交的数据. 不可重复读:A事务中同查询语句不幂等,读到已更新数据 ...

  7. oracle 存储过程详细介绍(创建,删除存储过程,参数传递等)

    这篇文章主要介绍了oracle 创建,删除存储过程,参数传递,创建,删除存储函数,存储过程和函数的查看,包,系统包等相关资料,需要的朋友可以参考下   oracle 创建,删除存储过程,参数传递,创建 ...

  8. 第5课.linux进阶命令

    1.find:查找符合条件的文件 格式: find 目录名 选项 查找条件 eg: find /work/001_linux_basic/dira/ -name "test1.txt&quo ...

  9. UN Report: Last 10 Years Likely the Hottest Decade on Record——VOA慢速英语

    听力地址:UN Report: Last 10 Years Likely the Hottest Decade on Record 中英对照:联合国报告称过去十年可能是有记录以来最热的十年 Words ...

  10. Kylin系列（一）—— 入门

          因为平常只会使用kylin而不知其原理,故写下此篇文章.文章不是自己原创,是看过很多资料,查过很多博客,有自己的理解,觉得精华的部分的一个集合.算是自己对Kylin学习完的一个总结和概括吧 ...