在原本專案當中Laravel是用boostrap來進行管理間隔按鈕等等的插件，
那今天我要來介紹另一個，叫做bulma，
大家可以先開新的專案適用看看，覺得用的上手的在決定套用在現在的專案上，
因為你只要踏上這個旅程你就無法走回頭路了(奸笑)，
我是認真的，因為我就是執行後畫面重設回到一開始的樣子，
路由的位置都要重新貼上後來自己創的，等等做完後會講那些地方要重新貼。
Step1.
輸入 composer require laravel-frontend-presets/bulma
導入BULMA的資料。
Step2.
輸入 php artisan preset bulma-auth
結束之後他會要你安裝npm，你就繼續執行安裝，
安裝完後他會出現像下面的警告，這個警告是給使用mac的人，
如果是windows的話可以直接忽略。
Step3.
輸入 npm run watch
Step4.
輸入 php artisan serve
假如你剛剛直接忽略前言直接做的話，心裡肯定很多OOXX，
說真的我當下的心情就是這樣，因為當下我以為要重做。
Step5.
重貼路由
首先我們到welcome.balde.php，然後把Home的路徑改回
{{ route(‘works.index’) }}，這是我們首頁的路由還記得吧~
打開web.blade.php會發現多了兩行，
這是我們剛剛輸入php artisan preset bulma-auth 所產生的東西，
這就是為什麼我們東西都會跑掉的原因，他幫我們更新的註冊的畫面，
所以路由那些設定都會變成新的樣子，所以我們要把那兩行comment掉。
Step6.
調整頁面
這時候我們會發現東西按鈕都跑掉了~而且畫面變超醜，
主要是因為boostrap被bulma取代了，所以現在必須使用bulma的語法，
但是我們必須先搞定nav跟header的問題。
我們來解決Log out的問題，先到app.blade.php複製新的nav，
貼到我們nav的檔案上，原本的先不要刪掉喔~~
把這行換成
<a class=”navbar-item” href=”{{ route(‘works.index’) }}”>
Portfolio
</a>
<a class=”navbar-item” href=””>
About Me
</a>
儲存後刪掉原本的來看看效果~~
很完美的log out(哈~自己說)。
再來是header的問題，我們把header內容換成這樣
<header class=”bd-header”>
<div class=”columns is-mobile”>
<div class=”column is-5 is-offset-5″>
<a class=”” href=”{{ url(‘/’) }}”>
<img src=”{{ asset(‘images/LOGO.png’) }}” alt=”我是圖”
width=”136px” height=”52.4px”>
</a>
</div>
</div>
</header>
然後來看看效果
恩恩~真棒，越來越接近我們原本規劃的樣子了，
在這裡我們使用column來調整間距，之後也會常常用到，
詳細使用方法我們可以到官網參考。
接著我們來調整跑掉的按鈕跟間距，打開home.blade.php。
將 button的 class 改成 button is-info，顏色的命名可以到首頁或是官網去看，
裡面都有更詳細的解說。
藍色是我想要作品的排法，那這樣子的話要怎麼用Bulma寫出來呢?
以下是我的作法
<div class=”row columns is-multiline”>
<div class=”column is-11″>
這裡是button
</div>
@foreach($works as $work)
<div class=”column is-one-third”>
這裡是內容
</div>
@endforeach
</div>
然後我們來看看效果~~
耶~越來越像了，之後我們就可以來做CSS美化的部分了。
以上是有點做到不知道到底對不對的Bulma教學~~~
