bootstrap组件的案例代码
运行结果如图所示：
代码如下所示：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0" />
<title></title>
<link href="css/bootstrap.css" rel="stylesheet" />
<style type="text/css">
.text{
display: block;
}
.mylist{
height: 42px;
background: rgb(244,243,254,0.69);
border: 1px solid #CCCCCC;
}
</style>
</head>
<body>
1.小图标：<br />
<div class="container">
<div class="row text-center mylist">
<div class="col-xs-3">
<span class="glyphicon glyphicon-home"></span>
<span class="text">首页</span>
</div>
<div class="col-xs-3">
<span class="glyphicon glyphicon-zoom-in"></span>
<span class="text">服务</span>
</div>
<div class="col-xs-3">
<span class="glyphicon glyphicon-gift"></span>
<span class="text">商品</span>
</div>
<div class="col-xs-3">
<span class="glyphicon glyphicon-user"></span>
<span class="text">我的联通</span>
</div>
</div>
</div>
2.下拉菜单：<br />
<div class="dropdown open">
<button class="btn btn-default" data-toggle="dropdown">下拉列表
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li class="active"><a href="#">No.1</a></li>
<li ><a href="#">No.2</a></li>
<li ><a href="#">No.3</a></li>
<li class="divider"></li>
<li ><a href="#">No.4</a></li>
</ul>
</div>
3.分离式的下拉列表<br />
<div class="btn-group">
<button class="btn btn-danger">Action</button>
<button class="btn btn-danger dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li class="active"><a href="#">No.1</a></li>
<li ><a href="#">No.2</a></li>
<li ><a href="#">No.3</a></li>
<li class="divider"></li>
<li ><a href="#">No.4</a></li>
</ul>
</div>
4.输入框：<br />
<div class="input-group">
<span class="input-group-addon">@</span>
<input type="text" class="form-control" placeholder="姓名" />
</div>
<div class="input-group">
<input type="text" class="form-control" placeholder="请输入要搜索的内容" />
<span class="input-group-addon">百度一下</span>
</div>
5.按钮作为addon<br />
<div class="input-group">
<input type="text" class="form-control" placeholder="请输入要搜索的内容" />
<span class="input-group-btn">
<button class="btn btn-danger">百度一下</button>
</span>
</div>
6.导航和导航条：<br />
选项卡导航：<br />
<ul class="nav nav-tabs">
<li class="active"><a href="#">主页</a></li>
<li><a href="#">微博</a></li>
<li><a href="#">图书</a></li>
<li><a href="#">关于我们</a></li>
</ul>
<br />
胶囊式选项卡导航：<br />
<ul class="nav nav-pills">
<li class="active"><a href="#">主页</a></li>
<li><a href="#">微博</a></li>
<li><a href="#">图书</a></li>
<li><a href="#">关于我们</a></li>
</ul>
自适应导航：<br />
<ul class="nav nav-pills nav-justified">
<li class="active"><a href="#">主页</a></li>
<li><a href="#">微博</a></li>
<li><a href="#">图书</a></li>
<li><a href="#">关于我们</a></li>
</ul>
<br />
二级导航：<br />
<ul class="nav nav-pills">
<li class="active"><a href="#">首页</a></li>
<li><a href="#">图片</a></li>
<li><a href="#">个人</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">其他
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="#">收藏</a></li>
<li><a href="#">关于我们</a></li>
<li><a href="#">联系卖家</a></li>
<li><a href="#">退换货</a></li>
</ul>
</li>
</ul>
导航条：<br />
<nav class="navbar navbar-inverse" role="navigation">
<div class="navbar-header">
<a href="#" class="navbar-brand">LOGO</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">主页</a></li>
<li><a href="#">微博</a></li>
<li><a href="#">图书</a></li>
</ul>
</nav>
导航条中的表单：<br />
<nav class="navbar navbar-inverse" role="navigation">
<div class="navbar-header">
<a href="#" class="navbar-brand">LOGO</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">主页</a></li>
<li><a href="#">微博</a></li>
<li><a href="#">图书</a></li>
</ul>
<form role="Serach" class="navbar-form navbar-right" action="" method="post">
<div class="form-group">
<input type="text" class="form-control" placeholder="Serach" />
</div>
<input type="submit" class="btn btn-primary" value="搜索"/>
</form>
</nav>
导航栏中的文本：<br />
<nav class="navbar navbar-inverse" role="navigation">
<div class="navbar-header">
<a href="#" class="navbar-brand">LOGO</a>
</div>
<ul class="nav navbar-nav">
<p class="navbar-text">文字</p>
</ul>
</nav>
顶部固定或底部固定<br />
<nav class="navbar navbar-inverse navbar-fixed-bottom" role="navigation">
<div class="navbar-header">
<button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="#" class="navbar-brand">LOGO</a>
</div>
<div class="collapse navbar-collapse navbar-left">
<ul class="nav navbar-nav">
<li class="active"><a href="#">首页</a></li>
<li><a href="#">图书</a></li>
<li><a href="#">作品</a></li>
<li><a href="#">展览</a></li>
<li><a href="#">关于我们</a></li>
</ul>
</div>
</nav>
缩略图：<br />
<div class="container">
<div class="row">
<div class="col-md-2 col-xs-6">
<a class="thumbnail" href="#">
<img src="img/logo.png"/>
</a>
<a class="thumbnail" href="#">
<img src="img/logo.png"/>
</a>
<a class="thumbnail" href="#">
<img src="img/logo.png"/>
</a>
<a class="thumbnail" href="#">
<img src="img/logo.png"/>
</a>
<a class="thumbnail" href="#">
<img src="img/logo.png"/>
</a>
</div>
</div>
</div>
<script type="text/javascript" src="js/jquery-1.12.4.js" ></script>
<script type="text/javascript" src="js/bootstrap.js" ></script>
</body>
</html>
