这是一款基于Bootstrap的垂直手风琴特效。该手风琴特效基于Bootstrap Accordion组件来制作,通过自定义CSS样式,生成美观大方的垂直手风琴效果。
使用方法
在页面中引入jquery,Bootstrap的相关文件,以及FontAwesome字体图标文件。
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> <script src="js/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
HTML结构
该手风琴效果的基本HTML结构如下:
<div class="container"> <div class="row"> <div class="col-md-6"> <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true"> <div class="panel panel-default"> <div class="panel-heading" role="tab" id="headingOne"> <h4 class="panel-title"> <a class="" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> Section 1 </a> </h4> </div> <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne"> <div class="panel-body"> ...... </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading" role="tab" id="headingTwo"> <h4 class="panel-title"> <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"> Section 2 </a> </h4> </div> <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo"> <div class="panel-body"> ...... </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading" role="tab" id="headingThree"> <h4 class="panel-title"> <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree"> Section 3 </a> </h4> </div> <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree"> <div class="panel-body"> ...... </div> </div> </div> </div> </div> </div> </div>
CSS样式
实现该手风琴效果的CSS样式也非常简单:通过简单的边框修饰和FontAwesome字体图标来美化手风琴。
a:hover, a:focus{ outline: none; text-decoration: none; } #accordion .panel{ box-shadow: none; border: none; border-radius:0; margin-bottom: 6px; border-left:5px solid #944f95; } #accordion .panel-heading{ padding:0; background-color:#fff; } #accordion .panel-title a{ display: block; color: #333; font-size: 15px; font-weight: bold; padding: 14px 40px; background: #f5f5f5; text-transform: uppercase; border-bottom: 1px solid #d3d3d3; position: relative; } #accordion .panel-title a.collapsed{ border-top: 0; color: #333; background: #eee; border-bottom:1px solid transparent; } #accordion .panel-title a:before, #accordion .panel-title a.collapsed:before{ content: "\f068"; font-family: FontAwesome; position: absolute; top: 10px; left: 15px; font-size: 14px; line-height: 24px; color: #944f95; } #accordion .panel-title a.collapsed:before{ content: "\f067"; } #accordion .panel-body{ color: #666464; font-size: 14px; line-height: 20px; border-top: 0 none; background: #eee; padding: 15px 27px; }
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!