Spectre.css
Spectre.css は Yan Zhu が開発したCSSフレームワークです。このページも Spectre.css を使っています。
Spectre.css v0.5.9
モジュール サイズ
spectre.min.css
45.5KB
spectre-exp.min.css
23.1KB
spectre-icons.min.css
8.64KB
CDN
CDN (Contents Delivery Network) を通じて Sprectre.css を利用する HTML の基本テンプレートを次に示す。
<!DOCTYPE html>
<html >
<head >
<link rel="stylesheet" href="https://unpkg.com/spectre.css/dist/spectre.min.css">
<link rel="stylesheet" href="https://unpkg.com/spectre.css/dist/spectre-exp.min.css">
<link rel="stylesheet" href="https://unpkg.com/spectre.css/dist/spectre-icons.min.css">
</head>
<body >
<!-- content -->
</body>
</html>.bg-primary
Spectre.cssで背景色を優先色にするには、bg-primary クラスを指定する。
<p class="bg-primary">Primary</p>Primary
.bg-secondary
Spectre.cssで背景色を劣後色にするには、bg-secondary クラスを指定する。
<p class="bg-secondary">Secondary</p>Secondary
.bg-dark
Spectre.cssで背景色を暗くするには、bg-dark クラスを指定する。
<p class="bg-dark">Dark</p>Dark
.bg-gray
Spectre.cssで背景色を灰色にするには、bg-gray クラスを指定する。
<p class="bg-gray">Gray</p>Gray
.bg-success
Spectre.cssで背景色を成功色にするには、bg-success クラスを指定する。
<p class="bg-success">Success</p>Success
.bg-warning
Spectre.cssで背景色を警告色にするには、bg-warning クラスを指定する。
<p class="bg-warning">Warning</p>Warning
.bg-error
Spectre.cssで背景色をエラー色にするには、bg-error クラスを指定する。
<p class="bg-error">Error</p>Error
.badge
Spectre.css を使ってバッジを作成するには、badge クラスを指定する。
<span class="badge">Badge</span>Badge
data-badge
Spectre.css を使ってバッジを作成するには、badge クラスを指定したうえ、data-badge 属性を指定する。
<span class="badge" data-badge="1">Badge</span>Badge
.btn
Spectre.css を使ってボタン型バッジを作成するには、btn クラスと badge クラスを指定する。
<span class="btn badge">Badge</span>Badge
.avatar
Spectre.css を使ってアバター型バッジを作成するには、avatar クラスと badge クラスを指定する。
<figure class="avatar badge" data-initial="tsuka">
<img src="avatar.jpg" alt="tsuka">
</figure>
.avatar-lg
Spectre.css を使って大きいアバター型バッジを作成するには、avatar、avatar-lg および badge クラスを指定する。
<figure class="avatar avatar-lg badge" data-initial="tsuka">
<img src="avatar.jpg" alt="tsuka">
</figure>
Spectre.css を使って非常に大きいアバター型バッジを作成するには、avatar、avatar-xl および badge クラスを指定する。
<figure class="avatar avatar-xl badge" data-initial="tsuka">
<img src="avatar.jpg" alt="tsuka">
</figure>
.breadcrumb
Spectre.css を使ってパンくずリストを作成するには、リストに breadcrumb クラスを指定する。リスト項目には breadcrumb-item クラスを指定する。
<ul class="breadcrumb">
<li class="breadcrumb-item">
<a href="/">Home</a>
</li>
<li class="breadcrumb-item">
<a href="/css/">CSS</a>
</li>
<li class="breadcrumb-item">
<a href="#">Spectre.css</a>
</li>
</ul>.btn
<button class="btn">Button</button>Button
.btn-primary
<button class="btn btn-primary">Button</button>Button
.btn-success
<button class="btn btn-success">Button</button>Button
.btn-error
<button class="btn btn-error">Button</button>Button
.btn-link
<button class="btn btn-link">Link</button>Link
.btn-sm
<button class="btn btn-sm">Button</button>Button
.btn-lg
<button class="btn btn-lg">Button</button>Button
.btn-block
<button class="btn btn-block">Button</button>Button
.btn-action
<button class="btn btn-action">
<i class="icon icon-menu"></i>
</button>
.s-circle
<button class="btn btn-action s-circle">
<i class="icon icon-arrow-up"></i>
</button>
.loading
<button class="btn loading">Button</button>Button
.text-primary
<span class="text-primary">Primary</span>Primary
.text-secondary
<span class="text-secondary">Secondary</span>Secondary
.text-dark
<span class="text-dark">Dark</span>Dark
.text-gray
<span class="text-gray">Gray</span>Gray
.text-light
<p class="text-light bg-dark">Light</p>Light
.text-success
<span class="text-success">Success</span>Success
.text-warning
<span class="text-warning">Warning</span>Warning
.text-error
<span class="text-error">Error</span>Error
.container
Spectre.css を使ってコンテナを作成するには、container クラス及び最大幅を指定するクラスを指定する。最大幅を指定するクラスの一覧を以下に示す。
最大幅を指定するクラス
クラス
説明
grid-xs
480px
grid-sm
600px
grid-md
840px
grid-lg
960px
grid-xl
1280px
コンテナの最大幅を 480px に制限する例を以下に示す。
<div class="container grid-xs">
Dorothy lived in the midst of the great Kansas prairies, with Uncle Henry, who was a farmer, and Aunt Em, who
was the famer's wife. There were four walls, a floor and a roof, which made one room; and this room contained
a rusty looking cokking stove, a cupboard for the dished, a table, three or four chairs, and the beds.
</div>
Dorothy lived in the midst of the great Kansas prairies, with Uncle Henry, who was a farmer, and Aunt Em, who was the famer's wife. There were four walls, a floor and a roof, which made one room; and this room contained a rusty looking cokking stove, a cupboard for the dished, a table, three or four chairs, and the beds.
コンテナの最大幅を 600px に制限する例を以下に示す。
<div class="container grid-sm">
Dorothy lived in the midst of the great Kansas prairies, with Uncle Henry, who was a farmer, and Aunt Em, who
was the famer's wife. There were four walls, a floor and a roof, which made one room; and this room contained
a rusty looking cokking stove, a cupboard for the dished, a table, three or four chairs, and the beds.
</div>
Dorothy lived in the midst of the great Kansas prairies, with Uncle Henry, who was a farmer, and Aunt Em, who was the famer's wife. There were four walls, a floor and a roof, which made one room; and this room contained a rusty looking cokking stove, a cupboard for the dished, a table, three or four chairs, and the beds.
コンテナの最大幅を 840px に制限する例を以下に示す。
<div class="container grid-md">
Dorothy lived in the midst of the great Kansas prairies, with Uncle Henry, who was a farmer, and Aunt Em, who
was the famer's wife. There were four walls, a floor and a roof, which made one room; and this room contained
a rusty looking cokking stove, a cupboard for the dished, a table, three or four chairs, and the beds.
</div>
Dorothy lived in the midst of the great Kansas prairies, with Uncle Henry, who was a farmer, and Aunt Em, who was the famer's wife. There were four walls, a floor and a roof, which made one room; and this room contained a rusty looking cokking stove, a cupboard for the dished, a table, three or four chairs, and the beds.
コンテナの最大幅を 960px に制限する例を以下に示す。
<div class="container grid-lg">
Dorothy lived in the midst of the great Kansas prairies, with Uncle Henry, who was a farmer, and Aunt Em, who
was the famer's wife. There were four walls, a floor and a roof, which made one room; and this room contained
a rusty looking cokking stove, a cupboard for the dished, a table, three or four chairs, and the beds.
</div>
Dorothy lived in the midst of the great Kansas prairies, with Uncle Henry, who was a farmer, and Aunt Em, who was the famer's wife. There were four walls, a floor and a roof, which made one room; and this room contained a rusty looking cokking stove, a cupboard for the dished, a table, three or four chairs, and the beds.
コンテナの最大幅を 1280px に制限する例を以下に示す。
<div class="container grid-xl">
Dorothy lived in the midst of the great Kansas prairies, with Uncle Henry, who was a farmer, and Aunt Em, who
was the famer's wife. There were four walls, a floor and a roof, which made one room; and this room contained
a rusty looking cokking stove, a cupboard for the dished, a table, three or four chairs, and the beds.
</div>
Dorothy lived in the midst of the great Kansas prairies, with Uncle Henry, who was a farmer, and Aunt Em, who was the famer's wife. There were four walls, a floor and a roof, which made one room; and this room contained a rusty looking cokking stove, a cupboard for the dished, a table, three or four chairs, and the beds.
Spectre.css フレームワークを使ってフォームを作成するには、form 要素に form-group クラスを指定する。
<div class="form-group">
<label class="form-label" for="fn">Given name</label>
<input class="form-input" type="text" name="first_name" id="fn">
<label class="form-label" for="ln">Family name</label>
<input class="form-input" type="text" name="last_name" id="ln">
</div>
Given name
Family name
Spectre.css フレームワークを使ってフォームの入力フィールドを作成するには、input 要素に form-input クラスを指定する。
<div class="form-group">
<label class="form-label" for="id">ID</label>
<input class="form-input" type="text" id="id" placeholder="ID">
</div>
ID
Spectre.css フレームワークを使ってフォームのラベルを作成するには、label 要素に form-label クラスを指定する。
<div class="form-group">
<label class="form-label" for="em">Email</label>
<input class="form-input" type="mail" name="mail" id="em">
</div>
Email
<div class="form-group">
<label class="form-checkbox">
<input type="checkbox">
<i class="form-icon"></i> Check
</label>
</div>
.col-1
Spectre.cssでは列の幅を12分割したグリッド・レイアウト・システムを採用している。列の幅を1/12にするには、col-1 クラスを指定する。
<div class ="columns" >
<div class ="column col-1" >#1</div >
<div class ="column col-1" >#2</div >
<div class ="column col-1" >#3</div >
<div class ="column col-1" >#4</div >
<div class ="column col-1" >#5</div >
<div class ="column col-1" >#6</div >
<div class ="column col-1" >#7</div >
<div class ="column col-1" >#8</div >
<div class ="column col-1" >#9</div >
<div class ="column col-1" >#10</div >
<div class ="column col-1" >#11</div >
<div class ="column col-1" >#12</div >
</div >
#1
#2
#3
#4
#5
#6
#7
#8
#9
#10
#11
#12
.col-2
Spectre.cssでは列の幅を12分割したグリッド・レイアウト・システムを採用している。列の幅を2/12にするには、col-2 クラスを指定する。
<div class ="columns" >
<div class ="column col-2" >#1</div >
<div class ="column col-2" >#2</div >
<div class ="column col-2" >#3</div >
<div class ="column col-2" >#4</div >
<div class ="column col-2" >#5</div >
<div class ="column col-2" >#6</div >
</div >.col-3
Spectre.cssでは列の幅を12分割したグリッド・レイアウト・システムを採用している。列の幅を3/12にするには、col-3 クラスを指定する。
<div class ="columns" >
<div class ="column col-3" >#1</div >
<div class ="column col-3" >#2</div >
<div class ="column col-3" >#3</div >
<div class ="column col-3" >#4</div >
</div >.col-4
Spectre.cssでは列の幅を12分割したグリッド・レイアウト・システムを採用している。列の幅を4/12にするには、col-4 クラスを指定する。
<div class ="columns" >
<div class ="column col-4" >#1</div >
<div class ="column col-4" >#2</div >
<div class ="column col-4" >#3</div >
</div >.col-5
Spectre.cssでは列の幅を12分割したグリッド・レイアウト・システムを採用している。列の幅を5/12にするには、col-5 クラスを指定する。
<div class ="columns" >
<div class ="column col-5" >#1</div >
<div class ="column col-7" >#2</div >
</div >.col-6
Spectre.cssでは列の幅を12分割したグリッド・レイアウト・システムを採用している。列の幅を6/12にするには、col-6 クラスを指定する。
<div class ="columns" >
<div class ="column col-6" >#1</div >
<div class ="column col-6" >#2</div >
</div >.col-7
Spectre.cssでは列の幅を12分割したグリッド・レイアウト・システムを採用している。列の幅を7/12にするには、col-7 クラスを指定する。
<div class ="columns" >
<div class ="column col-7" >#1</div >
<div class ="column col-5" >#2</div >
</div >.col-8
Spectre.cssでは列の幅を12分割したグリッド・レイアウト・システムを採用している。列の幅を8/12にするには、col-8 クラスを指定する。
<div class ="columns" >
<div class ="column col-8" >#1</div >
<div class ="column col-4" >#2</div >
</div >.col-9
Spectre.cssでは列の幅を12分割したグリッド・レイアウト・システムを採用している。列の幅を9/12にするには、col-9 クラスを指定する。
<div class ="columns" >
<div class ="column col-9" >#1</div >
<div class ="column col-3" >#2</div >
</div >.col-10
Spectre.cssでは列の幅を12分割したグリッド・レイアウト・システムを採用している。列の幅を10/12にするには、col-10 クラスを指定する。
<div class ="columns" >
<div class ="column col-10" >#1</div >
<div class ="column col-2" >#2</div >
</div >.col-11
Spectre.cssでは列の幅を12分割したグリッド・レイアウト・システムを採用している。列の幅を11/12にするには、col-11 クラスを指定する。
<div class ="columns" >
<div class ="column col-11" >#1</div >
<div class ="column col-1" >#2</div >
</div >.col-12
Spectre.cssでは列の幅を12分割したグリッド・レイアウト・システムを採用している。列の幅を12/12にするには、col-12 クラスを指定する。
<div class="columns">
<div class="column col-12">#1</div>
</div>.col-xs-*
col-xs-* クラスはウィンドウ幅が480px以下の場合に適用される。
Spectre.cssのレスポンシブ・グリッドはモバイル・ファーストではない。デフォルトのレイアウトは大きい画面用で、モバイル用のレイアウトは別途指定する。
<div class="columns">
<div class="column col-6 col-xs-12">#1</div>
<div class="column col-6 col-xs-12">#2</div>
</div>.col-sm-*
col-sm-* クラスはウィンドウ幅が600px以下の場合に適用される。
Spectre.cssのレスポンシブ・グリッドはモバイル・ファーストではない。デフォルトのレイアウトは大きい画面用で、モバイル用のレイアウトは別途指定する。
<div class="columns">
<div class="column col-6 col-sm-12">#1</div>
<div class="column col-6 col-sm-12">#2</div>
</div>.col-md-*
col-md-* クラスはウィンドウ幅が840px以下の場合に適用される。
<div class="columns">
<div class="column col-6 col-md-12">#1</div>
<div class="column col-6 col-md-12">#2</div>
</div>.col-lg-*
col-lg-* クラスはウィンドウ幅が960px以下の場合に適用される。
<div class="columns">
<div class="column col-6 col-lg-12">#1</div>
<div class="column col-6 col-lg-12">#2</div>
</div>.col-xl-*
col-xl-* クラスはウィンドウ幅が1280px以下の場合に適用される。
<div class="columns">
<div class="column col-6 col-xl-12">#1</div>
<div class="column col-6 col-xl-12">#2</div>
</div>.hero
<div class="hero bg-primary">
<div class="hero-body">
<h1>Title</h1>
<p>This is a hero example</p>
</div>
</div>
Title
This is a hero example
.icon
Spectre.cssはアイコン を提供している。
アイコンを使用するには、spectre-icons.min.css をインクルードする。
<link rel="stylesheet" href="https://unpkg.com/spectre.css/dist/spectre-icons.min.css"><i class="icon icon-mail"></i>
.icon-2x
<i class="icon icon-2x icon-mail"></i>
.icon-3x
<i class="icon icon-3x icon-mail"></i>
.icon-4x
<i class="icon icon-4x icon-mail"></i>
.label
Spectre.cssでラベルを作成するには、span 要素にlabelクラスを指定する。
<span class="label">default</span>default
.label-primary
Spectre.cssで重要なラベルを作成するには、labelクラスに加えてlabel-successクラスを指定する。
<span class="label label-primary">primary</span>primary
.label-secondary
Spectre.cssで重要でないラベルを作成するには、labelクラスに加えてlabel-successクラスを指定する。
<span class="label label-secondary">secondary</span>secondary
.label-success
Spectre.cssで成功を意味するラベルを作成するには、labelクラスに加えてlabel-successクラスを指定する。
<span class="label label-success">success</span>success
.label-warning
Spectre.cssで警告を意味するラベルを作成するには、labelクラスに加えてlabel-warningクラスを指定する。
<span class="label label-warning">warning</span>warning
.label-error
Spectre.cssでエラーを意味するラベルを作成するには、labelクラスに加えてlabel-errorクラスを指定する。
<span class="label label-error">error</span>error
.label-rounded
Spectre.cssでラベルの形状を角丸にするには、labelクラスに加えてlabel-roundedクラスを指定する。
<span class="label label-rounded">default</span>
<span class="label label-primary label-rounded">primary</span>
default
primary
.m-1
Specre.cssではマージン を m-1 から m-2 までの2段階で指定できる。
<div class="m-1">m-1</div>m-1
.m-2
Specre.cssではマージン を m-1 から m-2 までの2段階で指定できる。
<div class="m-2">m-2</div>m-2
.mt-1
Specre.cssでは上側のマージンを mt-1 から mt-2 までの2段階で指定できる。
<div class="mt-2">mt-2</div>mt-1
.mt-2
Specre.cssでは上側のマージンを mt-1 から mt-2 までの2段階で指定できる。
<div class="mt-2">mt-2</div>mt-2
.mx-1
Specre.cssでは左右のマージンを mx-1 から mx-2 までの2段階で指定できる。
<div class="mx-1">mx-1</div>mx-1
.mx-2
Specre.cssでは左右のマージンを mx-1 から mx-2 までの2段階で指定できる。
<div class="mx-2">mx-2</div>mx-2
.my-1
Specre.cssでは上下のマージンを my-1 から my-2 までの2段階で指定できる。
<div class="my-1">my-1</div>my-1
.my-2
Specre.cssでは上下のマージンを my-1 から my-2 までの2段階で指定できる。
<div class="my-2">my-2</div>.dropdown
Spectre.css を使ってドロップダウンメニューを作成するには、dropdown クラスを指定する。
<div class="dropdown">
<a href="#" class="btn btn-link dropdown-toggle" tabindex="0">
Framework <i class="icon icon-caret"></i>
</a>
<ul class="menu">
<li>
<a href="/css/bootstrap/">Bootstrap</a>
</li>
<li>
<a href="/css/bulma/">Bulma</a>
</li>
</ul>
</div>Spectre.css を使ってボタングループ付ドロップダウンメニューを作成する。
<div class="dropdown">
<div class="btn-group">
<a href="#" class="btn">Framework</a>
<a href="#" class="btn dropdown-toggle" tabindex="0">
<i class="icon icon-caret"></i>
</a>
<ul class="menu">
<li>
<a href="/css/materialize/">Materialize</a>
</li>
<li>
<a href="/css/milligram/">Milligram</a>
</li>
</ul>
</div>
</div>.p-1
Specre.cssではパディング を p-1 から p-2 までの2段階で指定できる。
<div class="p-1">p-1</div>p-1
.p-2
Specre.cssではパディング を p-1 から p-2 までの2段階で指定できる。
<div class="p-2">p-2</div>p-2
.pt-1
Specre.cssでは上側のパディングを pt-1 から pt-2 までの2段階で指定できる。
<div class="pt-1">pt-1</div>pt-1
.pt-2
Specre.cssでは上側のパディングを pt-1 から pt-2 までの2段階で指定できる。
<div class="pt-2">pt-2</div>pt-2
.px-1
Specre.cssでは左右のパディングを px-1 から px-2 までの2段階で指定できる。
<div class="px-1">px-1</div>px-1
.px-2
Specre.cssでは左右のパディングを px-1 から px-2 までの2段階で指定できる。
<div class="px-2">px-2</div>px-2
.py-1
<div class="py-1">py-1</div>py-1
.py-2
<div class="py-2">py-2</div>py-2
.table
Spectre.cssを使って表をスタイリングするには、<table> タブに table クラスを指定する。
<table class="table">
<caption>ブレークポイント</caption>
<thead>
<tr>
<th>ブレークポイント</th>
<th>接中辞</th>
<th>寸法</th>
</tr>
</thead>
<tbody>
<tr>
<td>extra small</td>
<td>xs</td>
<td>≤480px</td>
</tr>
<tr>
<td>small</td>
<td>sm</td>
<td>≤600px</td>
</tr>
<tr>
<td>medium</td>
<td>md</td>
<td>≤840px</td>
</tr>
<tr>
<td>large</td>
<td>lg</td>
<td>≤960px</td>
</tr>
<tr class="active">
<td>extra large</td>
<td>xl</td>
<td>≤1280px</td>
</tr>
</tbody>
</table>
ブレークポイント
ブレークポイント
接中辞
寸法
extra small
xs
≤480px
small
sm
≤600px
medium
md
≤840px
large
lg
≤960px
extra large
xl
≤1280px
.table-striped
<table class="table table-striped">
Table classes
Class
Description
table
テーブルの基本クラス
table-striped
1行ごとに色を変える修飾クラス
table-hover
マウスカーソルを乗せた行の色を変える修飾クラス
table-scroll
スクロール可能にする修飾クラス
active
アクティブな行にする修飾クラス
幅の広い表を横スクロール可能にするには、table-scroll クラスを指定する。
<table class="table table-scroll">
<tbody>
<tr class="active">.text-left
Spectre.cssを使ってテキストを左寄せにするには、text-left クラスを指定する。
<p class="text-left">
The quick brown fox jumps over the lazy dog.
</p>The quick brown fox jumps over the lazy dog.
.text-center
Spectre.cssを使ってテキストを中央揃えにするには、text-center クラスを指定する。
<p class="text-center">
The quick brown fox jumps over the lazy dog.
</p>The quick brown fox jumps over the lazy dog.
.text-right
Spectre.cssを使ってテキストを右寄せにするには、text-right クラスを指定する。
<p class="text-right">
The quick brown fox jumps over the lazy dog.
</p>The quick brown fox jumps over the lazy dog.
.text-justify
Spectre.cssを使ってテキストを両端揃えにするには、text-justify クラスを指定する。両端揃えとは英文で一般的なテキストの揃え方で、両端を揃えるために単語間の空白が自動的に調整される。そのため、単語の間隔が半角１文字分ではなくなる。
<p class="text-justify">
He was an old man who fished alone in a skiff in the Gulf Stream and he had gone eighty-four days now without taking a fish.
In the first forty days a boy had been with him.
But after forty days without a fish the boy's parents had told him that the old man was now definitely and finally <i>salao</i>,
which is the worst form of unlucky, and the boy had gone at their orders in another boat which caught three good fish the first week.
</p>
He was an old man who fished alone in a skiff in the Gulf Stream and he had gone eighty-four days now without taking a fish.
In the first forty days a boy had been with him.
But after forty days without a fish the boy's parents had told him that the old man was now definitely and finally salao ,
which is the worst form of unlucky, and the boy had gone at their orders in another boat which caught three good fish the first week.
.text-bold
Spectre.cssでテキストを太字にするには、text-bold クラスを指定する。
<p class="text-bold">
The quick brown fox jumps over the lazy dog.
</p>The quick brown fox jumps over the lazy dog.
.text-italic
Spectre.cssでテキストをイタリック（斜体）にするには、text-italic クラスを指定する。
<p class="text-italic">
The quick brown fox jumps over the lazy dog.
</p>The quick brown fox jumps over the lazy dog.
.text-muted
<p class="text-muted">
The quick brown fox jumps over the lazy dog.
</p>The quick brown fox jumps over the lazy dog.
.text-large
Spectre.cssでテキストのサイズを大きくするには、text-large クラスを指定する。
<p class="text-large">
The quick brown fox jumps over the lazy dog.
</p>The quick brown fox jumps over the lazy dog.
.text-small
Spectre.cssでテキストのサイズを小さくするには、text-small クラスを指定する。
<p class="text-small">
The quick brown fox jumps over the lazy dog.
</p>The quick brown fox jumps over the lazy dog.
.text-tiny
Spectre.cssでテキストのサイズを極小にするには、text-tiny クラスを指定する。
<p class="text-tiny">
The quick brown fox jumps over the lazy dog.
</p>The quick brown fox jumps over the lazy dog.
<div class="form-group">
<label class="form-label" for="ta">Message</label>
<textarea class="form-input" id="ta" placeholder="Textarea" rows="3"></textarea>
</div>
Message
<div class="modal active" id="modal-id">
<div class="modal-container">
<div class="modal-header"">
Modal
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
Footer
</div>
</div>
</div>
<div class="modal modal-sm" id="modal-id">
<div class="modal-container">
<div class="modal-header"">
Small modal
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
Footer
</div>
</div>
</div>
<div class="modal modal-lg" id="modal-id">
<div class="modal-container">
<div class="modal-header"">
Large modal
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
Footer
</div>
</div>
</div>
<table class="table table-hover">
<tbody>
<tr class="active">
Table classes
Class
Description
table
テーブルの基本クラス
table-striped
1行ごとに色を変える修飾クラス
table-hover
マウスカーソルを乗せた行の色を変える修飾クラス
table-scroll
スクロール可能にする修飾クラス
active
アクティブな行にする修飾クラス
<table class="table">
<tbody>
<tr class="active">
Table classes
Class
Description
table
テーブルの基本クラス
table-striped
1行ごとに色を変える修飾クラス
table-hover
マウスカーソルを乗せた行の色を変える修飾クラス
table-scroll
スクロール可能にする修飾クラス
active
アクティブな行にする修飾クラス
