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

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