コンポーネント

Foundationで用意されている構成要素の説明。

パネル Panels

Foundationで用意されているパネル関連のスタイルの紹介。

パネルの基本

.panelを指定するだけです。
指定するとデフォルトでは灰色の四角で囲まれます。
※Bootstrap3のWellsに近く、Bootstrap3のパネルような多彩なものはFoundation5では用意されていません。

.panelを指定

デフォルトのパネル

      <div class="panel">
        <h4>デフォルトのパネル <small>.panel</small></h4>
      </div>

パネルのバリエーション

パネルのバリエーションとして、色を変更する.collooutと角を丸くする.radiusのスタイルがあります。

.calloutと.radius指定

色が薄い水色、角が少しだけ丸くなります。

      <div class="panel callout radius">
        <h4>.calloutと.radius指定</h4>
        <p>色が薄い水色、角が少しだけ丸くなります。</p>
      </div>
© 2015 foudation5-guide.com