Bootstrapの導入方法【現役エンジニアが解説】

PROGRAM

今回は、Bootstrapの導入方法について、簡単に解説していきます。

Bootstrapとは

Bootstrapとはフロントエンドフレームワークです。

デザインの知識がなくても、ある程度まともなUIを作れます。

CSSでは最近Tailwind CSSも流行っていますが、まだまだBootstrapも人気です。

CDNで読み込む

Bootstrapを使うには読み込む必要があります。

とりあえず使ってみたい場合はCDNがおすすめです。

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

上記のように、linkタグとscriptタグでBootstrapを読み込みます。

ダウンロードして読み込む

本格的に使い始める場合はダウンロードしましょう。

ダウンロードは、Bootstrap公式ページから可能です。

<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="js/bootstrap.min.js"></script>

ダウンロードしたcssとjsフォルダをドキュメントルートに移動し、上記のようにlinkタグとscriptタグで読み込みます。