1.用Bootstrap实现一个隔行变色的表格
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Practice</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
</head>
<body>
<table class="table table-striped">
<tr>
<th>名称</th>
<th>城市</th>
<th>邮编</th>
</tr>
<tr>
<td>乐乐</td>
<td>北京</td>
<td>100000</td>
</tr>
<tr>
<td>莫莫</td>
<td>上海</td>
<td>200000</td>
</tr>
<tr>
<td>豆豆</td>
<td>天津</td>
<td>300000</td>
</tr>
</table>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
</body>
</html>
2.用Bootstrap实现一个选项卡切换效果
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Practice</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
</head>
<body>
<ul class="nav nav-tabs">
<li class="active"><a href="#html5" data-toggle="tab">HTML5</a></li>
<li class=""><a href="#IOS" data-toggle="tab">IOS</a></li>
<li class=""><a href="#Java" data-toggle="tab">Java</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="html5">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae, et.</div>
<div class="tab-pane" id="IOS">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur, fugit. </div>
<div class="tab-pane" id="Java">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore, hic.</div>
</div>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
</body>
</html>
