Laravel _Bulma的使用
在原本專案當中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
你會看到嶄新的頁面,包括按鈕的命名他都有跟你說。
點擊HOME之後會出現跟之前一樣的畫面,
假如你剛剛直接忽略前言直接做的話,心裡肯定很多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教學~~~