tabs控件使用uib-tabset指令和uib-tab指令，效果是这样的：
<!DOCTYPE html>
<html ng-app="ui.bootstrap.demo" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="/Content/bootstrap.css" rel="stylesheet" />
<title></title> <script src="/Scripts/angular.js"></script>
<script src="/Scripts/ui-bootstrap-tpls-1.3.2.js"></script>
<script> angular.module('ui.bootstrap.demo', ['ui.bootstrap']).controller('TabsDemoCtrl', function ($scope, $window) {
$scope.tabs = [
{ title: '标签页a', content: '标签页a的内容' },
{ title: '标签页b', content: '标签页b的内容', disabled: true }
]; $scope.alertMe = function () {
setTimeout(function () {
$window.alert('clicked!');
});
};
});
</script>
</head>
<body>
<div ng-controller="TabsDemoCtrl">
<uib-tabset active="active" type="tabs">
<uib-tab index="0" heading="标签页1">内容1</uib-tab>
<uib-tab index="$index + 1" ng-repeat="tab in tabs" heading="{{tab.title}}" active="tab.active" disable="tab.disabled">
{{tab.content}}
</uib-tab>
<uib-tab index="3" select="alertMe()">
<uib-tab-heading>
<i class="glyphicon glyphicon-bell"></i> Alert!
</uib-tab-heading>
内容部分
</uib-tab>
</uib-tabset>
</div>
</body>
</html>
uib-tabset可使用的属性有：
uib-tab可使用的属性有：
如果面板的标题是简单的文本，使用heading属性就足够了。如果是复杂的内容，比如有图标，那么可以使用uib-tab-heading。这一点和According控件是一样的。