<!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. osg 渲染ifc数据-测试

    直接使用osg渲染ifc数据,提高渲染速度. #include "teslamanage.h" #include <QtWidgets/QApplication> #i ...

  2. osg Node getParentalNodePaths()报错

    node->getBound().center() * osg::computeLocalToWorld(node->getParentalNodePaths()[0]) osg::Vec ...

  3. 【Dart学习】--Dart之数字(num)相关方法总结

    一,部分属性 用法一(figureA) int figureA = -93; 是否为负数 print(figureA.isNegative); figureA是否是有限的 print(figureA. ...

  4. python import注意事项

    # 基本概念 ## 模块&包简介 模块:所谓模块就是一个.py文件,用来存放变量,方法的文件,便于在其他python文件中导入(通过import或from).包(package): 包是更大的 ...

  5. python初级 1 内存和变量

    一.回顾: 1.什么是程序 一堆指令的集合 2.回想一下猜数游戏程序的特征: 1)需要输入(input) 2)会处理输入(process) 3)产生输出(output) 二.程序的一般特征:输入.处理 ...

  6. Laya的位图文字

    参考: Laya文本 测试版本:Laya 2.1.1.1 大部分游戏都会用到位图文字,例如dnf的伤害数字. 白鹭的位图文字是美术提供0-9十张单张图片,由TextureMerger导出fnt+jso ...

  7. Go语言学习笔记——Go语言数据类型

    布尔型 布尔型的值只可以是常量 true 或者 false.一个简单的例子:var b bool = true. 数字类型 整型 int 和浮点型 float32.float64,Go 语言支持整型和 ...

  8. pod 常用指令

    //只安装新增的库,已经安装的库不更新 pod install --verbose --no-repo-update //只更新指定库名的第三个库,其他库不更新 pod update 库名 --ver ...

  9. WXSS选择器

  10. 开始使用 Manjaro（添加源+字体渲染去模糊+软件安装+优化配置+常见错误）(30)

    1. 添加 archlinux 镜像源 1. 步骤一 向 /etc/pacman.d/mirrorlist 中添加国内镜像地址 1.1 方法1:自动添加 1. 输入如下命令查看国内镜像源,并按质量排序 ...