2012/09/11

[BootStrap]Collapseを試す

BootStrapに書かれているCollapseの作り方を調査しました。

使い方はとっても簡単。ほぼテンプレートになっています。ためしに書いたコードはこちらです。

<div class="container">
 <div class="row">
  <div class="span12">
   <div class="accordion" id="makeaccordion">
    <div class="accordion-group">
     <div class="accordion-heading">
      <a class="accordion-toggle"
        data-toggle="collapse"
        data-parent="#makeaccordion"
        href="#collapseOne">あ行</a>
     </div>
     <div id="collapseOne" class="accordion-body collapse">
      <div class="accordion-inner">
      あいうえお
      </div>
     </div>
    </div>
    <div class="accordion-group">
     <div class="accordion-heading">
      <a class="accordion-toggle"
        data-toggle="collapse"
        data-parent="#makeaccordion"
        href="#collapseTwo">か行</a>
     </div>
     <div id="collapseTwo" class="accordion-body collapse">
      <div class="accordion-inner">
      かきくけこ
      </div>
     </div>
    </div>
    <div class="accordion-group">
     <div class="accordion-heading">
      <a class="accordion-toggle"
        data-toggle="collapse"
        data-parent="#makeaccordion"
        href="#collapseThree">さ行</a>
     </div>
     <div id="collapseThree" class="accordion-body collapse">
      <div class="accordion-inner">
      さしすせそ
      </div>
     </div>
    </div>
   </div>
  </div>
 </div>
</div>
実行結果は、下のようになりました。
Photobucket
デフォルトで、何かを開いている状態にするには、class名にinを入れます。
<div class="container">
 <div class="row">
  <div class="span12">
   <div class="accordion" id="makeaccordion">
    <div class="accordion-group">
     <div class="accordion-heading">
      <a class="accordion-toggle"
        data-toggle="collapse"
        data-parent="#makeaccordion"
        href="#collapseOne">あ行</a>
     </div>
     <div id="collapseOne" class="accordion-body collapse in">
      <div class="accordion-inner">
      あいうえお
      </div>
     </div>
    </div>
    <div class="accordion-group">
     <div class="accordion-heading">
      <a class="accordion-toggle"
        data-toggle="collapse"
        data-parent="#makeaccordion"
        href="#collapseTwo">か行</a>
     </div>
     <div id="collapseTwo" class="accordion-body collapse">
      <div class="accordion-inner">
      かきくけこ
      </div>
     </div>
    </div>
    <div class="accordion-group">
     <div class="accordion-heading">
      <a class="accordion-toggle"
        data-toggle="collapse"
        data-parent="#makeaccordion"
        href="#collapseThree">さ行</a>
     </div>
     <div id="collapseThree" class="accordion-body collapse">
      <div class="accordion-inner">
      さしすせそ
      </div>
     </div>
    </div>
   </div>
  </div>
 </div>
</div>
これの実行結果は、下のようになりました。
Photobucket
これで今後スムーズに、cllapseを実装することができます_

時刻: 23:30
ラベル:

0 コメント:

コメントを投稿

登録: コメントの投稿 (Atom)