【教程】將預設前端套件升級為 Bootstrap 4.0.0-beta

ChiVincent發表於2017-09-05

在 2017 年 8 月 10 日，Bootstrap 終於迎來了久違的 4.0.0-beta 版。

相較於 alpha 版本，beta 版少了很多地雷。同時，較 v3.3.x 版本也增進了排版的方便程度與簡化開發的難度。

本篇文章不針對 Bootstrap v4 做多教學，有興趣的可參閱官方檔案或由六角學院翻譯的繁體中文手冊

範例 Repository BS4Starter

範例圖
file
file
file
file

Step 1. 準備一個乾淨的 Laravel 5.5 環境 0467e66

$ laravel new BS4Starter

或

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

Step 2. 移除所有預設的前端套件 0170d8f

$ php artisan preset none

Step 3. 移除所有 npm packages 並新增所需要的 package 3fb4985

$ yarn remove axios cross-env laravel-mix lodash
$ yarn add axios cross-env laravel-mix lodash jquery popper.js bootstrap@4.0.0-beta

註：這邊移除 axios、cross-env、laravel-mix 跟 lodash 後又重新安裝的理由有兩個：

為了確定安裝的套件為最新版本（若使用 laravel new BS4Starter 指令建立 Laravel Project，其 package 版本可能為舊版）

在 Laravel 預設中認為，axios、cross-env、laravel-mix 跟 lodash 是在開發時期才需要被引入的，而在釋出出版本之前就應該將 public/css 與 public/js 編譯為 production 模式再釋出，我認為這樣的開發方法不夠妥當（我不認為編譯後的 css 與 js 應該被放入 git 中）

註2：除了 jquery 之外，bootstrap v4 需要 popper.js 去達成 dropdown 的功能，所以記得引入。
不要引入 popper，popper 跟 popper.js 是兩個完全不同的專案，除非你有需要，否則不要引入。

Step 4. 修改預設的 js 與 sass e2e0fab

在 resource/assets/js/bootstrap.js：

// 省略…

try {
    window.$ = window.jQuery = require('jquery');

    require('bootstrap-sass');
} catch (e) {}

// 省略…

改為

// 省略…

import 'bootstrap';

// 省略…

在 resources/assets/sass/app.scss 中加入以下內容

// Bootstrap
@import "node_modules/bootstrap/scss/bootstrap.scss";

然後修改 webpack.mix.js，修改範例如下所示：

let mix = require('laravel-mix');
let webpack = require('webpack');

mix.webpackConfig({
    plugins: [new webpack.ProvidePlugin({
        $: 'jquery',
        jQuery: 'jquery',
        Popper: ['popper.js', 'default']
    })]
});

mix.js('resources/assets/js/app.js', 'public/js')
   .sass('resources/assets/sass/app.scss', 'public/css');

最後安裝套件並編譯

$ yarn install
$ yarn run dev

Step 5. 建立基礎認證樣板（Authentication Template）e599559

$ php artisan make:auth

Step 6. 修改認證樣板 73b1902

這個工程比較浩大一些，不過有一些基本的邏輯可循

沒有 panel，用 card 取而代之
沒有 offset 系列

以 home.blade.php 為例

將所有的 panel 取代為 card （PHPStorm 中用 ⌘+R 叫出 Replace）
移除 card-default
將 card-heading 重新命名為 card-header
移除 col-md-offset-2
在 <div class="row"> 中加入 justify-content-md-center 使其成為 <div class="row justify-content-md-center">

修改前

@extends('layouts.app')

@section('content')
<div class="container">
    <div class="row">
        <div class="col-md-8 col-md-offset-2">
            <div class="panel panel-default">
                <div class="panel-heading">Dashboard</div>

                <div class="panel-body">
                    @if (session('status'))
                        <div class="alert alert-success">
                            {{ session('status') }}
                        </div>
                    @endif

                    You are logged in!
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

修改後

