<!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>Bootstrap 101 Template</title>
<link href="bootstrap-3.3.5/css/bootstrap.css" rel="stylesheet">
<script src="bootstrap-3.3.5/js/html5shiv.min.js"></script>
<script src="bootstrap-3.3.5/js/respond.min.js"></script>
<link href="resource/css/main.css" rel="stylesheet">
</head>
<body>
<!--导航条-->
<div class="navbar navbar-default navbar-fixed-top navbar-inverse">
<div class="container">
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
aria-expanded="false">项目案例<span class="caret"></span></a>
<ul class="dropdown-menu" role="menu" id="demo-navbar">
<li><a href="#tab-1">50年代</a></li>
<li role="separator" class="divider"></li>
<li><a href="#tab-2">博客</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</div>
<div class="container">
<!--选项卡-->
<div>
<ul class="nav nav-tabs" id="tab-list">
<li class="active">
<a href="#tab-1" role="tab" data-toggle="tab">标签1</a>
</li>
<li>
<a href="#tab-2" role="tab" data-toggle="tab">标签2</a>
</li>
</ul>
</div>
<!--选项卡内容-->
<div class="tab-content" style="margin-bottom: 40px;">
<div class="tab-pane active" id="tab-1">
<div class="row feature">
<div class="col-md-5">
<img src="resource/images/wow3.jpg" alt="First slide">
</div>
</div>
</div>
<div class="tab-pane" id="tab-2">
<div class="row">
<div class="col-md-5">
<img src="resource/images/wow4.jpg" alt="First slide">
</div>
</div>
</div>
</div>
<hr>
<!--警告框-->
<div class="alert alert-success" role="alert">普通警告框：class="alert alert-success" role="alert"</div>
<div class="alert alert-info" role="alert">alert alert-info</div>
<div class="alert alert-warning" role="alert">alert alert-warning</div>
<div class="alert alert-danger" role="alert">alert alert-danger</div>
<!--可关闭的警告框
为警告框添加一个可选的 .alert-dismissible 类和一个关闭按钮。
依赖警告框 JavaScript 插件
如果需要为警告框组件提供关闭功能，请使用 jQuery 警告框插件。-->
<div class="alert alert-warning alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span
aria-hidden="true">×</span></button>
<strong>Warning! & 警告框中的链接</strong> 依赖警告框 JavaScript 插件，如果需要为警告框组件提供关闭功能，请使用 <a href="#" class="alert-link">jQuery</a>
警告框插件。
</div>
<!--分页-->
<div style="text-align: center">
<ul class="pagination" style="text-align: center"><!--pagination-lg-->
<li class="disabled">
<a href="#" aria-label="Previous"><span aria-hidden="true">«</span></a>
</li>
<li class="active"><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li class="disabled">
<a href="#" aria-label="Next"><span aria-hidden="true">»</span></a>
</li>
</ul>
</div>
<!--折叠-->
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion"
href="#collapseOne">
点击我进行展开，再次点击我进行折叠。第 1 部分
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
Nihil anim keffiyeh helvetica, craft beer labore wes anderson
cred nesciunt sapiente ea proident. Ad vegan excepteur butcher
vice lomo.
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion"
href="#collapseTwo">
点击我进行展开，再次点击我进行折叠。第 2 部分
</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">
Nihil anim keffiyeh helvetica, craft beer labore wes anderson
cred nesciunt sapiente ea proident. Ad vegan excepteur butcher
vice lomo.
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion"
href="#collapseThree">
点击我进行展开，再次点击我进行折叠。第 3 部分
</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse">
<div class="panel-body">
Nihil anim keffiyeh helvetica, craft beer labore wes anderson
cred nesciunt sapiente ea proident. Ad vegan excepteur butcher
vice lomo.
</div>
</div>
</div>
</div>
</div>
</body>
</html>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="bootstrap-3.3.5/js/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="bootstrap-3.3.5/js/bootstrap.min.js"></script>
<script>
$("document").ready(function () {
$("#demo-navbar li a").click(function () {
var href = $(this).attr("href");
$("#tab-list a[href='" + href + "']").tab("show");
});
});
</script>
把你的代码放到我的工程里是没问题的，你的电脑屏幕多大