bootstrap实现菜单定位
<!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实现菜单定位的更多相关文章
- 第二百三十七节，Bootstrap图标菜单按钮组件
Bootstrap图标菜单按钮组件 学习要点: 1.小图标组件 2.下拉菜单组件 3.按钮组组件 4.按钮式下拉菜单 本节课我们主要学习一下 Bootstrap 的三个组件功能:小图标组件.下拉菜单组 ...
- JS组件系列——Bootstrap右键菜单解决方案：ContextMenu
前言:有段时间没发表随笔了,过个年人都变得懒了.新年刚来上班,今天正好得空,将去年遗留的两个小组件总结记录下.有朋友跟我说:你的bootstrap组件要能够形成一个可以满足一般项目需求的系列组件,才有 ...
- Bootstrap 图标菜单按钮组件
---恢复内容开始--- 一．小图标组件 Bootstrap 提供了免费的 263 个小图标(数了两次),具体可以参考中文官网的组件 链接:http://v3.bootcss.com/componen ...
- BootStrap的菜单的快速创建
在bootstrap的3.0版本及以上时,菜单的创建有所改变. 现在,我们只需记住3个类 dropdown open dropdown-menu. 前两个是为ul 列表的父元素用的,最后一个是给ul ...
- bootstrap 折叠菜单
首先从 左侧的折叠菜单 开始.看图. 2. CSS 代码 以下是自定义的css代码,由于系统是内部使用,所以优先考虑chrome,firefox 不考虑IE了. #main-nav { margin- ...
- Bootstrap学习-菜单-按钮-导航
1.下拉菜单(基本用法) 在使用Bootstrap框架的下拉菜单时,必须调用Bootstrap框架提供的bootstrap.js文件.当然,如果你使用的是未编译版本,在js文件夹下你能找到一个名为“d ...
- bootstrap导航菜单，手机和PC端
源代码 <!DOCTYPE html> <html> <head lang="en"> <meta name="viewport ...
- spring cloud 配置文件application.yml和bootstrap.yml 的定位，区别和联系
最近在启用springcloud配置中心server的东西,在整理属性资源的时候,突然发现:用了这么久的springboot,为什么会配置两个属性文件同时存在(application.yml/prop ...
- spring cloud 配置文件application.yml和bootstrap.yml 的定位，区别和联系总算是有一点明白了
最近在启用springcloud配置中心server的东西,在整理属性资源的时候,突然发现:用了这么久的springboot,为什么会配置两个属性文件同时存在(application.yml/prop ...
随机推荐
- computed属性与methods、watched
一.计算属性 new Vue({ data: { message: 'hello vue.js !' }, computed: { reverseMessage: function () { retu ...
- vs2015 c++ _findnext 报错
定位 _findnext(hFile,&fileinfo) 报错. 错误 :0x00007FFC70CB0B2D (ntdll.dll)处(位于 Cutton_Dlg.exe 中)引发的异常: ...
- WebService简单实现
1. WebService SOAP.WSDL.UDDISOAP(Simple Object Access Protocal,简单对象访问协议),是在分散或在分布式环境中交换信息的简单协议.WSDL( ...
- 微信H5支付 EasyWechat
其中如果想在一个laravel中使用多个不同主题的支付账户,可以在方法实例对象时,将对应的参数进行修改配置. 其中小程序支付,已得到验证. 1.公众号支付等资格申请 2.公众号对应的支付商户主体申请 ...
- firstModel权限问题
laravel根目录下没有 .env , 执行 cp .env.example .envstorage和bootstrap/cache 没有给写入权限, 执行 chmod -R 777 storage ...
- mysql实战优化之五： 更新/插入优化 sql优化
通常情况下,当访问某张表的时候,读取者首先必须获取该表的锁,如果有写入操作到达,那么写入者一直等待读取者完成操作(查询开始之后就不能中断,因此允许读取者完成操作).当读取者完成对表的操作的时候,锁就会 ...
- Spring 循环依赖
循环依赖就是循环引用,就是两个或多个Bean相互之间的持有对方,比如CircleA引用CircleB,CircleB引用CircleC,CircleC引用CircleA,则它们最终反映为一个环.此处不 ...
- 拦截导弹简单版（读入一串整数时getline（cin,s） stringstream is(s);）
拦截导弹简单版 时间限制: 1 Sec 内存限制: 128 MB提交: 40 解决: 16[提交][状态][讨论版][命题人:外部导入] 题目描述 某国为了防御敌国的导弹袭击,发展出一种导弹拦截系 ...
- angular 三大核心函数
1.$watch angular监听 由于angular一直在实时监听,所以比react和vue效率要低 $scope.$watch('aModel', function(newValue, o ...
- python开发模块基础：序列化模块json,pickle,shelve
一,为什么要序列化 # 将原本的字典.列表等内容转换成一个字符串的过程就叫做序列化'''比如,我们在python代码中计算的一个数据需要给另外一段程序使用,那我们怎么给?现在我们能想到的方法就是存在文 ...