バーティのIT技術ブログ

Bootstrapを導入して表示デバイスあった画面構成をする方法をまとめました。 ここでは導入から初期設定までの手順、それから簡単なサンプルまでを作成してみます。 なお、公式ページは以下のリンクになります。サンプルが豊富に用意されているのでとても参考になります。 https://getbootstrap.jp/ 事前準備 ライブラリの配置 以下手順でBootstrapライブラリを配置します。 以下のサイトのDownload https://getbootstrap.com/ ダウンロードページの「Compiled CSS and JS」をダウンロードする zipファイルを解凍したらjs、cssのディレクトリをプロジェクトのpublicディレクトリの任意の場所へ配置する (今回はpublic/bootstrap/ 以下に配置) ヘッダー定義 Bootstrapを適用する画面のheaderタグ内に以下を記載します。 <!-- Viewportの指定 --> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Bootstrapのcss, js読み込み --> <link href="/bootstrap/css/style.css" rel="stylesheet" type="text/css"></link> <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"></link> <script src="/bootstrap/js/bootstrap.min.js"></script> metaタグのviewportはPC、スマホ、タブレットなど異なるデバイスでも、デバイス自体の横幅に合わせてコンテンツを合わせて表示しますよ、という設定です。 linkとscriptは配置したライブラリを読