基於Bootstrap的垂直手風琴動畫特效

簡要教學

這是一款以Bootstrap為基礎的垂直手風琴特效。這款垂直手風琴特效基於原生的Bootstrap Accordion組件來製作，透過CSS3來對它進行美化，效果美觀大方。

使用方法

 HTML結構

此垂直手風琴特效的基本HTML結構如下：

<div class="container">
      <div class="row">
          <div class="col-md-offset-3 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 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">
                              <p>......</p>
                          </div>
                      </div>
                  </div>
                  ......
              </div>
          </div>
      </div>
  </div>

CSS樣式

該垂直手風琴特效的垂直手風琴特效的垂直手風琴樣式內容，更多相關內容請關注PHP中文網（www.php.cn）！