Bootstrap3

 

Bootstrap 3 日本語ドキュメント | 分かりやすい Bootstrap 入門チュートリアル

このドキュメントは、初心者の方でも簡単に理解できるように Bootstrap 3 を日本語で解説したものです。Bootstrap の基礎知識から、グリッドシステム、タイポグラフィ、フォーム、ボタン、ナビゲーションバーなど、よく使用されるコンポーネントの使い方までを網羅しており、豊富なコード例も掲載しています。

1. Bootstrap とは

  • Bootstrap とは何か？
  • Bootstrap のメリットと特徴
  • Bootstrap の使用方法 (ダウンロード、導入)

2. Bootstrap を始めよう

  • 基本的な HTML 構造の作成
  • Bootstrap グリッドシステムの概要
  • レスポンシブレイアウトとブレークポイント
  • コンテナと行の使い方

3. Bootstrap グローバル CSS スタイル

  • タイポグラフィスタイル：見出し、段落、リストなど
  • コードスタイル
  • テーブルスタイル
  • フォームスタイル
  • ボタンスタイル
  • 画像スタイル

4. Bootstrap コンポーネント

  • ドロップダウンメニュー
  • ボタングループ
  • ナビゲーション
  • ナビゲーションバー
  • ページネーション
  • タブ
  • アラート
  • プログレスバー
  • モーダル

5. Bootstrap JavaScript プラグイン

  • モーダルプラグイン
  • ドロップダウンメニュープラグイン
  • スクロール監視プラグイン
  • タブプラグイン
  • ツールチッププラグイン
  • ポップオーバープラグイン

6. Bootstrap カスタマイズ

  • Less または Sass を使用した Bootstrap スタイルのカスタマイズ
  • カスタムテーマの作成

7. Bootstrap 例

  • Bootstrap を使用したシンプルな Web サイトレイアウトの構築
  • Bootstrap コンポーネントを使用したログインフォームの作成

テーブルの例

Bootstrap を使用すると、レスポンシブなテーブルを簡単に作成できます。

1. テーブルを作成する

標準的なHTMLのテーブル構造を使用してテーブルを作成します。

<table class="table">
  <thead>
    <tr>
      <th>#</th>
      <th>名前</th>
      <th>年齢</th>
      <th>都市</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>山田 太郎</td>
      <td>30</td>
      <td>東京都</td>
    </tr>
    <tr>
      <td>2</td>
      <td>鈴木 花子</td>
      <td>25</td>
      <td>大阪市</td>
    </tr>
  </tbody>
</table>

2. Bootstrapのクラスを追加する

  • tableクラス: テーブルに基本的なスタイルを適用します。

  • table-responsiveクラス: テーブルを囲む要素に追加し、小さな画面で横スクロールできるようにします。

  • <div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

その他の便利なクラス:

  • table-striped: 行を交互にストライプ表示にします。

  • table-bordered: テーブルに枠線を付けます。

  • table-hover: 行にマウスオーバー効果を追加します。

  • table-sm: テーブルを小さく表示します。

これらのクラスを組み合わせることで、見やすく、レスポンシブなテーブルを簡単に作成できます。

例:

<div class="table-responsive">
  <table class="table table-striped table-bordered">
    ...
  </table>
</div>

コード例

以下は、Bootstrap を使用してボタンを作成する例です。


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

参考文献

Bootstrap 3 日本語ドキュメントに関する Q&A

Q1: Bootstrap は無料で使用できますか？

A1: はい、Bootstrap は MIT ライセンスで公開されているオープンソースソフトウェアであり、無料で使用できます。

Q2: Bootstrap を使用するには、どのような知識が必要ですか？

A2: HTML と CSS の基本的な知識があれば、Bootstrap を使用することができます。JavaScript の知識があれば、さらに高度な機能を利用することもできます。

Q3: Bootstrap を使用するメリットは何ですか？

A3: Bootstrap を使用するメリットは、以下のようなものがあります。

  • レスポンシブな Web サイトを簡単に作成できる
  • クロスブラウザに対応している
  • 豊富なコンポーネントが用意されている
  • 活発なコミュニティがあり、情報収集がしやすい

その他の参考記事:bootstrap min css 3.3 7 download