【Bootstrap】Bootstrapの導入方法について|Fresopiya究極の自由を目指すブログFresopiyaFresopiya場所にもお金にも時間にも、何にも縛られない自由な状態になったら一体人間は何をしてどこに向かうのか。自由を目指すエンジニアのブログです。「哲学」と「プログラミング」と「政治経済」、「ブログ」がメインになるかと。06/30/2019スポンサードリンクどうも、とがみんです。以前の記事で、Web制作において簡単に整ったデザインを作成することができるCSSフレームワークのBootstrapについて紹介しました。この記事では、その導入方法について紹介します。ContentsBootstrapの導入方法についてBootstrap本体をダウンロードし、読み込む方法CDNを利用してBootstrapリンクを直接HTMLファイルに埋め込む方法RubyGemsによる導入方法まとめ参考文献Bootstrapの導入方法についてBootstrapの導入方法について、いくつかあるのですが、今回は以下の3つを紹介します。Bootstrap本体をダウンロードし、読み込む方法CDNを利用してBootstrapリンクを直接HTMLファイルに埋め込む方法RubyGemsによる導入方法CDN:コンテンツデリバリーネットワークの略。インターネット上でデジタルコンテンツを配信するためのネットワークBootstrap本体をダウンロードし、読み込む方法Bootstrapのファイルをダウンロードし、それを読み込む方法についてです。以下のBootstrapのホームページへ行き、Bootstrapをダウンロードします。すると、以下のようなファイルがダウンロードされます。cssフォルダ内のファイルについて、いくつか紹介します。役割bootstrap.bundle.jsバンドル版(Popper)を含んでいる。記のファイルを適用させたいHTMLファイルに読み込めば、Bootstrapが利用できるようになります。ソースマップファイル:コンパイル前とコンパイル後の対応関係を表したファイル。jsのファイルを実行するためにはjQueryのファイルをその前に読み込む必要があります。以下のサイトからダウンロードすることができます。CDNを利用してBootstrapリンクを直接HTMLファイルに埋め込む方法CDNを利用することによって、使用するファイルを一式ダウンロドをする必要なく、Bootstrapをサイトに組み込むことができます。読み込むファイルに以下のコードを記述します。‘bootstrap’Bundlerを使用しない場合は以下のコマンドを実行し、Bootstrapを導入します。bootstrapまとめBootstrapの導入方法について紹介しました。POSTBootstrap【Bootstrap】ナビゲーションバーの実装。togaminFresopiya【Bootstrap】Bootstrapとは?メリット・デメリット【Bootstrap】ナビゲーションバーの実装。性能向上を目的とした研究をしていました。現在はFinTech系ベンチャー企業勤務。