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:xxx@baidu.com<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>

转载于:https://www.cnblogs.com/Lxiaojiang/p/5969109.html

相关资源：Bootstrap常用组件学习(整理)