初心者のためのBootstrapの簡単な機能のまとめ

## はじめに
初投稿です。Railsチュートリアルで学習した「Bootstrap」を使ってポートフォリオを作成しているのですが、使用した機能を備忘録として残しておきたいと思います。少しでも初心者の方のお役に立てれば幸いです。
## 1．Bootstrapを使用するメリット
Bootstrapとは、Twitterが作成したWeb制作のためのフレームワークです。様々なブラウザや画面サイズに対応した本格的なWEBサイトを簡単に作成することができます。
###メリット
<ul>
<li>デザインの知識やスキルが乏しくても、モダンなデザインを導入できる</li>
<li>手軽にレスポンシブを導入できる</li>
<li>コードの量を減らすことができる</li>
</ul>

###デメリット
<ul>
<li>独自の書き方やルールを覚える必要がある</li>
<li>似たようなデザインになりやすい</li>
<li>カスタマイズしようとすると工数が増える</li>
</ul>

## 2．Bootstrapのインストール
Railsの場合、Bootstrapを使用する際には、bootstrap-sass gemを使ってRailsアプリケションに導入します。

```erb:Gemfile
gem 'bootstrap-sass', '3.4.1'
```

Bootstrapをアップデートする。

```erb:
 bundle install
```

カスタムCSS用ファイルを作成し、`` @import``を使って、Bootstrap（とそれに関連するSprockets）を読み込みます。

```erb:app/assets/stylesheets/custom.scss
 @import "bootstrap-sprockets";
 @import "bootstrap";
```

## 3．文字色を指定する
![キャプチャ.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/107089/b9a5e27b-7287-9c16-a345-56d178703636.jpeg)
HTMLタグの``class``属性に、以下のように指定することで、文字色を簡単につけることができます。

```html:index.html
<p class="text-primary">.text-primary</p>
<p class="text-secondary">.text-secondary</p>
<p class="text-success">.text-success</p>
<p class="text-danger">.text-danger</p>
<p class="text-warning">.text-warning</p>
<p class="text-info">.text-info</p>
<p class="text-light bg-dark">.text-light</p>
<p class="text-dark">.text-dark</p>
<p class="text-body">.text-body</p>
<p class="text-muted">.text-muted</p>
<p class="text-white bg-dark">.text-white</p>
<p class="text-black-50">.text-black-50</p>
<p class="text-white-50 bg-dark">.text-white-50</p>
```



  

文字を揃えたいときは、以下のようにClass属性を追加します。

```html:index.html
<p class="text-center text-primary">中央揃え</p>
<p class="text-right text-secondary">右揃え</p>
<p class="text-left text-success">左揃え</p>
```



## 4．背景色を指定する
![キャプチャ3.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/107089/05a52581-d32f-fa3b-8dc5-4e60cb5e3078.jpeg)
HTMLタグの``class``属性に、以下のように``.bg-``指定することで、背景色の色を指定することができます。

```html:index.html
<div class="bg-primary text-white">.bg-primary</div>
<div class="bg-secondary text-white">.bg-secondary</div>
<div class="bg-success text-white">.bg-success</div>
<div class="bg-danger text-white">.bg-danger</div>
<div class="bg-warning text-dark">.bg-warning</div>
<div class="bg-info text-white">.bg-info</div>
<div class="bg-light text-dark">.bg-light</div>
<div class="bg-dark text-white">.bg-dark</div>
<div class="bg-white text-dark">.bg-white</div>
<div class="bg-transparent text-dark">.bg-transparent</div>
```



## 5．ボタンをつける
![キャプチャ5.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/107089/80dde490-cb37-be5f-e6a1-f3d3785fc5d7.jpeg)
``class``に、以下のように``btn``指定することで、ボタンを作成することができます。また、ボタンの背景色の変更は``btn-``のあとに色を指定します。



```html:index.html
<button type="submit" 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>
```


## 6．ナビゲーションをつける
![キャプチャ6.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/107089/7a494839-18df-4b04-239e-63eed1d3f338.jpeg)

ナビゲーションバーは、``nav``をクラスに指定して使用します。


```html:index.html
<nav class="nav">
  <a class="nav-link active" href="#">Active</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link disabled" href="#">Disabled</a>
</nav>
```
## 参考サイト
<a href="https://getbootstrap.jp/">Bootstrap公式サイト</a>