<!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. Spring cloud微服务安全实战-6-9sentinel之熔断降级

    来讲一下降级规则 服务会互相调用,服务A会有一些服务之间的依赖. 假设服务D的响应时间变长了.A调用D就会卡住了. 熔断,某一个服务出现问题,会把服务拖死.如果A出现,会把依赖A的那些服务拖死. 主要 ...

  2. html中的<pre>标签

    定义和用法 pre 元素可定义预格式化的文本.被包围在 pre 元素中的文本通常会保留空格和换行符.而文本也会呈现为等宽字体. <pre> 标签的一个常见应用就是用来表示计算机的源代码. ...

  3. 【2B设计】途牛商旅全案设计

    整体设计方案: 途牛商旅全案设计 https://www.uisdc.com/tuniu-business-travel

  4. DNS寻址以及IP解析

    域名解析从右向左 DNS寻址: 1 客户端发送查询请求,在本地计算机缓存查询,若没有找到,就会将请求发送给dns服务器 2 先发送给本地的dns服务器,现在自己的区域内查找,若找到,根据此记录进行查询 ...

  5. adb（Andorid Debug Bridge）安装和使用

    以下是adb工具包最新2017Google官方版下载地址: ADB和Fastboot for Windows https://dl.google.com/android/repository/plat ...

  6. 基于TreeSoft实现mysql、oracle、sql server的数据同步

    一.为了解决数据同步汇聚,数据分发,数据转换,数据维护需求,TreeSoft推出了数据同步,数据处理等丰富功能 . TreeSoft作为中间传输载体负责连接各种数据源,为各种异构数据库之间架起沟通的桥 ...

  7. iOS label出现异常黑色问题

    在开发中,有时候会发现label周围有一层灰色的边框,但是我们无论是修改边框的宽度还是颜色,这个边框一直是这个样子,不会发生任何变化. 类似上面这个,有一条条的竖线, 这是因为当设置 UILabel ...

  8. 记录一下vue slot

    使用步骤: 1.在组件(panda)当中建立一个slot,定义好name.(<slot name='myname'></slot>)    2.引用组件的时候如果需要补充内容, ...

  9. git的基本使用流程

    1. 在远端创建代码仓库 2. 拉取到本地 git clone $(path) #其中,path包括git路径或者https路径,可通过实际情况进行拉取.另外,可通过-b参数指定拉取的分支,默认拉取m ...

  10. Java注解-元数据、注解分类、内置注解和自定义注解|乐字节

    大家好,我是乐字节的小乐,上次说过了Java多态的6大特性|乐字节,接下来我们来看看Java编程里的注解. Java注解有以下几个知识点: 元数据 注解的分类 内置注解 自定义注解 注解处理器 Ser ...