2018/10/12LaravelでBootstrapを導入するには主にやり方が2つあります。本体をダウンロード2)CDNを使うさらに本体をダウンロードする方法ではコンパイル済みかそうでないかでやり方が変わります。Elixir)を使ってコンパイル。最適化できる方法はBootstrap本体をダウンロードしてコンパイルする方法ですが、手順も複雑です。今回は最も手軽なCDNを利用した導入方法で進めます。CDNでの導入Bladeの共通レイアウトファイルにBootstrapとJqueryの置いてあるファイルのパスを記述します。CDNでの導入方法はいたって簡単で1)ヘッダー内にBootstrap本体(bootstrap.min.css)を読み込む2)HTMLの末尾にJqueryとBootstrapのjavascriptを読み込むこれでBootstrapが利用できます。これらの記述はBladeのレイアウト定義ファイルに記述します。)に記述して使います。指定するとBootstrapが左右にマージンを表示します。末尾に記述したjsファイル(Jqueryとbootstrap.min.js)を読み込まないと、ドロップダウンやモーダルが動かなくなります。チュートリアル実際にBootstrapを導入してBlade化してみます。UI」というテーマもいれます。完成は以下のような感じです。Demo【解説】ここではBladeのレイアウト定義ファイルをマスターファイル。そのレイアウトを継承して作成した子ページをブランチファイルと便宜上、呼びます。UI本体をダウンロードします。ダウンロードして解凍すると「Flat-UI-master」ディレクトリができます。その中に「dist」「assets」「img」ディレクトリをLaravelプロジェクトの「public」ディレクトリに設置します。UI本体にはBootstrapやJqueryがあるのでCDNで読み込みまず、先ほど「public」ディレクトリに設置したファイルを読み込ませます。Started」のページでコピペします。}}/dist/js/vendors/video-js.swf"</script></body></html>【解説】リンクのパスはフルパス表記になります。urlヘルパー関数を利用します。さくらサーバでは複数のプロジェクトを運用しているのでこのような形になりました。UIディレクトリにある「getting-started.html」をコピペしました。UIの文字やフォームのコンポーネントをブランチファイルとして作成していきます。【4】Routerの設定Viewファイルを作成するごとにRouterを設定するのは面倒なので、ルートパラメータを使用します。Route::get('/flat_ui/{name}','ComponentsController@parts');【5】Controllerの設定artisanコマンドでコントローラのスケルトンを作成します。ComponentsControllerパラメータの名前がそのままViewファイルになるようにコントローラで設定します。}}【6】動作確認ローカルでテストして下記のように表示されていればOKです。テーマを使うと雰囲気がまた変わっていいですね。LaravelでのBootstrapの導入については以上になります。気づいたことや新しい発見など情報を発信していきます。コメントをキャンセルメールアドレスが公開されることはありません。*サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。独学で学習するなら動画学習が断然おススメ!Laravelが学べる評判の動画学習サイト3つご紹介します!PHPエンジニアとしての就職、転職、フリーランスに関しての情報はコチラ!Laravelが学べるプログラミングスクールに関しての記事をまとめています。アプリのチュートリアルをよく見ますよね。/まとめ環境構築PHPフレームワークのひとつであるLaravelを専門に書いている学習サイトです。