bootstrap3 チュートリアル

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

<div class="container">
  <div class="row">
    <div class="col-md-6">内容一</div>
    <div class="col-md-6">内容二</div>
  </div>
</div>

<div class="container">
  <div class="row">
    <div class="col-md-8">
      <div class="row">
        <div class="col-6">ネストされた内容一</div>
        <div class="col-6">ネストされた内容二</div>
      </div>
    </div>
    <div class="col-md-4">サイドバー</div>
  </div>
</div>

<div class="container">
  <div class="row">
    <div class="col-md-4">内容一</div>
    <div class="col-md-4 offset-md-4">オフセットされた内容</div>
  </div>
</div>

<div class="container">
  <div class="row">
    <div class="col-6 order-2">2番目の列</div>
    <div class="col-6 order-1">1番目の列</div>
  </div>
</div>

<h1>大見出し</h1>
<h2>副見出し</h2>
<h3>小見出し</h3>

<p>これは段落です。</p>

<pre>
<code>
const example = 'Bootstrap'; 
console.log(example);
</code>
</pre>

<form>
  <div class="form-group">
    <label for="exampleInputEmail1">メールアドレス</label>
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="メールアドレスを入力">
  </div>
  <button type="submit" class="btn btn-primary">送信</button>
</form>

<button class="btn btn-primary">主要ボタン</button>
<button class="btn btn-secondary">副次ボタン</button>

<button class="btn btn-primary btn-lg">大ボタン</button>
<button class="btn btn-primary btn-sm">小ボタン</button>

<button class="btn btn-primary" disabled>無効ボタン</button>

<img src="image.jpg" class="img-fluid" alt="レスポンシブ画像">

<img src="image.jpg" class="img-thumbnail" alt="画像の形状">

<p class="text-primary">これはプライマリテキストです。</p>

<div class="bg-success">成功の背景色</div>

<button type="button" class="close"><span aria-hidden="true">×</span></button>

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">ブランド名</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">ホーム <span class="sr-only">(現在のページ)</span></a>
      </li>
    </ul>
  </div>
</nav>

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
</nav>

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    ドロップダウンメニュー
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <a class="dropdown-item" href="#">アクション1</a>
    <a class="dropdown-item" href="#">アクション2</a>
  </div>
</div>

<nav aria-label="Page navigation example">
  <ul class="pagination">
    <li class="page-item"><a class="page-link" href="#">前へ</a></li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">次へ</a></li>
  </ul>
</nav>

<ul class="list-group">
  <li class="list-group-item">項目1</li>
  <li class="list-group-item">項目2</li>
  <li class="list-group-item">項目3</li>
</ul>

<div class="card">
  <div class="card-header">ヘッダー</div>
  <div class="card-body">
    <h5 class="card-title">カードタイトル</h5>
    <p class="card-text">カードの内容です。</p>
  </div>
</div>

<div class="alert alert-warning" role="alert">
  警告メッセージ！
</div>

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">モーダルを表示</button>
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">モーダルタイトル</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">×</span>
        </button>
      </div>
      <div class="modal-body">モーダルの内容</div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">閉じる</button>
        <button type="button" class="btn btn-primary">保存変更</button>
      </div>
    </div>
  </div>
</div>

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    ドロップダウンメニュー
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <a class="dropdown-item" href="#">アクション1</a>
    <a class="dropdown-item" href="#">アクション2</a>
  </div>
</div>

<button class="btn btn-primary" data-toggle="scrollspy" data-target="#navbar">スクロールリスナー</button>

<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" data-toggle="tab" href="#home">ホーム</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#profile">プロフィール</a>
  </li>
</ul>
<div class="tab-content">
  <div id="home" class="container tab-pane active">ホームのコンテンツ</div>
  <div id="profile" class="container tab-pane fade">プロフィールのコンテンツ</div>
</div>

<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="ツールチップの内容">ツールチップ</button>

<button type="button" class="btn btn-secondary" data-toggle="popover" data-content="ポップオーバーの内容">ポップオーバー</button>

<div class="alert alert-danger" role="alert">
  これは警告ボックスです。
</div>

<button type="button" class="btn btn-primary">ボタン</button>

<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample">折りたたみを表示</button>
<div class="collapse" id="collapseExample">
  <div class="card card-body">
    折りたたまれたコンテンツ
  </div>
</div>

<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src="slide1.jpg" alt="スライド1">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="slide2.jpg" alt="スライド2">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="slide3.jpg" alt="スライド3">
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">前へ</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">次へ</span>
  </a>
