Go to Qiita Advent Calendar 2024 Top
LoginSignup
34
36

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

@hondy12345(Shibata Kazuki)

Laravel5.5インストールからBootstrap4を導入するまで

Last updated at Posted at 2018-04-30

TLDR

最後までやったもののリポジトリをGithubに作りました。
https://github.com/hondadadadada/laravel_bootstrap4

前提条件の環境

# PHP
$ php --version
PHP 7.1.7 (cli) (built: Jul 15 2017 18:08:09) ( NTS )
Copyright (c) 1997-2017 The PHP Group
Zend Engine v3.1.0, Copyright (c) 1998-2017 Zend Technologies

# composer
$ composer
   ______
  / ____/___  ____ ___  ____  ____  ________  _____
 / /   / __ \/ __ `__ \/ __ \/ __ \/ ___/ _ \/ ___/
/ /___/ /_/ / / / / / / /_/ / /_/ (__  )  __/ /
\____/\____/_/ /_/ /_/ .___/\____/____/\___/_/
                    /_/
Composer version 1.6.3 2018-01-31 16:28:17

# npm
$ npm -v
5.7.1

Laravel5.5のインストール

$ composer create-project --prefer-dist laravel/laravel blog "5.5.*"

バージョン確認

$php artisan --version
Laravel Framework 5.5.40

起動してみる

$ cd blog
$ php artisan serve
スクリーンショット 2018-04-30 18.46.32.png

成功！！！

npmで監視しておく

$ npm run watch-poll
sh: cross-env: command not found
npm ERR! file sh
npm ERR! code ELIFECYCLE
npm ERR! errno ENOENT
npm ERR! syscall spawn
npm ERR! @ watch: `cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js "--watch-poll"`

おっと・・・？

まず、

$ npm install
$ npm install ajv-keywords
$ npm install ajv

とかやって、

npm run watch-poll

> @ watch-poll /Users/hondakazuki/projects/blog
> npm run watch -- --watch-poll


> @ watch /Users/hondakazuki/projects/blog
> cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js "--watch-poll"

 10% building modules 1/1 modules 0 active
Webpack is watching the files…

 95% emitting

 DONE  Compiled successfully in 3698ms                                                                                                                                    20:14:31

                                                                                                    Asset     Size  Chunks                    Chunk Names
  fonts/vendor/bootstrap-sass/bootstrap/glyphicons-halflings-regular.eot?f4769f9bdb7466be65088239c12046d1  20.1 kB          [emitted]
fonts/vendor/bootstrap-sass/bootstrap/glyphicons-halflings-regular.woff2?448c34a56d699c29117adc64c43affeb    18 kB          [emitted]
 fonts/vendor/bootstrap-sass/bootstrap/glyphicons-halflings-regular.woff?fa2772327f55d8198301fdb8bcfc8158  23.4 kB          [emitted]
  fonts/vendor/bootstrap-sass/bootstrap/glyphicons-halflings-regular.ttf?e18bbf611f2a2e43afc071aa2f4e1512  45.4 kB          [emitted]
  fonts/vendor/bootstrap-sass/bootstrap/glyphicons-halflings-regular.svg?89889688147bd7575d6327160d64e760   109 kB          [emitted]
                                                                                               /js/app.js  1.24 MB       0  [emitted]  [big]  /js/app
                                                                                             /css/app.css   147 kB       0  [emitted]         /js/app

通った！！

Bootstrap4を導入

package.json
- "bootstrap-sass": "^3.3.7",
+ "bootstrap": "^4.0.0",
resource/asset/js/bootstrap.js
try {
    window.$ = window.jQuery = require('jquery');

    // require('bootstrap-sass');
    require('bootstrap');
} catch (e) {}
resources/assets/sass/app.scss
// Bootstrap
// @import "~bootstrap-sass/assets/stylesheets/bootstrap";
@import "~bootstrap/scss/bootstrap";
resources/assets/sass/_variables.scss
// Typography
$icon-font-path: "~bootstrap-sass/assets/fonts/bootstrap/";
$font-family-sans-serif: "Raleway", sans-serif;
// $font-size-base: 14px;
$font-size-base: 1rem;
$line-height-base: 1.6;
$text-color: #636b6f;

という感じでファイルを編集して、

$ npm install
$ npm install popper.js

確認

デフォルトだとわかりにくいので、認証機能を追加してみる

$ php artisan make:auth
$ php artisan migrate

http://127.0.0.1:8000/register
スクリーンショット 2018-04-30 22.01.29.png

Bootstrap4にあわせてレイアウトを修正する

darkバージョンが好きなのでdarkにして、ハンバーガーメニューはよくわからないので削除しましたｗ

resources/views/layouts/app.blade.php
<!DOCTYPE html>
<html lang="{{ app()->getLocale() }}">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- CSRF Token -->
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <title>{{ config('app.name', 'Laravel') }}</title>

    <!-- Styles -->
    <link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
<body>
    <div id="app">
        <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
            <div class="container">
                <div class="navbar-header">
                    <!-- Branding Image -->
                    <a class="navbar-brand" href="{{ url('/') }}">
                        {{ config('app.name', 'Laravel') }}
                    </a>
                </div>

                <!-- Navbar Left -->
                <div class="collapse navbar-collapse justify-content-start" id="navbarSupportedContent">
                </div>
                <!-- Navbar Right -->
                <div class="collapse navbar-collapse justify-content-end" id="navbarSupportedContent">
                    @guest
                        <ul class="nav navbar-nav navbar-right">
                            <li class="nav-item"><a href="{{ route('login') }}" class="nav-link">ログイン</a></li>
                            <li class="nav-item"><a href="{{ route('register') }}" class="nav-link">ユーザ登録</a></li>
                        </ul>
                    @else
                    @endguest
                </div>
            </div>
        </nav>

        @yield('content')
    </div>

    <!-- Scripts -->
    <script src="{{ asset('js/app.js') }}"></script>
</body>
</html>

bootstrap3から4になって、panelからcardになったので、それを変更する。
フォームのクラスも。

resources/views/auth/register.blade.php
@extends('layouts.app')

@section('content')
<div class="container">
    <div class="row justify-content-md-center mt-5">
        <div class="col-md-8 col-md-offset-2">
            <div class="card">
                <div class="card-header bg-dark text-white">ユーザ登録</div>

                <div class="card-body">
                    <form role="form" method="POST" action="{{ url('/register') }}">
                        {!! csrf_field() !!}

                        <div class="form-group row">
                            <label class="col-lg-4 col-form-label text-lg-right">名前</label>

                            <div class="col-lg-6">
                                <input
                                        type="text"
                                        class="form-control{{ $errors->has('name') ? ' is-invalid' : '' }}"
                                        name="name"
                                        value="{{ old('name') }}"
                                        required
                                >
                                @if ($errors->has('name'))
                                    <div class="invalid-feedback">
                                        <strong>{{ $errors->first('name') }}</strong>
                                    </div>
                                @endif
                            </div>
                        </div>

                        <div class="form-group row">
                            <label class="col-lg-4 col-form-label text-lg-right">メールアドレス</label>

                            <div class="col-lg-6">
                                <input
                                        type="email"
                                        class="form-control{{ $errors->has('email') ? ' is-invalid' : '' }}"
                                        name="email"
                                        value="{{ old('email') }}"
                                        required
                                >

                                @if ($errors->has('email'))
                                    <div class="invalid-feedback">
                                        <strong>{{ $errors->first('email') }}</strong>
                                    </div>
                                @endif
                            </div>
                        </div>

                        <div class="form-group row">
                            <label class="col-lg-4 col-form-label text-lg-right">パスワード</label>

                            <div class="col-lg-6">
                                <input
                                        type="password"
                                        class="form-control{{ $errors->has('password') ? ' is-invalid' : '' }}"
                                        name="password"
                                        required
                                >
                                @if ($errors->has('password'))
                                    <div class="invalid-feedback">
                                        <strong>{{ $errors->first('password') }}</strong>
                                    </div>
                                @endif
                            </div>
                        </div>

                        <div class="form-group row">
                            <label class="col-lg-4 col-form-label text-lg-right">パスワード（確認）</label>

                            <div class="col-lg-6">
                                <input
                                        type="password"
                                        class="form-control{{ $errors->has('password_confirmation') ? ' is-invalid' : '' }}"
                                        name="password_confirmation"
                                        required
                                >
                                @if ($errors->has('password_confirmation'))
                                    <div class="invalid-feedback">
                                        <strong>{{ $errors->first('password_confirmation') }}</strong>
                                    </div>
                                @endif
                            </div>
                        </div>

                        <div class="form-group row">
                            <div class="col-lg-6 offset-lg-4">
                                <button type="submit" class="btn btn-primary">
                                    登録する
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

とやると、

スクリーンショット 2018-04-30 22.25.55.png

きれいになった！！

34
36
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
34
36

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?