Laravel8+Vue3+Bootstrap5實作TODO List ep09:安裝bootstrap5並美化todo list畫面

Table of Contents

Table of Contents

使用Laravel8+Vue3+Bootstrap5實作TODO List網頁應用程式的系列文章第九篇。
本文將示範安裝Bootstrap5並介紹如何使用它。

教學影片

Github

https://github.com/scobin/laravel-todolist/tree/feature/bootstrap5

安裝與設定bootstrap5

使用NPM安裝指令

npm install --save-dev bootstrap bootstrap-icons

建立scss檔案

server/todolist/resources/scss/bs.scss

@import "~bootstrap/scss/bootstrap";
@import '~bootstrap-icons/font/bootstrap-icons';

Webpack的打包設定

server/todolist/webpack.mix.js

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

載入打包後的css檔案

server/todolist/resources/views/welcome.blade.php

<head>
    <!-- ... -->
    <link rel="stylesheet" href="{{ mix('css/bs.css') }}">
</head>

使用bootstrap5

bootstrap5's container

server/todolist/resources/views/welcome.blade.php

<body class="antialiased">
        <div class="container" id="app">
            <v-todo-list></v-todo-list>
        </div>
</body>

Todo List

server/todolist/resources/js/components/TodoListComponent.vue

<template>
    <div class="pt-5">
        <h2><i class="bi bi-list-task"></i>My Todo List</h2>
        <div class="row p-4">
            <input class="col" type="text" v-model="newTodo.body" placeholder="Enter new task">
            <button class="col-auto btn btn-primary mx-1" @click="addTodo">+</button>
        </div>
        <ul class="list-group">
            <li v-for="(todo, index) in todos" :key="index"
            class="list-group-item d-flex align-items-center">
                <div class="form-check m-auto ">
                    <input class="form-check-input"
                    :id="`todo-${index}`"
                    type="checkbox"
                    :checked="todo.completed"
                    @change="completed(todo)">
                </div>
                <label :for="`todo-${index}`" class="flex-fill">
                    <span :class="[todo.completed ? 'line-through' : '']">{{ todo.body }}</span>
                </label>
                <div class="align-items-center d-flex">
                    <button class="border-0 btn btn-outline-danger" @click="deleteTodo(todo)"><i class="bi bi-trash"></i></button>
                </div>
            </li>
        </ul>
    </div>
</template>
<style scoped>
.line-through {
    text-decoration: line-through;
}
</style>

加入動畫效果(Vue List Transitions)

參考Official Document

使用步驟:

  1. 代入<transition-group>
  2. 修改key的值
  3. 調整動畫css
<template>
    <div class="pt-5">
        <!-- ... -->
        <transition-group name="list" tag="ul" class="list-group">
            <li v-for="(todo, index) in todos" :key="todo"
                class="list-group-item d-flex align-items-center">
                <!-- ... -->
            </li>
        </transition-group>
    </div>
</template>
<style>
    /* ... */ 
    .list-enter-active, .list-leave-active {
        transition: all 1s;
    }
    .list-leave-to {
        opacity: 0;
        transform: translateX(-300px);
    }
    .list-enter-from {
        opacity: 0;
        transform: translateY(-30px);
    }
</style>
<script>
    //... 
</script>

本篇用bootstrap5美化了todo list畫面,並且加入了動畫效果讓畫面操作更加生動。
到這篇為止已經介紹完用Laravel8製作基本的Todo list程式。
希望能對你有所幫助。
那麼,我們下回見!