Bootstrapの使い方（前編）

Laravel
Bootstrapの使い方（前編）
この記事はこんな悩みを解決します
  • 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に多くの設定がされていますね。しかし、何がどんな機能なのかよく分かりません。全てを把握する必要はないのでよく使うものだけ解説して行きます。

通常は下記のように表示されます。

通常のデザインの変更

今回はYou are logged in!が書かれているpタグにクラスを追加して行きます。一つずつどんな変化があるのかブラウザの画面で見て行きましょう。

lead

文字がやや大きくなります。

display-1

もっと大きくしたい場合はdisplayを使います。

いやいや、ここまで大きくならなくていいよという時は１〜４で調整できます。

display-4

small

文字を小さくしたいときに使います。

initialism

文字を大文字にするときに使います。

単純にtext-uppercaseやtext-lowercaseでも変更できます。

blockquote-footer

文字の前に線が入ります。

text-center

文字列の配置を変更します。

text-primary

文字の色を変更します。

バッジ

ブログの記事のように各記事にバッジをつけたいときに使います。
それぞれbadgeとbadge-で使います。

ここで紹介するprimaryやsecoundaryというのはbtnやalertとかでも共通の仕組みになっています。色を覚えておくと便利ですよ。

badge badge-primary

badge badge-secondary

badge badge-success

badge badge-info

badge badge-warning

badge badge-danger

badge badge-dark

文字の背景色を変える

文字の背景を変える方法にもいくつか方法があります。
それぞれpaddingが違うので適したものを使うようにしましょう。

mark

jumbotron

alert alert-primary

バー

たまに見かけるバーを作成できます。

progress-bar

progress-bar progress-bar-striped

ボタン

簡単にクリックしたくなるようなボタンが作れます。

btn btn-primary

btn btn-outline-primary

btn btn-outline-primary btn-block

ブロック要素として扱います。

btn btn-link

ホバーすると下線が出てきます。

大きさを変えるには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>

ブラウザで見ると下記のようになります。

ボタンを押すとドロップダウンのメニューが開きます。

リスト

リストのデザインも用意されています。
そのためにpタグではなく下記のようなliタグに置き換えました。

<ul class="">
   <li class="">
     you are logged in!
   </li>
   <li>
      you are logged in!
   </li>
</ul>

ブラウザで確認すると下記のようになります。

ulタグのclassを変えて行きます。

list-unstyled

最初の点が消えます

list-inline-item

リスト全体がブロック要素になります。

Table

テーブルのデザインもいくつか用意されています。
その確認のために下記のようなテーブルを作りました。

<table class="table">
   <tr>
     <th>
        you are logged in!
     </th>
   </tr>
   <tr>
      <td>you are logged in!</td>
   </tr>
</table>

ブラウザで確認します。

tableタグにclassを追加して確認して行きましょう。

table table-striped

一段ずつテーブルの色が変わります。

table table-primary

テーブル全体の色を変えます。

table table-hover

ホバーしたところの色が変わるようになります。

大きさを変えるときにはtable-smとtable-lgがあります。

まとめ

今回はbootstrapのデザインの変更方法を紹介しました。

細かいことを考えずにデザインが変えられるので便利ですね。

関連記事