Bootstrapで作るとこのように表示される
（スマホでの画面）
（パソコンでの画面）
Bootstrapのナビゲーションは、パソコンで見ると上図の紺のバーように表示され、スマホになると左図の紺のバーのように表示されます。
このサイトでは、4種類のナビゲーションサンプルが用意されていますが、どれを採用しても同じように表示されます。
これによって、一つのHTMLを作れば、パソコンからスマホまでカバーされることになります。（ナビゲーションの下の画像も、img-responsive 指定で、画面サイズによって、画像サイズも変化します）
コンテナ
最初に、固定幅で作るか、全幅で作るか決めます。
ページトップのナビゲーションバー、タイトルは、全幅になります。ソースは、
<div class="container-fulid">〜</div>
ここのように、左右に余白があるのは、固定幅になります。ソースは、
<div class="container">〜</div>
グリッドシステム
見ている人の画面サイズによって区分けするサイズと指定方法
| 画面サイズ | prefixの意味 | prefixの指定方法（*は数値） |
| モバイル（768px以下） | xs=エクストラスモール | col-xs-* |
| タブレット（768px以上、992px未満） | sm=スモール | col-sm-* |
| デスクトップ（992px以上、1200px未満） | md=ミディアム | col-md-* |
| デスクトップ（1200px以上） | lg=ラージ | col-lg-* |
【使用例】
<div class="row"><div class="col-sm-8">
コンテンツ
</div>
<div class="col-sm-4">
サイドバー
</div>
</div>
【解説】
2段組みのレイアウトは、このように書きます。
<div class="row">で全体を囲みます。（<div class="container">でも可）
12グリッドのうち、左側コンテンツに8グリッド、右側サイドバーに4グリッドを割り当てます。
sm（スモール）までは、左右に配置され、xs（エクストラスモール）になると上下に表示されます。
モバイル、タブレット、デスクトップごとに表示を変えるときは、そのように指定します。
<div class="col-xs-12 col-sm-6 col-md-4">
xsのときは、1行に1つ。smのときは、1行に2つ。md以上は、1行に３つ表示します。
カラムのサンプルソース （別ウィンドウ）
ボタン
<a href="#" class="btn btn-default">Button</a>
<a href="#" class="btn btn-primary">Button</a>
<a href="#" class="btn btn-success">Button</a>
<a href="#" class="btn btn-info">Button</a>
<a href="#" class="btn btn-warning">Button</a>
<a href="#" class="btn btn-danger">Button</a>
ボタンを配置するには、上記6色が用意されています。そのままソースをコピーすれば利用できます。
Dropdown ボタン
Dropdown Button Source 右クリックでコピーできます。
各種ボタンのサンプルは、こちら。
フォント
日本語 English h1=24px
日本語 English h2=20px
日本語 English h3=18px
日本語 English h4=16px
日本語 English h5=13px
日本語 English h6=12px
見出しのフォントサイズは、このようになっています。本文<p>のフォントサイズは、14pxです。
【カラーの文字】
<p class="text-danger">赤字</p> <p class="text-primary">青字</p> <p class="text-success">緑字</p>
画像
<img src="***.jpg" width="***" height="***"> これが画像配置のソースですが、見ている画面のサイズによって画像サイズを変えるには、
<img src="***.jpg" class="img-responsive"> とします。
Image Shapes
 |
|
|
| <img src="..." alt="..." class="img-rounded"> | <img src="..." alt="..." class="img-circle"> | <img src="..." alt="..." class="img-thumbnail"> |
Thumbnails
Thumbnails Source 右クリックでコピーできます。
カルーセルのソースは Carousel Source （別ウィンドウ）
止まる背景画像のソースは 止まる背景画像 Source （別ウィンドウ）
テーブル
基本形
| Column content | Column content | Column content |
| Column content | Column content | Column content |
| Column content | Column content | Column content |
| Column content | Column content | Column content |
<table class="table"> （最初の「table」タグをこのように書きます）
ストライプ柄
| class="table table-striped" | Column content | Column content |
| Column content | Column content | Column content |
| Column content | Column content | Column content |
| Column content | Column content | Column content |
<table class="table table-striped"> （最初の「table」タグをこのように書きます）
境界線付き
| class="table table-bordered" | Column content | Column content |
| Column content | Column content | Column content |
| Column content | Column content | Column content |
| Column content | Column content | Column content |
<table class="table table-bordered"> （最初の「table」タグをこのように書きます）
ホバー
| class="table table-hover" | Column content | Column content |
| Column content | Column content | Column content |
| Column content | Column content | Column content |
| Column content | Column content | Column content |
<table class="table table-hover"> （最初の「table」タグをこのように書きます）
カラーバリエーション
| info | Column content | Column content |
| warning | Column content | Column content |
| success | Column content | Column content |
| danger | Column content | Column content |
<tr class="info"> （着色したい「tr」をこのように指定します）
レスポンシブ
| Column content | Column content | Column content |
| Column content | Column content | Column content |
| Column content | Column content | Column content |
| Column content | Column content | Column content |
<div class="table-responsive"> （テーブルタグをこの「div」で囲みます。
ワンランク上の Bootstrap CSS 細かな指定 (別ウィンドウ)
分からないことがありましたら、問い合わせ、質問は、サイト管理人まで E-Mail