CSSフレームワーク「Bootstrap 3」の、このテーマのデザインに対応しているパーツのサンプルです。
詳しい利用方法は下記を参照ください。
・http://getbootstrap.com/components/
対応していないパーツのデザインを変更する場合は、テーマファイルの /css/custom.css に追記してください。→ custom.css を追加する方法
.page-header
コンテンツヘッダに利用されています。下のラインにテーマのメインカラーが反映されます。
ページの見出しです添え字です
.btn
default・primary・info・linkが対応しています。
default: ボーダーにテーマのリンクカラーが反映されます。
primary: 背景にテーマのリンクカラーが反映されます。
info: 背景にテーマのメインカラーが反映されます。
link: フォームボタンなどに使用すると、通常のリンクと同じ見た目になります。
.label
default・primary・infoが対応しています。
default: ボーダーにテーマのリンクカラーが反映されます。
primary: 背景にテーマのリンクカラーが反映されます。
info: 背景にテーマのメインカラーが反映されます。
Default Prmary Success Info Warning Danger
.thumbnail


説明文です説明文です説明文です説明文です説明文です説明文です
.alert
フォームに利用されています。テーマのカラー設定は反映されません。別途スタイルを追加してください。
.well
背景色にテーマのサブカラーが反映されます。
吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。
.table
利用できますが、テーマのカラー設定は反映されません。別途スタイルを追加してください。
thead/th | thead/th | thead/th |
---|---|---|
tbody/th | tbody/td | tbody/td |
tbody/th | tbody/td | tbody/td |
tbody/th | tbody/td | tbody/td |
<table class="table">
<caption>下線のみの表</caption>
<thead>
<tr>
<th>thead/th</th>
<th>thead/th</th>
<th>thead/th</th>
</tr>
</thead>
<tbody>
<tr>
<th>tbody/th</th>
<td>tbody/td</td>
<td>tbody/td</td>
</tr>
<tr>
<th>tbody/th</th>
<td>tbody/td</td>
<td>tbody/td</td>
</tr>
<tr>
<th>tbody/th</th>
<td>tbody/td</td>
<td>tbody/td</td>
</tr>
</tbody>
</table>
thead/th | thead/th | thead/th |
---|---|---|
tbody/th | tbody/td | tbody/td |
tbody/th | tbody/td | tbody/td |
tbody/th | tbody/td | tbody/td |
<table class="table table-borderd">
<caption>全体に罫線がある表</caption>
<thead>
<tr>
<th>thead/th</th>
<th>thead/th</th>
<th>thead/th</th>
</tr>
</thead>
<tbody>
<tr>
<th>tbody/th</th>
<td>tbody/td</td>
<td>tbody/td</td>
</tr>
<tr>
<th>tbody/th</th>
<td>tbody/td</td>
<td>tbody/td</td>
</tr>
<tr>
<th>tbody/th</th>
<td>tbody/td</td>
<td>tbody/td</td>
</tr>
</tbody>
</table>
thead/th | thead/th | thead/th |
---|---|---|
tbody/th | tbody/td | tbody/td |
tbody/th | tbody/td | tbody/td |
tbody/th | tbody/td | tbody/td |
<table class="table table-condensed">
<caption>ちょっとスリムな表</caption>
<thead>
<tr>
<th>thead/th</th>
<th>thead/th</th>
<th>thead/th</th>
</tr>
</thead>
<tbody>
<tr>
<th>tbody/th</th>
<td>tbody/td</td>
<td>tbody/td</td>
</tr>
<tr>
<th>tbody/th</th>
<td>tbody/td</td>
<td>tbody/td</td>
</tr>
<tr>
<th>tbody/th</th>
<td>tbody/td</td>
<td>tbody/td</td>
</tr>
</tbody>
</table>
thead/th | thead/th | thead/th |
---|---|---|
tbody/th | tbody/td | tbody/td |
tbody/th | tbody/td | tbody/td |
tbody/th | tbody/td | tbody/td |
<table class="table table-responsive">
<caption>レスポンシブ対応の表</caption>
<thead>
<tr>
<th>thead/th</th>
<th>thead/th</th>
<th>thead/th</th>
</tr>
</thead>
<tbody>
<tr>
<th>tbody/th</th>
<td>tbody/td</td>
<td>tbody/td</td>
</tr>
<tr>
<th>tbody/th</th>
<td>tbody/td</td>
<td>tbody/td</td>
</tr>
<tr>
<th>tbody/th</th>
<td>tbody/td</td>
<td>tbody/td</td>
</tr>
</tbody>
</table>