KATUBLO
2019年02月02日

【Laravel5】bootstrapのFlat UIのインストール手順を紹介

ゴール

laravel5にbootstrapのFlat UIをインストールして使えるようにする。

 

Flat UIとは?

bootstrapのデザインのテンプレート

 

 

おしゃれなデザインのテンプレートがたくさん揃っています。いちいち自分でデザインやコーディングをすることなく簡単におしゃれなデザインを実装できます。

 

インストールする

先ほど貼ったFlat UIのリンクに飛んで下の方にスクロールすると、dowonloadボタンがあるので、そこからダウンロードすることができます。zip形式でダウンロードされるので解凍しましょう。

 

 

必要なファイルをFTPで送信する

私はレンタルサーバーにlaravelを置いて開発しているので、FTPで先ほどダウンロードしたFlat UIの中の

 

dist

docs

images

 

の3つを「laravel/public 」の階層に配置します。

 

Flat UIを取り込む

head内に以下の記述をすることでFlat UIを読み込むことができます。

 

 

このファイルの中にはbootstrapを読み込む記述がなされています。

 

 

UIパーツを配置する

 

「docs/components.html」にローカルでアクセスするとUIパーツとそのコードが載ったページを閲覧することができます。

その中からサンプルがてらに以下のコードを打ち込んでみました。

 

 

結果

 

簡単におしゃれなデザインのパーツを配置することができました。

 

 

気づき・感想

もっといろんな種類のフォームのデザインをみてみたいのでオススメのものがあったら後日紹介します。

最後まで読んで頂き
ありがとうございました。
SNS等でのシェアが頂ければ幸いです。

プロフィール

@KATUO

現在都内私立大学に通う大学3年生。大学では電気電子工学を専攻。大学2年の夏頃に、プログラマーの長期インターン募集の広告が目に止まり、独学でプログラミングの学習をスタート。この時期からプログラミングにどハマりし、現在までに「AIスタートアップ」「Webマーケティング会社」でエンジニアとしての業務に没頭してきた。

過去の投稿