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 ...
随机推荐
- gulp 合格插件评判标准
官方插件列表: https://gulpjs.com/plugins/ 合格插件的判断标准 1. 不修改内容 如果一个插件一个文件都修改(无论是文案内容,文件路径),那么它就不是一个gulp ...
- nodejs docker 开发最好选择yarn 进行包管理而不是npm
npm 与yarn 的区别网上一大堆的文章,我们在构建docker 镜像是应该遵守的有些原则 基础镜像尽量小 对于构建进行缓存处理 构建的docker 的文件层数尽量少 能直接运行的,就别进行重复 ...
- PADS Logic 脚本的 Fields 一个对象记录
PADS Logic 脚本的 Fields 一个对象记录 PADS Laogic 有一个非常棒的脚本功能,可以导出所以元件. 我目前是把脚本绑定到 Ctrl+S 上,在保存时自动导出 txt 文件,方 ...
- PTA 银行排队问题之单队列多窗口服务（25 分）
银行排队问题之单队列多窗口服务(25 分) 假设银行有K个窗口提供服务,窗口前设一条黄线,所有顾客按到达时间在黄线后排成一条长龙.当有窗口空闲时,下一位顾客即去该窗口处理事务.当有多个窗口可选择时,假 ...
- python开发进程:共享数据&进程池
一,共享数据 展望未来,基于消息传递的并发编程是大势所趋 即便是使用线程,推荐做法也是将程序设计为大量独立的线程集合 通过消息队列交换数据.这样极大地减少了对使用锁定和其他同步手段的需求, 还可以扩展 ...
- IntelliJ IDEA 安装 Julia 插件
打开 IntelliJ IDEA 点击 Configure 选择 Plugins 然后点击 Browse repositories 搜索 Julia,然后点击 Install 进行安装 安装完重启一下 ...
- PHP class 继承
1.执行结果 成员名 成员修饰符 方法名 方法修饰符 执行结果 name private setName private 在构造函数函数中执行父类私有方法,子类未能覆盖private成员变量和方法,修 ...
- NetCore Selfhost,IIShost,Windows Service Host详解（自宿主、宿主在IIS，宿主在Windows Service中）
第一部分.自托管 一.依赖.Net Core环境 修改 project.json 文件内容,增加发布时需要包含文件的配置内容(NetCore2.0版本不需要任何设置,NetCore2.0开始彻底放弃p ...
- PHP数据结构之二 线性表中的顺序表的PHP实现
线性表 (一)基本特点:最基本.最简单.最常用的一种数据结构 在这种结构中: 1.存在一个唯一的被称为“第一个”的数据元素: 2.存在一个唯一的被称为“最后一个”的数据元素: 3.除第一个元素外,每个 ...
- 页面布局 frameset元素
frameset.html: <!DOCTYPE html><html lang="en"><head> <meta charset=&q ...