<!DOCTYPE HTML>
<html>
<head>
<style>
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>按钮图标</title>
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<script type="text/javascript">
</script>
</head>
<body >
<!--多组按钮图标混合使用btn-toolbar类,图标为glyphicon类和后面的 glyphicon-align-left类一起使用-->
<div class="btn-toolbar">
<div class="btn-group">
<a href="#" class="btn"><i class=" glyphicon glyphicon-align-left"></i></a>
<a href="#" class="btn"><i class="glyphicon glyphicon-align-center"></i></a>
<a href="#" class="btn"><i class="glyphicon glyphicon-align-right"></i></a>
</div>
<div class="btn-group">
<a href="#" class="btn"><i class=" glyphicon glyphicon-bold"></i></a>
<a href="#" class="btn"><i class="glyphicon glyphicon-font"></i></a>
<a href="#" class="btn"><i class="glyphicon glyphicon-text-height"></i></a>
</div>
</div>
<!--图标竖直放-->
<div class="btn-group btn-group-vertical">
<a href="#" class="btn"><i class=" glyphicon glyphicon-align-left"></i></a>
<a href="#" class="btn"><i class="glyphicon glyphicon-align-center"></i></a>
<a href="#" class="btn"><i class="glyphicon glyphicon-align-right"></i></a>
</div>
<!--图标加按钮-->
<div class="btn-group">
<button class="btn btn-large btn-danger">Danger</button>
<button class="btn btn-danger dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Action action</a></li>
<li><a href="#">Action else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated Link</a></li>
</ul>
</div>
<!--分割式下拉菜单加dropup菜单向上-->
<div class="btn-group dropup">
<button class="btn btn-success">Action</button>
<button class="btn btn-success dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<!-- dropdown menu links -->
<li><a href="#">Action</a></li>
<li><a href="#">Action action</a></li>
<li><a href="#">Action else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated Link</a></li>
</ul>
</div>
<!--导航制作胶囊型和长方形disabled为禁用-->
<ul class="nav nav-pills nav-stacked">
<li class="active">
<a href="#">Home</a>
</li>
<li class="disabled">
<a href="#">Profile</a>
</li>
<li class="">
<a href="#">Messages</a>
</li>
</ul>
<!--导航加下拉菜单-->
<ul class="nav nav-pills">
<li class="active">
<a href="#">Home</a>
</li>
<li class="disabled">
<a href="#">Profile</a>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" >Messages<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Action</a></li>
<li><a href="#">Action</a></li>
<li><a href="#">Action</a></li>
</ul>
</li>
</ul>
<!--导航列表-->
<ul class="nav nav-list">
<li class="nav-header">
<a href="#">Home</a>
</li>
<li class="active">
<a href="#">Profile</a>
</li>
<li class="">
<a href="#">Messages</a>
</li>
<li class="divider"></li>
<li class="nav-header">Another List Header</li>
<li><a href="#">Settings</a></li>
<li><a href="#">Help</a></li>
</ul>
<!--切换标签fade有问题-->
<div class="tabbable">
<ul class="nav nav-tabs">
<li class="active"><a href="#" data-toggle="tab">Meats</a></li>
<li class="active"><a href="#" data-toggle="tab">More Meats</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active " id="tab1"><p>this is the first title</p></div>
<div class="tab-pane " id="tab2"><p>this is the second title</p></div>
</div>
</div>
<div ></div>
<!--标签位于底部tabs-right tabs-left来控制标签的位置-->
<div class="tabbable tabs-below">
<div class="tab-content">
<div class="tab-pane active" id="tab1">
<p>I'm in Section A.</p>
</div>
<div class="tab-pane" id="tab2">
<p>I'm in Section B.</p>
</div>
<div class="tab-pane" id="tab3">
<p>I'm in Section C.</p>
</div>
</div>
<ul class="nav nav-tabs">
<li class="active"><a href="#tab1" data-toggle="tab">Section A</a></li>
<li><a href="#tab2" data-toggle="tab">Section B</a></li>
<li><a href="#tab3" data-toggle="tab">Section C</a></li>
</ul>
</div>
<br><br><br>
<div class="tabbable tabs-left">
<ul class="nav nav-tabs">
<li class="active"><a href="#tab1" data-toggle="tab">Section A</a></li>
<li><a href="#tab2" data-toggle="tab">Section B</a></li>
<li><a href="#tab3" data-toggle="tab">Section C</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab1">
<p>I'm in Section A.</p>
</div>
<div class="tab-pane" id="tab2">
<p>I'm in Section B.</p>
</div>
<div class="tab-pane" id="tab3">
<p>I'm in Section C.</p>
</div>
</div>
</div>
<!--导航条-->
<div class="navbar">
<div class="navbar-inner">
<a class="brand" href="#">Title</a>
<ul class="nav">
<li class="active"><a href="#">Home</a><li>
<li class=""><a href="#">SHOW</a><li>
<li class=""><a href="#">LINK</a><li>
</ul>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="http://cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</body>
</html>
浙公网安备 33010602011771号