サンプルページ

このphpは見出しやcomponentの見本を掲載しています。
完成したらその都度削除したほうがいいかもしれません。

見出し ボタン テーブル リスト タブ アコーディオン

1. 見出し

h2

h2 .headline-bg

h2 .headline-underline

h3

h3 .headline-bg

h3 .headline-underline

h4

h4 .headline-bg

h4 .headline-underline

h5
h5 .headline-bg
h5 .headline-underline
h6
h6 .headline-bg
h6 .headline-underline

2. ボタン

default、outline
アイコンを変えたもの（内部リンク、外部リンク、ファイル形式）

ボタンリンク（class="btn btn-default"）

外部リンクの場合（class="btn btn-default"）

pdfリンクの場合（class="btn btn-default"）

innerリンク（class="btn btn-default"）

ボタンリンク（class="btn btn-outline-default"）

外部リンクの場合（class="btn btn-outline-default"）

pdfンクの場合（class="btn btn-outline-default"）

innerリンク（class="btn btn-outline-default"）

ボタン小さめ
（class="btn btn-default btn-sm"）

3. テーブル

table class="table"

Header 1 Data 1
Header 2 Data 2
Header 3 Data 3

table class="table table-lg"(タテ幅広め)

Header 1 Data 1
Header 2 Data 2
Header 3 Data 3

table class="table no-responsive"

Header 1 Data 1
Header 2 Data 2
Header 3 Data 3

table class="table table-bordered"

Header 1 Data 1
Header 2 Data 2
Header 3 Data 3

table class="table table-bordered table-color"

Header 1 Data 1
Header 2 Data 2
Header 3 Data 3

table class="table table-bordered" thead

thead Header 1 thead Data 1
Header 1 Data 1
Header 2 Data 2
Header 3 Data 3

table class="table table-top-header"

Header 1 Header 2 Header 3
Data 1 Data 2 Data 3

table class="table table-has-total"

Header 1 Data 1 Data 1
Header 2 Data 2 Data 2
Header 3 Data 3 Data 3

table class="table table-two-header"

※thead左上のすきまは空タグに反応するようになっているから、thead内左上以外は空タグにしないでね。

Header 2 Header 3 Header 4
Header 1 Data 1 Data 1 Data 1
Header 2 Data 2 Data 2 Data 2
Header 3 Data 3 Data 3 Data 3

4. リスト

  • ul class="dot"
  • 丸
  • ul class="sq"
  • 四角
  1. ol
  2. 丸番号
  1. ol class="sq-num"
  2. 四角番号

5. タブ

ul class="nav nav-default nav-pills"

ul class="nav nav-default nav-pills"

これは、ホームタブに関連付けられたコンテンツのプレースホルダコンテンツ。...

これは、プロフィールタブに関連付けられたコンテンツのプレースホルダコンテンツ。...

これは、コンタクトタブに関連付けられたコンテンツのプレースホルダコンテンツ。...

これは、無効タブの関連コンテンツの一部のプレースホルダーコンテンツ。

ul class="nav nav-default nav-pills nav-btn"

ul class="nav nav-default nav-pills nav-btn"

これは、ホームタブに関連付けられたコンテンツのプレースホルダコンテンツ。...

これは、プロフィールタブに関連付けられたコンテンツのプレースホルダコンテンツ。...

これは、コンタクトタブに関連付けられたコンテンツのプレースホルダコンテンツ。...

これは、無効タブの関連コンテンツの一部のプレースホルダーコンテンツ。

ul class="nav nav-default nav-tabs"

ul class="nav nav-default nav-tabs"

これは、ホームタブに関連付けられたコンテンツのプレースホルダコンテンツ。...

これは、プロフィールタブに関連付けられたコンテンツのプレースホルダコンテンツ。...

これは、コンタクトタブに関連付けられたコンテンツのプレースホルダコンテンツ。...

これは、無効タブの関連コンテンツの一部のプレースホルダーコンテンツ。

6. アコーディオン

背景色 div class="accordion accordion-bg"

これが最初のアイテムのアコーディオン本体。...

これは2番目のアイテムのアコーディオン本体。...

これは3番目のアイテムのアコーディオン本体。...

下線 div class="accordion accordion-line"

これが最初のアイテムのアコーディオン本体。...

これは2番目のアイテムのアコーディオン本体。...

これは3番目のアイテムのアコーディオン本体。...