Bootstrapの使い方(前編)
![Bootstrapの使い方(前編)](https://www.naka-style-blog.com/wp-content/uploads/2020/07/3116583_s_jpg-8-1024x681.png)
- bladeでどんなデザインが用意されているのか知りたい
- 素早くデザインを設定できるようになりたい
- Laravelの勉強がしたい
Laravelでuiを使うとBootstrapのテンプレートが付いています。ログイン機能をつけたときに自動でCSSのファイルも付いてきます。これを使えるようになると素早くセンスのいいデザインが作れます。
この記事を読むことでBootstrapの使い方が分かります。
Bootstrapの使い方(前編)
まずは下記のログインしたときのViewを確認して行きましょう。
@extends('layouts.app')
@section('content')
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card">
<div class="card-header">{{ __('Dashboard') }}</div>
<div class="card-body mark">
@if (session('status'))
<div class="alert alert-success" role="alert">
{{ session('status') }}
</div>
@endif
{{ __('You are logged in!') }}
<p class="">you are logged in!</p>
</div>
</div>
</div>
</div>
</div>
@endsection
すでにclassに多くの設定がされていますね。しかし、何がどんな機能なのかよく分かりません。全てを把握する必要はないのでよく使うものだけ解説して行きます。
通常は下記のように表示されます。
![](https://www.naka-style-blog.com/wp-content/uploads/2020/07/Laravel-4-1024x231.png)
通常のデザインの変更
今回はYou are logged in!が書かれているpタグにクラスを追加して行きます。一つずつどんな変化があるのかブラウザの画面で見て行きましょう。
lead
文字がやや大きくなります。
![](https://www.naka-style-blog.com/wp-content/uploads/2020/07/Laravel-5-1024x233.png)
display-1
もっと大きくしたい場合はdisplayを使います。
![](https://www.naka-style-blog.com/wp-content/uploads/2020/07/Laravel-6-1024x514.png)
いやいや、ここまで大きくならなくていいよという時は1〜4で調整できます。
display-4
![](https://www.naka-style-blog.com/wp-content/uploads/2020/07/Laravel-7-1024x287.png)
small
文字を小さくしたいときに使います。
![](https://www.naka-style-blog.com/wp-content/uploads/2020/07/Laravel-8-1024x226.png)
initialism
文字を大文字にするときに使います。
![](https://www.naka-style-blog.com/wp-content/uploads/2020/07/Laravel-10-1024x221.png)
単純にtext-uppercaseやtext-lowercaseでも変更できます。
blockquote-footer
文字の前に線が入ります。
![](https://www.naka-style-blog.com/wp-content/uploads/2020/07/Laravel-11-1024x217.png)
text-center
文字列の配置を変更します。
![](https://www.naka-style-blog.com/wp-content/uploads/2020/07/Laravel-27-1024x232.png)
text-primary
文字の色を変更します。
![](https://www.naka-style-blog.com/wp-content/uploads/2020/07/Laravel-26-1024x227.png)
バッジ
ブログの記事のように各記事にバッジをつけたいときに使います。
それぞれbadgeとbadge-で使います。
ここで紹介するprimaryやsecoundaryというのはbtnやalertとかでも共通の仕組みになっています。色を覚えておくと便利ですよ。
badge badge-primary
![](https://www.naka-style-blog.com/wp-content/uploads/2020/07/Laravel-12-1024x186.png)
badge badge-secondary
![](https://www.naka-style-blog.com/wp-content/uploads/2020/07/Laravel-13-1024x203.png)
badge badge-success
![](https://www.naka-style-blog.com/wp-content/uploads/2020/07/Laravel-14-1024x192.png)
badge badge-info
![](https://www.naka-style-blog.com/wp-content/uploads/2020/07/Laravel-15-1024x193.png)
badge badge-warning
![](https://www.naka-style-blog.com/wp-content/uploads/2020/07/Laravel-16-1024x194.png)
badge badge-danger
![](https://www.naka-style-blog.com/wp-content/uploads/2020/07/Laravel-17-1024x193.png)
badge badge-dark
![](https://www.naka-style-blog.com/wp-content/uploads/2020/07/Laravel-19-1024x201.png)
文字の背景色を変える
文字の背景を変える方法にもいくつか方法があります。
それぞれpaddingが違うので適したものを使うようにしましょう。
mark
![](https://www.naka-style-blog.com/wp-content/uploads/2020/07/Laravel-9-1024x233.png)
jumbotron
![](https://www.naka-style-blog.com/wp-content/uploads/2020/07/Laravel-20-1024x421.png)
alert alert-primary
![](https://www.naka-style-blog.com/wp-content/uploads/2020/07/Laravel-21-1024x265.png)
バー
たまに見かけるバーを作成できます。
progress-bar
![](https://www.naka-style-blog.com/wp-content/uploads/2020/07/Laravel-24-1024x235.png)
progress-bar progress-bar-striped
![](https://www.naka-style-blog.com/wp-content/uploads/2020/07/Laravel-25-1024x231.png)
ボタン
簡単にクリックしたくなるようなボタンが作れます。
btn btn-primary
![](https://www.naka-style-blog.com/wp-content/uploads/2020/07/Laravel-22-1024x218.png)
btn btn-outline-primary
![](https://www.naka-style-blog.com/wp-content/uploads/2020/07/Laravel-28-1024x206.png)
btn btn-outline-primary btn-block
ブロック要素として扱います。
![](https://www.naka-style-blog.com/wp-content/uploads/2020/07/Laravel-30-1024x254.png)
btn btn-link
ホバーすると下線が出てきます。
![](https://www.naka-style-blog.com/wp-content/uploads/2020/07/Laravel-29-1024x223.png)
大きさを変えるにはbtn-lgやbtn-smなどがあります。
ドロップダウン
ボタンが使えるようになるとドロップダウンも使えるようになります。
<div class="dropdown">
<button type="button" id="dropdown1"class="btn btn-primary dropdown-toggle"
data-toggle="dropdown" aria-haspopup="true"aria-expanded="false">
Dropdown button
</button>
<div class="dropdown-menu" aria-labelledby="dropdown1">
<a class="dropdown-item" href="#">#1</a>
<a class="dropdown-item" href="#">#2</a>
<a class="dropdown-item" href="#">#3</a>
</div>
</div>
ブラウザで見ると下記のようになります。
![](https://www.naka-style-blog.com/wp-content/uploads/2020/07/Laravel-38-1024x220.png)
ボタンを押すとドロップダウンのメニューが開きます。
リスト
リストのデザインも用意されています。
そのためにpタグではなく下記のようなliタグに置き換えました。
<ul class="">
<li class="">
you are logged in!
</li>
<li>
you are logged in!
</li>
</ul>
ブラウザで確認すると下記のようになります。
![](https://www.naka-style-blog.com/wp-content/uploads/2020/07/Laravel-32-1024x258.png)
ulタグのclassを変えて行きます。
list-unstyled
最初の点が消えます
![](https://www.naka-style-blog.com/wp-content/uploads/2020/07/Laravel-31-1024x254.png)
list-inline-item
リスト全体がブロック要素になります。
![](https://www.naka-style-blog.com/wp-content/uploads/2020/07/Laravel-33-1024x227.png)
Table
テーブルのデザインもいくつか用意されています。
その確認のために下記のようなテーブルを作りました。
<table class="table">
<tr>
<th>
you are logged in!
</th>
</tr>
<tr>
<td>you are logged in!</td>
</tr>
</table>
ブラウザで確認します。
![](https://www.naka-style-blog.com/wp-content/uploads/2020/07/Laravel-34-1024x328.png)
tableタグにclassを追加して確認して行きましょう。
table table-striped
一段ずつテーブルの色が変わります。
![](https://www.naka-style-blog.com/wp-content/uploads/2020/07/Laravel-35-1024x322.png)
table table-primary
テーブル全体の色を変えます。
![](https://www.naka-style-blog.com/wp-content/uploads/2020/07/Laravel-36-1024x330.png)
table table-hover
ホバーしたところの色が変わるようになります。
![](https://www.naka-style-blog.com/wp-content/uploads/2020/07/Laravel-37-1024x332.png)
大きさを変えるときにはtable-smとtable-lgがあります。
まとめ
今回はbootstrapのデザインの変更方法を紹介しました。
細かいことを考えずにデザインが変えられるので便利ですね。