
<body>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap網頁</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">
  <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <div class="panel-group" id="accordion">
    <div class="panel panel-default">
      <div class="panel-heading">
        <h4 class="panel-title">
          <a data-toggle="collapse"  data-parent="#accordion" href="#collapse1">唐詩</a>
        </h4>
      </div>
      <div id="collapse1" class="panel-collapse collapse in">
        <div class="panel-body">
          <p>「唐詩」泛指創作於唐朝或以唐朝風格創作的詩。唐詩有數種選本， 例如蘅塘退士編選的《唐詩三百首》、清朝康熙年間的《全唐詩》。
          </p>
        </div>
      </div>
    </div>

    <div class="panel panel-default">
      <div class="panel-heading">
        <h4 class="panel-title">
          <a data-toggle="collapse" data-parent="#accordion" href="#collapse2">宋詞</a>
        </h4>
      </div>
      <div id="collapse2" class="panel-collapse collapse">
        <div class="panel-body">
          <p>「詞」是一種詩歌藝術形式，中國古詩體的一種，又稱曲子詞、詩餘、 長短句、樂府，始於唐朝，在宋朝達到臻峰。
          </p>
        </div>
      </div>
    </div>

    <div class="panel panel-default">
      <div class="panel-heading">
        <h4 class="panel-title">
          <a data-toggle="collapse" data-parent="#accordion" href="#collapse3">元曲</a>
        </h4>
      </div>
      <div id="collapse3" class="panel-collapse collapse">
        <div class="panel-body">
          <p>「元曲」是盛行於元朝的戲曲藝術，為散曲與雜劇的合稱， 元曲與唐詩及宋詞有著相同的文學地位。
          </p>
        </div>
      </div>
    </div>
      
    <div class="panel panel-default">
      <div class="panel-heading">
        <h4 class="panel-title">
          <a data-toggle="collapse" data-parent="#accordion" href="#collapse3">元曲</a>
        </h4>
      </div>
      <div id="collapse4" class="panel-collapse collapse">
        <div class="panel-body">
          <p>「元曲」是盛行於元朝的戲曲藝術，為散曲與雜劇的合稱， 元曲與唐詩及宋詞有著相7575787878同的文學地位。
          </p>
        </div>
      </div>
    </div>
      
  </div>
    
</body>