<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <h2> 科林 寻找你的学术合作伙伴</h2> <div class="col-md-6"> <div class="blockquote-box clearfix blockquote-info"> <div class="square pull-left"> <span class="glyphicon glyphicon-send glyphicon-lg"></span> </div> <h4>沟通 </h4> <p> 与全国各地的医生、生物学家保持联系。 </p> </div> <div class="blockquote-box blockquote-primary clearfix"> <div class="square pull-left"> <span class="glyphicon glyphicon-bullhorn glyphicon-lg"></span> </div> <h4> 展示</h4> <p> 酒香也怕巷子深，让圈子里的人了解你的需求。 </p> </div> <div class="blockquote-box blockquote-success clearfix"> <div class="square pull-left"> <span class="glyphicon glyphicon-tree-conifer glyphicon-lg"></span> </div> <h4> 可靠</h4> <p> 实名制注册。 </p> </div> </div> <div class="col-md-6"> <div class="blockquote-box blockquote-info clearfix"> <div class="square pull-left"> <span class="glyphicon glyphicon-time glyphicon-lg"></span> </div> <h4> 快捷</h4> <p> 时间不等人。 </p> </div> <div class="blockquote-box blockquote-danger clearfix"> <div class="square pull-left"> <span class="glyphicon glyphicon-heart glyphicon-lg"></span> </div> <h4> 精准</h4> <p> 找到最适合的合作者。 </p> </div> <div class="blockquote-box blockquote-success clearfix"> <div class="square pull-left"> <span class="glyphicon glyphicon-ok-circle glyphicon-lg"></span> </div> <h4> 管用</h4> <p> 分享你的资源和技术，寻找你的合作伙伴，就这么简单。 </p> </div> </div> </div> </div>

.glyphicon-lg{font-size:3em} .blockquote-box{border-right:5px solid #E6E6E6;margin-bottom:25px} .blockquote-box .square{width:100px;min-height:50px;margin-right:22px;text-align:center!important;background-color:#E6E6E6;padding:20px 0} .blockquote-box.blockquote-primary{border-color:#357EBD} .blockquote-box.blockquote-primary .square{background-color:#428BCA;color:#FFF} .blockquote-box.blockquote-success{border-color:#4CAE4C} .blockquote-box.blockquote-success .square{background-color:#5CB85C;color:#FFF} .blockquote-box.blockquote-info{border-color:#46B8DA} .blockquote-box.blockquote-info .square{background-color:#5BC0DE;color:#FFF} .blockquote-box.blockquote-warning{border-color:#EEA236} .blockquote-box.blockquote-warning .square{background-color:#F0AD4E;color:#FFF} .blockquote-box.blockquote-danger{border-color:#D43F3A} .blockquote-box.blockquote-danger .square{background-color:#D9534F;color:#FFF}