[学習] Bootstrap(1)

■インストール
https://getbootstrap.com/
[Download]をクリック

▶別ページにジャンプしたら
Compiled CSS and JS の[Download]をクリック
bootstrap-4.1.3-dist.zip がダウンロードされる

Source filesの[Download source]をクリック
bootstrap-4.1.3.zip がダウンロードされる

※現在のバージョンは 4.1.3

▶ダウンロードしたzipファイルを解凍
今回は勉強はのでソースの方(bootstrap-4.1.3.zip)を解凍
解凍後のフォルダをCドライブ直下に置いた (C:\bootstrap-4.1.3)

C:\bootstrap-4.1.3\dist フォルダを C:\bootstrap-4.1.3\template としてフォルダコピー

▶HTMLテンプレート
https://getbootstrap.com/docs/3.3/getting-started/ の Basic template の箇所にHTMLのテンプレートが記載れている。
内容をコピーし C:\bootstrap-4.1.3\template\index.html として保存。(UTF-8で保存)

index.htmlをダブルクリックし開く
「Hello, world!」が表示される。

---

■基本のレイアウト
Bootstrapでは、画面の幅を12分割したものを基準にしてレイアウトを考える。
列の数をclass属性で指定
<div class="col-md-X">
Xに1～12を指定
mdの部分にはデバイスの幅を指定

類	デバイスの幅	デバイスの幅の指定方法	コンテナの幅
スマートフォン	768pxより狭い	col-xs	自動
タブレット	768px以上	col-sm	750px
デスクトップ	992px以上	col-md	970px
大きなデスクトップ	1200px以上	col-lg	1170px

デバイスの幅でコンテンツの表示／非表示をすることが可能

visible-(デバイスの幅指定)

※設定しても動作しなかった