Bootstrap 総復習

全世界で利用されているTwitterが開発したCSSのフレームワーク
「Bootstrap」
～その利用方法を一気に紹介～

### まずは、導入方法！

以下の通り、２つあります！
・Bootstrapファイルをダウンロードする
・CDNを利用する

#### ①ファイルをＤＬする方法

以下の公式ドキュメントからＤＬ！
https://getbootstrap.jp/


手順としては、、、
１適当なHTMLファイルを作成

２Bootstrapのドキュメントのトップページからバージョンを指定

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1314502/e8c431b5-91f8-c5e2-7e2a-7744a28a28bc.png)


３ファイルをダウンロード！！

解凍した後、、、
先ほど作成した、HTMLファイルと同じ階層にDLしたCSSとJSファイルを移動。

４HTMLファイルにBootstrap の設定を記述する
以下のコードを追記
```
#head内
<link rel="stylesheet" href="css/bootstrap.min.css">
#</body>の上
 <script src="js/bootstrap.min.js"></script>
```

これで導入は完了！！
試しに、Bootstrapのページ公式ドキュメントのデモなんか見て、動作を確認してみては！

はい、次ー

#### ②CDNを利用する方法

CDNとは、コンテンツデリバリーネットワークの略です。

つまるところ、先ほどのCSSやJSファイルをDLしなくても、インターネット経由でそれらを使用できるのです。
簡単、簡単、、

１CDNをHTMLファイルに追記！
```
+   <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
+   <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
+   <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
+   <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>

```
先ほど移動したCSSファイルやJSファイルの記述は削除しましょう！


以上！簡単でしょ！

一旦休憩。。。

では、カルーセルぐらいから始めていいきましょう！

## 実践
### １．カルーセル

カルーセルとは、複数の画像や要素をスライドさせる　仕組みの事。

で、Bootstrap には様々なカルーセルのタイプがあるんだけれど、今回使わせて頂きますのは、
「With Captions」というタイプのもの。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1314502/14b80840-8ba7-f727-404d-a89c4c1ad778.png)

（https://getbootstrap.jp/docs/5.0/components/carousel/#with-captions）

上の画像の下に、コードがございますので、
そちらをコピーペーストで、一度試してみてください。

＜構成＞
・キャンプション（画像を入れる箇所）
・インジケーター
・左右の切り替えボタン

### ボタン
公式サイト

Bootstrapにはたくさん種類のボタンが用意されております。
試しに以下のコードをためしてみください！

```
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-link">Link</button>
```
以下は、枠のみ
```
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-link">Link</button>
```


以上からわかるように。。。
classを変更するだけでスタイルも変更されちゃうんです！
色の他にも<b>大きさ、影</b>など

#### 大きさを変更する

・btn-lg:デフォルトより大きい
・btn-sm：デフォルトより小さい

以下のように追加してミソ

```
<button class="btn btn-secondary btn-lg" ></button>
<button class="btn btn-info btn-sm" ></button>
```
#### 影をつける

・shadow-sm：範囲が狭い
・shadow：範囲が中くらい
・shadow-lg：範囲が広い
・shadow-none：影がつかないようにする

プレビュー
スライドモード
全世界で利用されているTwitterが開発したCSSのフレームワーク
「Bootstrap」
～その利用方法を一気に紹介～

まずは、導入方法！
以下の通り、２つあります！
・Bootstrapファイルをダウンロードする
・CDNを利用する

①ファイルをＤＬする方法
以下の公式ドキュメントからＤＬ！
https://getbootstrap.jp/

手順としては、、、
１適当なHTMLファイルを作成

２Bootstrapのドキュメントのトップページからバージョンを指定

image.png

３ファイルをダウンロード！！

解凍した後、、、
先ほど作成した、HTMLファイルと同じ階層にDLしたCSSとJSファイルを移動。

４HTMLファイルにBootstrap の設定を記述する
以下のコードを追記

#head内
<link rel="stylesheet" href="css/bootstrap.min.css">
#</body>の上
 <script src="js/bootstrap.min.js"></script>
これで導入は完了！！
試しに、Bootstrapのページ公式ドキュメントのデモなんか見て、動作を確認してみては！

はい、次ー

②CDNを利用する方法
CDNとは、コンテンツデリバリーネットワークの略です。

つまるところ、先ほどのCSSやJSファイルをDLしなくても、インターネット経由でそれらを使用できるのです。
簡単、簡単、、

１CDNをHTMLファイルに追記！

+   <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
+   <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
+   <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
+   <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>

先ほど移動したCSSファイルやJSファイルの記述は削除しましょう！

以上！簡単でしょ！

一旦休憩。。。

では、カルーセルぐらいから始めていいきましょう！

実践
１．カルーセル
カルーセルとは、複数の画像や要素をスライドさせる　仕組みの事。

で、Bootstrap には様々なカルーセルのタイプがあるんだけれど、今回使わせて頂きますのは、
「With Captions」というタイプのもの。
image.png

（https://getbootstrap.jp/docs/5.0/components/carousel/#with-captions）

上の画像の下に、コードがございますので、
そちらをコピーペーストで、一度試してみてください。

＜構成＞
・キャンプション（画像を入れる箇所）
・インジケーター
・左右の切り替えボタン

#### ボタン
公式サイト

Bootstrapにはたくさん種類のボタンが用意されております。
試しに以下のコードをためしてみください！

<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-link">Link</button>
以下は、枠のみ

<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-link">Link</button>
以上からわかるように。。。
classを変更するだけでスタイルも変更されちゃうんです！
色の他にも大きさ、影など

大きさを変更する
・btn-lg:デフォルトより大きい
・btn-sm：デフォルトより小さい

以下のように追加してミソ

```
<button class="btn btn-info btn-sm shadow" ></button>
```

まぁ、ボタンはこんな感じや！

#### グリッドシステム

正直、めちゃめちゃ便利な機能や！
これに出会ったときマジで、手作業div分轄してヘトヘトやった自分にはマジで天使に見えたわ！

グリッドして

#### オプション３ 画像のレスポンシブ対応
> img-fluid 

画像を親要素に合わせて、大きさを調節してくれるんや！
例えば、、、

```
   <img src="img/sushi.jpg" class="img-fluid" alt="サンプル画像3">
```

##### 文字の大きさ変更
公式ページ
（https://getbootstrap.jp/docs/5.0/utilities/text/）
文字の大きさも変更できるで！CSSファイルいらんな〜

例えば、以下のようなコードで・・・
```
<p class="fs-1">.fs-1 text</p>
```

対応表↓

![スクリーンショット 2022-06-25 17.43.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1314502/3580a961-7ce2-142e-f28c-21a560f819e1.png)



とりあえず、今日はここまで！

これかも更新していきます！


ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ご愛読ありがとうございました。
何か気づきや質問があれば、コメントお願いします。
新しい情報を取得するたび、更新していきます。

良ければ、LGTM、ストックよろしくお願いいたします！