@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">
                    @if (session('status'))
                        <div class="alert alert-success">
                            {{ session('status') }}
                        </div>
                    @endif

                    You are logged in!
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

對於有表單的內容，如 login.blade.php、register.blade.php 等

一步步講有點複雜，直接比對一下修改前後吧

修改前

@extends('layouts.app')

@section('content')
<div class="container">
    <div class="row">
        <div class="col-md-8 col-md-offset-2">
            <div class="panel panel-default">
                <div class="panel-heading">Login</div>

                <div class="panel-body">
                    <form class="form-horizontal" method="POST" action="{{ route('login') }}">
                        {{ csrf_field() }}

                        <div class="form-group{{ $errors->has('email') ? ' has-error' : '' }}">
                            <label for="email" class="col-md-4 control-label">E-Mail Address</label>

                            <div class="col-md-6">
                                <input id="email" type="email" class="form-control" name="email" value="{{ old('email') }}" required autofocus>

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

                        <div class="form-group{{ $errors->has('password') ? ' has-error' : '' }}">
                            <label for="password" class="col-md-4 control-label">Password</label>

                            <div class="col-md-6">
                                <input id="password" type="password" class="form-control" name="password" required>

                                @if ($errors->has('password'))
                                    <span class="help-block">
                                        <strong>{{ $errors->first('password') }}</strong>
                                    </span>
                                @endif
                            </div>
                        </div>

                        <div class="form-group">
                            <div class="col-md-6 col-md-offset-4">
                                <div class="checkbox">
                                    <label>
                                        <input type="checkbox" name="remember" {{ old('remember') ? 'checked' : '' }}> Remember Me
                                    </label>
                                </div>
                            </div>
                        </div>

                        <div class="form-group">
                            <div class="col-md-8 col-md-offset-4">
                                <button type="submit" class="btn btn-primary">
                                    Login
                                </button>

                                <a class="btn btn-link" href="{{ route('password.request') }}">
                                    Forgot Your Password?
                                </a>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

修改後

@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">Login</div>

                <div class="card-body">
                    <form method="POST" action="{{ route('login') }}">
                        {{ csrf_field() }}

                        <div class="form-group">
                            <label for="email">E-Mail Address</label>

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

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

                        <div class="form-group">
                            <label for="password">Password</label>

                            <input id="password" 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 class="form-group">
                            <div class="checkbox">
                                <label>
                                    <input type="checkbox" name="remember" {{ old('remember') ? 'checked' : '' }}> Remember Me
                                </label>
                            </div>
                        </div>

                        <div class="form-group">
                            <button type="submit" class="btn btn-primary">
                                Login
                            </button>

                            <a class="btn btn-link" href="{{ route('password.request') }}">
                                Forgot Your Password?
                            </a>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

Step 7. 重寫主模板（resoureces/views/layouts/app.blade.php） 11cd394

因為 Bootstrap v4 對於 nav 大幅度修改，所以主模板基本上是要全部重寫

這邊直接放上我的版本

<!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, shrink-to-fit=no">

    <!-- 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>
<header class="mb-sm-3">
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <div class="container">
            <a class="navbar-brand" href="{{ url('/') }}">{{ config('app.name', 'Laravel') }}</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav ml-auto">
                    @if (auth()->guest())
                        <li class="nav-item">
                            <a class="nav-link" href="{{ route('login') }}">Login</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="{{ route('register') }}">Register</a>
                        </li>
                    @else
                        <li class="nav-item dropdown">
                            <a class="nav-link dropdown-toggle" href="" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                {{ Auth::user()->name }} <span class="caret"></span>
                            </a>
                            <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                                <a class="dropdown-item" href="{{ route('logout') }}"
                                   onclick="event.preventDefault();
                                        document.getElementById('logout-form').submit();">
                                    Logout
                                </a>

                                <form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
                                    {{ csrf_field() }}
                                </form>
                            </div>
                        </li>
                    @endif
                </ul>
            </div>
        </div>
    </nav>
