昨天大家應該都寫完joiner的show了，跟著我們一路走來的大家應該都對laravel如何使用有更多的理解了吧。那我們今天也是要來看看前端，看看還有甚麼排版方式可以更美化你的頁面。

若是按鈕總是只有一個顏色，按下去後就轉跳頁面那麼這個按鈕好像就少了些甚麼，是不是少了些動感或是裝飾呢？那我們今天來看看有甚麼用法可以增加他的有趣吧。

• hover
  hover是指你的鼠標移到上面時所作出的變化，這個變化可以是各式各樣你所定義的，那我們最常用到的是讓你的按鈕變色，讓他變深，就好像你真的將按鈕按下去了一樣，也有著提醒你按鈕的功能。
  說到提醒，第一次寫網頁的各位朋友們不知道有沒有發現，我們會將一些送出選擇或是一些較重要的按鈕賦予顏色，而另一個讓他保持較淡的顏色或是灰色，這也有提醒的功能喔。
  hover的使用方式是在class中定義加上hover的保留字就可以了，例如：hover:bg-violet-600 ，這樣你鼠標移上去時背景就會變成violet-600，善用這個功能能夠為你的頁面增添一點樂趣。

• focus
  這個我們最常用的方法就是將按鈕點下去後，在他身旁圍繞一圈顏色，使得畫面會較專注於那邊，用法：focus:ring-violet-300，在textbox中使用的話也可以讓使用著較清楚的看到自己在填寫哪些資訊。

• active
  這個可以抓按鈕被按下去實的屬性，我們常用的用法和hover較相似，就是加深顏色讓使用者仿佛按下按鈕般。

若想要看到更多效果或是用法，可以到(https://tailwindcss.com/docs/hover-focus-and-other-states )中去看看，若是這些需要自訂顏色的話需要另外定義喔。

我們現在來看看我們show的大功臣，table。

• table
  有寫過網頁的就知道table其實就是網頁的表格，他能夠讓我們的網頁整齊的顯示資料。其中tr與td分別代表著橫列與直行，而th則是代表著標題，若是你有用到實須記得，要保持th和底下的td數量一樣，因為表格是四方形的弱勢格數不同他會無法正常顯示。而袃table中又有兩種屬性可以選擇：
  • table-auto
    這個在顯示資料時，若是你的資瞭比較多他不會幫你換行而是去壓縮其他資料的空間。
  • table-fixed
    這個在顯示資料時，會幫你換行並將其餘資料平分只剩下的空間。

若是有需要用到時，好好運用table可以很容易的讓你的資料整齊乾淨的呈現。若有需要其他資訊可以到(https://tailwindcss.com/docs/table-layout )去看看。

在我們結束這天前，我們還要介紹一個很可愛的功能 —— 快訊。

那這是甚麼呢？他其實是一個用來提示你剛剛做了些甚麼，在你重新刷新頁面他都會留著，但若是你刷新了頁面或是轉跳後就會消失，那這要怎麼寫呢？

我們可以到 resources\views\layouts\app.blade.php ，的main當中去寫：

@if(session()->has('notice'))
    <div class="bg-indigo-150 px-3 py-2 text-center text-white"> {{session() -> get('notice')}} </div>
@endif

這是告訴他若是我傳進來的東西裡面有notice，幫我顯示notice中的訊息，那我們該怎麼將這個notice傳進去呢？我們拿新增文章來作範例：
讓我們先到app\Http\Controllers\ArticleController.php，並且找到store要回到主要面的那行程式：

 return redirect() -> route('dashboard') -> with('notice', "文章新增成功！");

沒錯，他就是這麼簡單九可以將資料傳回去，後面引號的內容就是你希望它顯示的內容，加上這個之後網頁的互動會變得較活潑，也可以提示使用者他剛剛做了些甚麼舉動，也可以放上一些標語，例如：期待你來參與活動之類的，讓你在製作網頁和之後使用時更有趣。

那我們今天就到這裡啦！寫著寫著居然就已經26天了，好似一轉眼時間就過了，不知道大家有沒又更熟悉這個工具了呢？之後的幾天我們會教一些小工具或是小功能穰你的網頁變得更加晚整、方便使用，那我們明天見，掰掰！