bootstrap-标签页
2016-03-16 13:42
525 查看
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <!-- 处理低版本IE 4.0不考虑IE8 --> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- 移动端视口的设置 --> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- 引入bootstrap.css --> <link rel="stylesheet" href="css/bootstrap.css"> <script src="js/jquery-1.11.3.min.js"></script> <script src="js/bootstrap.js"></script> <style> #login{ width:400px; } </style> </head> <body> <div class="container"> <ul class="nav nav-tabs"> <li class="active"><a href="#a" data-toggle="tab">one</a></li> <li><a href="#b" data-toggle="tab">two</a></li> <li><a href="#c" data-toggle="tab">three</a></li> </ul> <ul class="tab-content"> <li id="a" class="tab-pane active">aaa</li> <li id="b" class="tab-pane">bbb</li> <li id="c" class="tab-pane">ccc</li> </ul> </div> </body> <script> /* 标签页 内容 — tab-content — tab-pane — data-toggle="tab" — href对应id — 淡入淡出方式 fade in active — 鼠标移入方式 js 控制 tab("show") — 带下拉菜单的切换 */ </script>
相关文章推荐
- 系统框架 springmvc mybatis Bootstrap html5 shiro maven SS
- Bootstrap每天必学之滚动监听
- Bootstrap 下拉框 按钮组、工具栏
- Bootstrap 按钮组
- bootstrap modal 弹出失效
- Bootstrap每天必学之滚动监听
- 利用Bootstrap3搭建基本后端界面
- 使用jQuery仿造bootStrap模态框
- Bootstrap弹出框(modal)垂直居中
- Bootstrap 表单
- Bootstrap 下拉菜单
- Bootstrap 小图标
- Bootstrap 2.3版与3.0版的使用区别
- bootstrap_下拉菜单+头部
- Bootstrap开发总结
- Bootstrap 引入 栅栏系统 文本 表格 类
- bootstrap的tree控件
- springmvc4 mybatis 整合 框架源码 bootstrap SSM
- Bootstrap学习笔记
- 时间控件在bootstrap模态框中的使用