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 ...
随机推荐
- jfrog artifactory docker 安装试用
预备环境(docker 安装模式,使用的免费版本): docker-ce (启用镜像加速) 1. 镜像拉取 docker.bintray.io/jfrog/artifactory-oss 2. 启动 ...
- python使用wxPython创建一个简单的文本编辑器。
ubuntu下通过'sudo apt-get install python-wxtools'下载wxPython.load和save函数用于加载和保存文件内容,button通过Bind函数绑定这两个函 ...
- Navicat for MySQL使用手记(下）--实现自动备份数据库
五.备份和还原MySQL数据库 在数据库的管理中,备份和还原是必须做认真做的事情,如果疏忽或者做粗糙了,那么一旦数据库故障后果不堪设想,所以Navicat同样也有备份和还原的功能,相比较创建功能,其备 ...
- java显示网格————————
总结:看图 +---+---+ | | | | | | +---+---+ */ package com.aaa; //在屏幕上显如下网格 public class adga { public sta ...
- PTA 畅通工程之最低成本建设问题（30 分）（最小生成树 krusal)
畅通工程之最低成本建设问题(30 分) 某地区经过对城镇交通状况的调查,得到现有城镇间快速道路的统计数据,并提出“畅通工程”的目标:使整个地区任何两个城镇间都可以实现快速交通(但不一定有直接的快速道路 ...
- 阿里Java开发规范记录(一)
近日,从网上下载了阿里云栖社区发布的<阿里巴巴Java开发手册(正式版)>v1.1.0版.从编程以来,一直苦于没有相关的.全面的.靠谱的规范可以参考,有了这手册,日后编程也算是找到了依 ...
- 1024 Palindromic Number
题意: 给出一个数N(N<=10^10),最多可操作K次(K<=100),每次操作为这个数和其反转之后的数相加,若得到的结果为回文数,则输出:若在K次迭代后仍然不是回文数,在输出第K次操作 ...
- PHP中的逻辑判断函数empty() isset() is_null() ==NULL ===NULL
1.empty() header("Content-type: text/html; charset=utf-8"); if(!empty($data)){ //empty() 未 ...
- 二 mysql容量规划，性能测试
何为基线- 当前运行状态记录.快照- 用于和未来的状态进行对比- 未来时刻产生关键事件后的新状态,作为下一个基线基线数据收集,关注哪些要点- 系统负载- MySQL运行状态- 相应的业务指标1.系统& ...
- Linux性能监测：CPU篇
CPU 也是一种硬件资源,和任何其他硬件设备一样也需要驱动和管理程序才能使用,我们可以把内核的进程调度看作是 CPU 的管理程序,用来管理和分配 CPU 资源,合理安排进程抢占 CPU,并决定哪个进程 ...