[A-00126]Bootstrapを使ってみる

Bootstrapの使い方についてとりあえず記載しました。

・プロジェクトを作成する

任意のディレクトリを作成して、下記のコマンドを実行します。

npm init -y

次にbootstrapをインストールします。CDNを使用する場合はインストール不要です。

npm i bootstrap@5.3.0

MacBook-Pro:testpj1$ npm i bootstrap@5.3.0

added 2 packages, and audited 3 packages in 2s

2 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

次にsrcディレクトリを作成します。

mkdir src && cd src

index.htmlを作成します。

touch index.html

下記のコードを記載してください。

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
  </head>
  <body>
    <h1>Hello, world!</h1>
    <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="dark" aria-pressed="false">
        <svg class="bi me-2 opacity-50 theme-icon" width="1em" height="1em"><use href="#moon-stars-fill"></use></svg>
        Dark
        <svg class="bi ms-auto d-none" width="1em" height="1em"><use href="#check2"></use></svg>
      </button>
      <div class="alert alert-primary" role="alert">
        A simple primary alert—check it out!
      </div>
      <div id="liveAlertPlaceholder"></div>
    <button type="button" class="btn btn-primary" id="liveAlertBtn">Show live alert</button>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>
  </body>
</html>

index.htmlを右クリックしてLive Serverで表示します。

下記の画面が表示されます。

非常に単純ですが、これがBootstrapの簡単な使い方になります。

別の記事でもう少し掘り下げて内容を記載したいと思います。

・Appendix

公式ドキュメントはこちら

https://getbootstrap.jp

[A-00126]Bootstrapを使ってみる

・プロジェクトを作成する

・Appendix

コメントを残す コメントをキャンセル

コメントを残すコメントをキャンセル