CSSフレームワーク「Bootstrap 3」の、このテーマのデザインに対応しているパーツのサンプルです。
詳しい利用方法は下記を参照ください。

・http://getbootstrap.com/css/

・http://getbootstrap.com/components/

対応していないパーツのデザインを変更する場合は、テーマファイルの /css/custom.css に追記してください。→ custom.css を追加する方法

.page-header

コンテンツヘッダに利用されています。下のラインにテーマのメインカラーが反映されます。

<div class="page-header"> <h1>ページの見出しです<small>添え字です</small></h1> </div>

.btn

default・primary・info・linkが対応しています。

default: ボーダーにテーマのリンクカラーが反映されます。
primary: 背景にテーマのリンクカラーが反映されます。
info: 背景にテーマのメインカラーが反映されます。
link: フォームボタンなどに使用すると、通常のリンクと同じ見た目になります。

Default　Primary 　Success 　Info
Warning 　Danger 　Link

Default　Primary 　Success 　Info 　Warning 　Danger 　Link

Default　Primary 　Success 　Info 　Warning 　Danger 　Link

<p><button class="btn btn-lg btn-default" type="button">Default</button> 　<button class="btn btn-lg btn-primary" type="button">Primary</button> 　<button class="btn btn-lg btn-success" type="button">Success</button> 　<button class="btn btn-lg btn-info" type="button">Info</button><br> <button class="btn btn-lg btn-warning" type="button">Warning</button> 　<button class="btn btn-lg btn-danger" type="button">Danger</button> 　<button class="btn btn-lg btn-link" type="button">Link</button></p> <p><button class="btn btn-default" type="button">Default</button> 　<button class="btn btn-primary" type="button">Primary</button> 　<button class="btn btn-success" type="button">Success</button> 　<button class="btn btn-info" type="button">Info</button> 　<button class="btn btn-warning" type="button">Warning</button> 　<button class="btn btn-danger" type="button">Danger</button> 　<button class="btn btn-link" type="button">Link</button></p> <p><button class="btn btn-sm btn-default" type="button">Default</button> 　<button class="btn btn-sm btn-primary" type="button">Primary</button> 　<button class="btn btn-sm btn-success" type="button">Success</button> 　<button class="btn btn-sm btn-info" type="button">Info</button> 　<button class="btn btn-sm btn-warning" type="button">Warning</button> 　<button class="btn btn-sm btn-danger" type="button">Danger</button> 　<button class="btn btn-sm btn-link" type="button">Link</button></p>

.label

default・primary・infoが対応しています。

default: ボーダーにテーマのリンクカラーが反映されます。
primary: 背景にテーマのリンクカラーが反映されます。
info: 背景にテーマのメインカラーが反映されます。

Default 　Prmary 　Success 　Info 　Warning 　Danger

<p> <span class="label label-default">Default</span> 　<span class="label label-primary">Prmary</span> 　<span class="label label-success">Success</span> 　<span class="label label-info">Info</span> 　<span class="label label-warning">Warning</span> 　<span class="label label-danger">Danger</span> </p>

.thumbnail

<img class="thumbnail img-responsive" src="画像のURL" />

<div class="thumbnail"> <img class="img-responsive" src="画像のURL" /> <div class="caption"> <p class="mb0">説明文です説明文です説明文です説明文です説明文です説明文です</p> </div> </div>

.alert

フォームに利用されています。テーマのカラー設定は反映されません。別途スタイルを追加してください。

<div class="alert alert-success"><strong>Well done!</strong> You successfully read this important alert message.</div> <div class="alert alert-info"><strong>Heads up!</strong> This alert needs your attention, but it's not super important.</div> <div class="alert alert-warning"><strong>Warning!</strong> Best check yo self, you're not looking too good.</div> <div class="alert alert-danger"><strong>Oh snap!</strong> Change a few things up and try submitting again.</div>

.well

背景色にテーマのサブカラーが反映されます。

<div class="well"> <p>吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。</p> </div>

.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>

 
 

カスタマイズ方法一覧  >