Monthly Archives: 11月 2015

Bootstrap #002 – ナビゲーションバー

 

Bootstrapでナビゲーションバーを構築するには下記のようにします。

 

Bootstrapのサイト内のNavbarの記述をコピーしてindex.htmlに貼り付けます。

Bootstrap_002_01

 

 

作成したindex.htmlを実行すると下記のように表示されます。

Bootstrap_002_02

 

デフォルトでレスポンシブ対応もされています。

Bootstrap_002_03

 

バーの色を変更:
nav class=”navbar navbar-default”の記述を変更します。

 
 

  • 参考文献

Bootstrap

 

Walking #026

 

日付 曜日 歩数
2015.11.22 12340
2015.11.23 4987
2015.11.24 6868
2015.11.25 8744
2015.11.26 10131
2015.11.27 8129
2015.11.28 3241
合計
54440

 

Walking #025

 

日付 曜日 歩数
2015.11.15 8496
2015.11.16 5258
2015.11.17 3649
2015.11.18 3930
2015.11.19 4755
2015.11.20 5097
2015.11.21 7944
合計
39129

 

Bootstrap #001 – 構築準備

 

今回はCSSフレームワークの1つであるBootstrapの使い方について紹介します。

Bootstrapとは、Twitterが開発したCSSフレームワークです。通常は全てのスタイルを自分で作成する必要がありますが、Bootstrapはよく使われるスタイルがあらかじめ定義してあるので、それを利用することにより整ったデザインのページが作成可能です。

 

Bootstrapを利用するには、Bootstrapのサイトからファイル一式をダウンロードします。
Bootstrap

Bootstrap_001_01

 

ダウンロードしたファイルを解凍すると下記のようなファイル構成になります。

Bootstrap_001_02

 

次に、サイト内のBasic templateをコピーしてindex.htmlを作成します。
html lang=”en”を”ja”に変更したりいらないコメントを削除して実行します。

Bootstrap_001_03

 

Bootstrap_001_04

 

 

作成したindex.htmlを実行すると下記のように表示されます。

Bootstrap_001_05

 

これでBootstrapで構築する準備ができます。

 
 

  • 参考文献

Bootstrap

 

Walking #024

 

日付 曜日 歩数
2015.11.08 9861
2015.11.09 4712
2015.11.10 3126
2015.11.11 4294
2015.11.12 4157
2015.11.13 4875
2015.11.14 11597
合計
42622

 

Walking #023

 

日付 曜日 歩数
2015.11.01 8546
2015.11.02 4248
2015.11.03 4870
2015.11.04 3659
2015.11.05 4547
2015.11.06 3215
2015.11.07 8549
合計
37634

 

Walking #022

 

日付 曜日 歩数
2015.10.25 9834
2015.10.26 4673
2015.10.27 3650
2015.10.28 6527
2015.10.29 5606
2015.10.30 4531
2015.10.31 9416
合計
44237