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
成功！！！
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
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
とやると、
きれいになった！！