CSSフレームワーク。プロのデザイナーがCSSを経験と時間をかけて編集して、それなりのかっこいい見栄えのWebサイトを構築するのにたいし、Bootstrapを適用するとデザイナー顔負けのかっこいいWebサイトがデザインできるのがメリット。
準備
○ダウンロード作業
http://getbootstrap.com/ ＝＞Download bootstrapボタンをクリックしてダウンロード。zipを解凍すると、以下のフォルダが展開される。
bootstrap-3.3.5-dist
├─css
├─fonts
└─js
また、Bootstrapサイトに、以下のようにベーシックテンプレートがおかれているので、これを流用する
～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～
Basic template
Start with this basic HTML template, or modify these examples. We hope you’ll customize our templates and examples, adapting them to suit your needs.
Copy the HTML below to begin working with a minimal Bootstrap document.
Copy
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> <title>Bootstrap 101 Template</title> <!-- Bootstrap --> <link href="css/bootstrap.min.css" rel="stylesheet"> <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> </head> <body> <h1>Hello, world!</h1> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <!-- Include all compiled plugins (below), or include individual files as needed --> <script src="js/bootstrap.min.js"></script> </body> </html> |
～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～
○配置
bootstrapという名前で適当な場所にフォルダを作成し、そのなかにindex.htmlというファイルを作成して、上記のベーシックテンプレートをコピペして
保存する。
また、上記でダウンロードした、css,font,jsフォルダもbootstrapフォルダに格納
○確認
index.htmlをブラウザで拓くと下記のように表示される
○index.htmlの編集
|
1 |
・<html lang="en"> <span style="color: #000000;">を</span></code><html lang="ja"> <span style="color: #000000;">に変更。</span> |
|
1 |
・<title><span style="color: #333333;">Bootstrap 101 Template</span></title> <span style="color: #000000;">＜＝＝＝これも適当なタイトルに変更</span> |
|
1 |
<span style="color: #000000;"> </span> |
|
1 |
<span style="color: #000000; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;">・最初にcontainerクラスを宣言します。このクラスにより、中身が中央揃えになってくれます</span> |
|
1 |
<span style="color: #000000; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;"> 次にrowクラスで囲い、そのなかにcol-sm-xのクラスを合計12になるよう設定します</span>。 |
|
1 |
|
1 2 3 4 5 6 7 |
<span style="color: #000000; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;"> <div class="container"> <div class="row"> <div class="col-sm-3" style="background:gray;">Side1</div> <div class="col-sm-6" style="background:green;">Main</div> <div class="col-sm-3" style="background:orange;">Side2</div> </div> </div></span> |
↓今回はこのcol-smを適用。
| モバイル（768px以下） | タブレット（768px以上、992px未満） | デスクトップ（992px以上、1200px未満） | デスクトップ（1200px以上） | |
|---|---|---|---|---|
| クラスの接頭辞 | .col-xs- | .col-sm- | .col-md- | .col-lg- |
| グリッドの動作 | 常に横並び | 基本は縦積み、ブレークポイントを超えると横並び | ||
| コンテナの最大幅 | なし（auto） | 750px | 970px | 1170px |
| 列の最大幅 | auto | 60px | 78px | 95px |
↓以下のように設定すると、画面横幅が1200px以上の場合、gray:green:orangeが1:6:5の比率となり、992-1200pxの場合、2:6:4.768-992pxの範囲の場合、3:6:3となる
<div class=”col-lg-1 col-md-2 col-sm-3″ style=”background:gray;”>Side1</div>
<div class=”col-lg-6 col-md-6 col-sm-6″ style=”background:green;”>Main</div>
<div class=”col-lg-5 col-md-4 col-sm-3″ style=”background:orange;”>Side2</div>
○tableの装飾 class=”table”を使う
・デフォルトの場合、↓このように味気ない
| 名前 | 点数 |
|---|---|
| 山田太郎 | 90 |
| 鈴木花子 | 85 |
<table class=”table”>とclassを定義すると下記のようになる
| 名前 | 点数 |
|---|---|
| 山田太郎 | 90 |
| 鈴木花子 | 85 |
<table class=”table table-striped”>とすると一行ごとに色がつく
| 名前 | 点数 |
|---|---|
| 山田太郎 | 90 |
| 鈴木花子 |
<table class=”table able-bordered”>でテーブルに枠がつく。