bootstrap4を追加する
デザインって大事ですね。なんか、こう簡単にそれなりに作りたいけれど、できないもどかしさ、何とかなりませんかね？
また丸投げモードできましたね。「何とかなりませんか」という問いに対して、「出来ない」とは言えないわね。まあ、着いてきなさい。
https://getbootstrap.com/docs/4.4/getting-started/download/bootstrapをダウンロードですか。
ダウンロードしたものを
/webroot/js/webroot/css
に配置してね。続いて、jQueryも。
jqueryって最近あまり聞かないのですが、大丈夫ですか？
まあ、とは言え、デファクトスタンダードで、情報もいっぱいあるので、初学者のうちはしっかりと使いこなしたら便利。
このページの production jQuery というところから、ダウンロードすると、
jquery-3.4.1.min.js
というファイルがダウンロードできるので、これをwebroot/js/に配置して。
テンプレート修正
ん～、配置しましたけれど、今までと全く同じ表示しかされません。おまじないが必要だったりしますか？
もちろん、これから、おまじないをかけるので、見ておいて。
まずは一番外側のテンプレートで、サイト全体に共通する処理の記載をします
$ vim templates/layout/default.phpvimが起動したら、
: set number
と打ち込むと左側に行番号が表示されるので便利よ。
で、今回は33行目の milligram.min.cssを読み込んでいる行を削除します。逆にこの行の周辺で、上記のCSSやjqueryを読み込むように以下を追加する
<?= $this->Html->css('milligram.min.css') ?> ⇒この行を削除
<?= $this->Html->css('bootstrap.min.css') ?>
<?= $this->Html->css('bootstrap-grid.min.css') ?>
<?= $this->Html->script('jquery-3.4.1.min') ?>
<?= $this->Html->script('bootstrap.min') ?>FriendsOfCake/bootstrap-ui を追加する
外側で、cssを読み込むように追加したので、あとは個別アクションごとのテンプレートを修正すれば良いのですよね。ただ、いちいち面倒ですが、何とかなりませんかね～
今日2回目の丸投げ砲ね。いいわ。こうやって、面倒と思えることを何とかしよう！という精神が大切。
で、コンソールからやっていきます。今回はbootstrap4をcakephp4から使えるようにするので、以下のようにいきます
/var/www/html $ cd （プロジェクトルート）
/var/www/html $ composer require friendsofcake/bootstrap-ui:dev-cake-4-bs-4
/var/www/html $ bin/cake plugin load BootstrapUIComposerはPHPのパッケージ管理をしてくれるもの。便利に使えますよ
今回インストールしたパッケージの使い方はまた改めて。
コメント