</div>

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>シンプルなページ</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="#">ブランド名</a>
  </nav>
  <div class="container">
    <h1 class="mt-5">こんにちは、Bootstrap！</h1>
    <p>Bootstrap を使って簡単にウェブページを作成できます。</p>
  </div>
  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>

<div class="container">
  <div class="row">
    <div class="col-md-4">サイドバー</div>
    <div class="col-md-8">メインコンテンツ</div>
  </div>
</div>

<form>
  <div class="form-group">
    <label for="username">ユーザー名</label>
    <input type="text" class="form-control" id="username" placeholder="ユーザー名">
  </div>
  <div class="form-group">
    <label for="password">パスワード</label>
    <input type="password" class="form-control" id="password" placeholder="パスワード">
  </div>
  <button type="submit" class="btn btn-primary">ログイン</button>
</form>

<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src="slide1.jpg" alt="スライド1">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="slide2.jpg" alt="スライド2">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="slide3.jpg" alt="スライド3">
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">前へ</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">次へ</span>
  </a>
</div>

bootstrap3 チュートリアル main content:

• Bootstrap 導入:

  Bootstrapは、世界で最も人気のあるCSSフレームワークの1つであり、レスポンシブでモバイルファーストなWebプロジェクトの開発に使用されます。Bootstrapには、Webサイトをすばやく構築するのに役立つ、豊富なHTML、CSS、JavaScriptコードが含まれています。

• Bootstrap 環境のインストール:

  この文書では、Bootstrap 開発環境の構築方法について詳しく説明します。必要なソフトウェアのインストール、Bootstrap ファイルのダウンロード、基本的な HTML ページの作成などを行います。

• Bootstrap CSSの概要:

  Bootstrap は、Web サイトや Web アプリケーションを迅速かつ簡単に構築するための、最も人気のあるフロントエンドフレームワークの一つです。その中心となるのは、HTML、CSS、JavaScript のコンポーネントで構成された Bootstrap CSS です。 この記事では、Bootstrap CSS の基礎知識について解説し、そのグローバル設定、正規化スタイル、タイポグラフィ、コード、テーブル、フォーム、ボタン、画像、ユーティリティクラス、レスポンシブツールなど、Bootstrap CSS フレームワークを素早く理解し、使用するために必要な情報を提供します。

• Bootstrap グリッドシステム:

  Bootstrap は、レスポンシブでモバイルファーストな、流動的なグリッドシステムを提供しています。画面やビューポートのサイズが大きくなるにつれて、システムは最大12列に自動的に分割されます。この記事では、Bootstrap グリッドシステムの使用方法について詳しく説明します。

• Bootstrap 組版:

  説明: この記事では、Bootstrap のグリッドシステムやその他のユーティリティクラスを使用して、フォームレイアウトを作成する方法について説明します。

  ---

• Bootstrap コード:

  この記事では、Bootstrap フレームワークでコード関連コンポーネントを正しく使用する方法について説明します。インラインコード、コードブロック、変数、ユーザー入力などの要素の表示方法を解説します。

• Bootstrap シート:

  このドキュメントでは、Bootstrap でテーブルを使用およびカスタマイズする方法について詳しく説明します。

• Bootstrap 形状:

  この記事では、Bootstrap でフォームを作成および使用する方法について説明します。フォームコントロール、レイアウトオプション、カスタムスタイルについて説明します。

• Bootstrap ボタン:

  説明: この記事では、Bootstrap のボタンコンポーネントの使用方法について説明します。ボタンの種類、サイズ、状態、オプション、拡張機能などについて解説します。

  ---

• Bootstrap 写真:

  このページでは、Bootstrap で画像を使用する方法について説明します。これには、定義済みの画像クラスの使用方法、レスポンシブ画像、画像のサムネイルなどが含まれます。

• Bootstrap 補助クラス:

  このチュートリアルでは、Bootstrap が提供するすべての補助クラスについて説明します。これらのクラスを使用すると、カスタムの CSS クラスを作成することなく、ページ要素のスタイルをすばやく設定できます。

• Bootstrap 応答性の高いユーティリティ:

  この記事では、Bootstrap フレームワークで提供される応答性ユーティリティについて説明します。これらのユーティリティを使用すると、さまざまな画面サイズに応じてページ要素を非表示にしたり、表示したりして、さまざまなデバイスに適応する応答性の高い Web ページを作成できます。---

• Bootstrap レイアウトコンポーネント:

  この記事では、Bootstrap 5.3 のフォームレイアウト構築に使用されるさまざまなコンポーネントとユーティリティクラスについて説明します。

