Bootstrapフレームワーク 簡単な使用方法

Bootstrapフレームワークとは

Bootstrapは米国Twitter社のデザイナーMark Otto氏とJacob Thornton氏が共同で開発した、HTML/CSS/JavaScriptを基盤とするフロントエンド開発フレームワークです。GitHubでの人気オープンソースプロジェクトとして知られ、NASAやMSNBCなどの大規模サイトでも利用されています。

ダウンロード手順

公式サイトより最新バージョンを取得します。プロジェクト構成は以下の通りです：

bootstrap/
├── css/
│   └── bootstrap.min.css  # 本番環境用圧縮スタイル
├── js/
│   └── bootstrap.min.js   # 本番環境用圧縮スクリプト
└── fonts/                 # グリフィコンフォント

基本的なHTMLテンプレート

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap導入</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <h1>ようこそ！</h1>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

実践例：進捗表示の作成

<div class="progress">
  <div class="progress-bar bg-success" role="progressbar" 
       style="width: 45%" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100">
    45% 完了
  </div>
</div>

フォームコンポーネントのカスタマイズ

<div class="container">
  <form class="row g-3">
    <div class="col-md-6">
      <label for="fullName" class="form-label">氏名</label>
      <input type="text" class="form-control" id="fullName">
    </div>
    <div class="col-md-6">
      <label for="contactNum" class="form-label">連絡先</label>
      <input type="tel" class="form-control" id="contactNum">
    </div>
  </form>
</div>

テーブルの基本構造

| \# | 品名 | 価格 |
|---|---|---|
| 1 | ノート | ¥150 |

ボタンスタイルのバリエーション

<button type="button" class="btn btn-outline-primary">プライマリ</button>
<button type="button" class="btn btn-outline-success">成功</button>
<button type="button" class="btn btn-outline-danger">危険</button>
<button type="button" class="btn btn-outline-warning">警告</button>
<button type="button" class="btn btn-outline-secondary">セカンダリ</button>

レスポンシブナビゲーションバー

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">ブランド名</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navContent">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navContent">
      - [ホーム](#)
    </div>
  </div>
</nav>

カスタムスタイルの追加

<style>
  .custom-margin {
    margin-top: 2rem !important;
  }
  .table td {
    vertical-align: middle;
  }
</style>

ページネーションの実装

- [前のページ](#)
- [1](#)
- [2](#)
- [次のページ](#)

タグ: Bootstrap HTML CSS javascript Web開発

8月1日 09:30 投稿

ホットタグ

©2026 異端開発室