兼容手机建站（一）
首先引入
<meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,intial-scale=1"><link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"><script src="js/jquery-1.9.1.min.js"></script><script src="js/bootstrap.min.js"></script>
col 共12列，
手机网站叫囊式下拉菜单
<div class="container"><div class="row"><!-- 手机网站胶囊式下拉菜单--><ul class="nav nav-pills" style="margin:20px auto;"><li class="active 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><li><a href="#">公司新闻</a></li><li><a href="#">产品中心</a></li><li><a href="#">公司简介</a></li></ul></div></div>
分裂式下拉菜单
<div class="container"><div class="row"><!-- 手机网站分裂式下拉菜单--><div class="btn-group"><button type="button" class="btn btn-danger">首页</button><button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button><ul class="dropdown-menu" role="menu"><li><a href="#">首页一</a></li></ul></div>
<!doctype html><html><head><meta charset="utf-8"><title>无标题文档</title><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,intial-scale=1"><link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"><script src="js/jquery-1.9.1.min.js"></script><script src="js/bootstrap.min.js"></script><style>div ul{margin:0 auto;}.left{margin-left:20px;}</style></head><body><div class="container"><div class="row"><!-- 手机网站分裂式下拉菜单--><div class="btn-group"><button type="button" class="btn btn-danger">首页</button><button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button><ul class="dropdown-menu" role="menu"><li><a href="#">首页一</a></li></ul></div><div class="btn-group left"><button type="button" class="btn btn-danger">公司新闻</button><button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button><ul class="dropdown-menu" role="menu"><li><a href="#">新闻一</a></li></ul></div></div></div></body></html>
手机网站折叠菜单
<!doctype html><html><head><meta charset="utf-8"><title>无标题文档</title><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,intial-scale=1"><link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"><script src="js/jquery-1.9.1.min.js"></script><script src="js/bootstrap.min.js"></script><style></style></head><body><div class="container"><div class="row"><!-- 手机网站折叠菜单--><nav class="navbar navbar-default" role="navigation"><!-- Brand and toggle get grouped for better mobile display --><div class="navbar-header"><button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"><span class="icon-bar"></span><span class="icon-bar"></span><!-- 表示右边的线--><span class="icon-bar"></span></button><a class="navbar-brand" href="#">公司首页</a></div><!-- Collect the nav links, forms, and other content for toggling --><div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"><ul class="nav navbar-nav"><li class="active"><a href="#">产品中心</a></li><!-- 鼠标点过有阴影效果--><li><a href="#" class="dropdown-toggle" data-toggle="dropdown">联系我们</a></li><!-- 下拉菜单闻class="caret显示倒三角--><li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">公司新闻 <b class="caret"></b></a><ul class="dropdown-menu"><li><a href="#">5</a></li><li><a href="#">4</a></li><li class="divider"></li><!-- 显示一条线--><li><a href="#">3</a></li><li><a href="#">2</a></li><li class="divider"></li><li><a href="#">1</a></li></ul></li></ul></div><!-- /.navbar-collapse --></nav></div></div></body></html>
<!-- 手机网站折叠菜单 navbar-fixed-top navbar-inverse反色导航栏固定在顶部-->
<!-- 有条斜杠的breadcrumb线-->
<ol class="breadcrumb">
<li><a href="#">home</a></li>
<li><a href="#">阿</a></li>
<li>fff</li>
</ol>
分页效果pagination-sm pagination-lg分页显示大小
<div class="container"> <div class="row"> <ul class="pagination"> <li class="disabled"><a href="#">«</a></li> <li class="active"><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> <li><a href="#">6</a></li> <li><a href="#">»</a></li> </ul> </div></div>
翻页效果上一页下一页
<div class="container"> <div class="row"> <!-- 左边previous 右边next 左箭头← 右箭头→--> <ul class="pager"> <li class="previous disabled"><a href="#">←上一页</a></li> <li class="next"><a href="#">下一页→</a></li> </ul> </div></div>
显示未读条数的徽章
<div class="container"> <div class="row"> <a href="#">未读的信息数 <span class="badge">55</span></a> </div></div>
<div class="container"> <div class="row"> <div class="col-xs-3"><ul class="nav nav-pills nav-stacked"><li class="active"> <a href="#"> <span class="badge pull-right">4</span> Messages </a></li></ul> </div> </div></div>
<div class="container"> <div class="row"> <div class="jumbotron"> <h1>hello,word!</h1> <p><a class="btn btn-primary btn-lg" role="button">learn more</a></p> </div> </div></div>
<div class="container"> <div class="row"> <div class="page-header"> <h1>标题<small>小标题</small></h1> </div> </div></div>
缩略图
<div class="container"><div class="row"><div class="col-xs-6 col-md-3"><a href="#" class="thumbnail"><img src="images/pic1.jpg" alt="美丽的风景"></a></div></div></div>
警告框
<div class="container"><div class="row"><!--不可以关闭的框--><div class="alert alert-info">Heads up! This alert needs your attention, but it's not super important.</div><div class="alert alert-success">ddddddddddddddd</div><div class="alert alert-warning">ddddddddddddddd</div><!--可以关闭的框--><div class="alert alert-danger alert-dismissable"><button type="button" class="close" data-dismiss="alert"aria-hidden="true">×</button><strong>警告！</strong>ddddddddddddddd</div></div></div></div></div>
导航条
<div class="container"><div class="row"><!-- progress-striped 带有样式的进度条--><div class="progress progress-striped active"><div class="progress-bar progress-bar-success" role="progressbar"aria-valuemin="0" aria-valuemax="50" style="width:20%;"><span class="sr-only">40% Complete (success)</span></div></div></div></div>
无序列表
<div class="container"><div class="row"><ul class="list-group"><li class="list-group-item">Cras justo odio</li></ul></div></div>
<div class="container"> <div class="row"> <ul class="list-group"> <li class="list-group-item"> <span class="badge">14</span> Cras justo odio</li> </ul> </div></div>
链接条目
<div class="container"><div class="row"><a href="#" class="list-group-item active">Cras justo odio</a></div></div>
<div class="container"><div class="row"><div class="list-group"><a href="#" class="list-group-item active"><h4 class="list-group-item-heading">List group item heading</h4><p class="list-group-text">List group item heading</p></a></div></div></div>
<div class="container"><div class="row"><div class="panel panel-default"><div class="panel-heading">titile titile titile</div><div class="panel-body">Basic panel example</div><div class="panel-footer">zhushi</div></div></div></div>
表格面板
<div class="container"><div class="row"><div class="panel panel-default"><table class="table table-bordered"><thead><tr><th>#</th><th>First Name</th><th>Last Name</th><th>Username</th></tr></thead><tbody><tr><td>1</td><td>Mark</td><td>Otto</td><td>@mdo</td></tr><tr><td>2</td><td>Jacob</td><td>Thornton</td><td>@fat</td></tr><tr><td>3</td><td>Larry</td><td>the Bird</td><td>@twitter</td></tr></tbody></table></div></div>
<div class="container"><div class="row"><div class="well">Look, I'm in a well!</div><div class="well well-lg">Look, I'm in a well!</div></div></div>
圆角图片
<div class="container"><div class="row"><img src="images/pic1.jpg" class="img-rounded img-responsive"><img src="images/pic1.jpg" class="img-circle img-responsive"><img src="images/pic1.jpg" class="img-thumbnail img-responsive"></div>