<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>选项卡</title>
<link href="../bootstrap/css/bootstrap.css" rel="stylesheet"
type="text/css">
<!--[if lt IE 9]>
<script src="../bootstrap/js/html5.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<h1 class="page-header">选项卡</h1>
<!-- tabbable tabs-left -->
<!-- tabbable tabs-right -->
<div class="tabbable tabs-left">
<!-- 标签堆砌在一起加 nav-stacked -->
<!-- 标签的另一种设计改nav-tabs为nav-pills -->
<ul class="nav nav-tabs">
<li class="active"><a href="#tab1" data-toggle="tab">Wordpress</a></li>
<li><a href="#tab2" data-toggle="tab">Drupal</a></li>
<li><a href="#tab3" data-toggle="tab">Joomla</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab1"><p>Wordpress，优雅的CMS</p></div>
<div class="tab-pane" id="tab2"><p>Drupal，灵活强大的CMS</p></div>
<div class="tab-pane" id="tab3"><p>Joomla，简单易用的CMS</p></div>
</div>
</div>
</div>
<script src="../bootstrap/js/jquery-1.7.2.min.js"></script>
<script src="../bootstrap/js/bootstrap.js"></script>
</body>
</html>
Bootstrap选项卡
tab-finish.html
猜你喜欢
转载自beckham-xiao.iteye.com/blog/2400556
今日推荐
周排行