html5制作垂直列表,Bootstrap超炫垂直手风琴列表特效.doc

html5制作垂直列表‘Bootstrap超炫垂直手风琴列表特效
这是一款基于Bootstrap网格系统和Collapse插件制作的炫酷垂直手风琴列表特效。该特效对原生的BootstrapAccordion进行美化，制作非常美观的垂直手风html5制作垂直列表‘Bootstrap超炫垂直手风琴列表特效
这是一款基于Bootstrap网格系统和Collapse插件制作的炫酷垂直手风琴列表特效。该特效对原生的BootstrapAccordion进行美化，制作非常美观的垂直手风琴效果。
使用方法
在页面中引入bootstrap的相关文件。
HTML结构
该垂直手风琴特效的HTML结构如下：
href="#collapseOne"aria-expanded="true"aria-controls="collapseOne">
Section1
CSS样式
用于美化该垂直手风琴的CSS样式也非常简单，如下:
a:hover,a:focus{
text-decoration:none;
outline:none;
}
#{
border:none;
box-shadow:none;
border-radius:0;
margin-top:0;
}
#-heading{
padding:0;
border-radius:0;
border:none;
}
#-titlea{
display:block;
font-size:16px;
font-weight:bold;
color:#f7c59f;
padding:15px48px15px20px;background:#e16b47;
position:relative;
transition:;
}
#-{
color:#e16b47;
background:#f7c59f;
border-bottom:1pxsolid#3d3537;
}
#-titlea:after,
#-:after{content:"";
display:block;
width:3px;
height:100%;
position:absolute;
top:0;
right:30px;
background:#f7c59f;
}
#-:after{background:#e16b47;
}
#-titlea:before,
#-:before{content:"\f068";
font-family:FontAwesome;
width:25px;
height:2