使用bootstrap简单制作Tab切换页
2015-07-24 15:28
691 查看
<!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"> <!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! --> <title>Bootstrap js</title> <!-- 新 Bootstrap 核心 CSS 文件 --> <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css"> <!-- 可选的Bootstrap主题文件(一般不用引入) --> <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"> <!-- jQuery文件。务必在bootstrap.min.js 之前引入 --> <script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script> <!-- 最新的 Bootstrap 核心 JavaScript 文件 --> <script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script> <![endif]--> </head> <body> <div class="container"> <div class="row"> <div class="col-md-3"> <H4>Tab页</H4> <ul class="nav nav-tabs"> <li class="active"><a href="#tab1" data-toggle="tab">tab1</a></li> <li><a href="#tab2" data-toggle="tab">tab2</a></li> <li><a href="#tab3" data-toggle="tab">tab3</a></li> <li><a href="#tab4" data-toggle="tab">tab4</a></li> </ul> <div class="tab-content"> <div id="tab1" class="tab-pane active">tab1</div> <div id="tab2" class="tab-pane">tab2</div> <div id="tab3" class="tab-pane">tab3</div> <div id="tab4" class="tab-pane">tab4</div> </div> </div> </div><!-- end of row --> </div> </body> </html>
无需手工编写代码,需要更加自己的页面修改tab样式
相关文章推荐
- 源码|Bootstrap、jQuery、HTML5、SpringMVC、Hibernate、Mybatis
- bootstrap
- 百度地图与bootstrap样式不兼容的问题
- js学习之--Bootstrap Modals(模态框)
- Bootstrap全局CSS样式之排版
- 让IE6 IE7 IE8 IE9 IE10 IE11支持Bootstrap的解决方法
- Bootstrap-maxlength使用
- bootstrap:javascript的通用技术
- bootstrap的alert提示框的关闭后再显示问题
- Bootstrap学习笔记-模态框
- ko.js+bootstrap+HibernateBaseDAO 分页——(1)基础分页
- bootstrap轮播(carousel)图片竖着显示不能轮播的问题解决办法
- 【BootStrap】初步教程
- 关于bootstrap的border-box与原始页面的content-box问题冲突
- bootstrap 一页多个轮播 结合samrty
- Python2.7+Django1.8+Bootstrap3 实现增删改查、分页(一)
- 让Bootstrap 3兼容IE8浏览器
- bootstrap css语法,javascript
- php与bootstrap
- bootstrap实现nav