Bootstrapを利用してみた

BootstrapはウェブサイトやWebアプリケーションを作成するフレームワークです。レスポンシブWebデザインに対応しており、携帯電話、スマートフォン、タブレット、パソコンに対応したスタイルを簡単に作れます。ここではBootstrapについて解説していきます。

01: Bootstrapのインストール

Bootstrap CNDを利用してBootstrapをサイトに読み込みます。BootstrapはjQueryに依存しているため、jQueryも読み込みます。

bash


<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script src="https://code.jquery.com/jquery-3.1.1.js".</script>
<script src="https://maxdcn.bootstarpcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

02: Bootstrapの使い方

対応ブラウザ

デスクトップ

Chrome Firefox Internet Explorer Opera Safari
Mac サポート済 サポート済 対象外 サポート済 サポート済
iOS サポート済 サポート済 サポート済 サポート済 対象外

モバイル

Chrome Firefox Safari
Android サポート済 サポート済 対象外
iOS サポート済 サポート済 サポート済

基本ルール

グリッドシステム

class=”containerの中に配置する。 class=”row”の中に配置する。 class=”col-{prefix}-{columns}”の形式で記述する。 {columns}は合計値が12になるように指定する。

テーブル

class=”container”の中に配置する。 table要素に対してclass=”table”を付ける。

サンプルコード

bash


<!DOCTYPE html>
<html><head>
  <meta charset="UTF-8" />
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
  <script src="https://code.jquery.com/jquery-3.1.1.js"</script>
  <script src="https://maxdcn.bootstarpcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap Sample</title>
</head>
<body>
  <!-- グリッドシステム -->
  <h1>Hello, world!</h1>
  <main id="app" class="container">
    <div class="row">
    <div class="col-sm-2" style="background-color:red;">Red</div>
    <div class="col-sm-8" style="background-color:blue;">Blue</div>
    <div class="col-sm-2" style="background-color:yellow;">Yellow</div>
  </main>

  <!-- テーブル -->
  <br>
  <div class="container">
  <table class="table">
    <thead>
      <tr>
        <th>#</th>
        <th>名前</th>
        <th>性別</th>
        <th>電話番号</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">1</th>
          <td>斎藤 太郎</td>
          <td>男性</td>
          <td>09011112222</td>
      </tr>
      <tr>
        <th scope="row">2</th>
          <td>斎藤 花子</td>
          <td>女性</td>
          <td>09033334444</td>
      </tr>
      <tr>
        <th scope="row">3</th>
          <td>斎藤 次郎</td>
          <td>男性</td>
          <td>09055556666</td>
      </tr>
    </tbody>
  </table>
  <br>
  <div class="container">
  <table class="table table-striped">
    <thead>
      <tr>
        <th>#</th>
        <th>名前</th>
        <th>性別</th>
        <th>電話番号</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">1</th>
          <td>斎藤 太郎</td>
          <td>男性</td>
          <td>09011112222</td>
      </tr>
      <tr>
        <th scope="row">2</th>
          <td>斎藤 花子</td>
          <td>女性</td>
          <td>09033334444</td>
      </tr>
      <tr>
        <th scope="row">3</th>
          <td>斎藤 次郎</td>
          <td>男性</td>
          <td>09055556666</td>
      </tr>
    </tbody>
  </table>
  <br>
  <div class="container">
  <table class="table table-bordered">
    <thead>
      <tr>
        <th>#</th>
        <th>名前</th>
        <th>性別</th>
        <th>電話番号</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">1</th>
          <td>斎藤 太郎</td>
          <td>男性</td>
          <td>09011112222</td>
      </tr>
      <tr>
        <th scope="row">2</th>
          <td>斎藤 花子</td>
          <td>女性</td>
          <td>09033334444</td>
      </tr>
      <tr>
        <th scope="row">3</th>
          <td>斎藤 次郎</td>
          <td>男性</td>
          <td>09055556666</td>
      </tr>
    </tbody>
  </table>
  <br>
  <div class="container">
  <div class="table-responsive">
  <table class="table table-bordered">
    <thead>
      <tr>
        <th>#</th>
        <th>名前</th>
        <th>性別</th>
        <th>電話番号</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">1</th>
          <td>斎藤 太郎</td>
          <td>男性</td>
          <td>09011112222</td>
      </tr>
      <tr>
        <th scope="row">2</th>
          <td>斎藤 花子</td>
          <td>女性</td>
          <td>09033334444</td>
      </tr>
      <tr>
        <th scope="row">3</th>
          <td>斎藤 次郎</td>
          <td>男性</td>
          <td>09055556666</td>
      </tr>
    </tbody>
  </table>
  </div>
  </div>
</body>
</html>

03: 動作テスト

デスクトップ

モバイル