<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Hello World</title>
<link href=" //netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<ul class="nav nav-tabs" role="tablist" id="myTab">
<li role="presentation" class="active"><a href="#first" aria-controls="home" role="tab" data-toggle="tab">第一项</a></li>
<li role="presentation"><a href="#second" aria-controls="profile" role="tab" data-toggle="tab">第二项</a></li>
<li role="presentation"><a href="#third" aria-controls="messages" role="tab" data-toggle="tab">第三项</a></li>
<li role="presentation"><a href="#forth" aria-controls="settings" role="tab" data-toggle="tab">第四项</a></li>
</ul>

<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="first">哈哈哈哈哈哈</div>
<div role="tabpanel" class="tab-pane" id="second">
<p>互联网是做什么的？</p>
<p>互联网技能教育，免费的哦</p>
</div>
<div role="tabpanel" class="tab-pane" id="third">哼哼哼哼哼哼哼哼哼</div>
<div role="tabpanel" class="tab-pane" id="forth">嘿嘿嘿嘿嘿嘿嘿嘿嘿</div>
</div>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#myTab a[href="#second"]').tab('show')
});
</script>
</body>
</html>

bootstrap实现菜单定位的更多相关文章

  1. 第二百三十七节，Bootstrap图标菜单按钮组件

    Bootstrap图标菜单按钮组件 学习要点: 1.小图标组件 2.下拉菜单组件 3.按钮组组件 4.按钮式下拉菜单 本节课我们主要学习一下 Bootstrap 的三个组件功能:小图标组件.下拉菜单组 ...

  2. JS组件系列——Bootstrap右键菜单解决方案：ContextMenu

    前言:有段时间没发表随笔了,过个年人都变得懒了.新年刚来上班,今天正好得空,将去年遗留的两个小组件总结记录下.有朋友跟我说:你的bootstrap组件要能够形成一个可以满足一般项目需求的系列组件,才有 ...

  3. Bootstrap 图标菜单按钮组件

    ---恢复内容开始--- 一．小图标组件 Bootstrap 提供了免费的 263 个小图标(数了两次),具体可以参考中文官网的组件 链接:http://v3.bootcss.com/componen ...

  4. BootStrap的菜单的快速创建

    在bootstrap的3.0版本及以上时,菜单的创建有所改变. 现在,我们只需记住3个类 dropdown open dropdown-menu. 前两个是为ul 列表的父元素用的,最后一个是给ul ...

  5. bootstrap 折叠菜单

    首先从 左侧的折叠菜单 开始.看图. 2. CSS 代码 以下是自定义的css代码,由于系统是内部使用,所以优先考虑chrome,firefox 不考虑IE了. #main-nav { margin- ...

  6. Bootstrap学习-菜单-按钮-导航

    1.下拉菜单(基本用法) 在使用Bootstrap框架的下拉菜单时,必须调用Bootstrap框架提供的bootstrap.js文件.当然,如果你使用的是未编译版本,在js文件夹下你能找到一个名为“d ...

  7. bootstrap导航菜单，手机和PC端

    源代码 <!DOCTYPE html> <html> <head lang="en"> <meta name="viewport ...

  8. spring cloud 配置文件application.yml和bootstrap.yml 的定位，区别和联系

    最近在启用springcloud配置中心server的东西,在整理属性资源的时候,突然发现:用了这么久的springboot,为什么会配置两个属性文件同时存在(application.yml/prop ...

  9. spring cloud 配置文件application.yml和bootstrap.yml 的定位，区别和联系总算是有一点明白了

    最近在启用springcloud配置中心server的东西,在整理属性资源的时候,突然发现:用了这么久的springboot,为什么会配置两个属性文件同时存在(application.yml/prop ...

随机推荐

  1. idea操作

    archetypeCatalog  internal 1字体: 2编码 http://blog.csdn.net/frankcheng5143/article/details/50779149 3部署 ...

  2. Java 成员方法的定义

    方法的定义: 方法是类或对象的行为特征的抽象. Java中的方法不能独立存在,所有的方法必须定义在类中. 使用 “类名.方法” 或 “对象.方法” 的形式调用. 语法格式: 权限修饰符 返回值类型 方 ...

  3. 学习HTML5之路

    Web 技术大致的时间轴 1991 HTML 1994 HTML 2 1996 CSS 1+JavaScript 1997HTML 4 1998 CSS2 2000 XHTML 1 2002 使用DI ...

  4. php小白和菜鸟 上班路上可以看的修行博客

    上班地铁 公交上我们不要去追剧 不要去打游戏 不要看看有效性的海量新闻, 我们需要去技术博客里遨游, 下面就推荐点与php有关的可以学习的技术博客; 大部分程序员在自学的道路上不知道走了多少坑,这个视 ...

  5. git diff的使用

    有时候可能睡觉时候忘记关电脑了,然后不小心触碰到键盘上某个神秘的按钮了,然后自己也不知道就提交了 就可能很悲剧 那么有时候不知道自己是否改变了哪些文件的内容 这时候就需要用到git diff git ...

  6. (转)pipe row的用法, Oracle split 函数写法.

    本文转载自:http://www.cnblogs.com/newsea/archive/2010/12/14/1905482.html 关于 pipe row的用法2009/12/30 14:53 = ...

  7. Jmeter 录制浏览器https请求

    Jmeter录制脚本时,跟http脚本录制主要区别是,https录制需要添加安全证书. 一Jmeter代理服务器及证书配置. 1.打开Jmeter,右键测试计划添加线程组,右键工作台→非测试元件→ht ...

  8. 子域名扫描器 - aquatone

    项目地址:https://github.com/michenriksen/aquatone git clone,然后打开 ┌─[root@sch01ar]─[/sch01ar] └──╼ #git c ...

  9. python's seventh day for me set

    数据类型的补充: 对于元祖:  如果只有一个元素,并且没有逗号,此元素是什么数据类型,该表达式就是什么数据类型. tu = ('顾清秋') tul = ('顾清秋',) print(type(tu)) ...

  10. Shell编程的基本语法

    Shell编程 创建sh文件 touch test.sh vim test.sh 写入如下内容 #!/bin/bash a="hello" 运行 chmod +x /root/te ...