「Bootstrap ComponentsのPanels」のサンプル

「BootstrapのComponentsのサンプル：和訳」の「Panels」のサンプルページです。

親要素を「class="panel panel-default"」にする。

基本のパネル

Basic panel example

実際のソース


<div class="panel panel-default">
  <div class="panel-body">
    Basic panel example
  </div>
</div>

ヘッダあり

Panel heading without title

Panel content

実際のソース


<div class="panel panel-default">
  <div class="panel-heading">
    Panel heading without title
  </div>
  <div class="panel-body">
    Panel content
  </div>
</div>

ヘッダを見出しにする

Panel title

Panel content

実際のソース


<div class="panel panel-default">
  <div class="panel-heading">
    <h3 class="panel-title bootstrap">Panel title</h3>
  </div>
  <div class="panel-body">
    Panel content
  </div>
</div>

※クラス「bootstrap」は不要です（このサイトで使っているCSSがbootstrap.cssと競合。その回避用につくったクラスです）

フッタあり

Panel content

Panel footer

実際のソース


<div class="panel panel-default">
  <div class="panel-body">
    Panel content
  </div>
  <div class="panel-footer">Panel footer</div>
</div>

色つき（ヘッダ＋フッタ）

「class="panel panel-default"」を「class="panel panel-○○○"」にする

デフォルト：Panel heading without title

Panel content

Panel footer

primary：Panel heading without title

Panel content

Panel footer

success：Panel heading without title

Panel content

Panel footer

info：Panel heading without title

Panel content

Panel footer

warning：Panel heading without title

Panel content

Panel footer

danger：Panel heading without title

Panel content

Panel footer

実際のソース


<div class="panel panel-default">
  <div class="panel-heading">デフォルト：Panel heading without title</div>
  <div class="panel-body">Panel content</div>
  <div class="panel-footer">Panel footer</div>
</div>

<div class="panel panel-primary">
  <div class="panel-heading">primary：Panel heading without title</div>
  <div class="panel-body">Panel content</div>
  <div class="panel-footer">Panel footer</div>
</div>

<div class="panel panel-success">
  <div class="panel-heading">success：Panel heading without title</div>
  <div class="panel-body">Panel content</div>
  <div class="panel-footer">Panel footer</div>
</div>

<div class="panel panel-info">
  <div class="panel-heading">info：Panel heading without title</div>
  <div class="panel-body">Panel content</div>
  <div class="panel-footer">Panel footer</div>
</div>

<div class="panel panel-warning">
  <div class="panel-heading">warning：Panel heading without title</div>
  <div class="panel-body">Panel content</div>
  <div class="panel-footer">Panel footer</div>
</div>

<div class="panel panel-danger">
  <div class="panel-heading">danger：Panel heading without title</div>
  <div class="panel-body">Panel content</div>
  <div class="panel-footer">Panel footer</div>
</div>

tableタグの組込み

Panel heading

Some default panel content here. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

実際のソース


<div class="panel panel-default">
  
  <div class="panel-heading">Panel heading</div>
  
  <div class="panel-body">
    <p>Some default panel content here. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
  </div>
  
  <table class="table">
    <thead>
      <tr>
        <th>#</th>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Username</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">1</th>
        <td>Mark</td>
        <td>Otto</td>
        <td>@mdo</td>
      </tr>
      <tr>
        <th scope="row">2</th>
        <td>Jacob</td>
        <td>Thornton</td>
        <td>@fat</td>
      </tr>
      <tr>
        <th scope="row">3</th>
        <td>Larry</td>
        <td>the Bird</td>
        <td>@twitter</td>
      </tr>
    </tbody>
  </table>
  
</div>

パネルボディなし

tableタグで使うcaptionタグを使うのが正解だと思うんだが・・・

Panel heading

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

実際のソース


<div class="panel panel-default">
  
  <div class="panel-heading">Panel heading</div>
  
  <table class="table">
    <thead>
      <tr>
        <th>#</th>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Username</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">1</th>
        <td>Mark</td>
        <td>Otto</td>
        <td>@mdo</td>
      </tr>
      <tr>
        <th scope="row">2</th>
        <td>Jacob</td>
        <td>Thornton</td>
        <td>@fat</td>
      </tr>
      <tr>
        <th scope="row">3</th>
        <td>Larry</td>
        <td>the Bird</td>
        <td>@twitter</td>
      </tr>
    </tbody>
  </table>
  
</div>

リストグループの組込み

Panel heading

Cras justo odio
Dapibus ac facilisis in
Morbi leo risus
Porta ac consectetur ac
Vestibulum at eros

実際のソース


<div class="panel panel-default">
  
  <div class="panel-heading">Panel heading</div>
  
  <div class="panel-body">
    <p>Some default panel content here. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
  </div>
  
  <ul class="list-group">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Morbi leo risus</li>
    <li class="list-group-item">Porta ac consectetur ac</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
</div>

全部組み込んでみた

Panel title

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

Cras justo odio
Dapibus ac facilisis in
Morbi leo risus
Porta ac consectetur ac
Vestibulum at eros

Panel footer

実際のソース


<div class="panel panel-primary">
  
  <div class="panel-heading">
    <h3 class="panel-title bootstrap">Panel title</h3>
  </div>
  
  <div class="panel-body">
    <p>Some default panel content here. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
  </div>
  
  <table class="table">
    <thead>
      <tr>
        <th>#</th>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Username</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">1</th>
        <td>Mark</td>
        <td>Otto</td>
        <td>@mdo</td>
      </tr>
      <tr>
        <th scope="row">2</th>
        <td>Jacob</td>
        <td>Thornton</td>
        <td>@fat</td>
      </tr>
      <tr>
        <th scope="row">3</th>
        <td>Larry</td>
        <td>the Bird</td>
        <td>@twitter</td>
      </tr>
    </tbody>
  </table>
  
  <ul class="list-group">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Morbi leo risus</li>
    <li class="list-group-item">Porta ac consectetur ac</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
  
  <div class="panel-footer">Panel footer</div>
  
</div>

基本のパネル

ヘッダあり

ヘッダを見出しにする

Panel title

フッタあり

色つき（ヘッダ＋フッタ）

tableタグの組込み

パネルボディなし

リストグループの組込み

全部組み込んでみた

Panel title

関連ページ