Bootstrap

2021-07-25
UI/UX
Bootstrap

Bootstrapをまとめ始めるときがきました。普段めちゃめちゃ使い倒しています。ここではBootstrapの活用方法を紹介していきシリーズ化していきたいと思います。すでに日本語のページもありますので、そちらもご参照ください。

BootstrapのURLはこちら

Bootstrap?

本家から引用

世界で一番人気のあるフロントエンドライブラリ Bootstrap を使って、モバイルファーストなレスポンシブウェブを素早くデザイン・カスタマイズできます。Sass変数と mixin、レスポンシブグリッドシステム、豊富なコンポーネント、強力な JavaScript プラグインを備えています。

Bootstrapとは？ Bootstrapを使いこなせれば大抵のモダンウェブアプリケーションのデザインはできると思います。PC、モバイルのブラウザー上に表示する際のUI/UXのベースパッケージと思っていただければOKです。

歴史や細かいことはWikiにもありますので、こちらを参照ください。

Bootstrapの最新は今時点でv5.0.2です。 2?3?ぐらいから使っていますが、5ではいろいろ簡素化されてさらに使いやすくなっています。

ということで、さっそく使ってみましょう。

インストール

インストール方法はいくつかありますが、普段はCDNを利用しています。

↑ こちらにあるQuick Startを参照していただくとわかりやすいです。

HTML Head部分にこちらを

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">

HMLT下部分にこちらのjsを入れて終わりです。

<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>

こちらのテンプレートを使えば簡単です。

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: Bootstrap Bundle with Popper -->
    <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>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
    -->
  </body>

Hello world がなぜか日本語版だと私は仕事が大好きですになっているのが・・　誤訳というか、Hello Worldと全然違うでしょ・・

公開日: 2021-07-25