Bootstrapのダウンロード
どうもはじめまして。Webの勉強をしたいですが、周りに教えてくれる人がいませんのでここにやってまいりました。よろしくお願いします。
Bootstrapが何かもよくわかっていませんが、とりあえず始めてみたいと思います。
Bootstrapの公式サイトにダウンロードのページがありますのでそこからダウンロードします。
https://getbootstrap.com/docs/4.1/getting-started/download/
このようなファイル構成になっていました。
bootstrap-4
├── css
│ ├── bootstrap-grid.css
│ ├── bootstrap-grid.css.map
│ ├── bootstrap-grid.min.css
│ ├── bootstrap-grid.min.css.map
│ ├── bootstrap-reboot.css
│ ├── bootstrap-reboot.css.map
│ ├── bootstrap-reboot.min.css
│ ├── bootstrap-reboot.min.css.map
│ ├── bootstrap.css
│ ├── bootstrap.css.map
│ ├── bootstrap.min.css
│ └── bootstrap.min.css.map
└── js
├── bootstrap.bundle.js
├── bootstrap.bundle.js.map
├── bootstrap.bundle.min.js
├── bootstrap.bundle.min.js.map
├── bootstrap.js
├── bootstrap.js.map
├── bootstrap.min.js
└── bootstrap.min.js.map
BootstrapのJavaScriptにはjQueryが必要なのですが、スリム版でいいとのことなので、それを利用したいと思います。
jQueryの公式サイト( https://jquery.com/ )からjquery-3.5.1.slim.min.jsをダウンロードし、先ほどのツリーにあったフォルダjsに入れます。
bootstrap-4
├── css
│ ├── bootstrap-grid.css
│ ├── bootstrap-grid.css.map
│ ├── bootstrap-grid.min.css
│ ├── bootstrap-grid.min.css.map
│ ├── bootstrap-reboot.css
│ ├── bootstrap-reboot.css.map
│ ├── bootstrap-reboot.min.css
│ ├── bootstrap-reboot.min.css.map
│ ├── bootstrap.css
│ ├── bootstrap.css.map
│ ├── bootstrap.min.css
│ └── bootstrap.min.css.map
└── js
├── bootstrap.bundle.js
├── bootstrap.bundle.js.map
├── bootstrap.bundle.min.js
├── bootstrap.bundle.min.js.map
├── bootstrap.js
├── bootstrap.js.map
├── bootstrap.min.js
├── bootstrap.min.js.map
└── jquery-3.5.1.slim.min.js <---追加
テスト用のindex.htmlを用意します。
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="css/bootstrap.min.css">
<title>Home</title>
</head>
<body>
<h1 class="text-success">h1 class="text-success"</h1>
</body>
</html>
フォルダ構成は最小にしました。
.
├── css
│ └── bootstrap.min.css
└── index.html
index.htmlをブラウザで表示します。
これからも頑張ります。