Symfoware

Symfowareについての考察blog

プログラマのためのBootstrap入門 その1 設置方法

デザインセンスがないプログラマが、内部用の管理画面作ると
真っ白な画面にテキストや標準のボタンが乗っかったUIになると思います。

寂しいので、Bootstrapの使い方を覚えて、洒落た画面が作れるようになろうと思います。


ダウンロードと設置



こちらのURLから「Download Bootstrap」をクリック。
http://getbootstrap.com/

434_01.png

ちなみに、このページもレスポンシブです。
ブラウザの幅を縮めると、ヘッダーのリンクがまとめられます。

434_02.png

ボタンを押すと、こんな感じで展開されました。かっこいい。

434_03.png



ダウンロードのページに移動したら「Download Bootstrap」をクリック。

434_04.png

「bootstrap-3.2.0-dist.zip」がダウンロード出来ました。
ファイルを解凍すると、こんなファイルが出力されます。


・css
bootstrap.css
bootstrap.css.map
bootstrap.min.css
bootstrap-theme.css
bootstrap-theme.css.map
bootstrap-theme.min.css

・fonts
glyphicons-halflings-regular.eot
glyphicons-halflings-regular.svg
glyphicons-halflings-regular.ttf
glyphicons-halflings-regular.woff

・js
bootstrap.js
bootstrap.min.js




434_05.png


これをWebサーバーに配置しました。





サンプルhtml




Bootstrapを使用するひな形のhtmlはこんな感じになります。


  1. <!DOCTYPE html>
  2. <html lang="ja">
  3. <head>
  4.     <meta charset="utf-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1">
  7.     <title>Bootstrap 101 Template</title>
  8.     <!-- Bootstrap -->
  9.     <link href="css/bootstrap.min.css" rel="stylesheet">
  10. </head>
  11. <body>
  12.     <h1>はじめてのBootstrap</h1>
  13.     <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
  14.     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  15.     <!-- Include all compiled plugins (below), or include individual files as needed -->
  16.     <script src="js/bootstrap.min.js"></script>
  17. </body>
  18. </html>




ブラウザで表示した結果がこちら。

434_06.png


Bootstrapを使用していない場合はこんな感じ。

434_07.png


フォントがおしゃれになっています。





CDNを使用



Bootstrapはメジャーなライブラリなので、CDNで公開されています。

Bootstrapをカスタマイズするつもりがなければ、CDNを使ったほうが便利かと。
Webブラウザのキャッシュにヒットする可能性もありますし。

上記サンプルをCDNのURLを参照するよう変更したものがこちら。


  1. <!DOCTYPE html>
  2. <html lang="ja">
  3. <head>
  4.     <meta charset="utf-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1">
  7.     <title>Bootstrap 101 Template</title>
  8.     <!-- Bootstrap -->
  9.     <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
  10. </head>
  11. <body>
  12.     <h1>はじめてのBootstrap</h1>
  13.     <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
  14.     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  15.     <!-- Include all compiled plugins (below), or include individual files as needed -->
  16.     <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
  17. </body>
  18. </html>




これをベースにBootstrapの使い方を調べていこうと思います。

関連記事

テーマ:プログラミング - ジャンル:コンピュータ

  1. 2014/08/02(土) 15:07:21|
  2. 備忘録
  3. | トラックバック:0
  4. | コメント:2
  5. | 編集
<<プログラマのためのBootstrap入門 その2 ボタンとラベル | ホーム | Redis ハッシュ登録とjson形式での登録の速度差(redis-py)>>

コメント

Bootstrap初心者です。
使い方調べていたら、こちらのページにたどり着きました。
とても分かりやすくて参考になります。
これからもたびたびこちらのページにお世話になると思います。
ありがとうございました!
  1. 2015/03/21(土) 17:20:43 |
  2. URL |
  3. まりも #SFo5/nok
  4. [ 編集 ]

こちらこそ、お役に立てたようで嬉しいです。
  1. 2015/03/23(月) 22:27:10 |
  2. URL |
  3. symfo #-
  4. [ 編集 ]

コメントの投稿


管理者にだけ表示を許可する

トラックバック

トラックバック URL
http://symfoware.blog68.fc2.com/tb.php/1447-26ce6b45
この記事にトラックバックする(FC2ブログユーザー)