</header>
<main>
    @yield('content')
</main>

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

至此，基本上是將所有的 Laravel Authentication Template 全部改為 Bootstrap v4。

認真來說，BSv4 的風格較 v3 來得大方許多，而且在預設顏色的表現上也相當具有突顯性。

我認為 BSv4 寫起來更加舒適。

Laravel 5 前端預設 Bootstrap 4
2017-11-08
Laravel前端boot
PHP study 升級預設的MYSQL版本為5.7
2018-11-26
PHPMySql
bootstrap 為什麼只能預設12列
2020-12-10
boot
OTA升級更新系統預設設定
2024-07-01
好程式設計師web前端教程分享預設行為和拖拽思路
2019-07-11
程式設計師Web前端
CentOS 6升級預設python版本
2021-09-09
CentOSPython
C# 利用.NET 升級助手將.NET Framework專案升級為.NET 6
2022-04-10
C#Framework
【BootStrap】--前端利器BootStrap
2015-08-10
boot前端
redhat 6.8升級預設cmake 2.8到cmake 3.9
2019-12-03
Redhat
為實現電動車長途旅行，特斯拉超級充電站將大幅升級
2018-03-07
更改bootstrap的預設樣式
2019-03-14
boot
如何將Angular單專案升級為多專案
2021-10-26
Angular
CentOS 7核心升級教程。
2024-02-07
CentOS
入門級前端教程
2018-03-02
前端
為了減少程式碼複雜度，我將if-else升級為面向狀態程式設計
2021-10-08
複雜度程式設計
蘋果iOS10 beta2預覽版升級圖文教程
2016-07-07
蘋果iOS
CentOS6.9下升級預設的OpenSSH操作記錄（升級到OpenSSH_7.6p1）
2018-08-14
CentOS
2020版Bootstrap入門教程為你助力成為企業需要的高薪前端人才
2020-04-23
boot高薪前端
windows10預覽版怎麼升級正式版_windows10預覽版升級正式版步驟【圖為】
2020-02-06
Windows
win8怎麼升級到win10 win8升級為window10方法教程
2021-12-29
Win10
升級redhat 6.8 預設gdb 7.2到gdb 8.3.1操作指南
2019-12-04
Redhat
win10怎麼將potplayer設定為預設播放器_win10如何將potplayer設定為預設播放器
2020-03-10
Win10播放器
華三裝置升級教程
2020-12-17
macOS 11.0怎麼升級？macOS Big Sur 升級教程
2021-01-08
Mac
iOS10公測版升級教程攻及升級攻略
2016-07-12
iOS
MIUI8怎麼升級 5種MIUI 8升級教程
2016-05-16
UI
iOS10 beta2怎麼升級蘋果iOS10 beta2預覽版升級圖文教程
2016-07-07
iOS蘋果
CentOS 6下gcc升級的操作記錄(由預設的4.4.7升級到6.4.0版本）
2018-08-10
CentOSGC
windows8.1升級windows10預覽版詳細教程【圖文】
2019-12-28
Windows
ios10釋出時間下載及預覽版升級教程
2016-06-15
iOS
更改BootStrap popover的預設樣式
2018-09-13
boot
最火的前端開發框架Bootstrap使用教程學習！
2017-10-26
前端框架boot
將預設檢視改為“文件結構圖”
2010-03-24
谷歌無人駕駛汽車部門將升級為獨立子公司
2015-12-17
谷歌
預告丨零信任產業標準工作組將成立，騰訊iOA重磅升級
2020-06-22
產業
【前端基礎】Bootstrap
2019-07-12
前端boot
Flutter 升級 1.12 適配教程
2019-12-25
Flutter
關閉chrome自動升級的教程 chrome如何取消自動升級
2020-11-21
Chrome

【教程】將預設前端套件升級為 Bootstrap 4.0.0-beta

相關文章