• Bootstrap フォントアイコン:

  Bootstrap フォントアイコンは、Web プロジェクトで使用できる無料のオープンソースアイコンセットです。数百もの一般的に使用されるアイコンが提供されており、Bootstrap フレームワークとシームレスに統合されているため、使いやすくカスタマイズも簡単です。

• Bootstrap ドロップダウンメニュー:

  この記事では、Bootstrap 5 でドロップダウンメニューコンポーネントを使用する方法について説明します。基本的な使い方、オプション、カスタマイズなどについて説明します。

• Bootstrap ボタングループ:

  Bootstrap のボタン グループは、複数のボタンを一つにまとめて表示するコンポーネントです。これにより、関連するアクションを視覚的にグループ化し、ユーザーインターフェースをより整理されたものにすることができます。

• Bootstrap ボタンのドロップダウン メニュー:

  この記事では、Bootstrap を使用してボタン ドロップダウンメニューを作成する方法について説明します。基本的なドロップダウンメニュー、上方向に展開するメニュー、メニューの配置、メニューヘッダー、セパレーター、メニュー項目の無効化とアクティブ化などについて説明します。

• Bootstrap 入力ボックスグループ:

  この記事では、Bootstrap フレームワークの入力グループについて説明します。入力グループの概念、使用方法、コード例、パラメーターの説明などを提供し、開発者が入力グループをすばやく習得できるようにします。

• Bootstrap ナビゲーション要素:

  この記事では、Bootstrap フレームワークで提供されるさまざまなナビゲーション要素、つまりナビゲーションバー、パンくずリスト、ページネーションなどについて説明し、これらの要素を使用して Web サイトのナビゲーションシステムを作成する方法について解説します。

• Bootstrap ナビゲーションバー:

  この記事では、Bootstrap 5 でレスポンシブなナビゲーションバーを作成およびカスタマイズする方法について説明します。

• Bootstrap パン粉:

  パンくずリストは、Webサイトの階層構造における現在のページの位置を示す、補助的なナビゲーションシステムです。この記事では、Bootstrap でパンくずリストを実装する方法について詳しく説明します。

• Bootstrap ページネーション:

  説明: この記事では、Bootstrap のページネーションコンポーネントの使い方について説明し、大量のデータを複数のページに分割してユーザーが簡単に閲覧できるように、ユーザーフレンドリーなナビゲーションを作成する方法を紹介します。

• Bootstrap ラベル:

  この記事では、Bootstrap 5.3 でフローティングラベルを使用して、美しくユーザーフレンドリーなフォームを作成する方法について説明します。

• Bootstrap バッジ:

  この記事では、Bootstrap のバッジコンポーネントの使い方について説明します。基本的な使い方、スタイルと色の変更、配置と位置調整、ボタンやナビゲーションコンポーネントとの組み合わせについて解説します。

• Bootstrap 超大画面:

  本文では、Bootstrap フレームワークの「超大画面 (Jumbotron)」コンポーネントの使い方について解説します。基本的な構造、スタイルのカスタマイズ方法、グリッドシステムを使用したレイアウト調整方法などを紹介します。---

• Bootstrap ページタイトル:

  この文章では、Bootstrap でページタイトルを作成するために使用される様々な HTML 要素と、Bootstrap の組み込みクラスとユーティリティを使用してタイトルの外観をカスタマイズする方法について説明します。

• Bootstrap サムネイル:

  この記事では、Bootstrap フレームワークを使用して画像の縮略図を作成する方法について説明します。

• Bootstrap 警告する:

  Bootstrap の警告コンポーネントは、ユーザーに重要な情報を表示するための定義済みスタイルを提供します。

• Bootstrap プログレスバー:

  この記事では、Bootstrap フレームワークのプログレスバーコンポーネントの使い方について解説します。基本的なプログレスバーの作成方法に加えて、さまざまなクラスや属性を使用して、プログレスバーの外観や動作をカスタマイズする方法を学びます。

• Bootstrap マルチメディアオブジェクト:

  この記事では、Bootstrap フレームワークの多媒体オブジェクトについて説明します。多媒体オブジェクトは、画像やビデオなどの多媒体コンテンツと、それに関連するテキストの配置レイアウトを作成するために使用されます。

• Bootstrap リストグループ:

  この記事では、Bootstrap フレームワークのリストグループコンポーネントの使用方法について説明します。基本的な構造、リンク、ボタン、アクティブ状態、無効状態、コンテキストカラー、バッジなどの内容が含まれます。

