<!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. 【笔记】第六章、Linux 的文件权限与目录配置

    Linux的每个文件中,依据权限分为使用者.群组与其他人三种身份: 群组最有用的功能之一,就是当你在团队开发资源的时候,且每个账号都可以有多个群组的支持: 利用ls -l显示的文件属性中,第一个字段是 ...

  2. 123457123456#2#----com.ppGame.ShiZi43--前拼后广--shizi游戏_pp

    com.ppGame.ShiZi43--前拼后广--shizi游戏_pp

  3. Python - Django - FBV 和 CBV

    FBV: Function Base View,基于函数的视图 views.py: from django.shortcuts import render, HttpResponse # FBV de ...

  4. 定时显示提示信息（TToolTip）

    { 修改者:ghs 日期:20071218 功能:在原版本的基础上增加. RegisterControl:注册需要提示的控件. BeginHelp:设置光标状态为帮助crHelp: 鼠标弹起后,显示注 ...

  5. 【ML】京东人工智能设计神器「羚珑」

    https://www.uisdc.com/linglong 文后的彩蛋说的特别好,让设计师发挥更高阶的价值.

  6. 《MySQL必知必会》学习笔记——前言

    前言 MySQL已经成为世界上最受欢迎的数据库管理系统之一.无论是用在小型开发项目上,还是用来构建那些声名显赫的网站,MySQL都证明了自己是个稳定.可靠.快速.可信的系统,足以胜任任何数据存储业务的 ...

  7. 组件文档系统-md-react-styleguidist

    推荐指数:

  8. 安装Windows和Ubuntu双系统2

    安装Windows和Ubuntu双系统 0.552016.12.10 15:54:41字数 2101阅读 6644 这几天开始动手做毕设啦,打算好好过把Linux瘾,接下来便是这两天我在联想电脑上安装 ...

  9. C++ 优先队列priority_queue用法【转载】

    priority_queue 对于基本类型的使用方法相对简单.他的模板声明带有三个参数,priority_queue<Type, Container, Functional>Type 为数 ...

  10. python 线程队列LifoQueue-LIFO（36）

    在 python线程队列Queue-FIFO  文章中已经介绍了 先进先出队列Queue,而今天给大家介绍的是第二种:线程队列LifoQueue-LIFO,数据先进后出类型,两者有什么区别呢? 一.队 ...