CakePHPにBootstrapを適用する

Bootstrapを使うと、レスポンシブ対応のスタイルシートなどを自分で用意しなくてもすぐにサイトの開発が行えます。
本記事はBootstrapをダウンロードしてCakePHPに適用する手順になります。

Bootstrapのダウンロードと配置

  1. Bootstrapから、Get Startedボタン Bootstrapのダウンロード
  2. Download Bootstrapのダウンロード
  3. Compiled CSS and JS>Downloadボタン Bootstrapのダウンロード
  4. ダウンロードしたファイルを解凍すると、以下のような配置になっています
    これらをCakePHPに配置します Bootstrapの構成
    1. cssフォルダの中身を\{CakePHPプロジェクト}\webroot\cssにコピーします
    2. jsフォルダの中身を\{CakePHPプロジェクト}\webroot\jsにコピーします

jQueryのダウンロードと配置

次にjQueryをダウンロードします。

  1. jQueryのDownloadページから、任意のダウンロードリンクを右クリック
    今回は「Download the compressed, production jQuery 3.3.1」を使用しました jQueryのダウンロード
  2. 名前を付けてリンク先を保存(K)… jQueryのダウンロード
  3. ダウンロードしたファイル(jquery-3.3.1.min.js)を\{CakePHPプロジェクト}\webroot\jsにコピーします

CakePHPでの使用方法

ビュー(.ctpファイル)の<head>要素にCSSとJavaScriptファイルの読み込みを指定します。

<!-- Bootstrap の CSS -->
<?= $this->Html->css('bootstrap.min.css') ?>
<!-- jQuery -->
<?= $this->Html->script('jquery-3.3.1.min.js') ?>
<!-- Bootstrap の JS -->
<?= $this->Html->script('bootstrap.min.js') ?>

これでビューなどからBootstrapが利用できるようになります。

このエントリーをはてなブックマークに追加
にほんブログ村 IT技術ブログへ

関連コンテンツ

スポンサードリンク

Comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です