• Bootstrap パネル:

  Bootstrap フレームワークのパネルコンポーネントは、コンテンツを整理して視覚的に魅力的な方法で表示するために使用されます。この記事では、基本的なパネル構造、オプション、さまざまなパネルタイプの使用方法について説明します。

• Bootstrap ウェルズ:

  この記事では、Bootstrap Wells について解説します。Wells は、ページ上に「凹んだ」または「凹版」の効果を作成するためのコンポーネントです。

• Bootstrap Webページを作成する:

  この記事では、Bootstrap を使用してシンプルながらも美しい Web ページをすばやく作成する方法を紹介します。 ---

• Bootstrap プラグインの概要:

  **説明:** この記事では、Bootstrap プラグインの概念、使用方法、およびいくつかの一般的なプラグインについて説明します。

• Bootstrap トランジションエフェクト:

  この記事では、Bootstrapフレームワークにおける過渡効果の使い方について解説します。CSS過渡効果とjQuery過渡効果の使用方法について説明します。

• Bootstrap モーダルボックス:

  モーダル（Modal）は、親ウィンドウの上に重ねて表示される子ウィンドウです。通常、別のソースからのコンテンツを表示したり、親ウィンドウから移動せずにインタラクションを行ったりするために使用されます。

• Bootstrap スクロールリスナー:

  この記事では、Bootstrap のスクロールリスニングプラグイン (Scrollspy) の使用方法について説明します。スクロールリスニングの有効化、リスニングオプションの設定、メソッドとイベントの使用など、さまざまな側面から解説します。

• Bootstrap ページをブックマークする:

  タブは、切り替え可能なコンテンツ領域を作成するための柔軟なプラグインです。

• Bootstrap ツールチップ:

  この記事では、Bootstrap フレームワークのツールチップコンポーネントについて説明します。使用方法、カスタマイズオプション、JavaScript の動作、アクセシビリティに関する注意事項など、詳細を解説します。 ---

• Bootstrap ポップアップボックス:

  Bootstrap モーダルは、ダイアログボックスを簡単に作成できる効率的な方法です。現在のページから移動することなく、ユーザーに情報を伝えたり、ユーザーから情報を取得したりするために使用できます。

• Bootstrap 警告ボックス:

  Bootstrapのアラートは、危険、成功、情報、警告などのメッセージを分かりやすく表示するための、すぐに使用できるスタイルを提供します。

• Bootstrap 折り畳み:

  この記事では、Bootstrapフレームワークの折りたたみコンポーネントの使用方法について説明します。データ属性またはJavaScriptを使用して、折りたたみ要素の展開と非表示を制御する方法を含めます。

• Bootstrap カルーセル:

  このドキュメントでは、BootstrapフレームワークのCarouselプラグインの使い方について説明します。基本的なカルーセルの作成方法、コントロールボタンとインジケーターの追加方法、カルーセルオプションの設定方法、JavaScriptを使用したカルーセルの制御方法などを紹介します。

• Bootstrap 追加のナビゲーション:

  説明: この記事では、Bootstrap フレームワークの附加ナビゲーションプラグイン (Affix Plugin) について詳しく解説します。附加ナビゲーションを使用すると、ページのスクロールに合わせて、ナビゲーションバーなどの要素を画面の特定の位置に固定することができます。

  ---

• Bootstrap UIエディター:

  この記事では、Bootstrap フレームワークで提供されている2つの UI エディター、Bootstrap wysihtml5 エディターと Bootstrap markdown エディターについて紹介します。それぞれの使用方法、設定オプション、サンプルコードを詳しく説明します。

• Bootstrap v2 チュートリアル:

  このチュートリアルでは、Bootstrap v2の基本的な使用方法について説明します。ダウンロードと使用方法、レイアウト、グリッドシステム、テーブル、フォーム、ボタン、画像、アイコン、およびさまざまなプラグインについて説明します。

• Bootstrap HTMLコーディング標準:

  このドキュメントでは、Bootstrap のスタイルガイドに準拠した HTML コードの記述方法について説明します。これにより、コードの一貫性と保守性が向上します。

• Bootstrap CSSコーディング標準:

  このドキュメントでは、より保守性が高く、パフォーマンスに優れ、堅牢なコードを実現し、BootstrapのCSSおよびコンポーネントと整合性の取れたHTMLの記述に関するガイドラインを提供します。

• Bootstrap ビジュアルレイアウト:

  Layoutit は、Twitter Bootstrap フレームワークを使用してフロントエンドレイアウトを簡単に作成できる無料のオンラインツールです。コンポーネントをドラッグアンドドロップするだけで、数分で意味的に正しい HTML と Bootstrap が必要とする CSS コードを生成できます。