使用 Tailwind CSS 重写留言板 UI 界面


本章节目录

    在我们上一章节配置完成的 laravel-feedback-tailwindcss 项目下,执行以下命令来监测静态资源文件的变动

    npm run watch
    

    重写首页

    打开 resources/views/index.blade.php 文件,在 head 标签增加以下代码,以引入 Tailwind CSS 样式

    <link href="{{ asset('css/app.css') }}" rel="stylesheet">
    

    同时要记得删除 Bootstrap 的 CSS 样式

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
    

    看下扒掉 CSS 样式的素颜界面,拉拉跨跨,原始生态。

    重写后的代码

    <!DOCTYPE html>
    <html lang="zh-CN">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>麻辣讲留言板系统</title>
        <link rel="shortcut icon" type="image/x-icon" href="https://img.malajiang.com/assets/web/img/favicon.png"/>
        <link href="{{ asset('css/app.css') }}" rel="stylesheet">
    </head>
    <body>
    <div class="container mx-auto p-5">
        <h2 class="text-center text-4xl">麻辣讲留言板系统</h2>
        <h6 class="text-center p-4 text-xl text-gray-500">Laravel + Tailwind CSS 开发实战</h6>
        @if(Session::has('message'))
            <div class="border border-green-400 bg-green-50 text-green-800 p-4 rounded" role="alert">{{ Session::get('message') }}</div>
        @endif
        <hr>
        <form action="{{ route("store") }}" class="mt-5" method="post">
            @csrf
            <div class="py-3">
                <label for="">您的姓名</label>
                <input type="text" name="name" class="border border-gray-300 w-full py-2 px-4 bg-white text-gray-700 placeholder-gray-400 rounded shadow-sm text-base focus:outline-none focus:ring-2 focus:ring-green-600 text-green-600" id="name" placeholder="请输入您的姓名">
            </div>
            <div class="py-3">
                <label for="phone">您的手机</label>
                <input type="text" class="border border-gray-300 w-full py-2 px-4 bg-white text-gray-700 placeholder-gray-400 rounded shadow-sm text-base focus:outline-none focus:ring-2 focus:ring-green-600 text-green-600" name="phone" id="phone" placeholder="请输入您的手机号码">
            </div>
            <div class="py-3">
                <label for="title">留言标题</label>
                <input type="text" class="border border-gray-300 w-full py-2 px-4 bg-white text-gray-700 placeholder-gray-400 rounded shadow-sm text-base focus:outline-none focus:ring-2 focus:ring-green-600 text-green-600" name="title" id="title" placeholder="请输入您的留言标题">
            </div>
            <div class="py-3">
                <label for="content">留言内容</label>
                <textarea class="border border-gray-300 w-full py-2 px-4 bg-white text-gray-700 placeholder-gray-400 rounded shadow-sm text-base focus:outline-none focus:ring-2 focus:ring-green-600 text-yellow-600" name="content" rows="5" placeholder="在这里输入您的留言内容"></textarea>
            </div>
            <hr>
            <button type="submit" class="py-2 px-4  bg-green-600 hover:bg-green-700 focus:ring-green-500 focus:ring-offset-green-200 text-white w-full transition ease-in duration-200 text-center text-base font-semibold shadow-md focus:outline-none focus:ring-2 focus:ring-offset-2  rounded-lg">提交</button>
        </form>
        <h4 class="mt-10 text-gray-500">已经有留言({{ $records->count() }} 条)</h4>
        <hr class="my-2">
        <table class="border w-full">
            <thead>
            <tr class="bg-gray-50 border text-center">
                <th class="p-2 border">ID</th>
                <th class="border">留言者</th>
                <th class="border">手机号码</th>
                <th class="border">标题</th>
                <th class="border">内容</th>
                <th class="border">留言时间</th>
                <th class="border">操作</th>
            </tr>
            </thead>
            <tbody>
            @forelse($records as $record)
                <tr class="border text-sm text-center">
                    <td class="p-2 border">{{ $record->id }}</td>
                    <td class="p-2 border"{{ $record->name }}</td>
                    <td class="p-2 border">{{ $record->phone }}</td>
                    <td class="p-2 border">{{ $record->title }}</td>
                    <td class="p-2 border">{{ $record->content }}</td>
                    <td class="p-2 border">{{ $record->created_at }}</td>
                    <td class="p-2 border">
                        <a href="{{ route("edit", $record->id) }}" class="btn btn-primary">编辑</a>
                        <form action="{{ route('destroy', $record->id)}}" method="post">
                            @CSRF
                            @method("delete")
                            <button type="submit" class="btn btn-danger" onclick="return confirm('确认删除?')">删除</button>
                        </form>
                    </td>
                </tr>
            @empty
                <tr>
                    <td colspan="100" class="text-center text-gray-400 p-3">暂无留言</td>
                </tr>
            @endforelse
            </tbody>
        </table>
        {{ $records->links() }}
    </div>
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
    </body>
    </html>
    

    重写后的效果,简简单单,随心所欲,只需要在 index.blade.php 页面就可以完成所有设计,不需要编写一行 CSS 样式。

    操作成功提示框

    重写编辑页

    打开 resources/views/edit.blade.php 文件,在 head 标签增加以下代码,以引入 Tailwind CSS 样式

    <link href="{{ asset('css/app.css') }}" rel="stylesheet">
    

    同时要记得删除 Bootstrap 的 CSS 样式

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
    

    也看一下无 CSS 样式的编辑页面效果

    重写后的代码

    <!DOCTYPE html>
    <html lang="zh-CN">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>编辑留言</title>
        <link href="{{ asset('css/app.css') }}" rel="stylesheet">
    </head>
    <body>
    <div class="container mx-auto p-5">
        <h4 class="text-center text-2xl mb-4">编辑留言 <a href="{{ route("index") }}" class="ml-2 text-base text-gray-400">返回留言</a></h4>
        @if(Session::has('message'))
            <div class="border border-green-400 bg-green-50 text-green-800 p-4 rounded" role="alert">{{ Session::get('message') }}</div>
        @endif
        <hr>
        <form action="{{ route("update", $record->id) }}" class="mt-5" method="post">
            @csrf
            @method("put")
            <div class="form-group">
                <label for="name">您的姓名</label>
                <input type="text" name="name" class="border border-gray-300 w-full py-2 px-4 bg-white text-gray-700 placeholder-gray-400 rounded shadow-sm text-base focus:outline-none focus:ring-2 focus:ring-green-600 text-green-600" id="name" placeholder="请输入您的姓名" value="{{ $record->name }}">
            </div>
            <div class="py-3">
                <label for="phone">您的手机</label>
                <input type="text" class="border border-gray-300 w-full py-2 px-4 bg-white text-gray-700 placeholder-gray-400 rounded shadow-sm text-base focus:outline-none focus:ring-2 focus:ring-green-600 text-green-600" name="phone" id="phone" placeholder="请输入您的手机号码" value="{{ $record->phone }}">
            </div>
            <div class="py-3">
                <label for="title">留言标题</label>
                <input type="text" class="border border-gray-300 w-full py-2 px-4 bg-white text-gray-700 placeholder-gray-400 rounded shadow-sm text-base focus:outline-none focus:ring-2 focus:ring-green-600 text-green-600" name="title" id="title" placeholder="请输入您的留言标题" value="{{ $record->title }}">
            </div>
            <div class="py-3">
                <label for="content">留言内容</label>
                <textarea class="border border-gray-300 w-full py-2 px-4 bg-white text-gray-700 placeholder-gray-400 rounded shadow-sm text-base focus:outline-none focus:ring-2 focus:ring-green-600 text-yellow-600" name="content" rows="5" placeholder="在这里输入您的留言内容">{{ $record->content }}</textarea>
            </div>
            <hr>
            <button type="submit" class="py-2 px-4  bg-green-600 hover:bg-green-700 focus:ring-green-500 focus:ring-offset-green-200 text-white w-full transition ease-in duration-200 text-center text-base font-semibold shadow-md focus:outline-none focus:ring-2 focus:ring-offset-2  rounded-lg">提交</button>
        </form>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
    </body>
    </html>
    

    预览一下效果,清新明亮。

    总结

    从以上代码的改动可以看到,使用 Tailwind CSS 的通用样式,可以完成边距、颜色、容器、投影、交互、表单元素属性(placeholder)等等众多设置。

    对于界面调试,图文教程的表现力总是欠缺的,在视频教程,可以看到调试过程,能更好的体会到 Tailwind CSS 的便捷和强大。

    有过 Web 前端开发经验的朋友会发现,里边有许多代码是重复的,我们可以抽取出来共用样式,重复使用吗?比如表单样式。如果后继我们需要修改整体风风格,会是很大的工作量,而且还难免会有遗漏。

    不用担心,Tailwind CSS 是支持代码复用的,下一章,我们就讲一下样式的复用。


    请先 登录
    审核后显示
    讨论记录(0 条)
    暂时还没有讨论

    © 2024 麻辣讲 豫ICP备19017310号-2