04-16-2019

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教學~~~