手风琴

简洁Bootstrap垂直手风琴UI设计效果

PetitQPetitQ 手风琴 2018-10-30 2.47K 0
收藏
阿里云


这是一款基于 Bootstrap 的简洁手风琴特效 UI 设计效果。该手风琴特效在原生 Bootstrap Accordion 组件的基础上，通过 CSS 代码来对其进行美化，制作出即简洁又美观的手风琴效果。

使用方法:

在页面中引入 bootstrap 相关文件和 jquery 文件。

也想出现在这里？联系我们吧
创客主机
  1. <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
  2. <script type="text/javascript" src="path/to/jquery.min.js"></script>
  3. <script type="text/javascript" src="js/bootstrap.min.js"></script>

HTML 结构:

该手风琴特效的 HTML 结构为原生 Bootstrap Accordion 的 HTML 结构。

  1. <div class="container">
  2.     <div class="row">
  3.         <div class="col-md-offset-3 col-md-6">
  4.             <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
  5.                 <div class="panel panel-default">
  6.                     <div class="panel-heading" role="tab" id="headingOne">
  7.                         <h4 class="panel-title">
  8.                             <a role="button" data-toggle="collapse" data-parent="#accordion"
  9.                                 href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
  10.                                 Section 1
  11.                             </a>
  12.                         </h4>
  13.                     </div>
  14.                     <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel"
  15.                                aria-labelledby="headingOne">
  16.                         <div class="panel-body">
  17.                             ......
  18.                         </div>
  19.                     </div>
  20.                 </div>
  21.                 ......
  22.             </div>
  23.         </div>
  24.     </div>
  25. </div>

CSS 样式:

CSS 样式主要是对原来的 Accordion 组件进行美化，代码页十分简单，如下：

  1. .panel-group .panel{
  2.     border:0px none;
  3.     border-radius: 0px;
  4.     box-shadow: none;
  5.     border-bottom: 1px solid #676767;
  6. }
  7. .panel-heading{
  8.     padding: 0;
  9. }
  10. .panel-default > .panel-heading {
  11.     color: #7a4b94;
  12. }
  13. .panel-title{
  14.     position: relative;
  15. }
  16. .panel-title > a{
  17.     display: block;
  18.     padding: 11px 35px;
  19.     background: #fff;
  20.     font-weight: 600;
  21. }
  22. .panel-title > a:hover,
  23. .panel-title > a:focus{
  24.     text-decoration: none;
  25.     outline: none;
  26. }
  27. .panel-title a:before{
  28.     content: "\f068";
  29.     font-family: 'FontAwesome';
  30.     margin-right: 10px;
  31.     color:#7a4b94;
  32.     font-weight: normal;
  33.     position: absolute;
  34.     left:10px;
  35.     top:11px;
  36. }
  37. .panel-title .collapsed:before{
  38.     content: "\f067";
  39. }
  40. .panel-title a.collapsed{
  41.     color:#7a4b94;
  42.     font-weight: normal;
  43. }
  44. .panel-body{
  45.     color:#727272;
  46.     padding: 5px 10px 30px;
  47.     line-height: 23px;
  48.     letter-spacing: 1px;
  49. }
  50. .panel-default > .panel-heading + .panel-collapse > .panel-body{
  51.     border-top: 0px none;
  52. }

简洁 Bootstrap 垂直手风琴 UI 设计效果

已有 618 人购买
查看演示升级 VIP立刻购买

演示地址 下载地址

咨询客服 中文演示

专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务，详询在线客服！

创客主机
收藏
赞(2)

相关文章

发表回复

热销模板

Ashade - 作品展示摄影相册WordPress汉化主题
LensNews

本站承接 WordPress / PbootCMS / DedeCMS 等
系统建站、仿站、开发、定制等业务！

登录