PHP
Laravel
bootstrap4
laravel5.5

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


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にして、ハンバーガーメニューはよくわからないので削除しましたw


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

きれいになった!!