Bootstrap基本类和组件学习二

一、联系方式：(自带鼠标的移动动画)

1.头文件CSS

<link rel="shortcut icon" href="favicon.ico"> <link href="css/bootstrap.min.css?v=3.3.5" rel="stylesheet">
<link href="css/font-awesome.min.css?v=4.4.0" rel="stylesheet">

<link href="css/animate.min.css" rel="stylesheet">
<link href="css/style.min.css?v=4.0.0" rel="stylesheet"><base target="_blank">

2.JS文件

<script src="js/jquery.min.js?v=2.1.4"></script>
<script src="js/bootstrap.min.js?v=3.3.5"></script>
<script src="js/content.min.js?v=1.0.0"></script>
<script>
$(document).ready(function(){$(".contact-box").each(function(){animationHover(this,"pulse")})});
</script>
<script type="text/javascript" src="http://tajs.qq.com/stats?sId=9051096" charset="UTF-8"></script>

3.html内容代码

<div class="wrapper wrapper-content animated fadeInRight">
　　<div class="row">
　　　　<div class="col-sm-4">
　　　　　　<div class="contact-box">
　　　　　　<a href="profile.html">
　　　　　　　　<div class="col-sm-4">
　　　　　　　　　　<div class="text-center">
　　　　　　　　　　　<img alt="image" class="img-circle m-t-xs img-responsive" src="img/a2.jpg">
　　　　　　　　　　<div class="m-t-xs font-bold">CTO</div>
　　　　　　　　</div>
　　　　　　</div>
　　　　　　<div class="col-sm-8">
　　　　　　　　<h3><strong>奔波儿灞</strong></h3>
　　　　　　　　　　<p><i class="fa fa-map-marker"></i> 甘肃·兰州</p>
　　　　　　　　<address>
　　　　　　　　　　<strong>Baidu, Inc.</strong><br>
　　　　　　　　　　E-mail:[email protected]<br>
　　　　　　　　　　Weibo:<a href="">http://weibo.com/xxx</a><br>
　　　　　　　　　　<abbr title="Phone">Tel:</abbr> (123) 456-7890
　　　　　　　　</address>
　　　　　　</div>
　　　　　　<div class="clearfix"></div>
　　　　</a>
　　</div>
　　</div>
</div>