テンプレ：空のページ
楽しい時間を提供する空間
「白木屋」は、新しい感覚を取り入れた豊富なメニューと、リーズナブルな価格で創業から多くのお客様に支持され続ける居酒屋です。お酒を提供する場所から楽しい時間を提供する空間へ。温かみのある照明がやわらかさを醸し出す店内は、女性客や家族連れに好評です。味や品質の追求はもちろん、笑顔で食卓を囲むお客様の健康への願いを込め、遺伝子組み換え食材は使用せず、安全な食品の提供に努めています。 有機野菜は安全性ばかりではなく、優れた栄養分をしっかり含んだ野菜です。 土壌有機物や栄養素をいっぱい含んだ健康な土から、野菜のもつ本来の旨味やビタミン、カロチンなどの栄養を還元しています。野菜を通じて結果的に、大地の恵みを得ています。
コンテンツ-フル
全幅.container-fluid / 固定幅.container
<div id="PAGE-NAME" class="pages">
<div class="container-fluid CONTENT-NAME">
<div class="row">
<div class="col-md-12">
☆
</div>
</div>
</div>
</div><!-- /END .pages --> コンテンツ-サイド
<div id="PAGE-NAME" class="pages">
<div class="container-fluid CONTENT-NAME">
<div class="row">
<div class="col-md-10">
メイン
</div>
<div class="col-md-2">
サイド
</div>
</div>
</div>
</div><!-- /END .pages --> 3カラム
<div class="container CONTENT-NAME">
<div class="row">
<div class="col-md-4">☆</div>
<div class="col-md-4">☆</div>
<div class="col-md-4">☆</div>
</div>
</div> ボタン
default primary success info warning danger link <a href="" class="btn btn-default">default</a>
<a href="" class="btn btn-primary">primary</a>
<a href="" class="btn btn-success">success</a>
<a href="" class="btn btn-info">info</a>
<a href="" class="btn btn-warning">warning</a>
<a href="" class="btn btn-danger">danger</a>
<a href="" class="btn btn-link">link</a>
/* 追加CSS */
.btn-success,.btn-success:hover { background-color: green}
.btn-info,.btn-info:hover { background-color: deepskyblue}
.btn-warning,.btn-warning:hover { background-color: orange}
.btn-link,.btn-link:hover { background-color: #FFF; color: #06c; } コンテキスト・カラーContextual colors
text-muted text-primary text-success text-info text-warning text-danger <span class="text-muted">text-muted</span>
<span class="text-primary">text-primary</span>
<span class="text-success">text-success</span>
<span class="text-info">text-info</span>
<span class="text-warning">text-warning</span>
<span class="text-danger">text-danger</span> コンテキスト・背景
bg-primary bg-success bg-info bg-warning bg-danger <span class="bg-primary">bg-primary</span>
<span class="bg-success">bg-success</span>
<span class="bg-info">bg-info</span>
<span class="bg-warning">bg-warning</span>
<span class="bg-danger">bg-danger</span> 画像Images
レスポンシブ
<img src="/dev3/img/main.jpg" class="img-responsive" alt="☆">
画像の形
<img src="/dev3/img/main.jpg" class="img-rounded" alt="☆">
<img src="/dev3/img/main.jpg" class="img-circle" alt="☆">
<img src="/dev3/img/main.jpg" class="img-thumbnail" alt="☆"> フロート・クラスQuick floats
左フロート
右フロート
<div class="pull-left">左フロート</div>
<div class="pull-right">右フロート</div> フロート解除
<div class="clearfix"></div> 背景色グラデショーン
.bgg {background-image: linear-gradient(to top left, [右下]→#f17221, [中央]→#d50b5d, [左上]→#8307b5);}