bootstrap PR

bootstrap 3の導入方法と使い方を分かりやすく解説

 
記事内に商品プロモーションを含む場合があります
✓本記事のテーマ
  • bootstrap 3の導入方法
  • bootstrap 3の基本的な使い方

今回は上記のテーマで解説していきます。

細かいところについて詳しく解説していきますので、是非参考にして頂ければと思います。

※注意点

bootstrap 3で作成すると、現在のブラウザでは正しく表示されません。

もし可能でしたらbootstrap 4に移行することをオススメします。

[bootstrap 3の使い方]そもそもbootstrapとは

  • bootstrapはツイッター社が開発したCSSフレームワーク
  • あらかじめ用意されたコードやテーマが豊富なので見栄えが良く機能的なwebサイトが短時間で製作可能

具体的な要素として、

  • レスポンシブ対応
  • 機能、デザイン共に優れたコンポーネント

などがあります。

※2018年1月18日に最新バージョンbootstrap4がリリースされました。

[bootstrap 3の使い方]対応しているブラウザ

モバイルデバイス
Chrome Firefox Safari Android Browser & WebView Microsoft Edge
Android サポート対応 サポート対応 該当なし Android v5.0以上 サポート対応 サポート対応
iOS サポート対応 サポート対応 サポート対応 該当なし サポート対応
Windows 10 Mobile 該当なし 該当なし 該当なし 該当なし サポート対応
デスクトップブラウザ
Chrome Firefox Internet Explorer Microsoft Edge Opera Safari
Mac サポート対応 サポート対応 該当なし 該当なし サポート対応 サポート対応
Windows サポート対応 サポート対応 IE10以上 サポート対応 サポート対応 サポート対応 サポート非対応

[bootstrap 3の使い方]導入方法

いくつかあるので順に紹介していきます。

ダウンロードする場合

bootstrapの公式サイトへアクセスします。

Getting Started をクリックします。

Download Bootstrapをクリックします。

ダウンロードしたファイルはzip形式で圧縮されているので解凍します。

解凍すると以下の3つがあります。

  • css
  • fonts
  • js

これらはBootstrapを使用する際に不可欠なファイルなので絶対に全てバラしたりいじらないでください。

フォルダごと自分のサーバーにアップロードして直接挿入する場合

公式サイトへアクセスします。

Getting Started をクリックします。

ページ下部のBootstrapCDNの「CSS only」のコードをコピーします。

プログラミングツールの<head>内に張り付けます。

<link href="css/bootstrap.min.css" rel="stylesheet">

いくつかのコンポーネントを使用するには jQuery, JavaScriptなどのプラグインが必要な場合があります。

その際は以下のスクリプトを</ body>の直前に順番どおりに設置します。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>

雛形を使用する場合

「Getting started」から「Basic template」をクリックすれば

HTMLの雛形を配布しているのでそちらを使用します

この雛形は必要なBootstrap ファイル一式が入っているのでそのまますぐ使用することが出来ます

注意点　英語向けに作られている雛形なので言語設定を<html lang=”en”>から<html lang=”ja”>に変更する必要があります

jaに変更したものがこちらになります

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

[bootstrap 3の使い方]基本的な４つの使い方

グリッドシステムの使い方

グリッドシステムとは、レイアウトを分割してコンテンツを配置するデザインの方法です。

見るブラウザ、デバイスに対応して構造が変わる「レスポンシブデザイン」にも対応しているのが特徴です。

Bootstrap では横幅を12分割したグリッドシステムを採用しています。

たとえば、1:11 5:7 8:4カラムなどのレイアウトが作成できます。

詳しい解説はこちらから

グリッドシステムのブレイクポイントについて

ブレイクポイントは768px,992px,1200pxが準備されており

  • 767px以下
  • 768px以上
  • 992px以上
  • 1200px以上

の4種類でレイアウトを切り替えることが可能です。

具体的に下記のように切り替えます。

ブレイクポイント
スマホ
（767px以下）		 タブレット
（768px〜991px）		 PC
（992px〜1119px）		 PC大画面
（1200px以上）
class名prefix .col-xs-* .col-sm-* .col-md-* .col-lg-*
.containerの表示幅 自動 750px 970px 1170px
カラム数 12

その他詳細についてはこちら

グリッドシステムの基本的な使い方

クラス名を下記のように記述します。

<div class="container">

合計のカラム数が「12」になるように設計していきます。

※「12」を超えてしまうと2行目（改行）にいってしまいます。

具体的には以下のコードで反映されます。

※配置場所は<div class=“container”>内

<div class="row">
      <div class="col-lg-6 chartreuse">
        6
      </div>
      <div class="col-lg-6 seashell">
        6
      </div>
    </div>
    <br>
    <h2>4分割</h2>
    <div class="row">
      <div class="col-lg-3 chartreuse">
        3
      </div>
      <div class="col-lg-3 seashell">
        3
      </div>
      <div class="col-lg-3 chartreuse">
        3
      </div>
      <div class="col-lg-3 seashell">
        3
      </div>
    </div>
    <br>
    <h2>12分割</h2>
    <div class="row">
      <div class="col-lg-1 chartreuse">
        1
      </div>
      <div class="col-lg-1 seashell">
        1
      </div>
      <div class="col-lg-1 chartreuse">
        1
      </div>
      <div class="col-lg-1 seashell">
        1
      </div>
      <div class="col-lg-1 chartreuse">
        1
      </div>
      <div class="col-lg-1 seashell">
        1
      </div>
      <div class="col-lg-1 chartreuse">
        1
      </div>
      <div class="col-lg-1 seashell">
        1
      </div>
      <div class="col-lg-1 chartreuse">
        1
      </div>
      <div class="col-lg-1 seashell">
        1
      </div>
      <div class="col-lg-1 chartreuse">
        1
      </div>
      <div class="col-lg-1 seashell">
        1
      </div>
    </div>

一行を定義するrowクラスについて

rowは一行を定義し、containerの内側に設置します。

rowが書かれていないとカラムを並ばすことができなくなり、下記の写真のようになります（2分割の部分を参照）

幅を定義するカラムについて

グリッドシステムを用いて幅を指定するには下の図のようにクラスを指定します。

カラムの指定
画面サイズ モバイル
（767px以下）		 タブレット
（768px以上、992px未満）		 デスクトップ
（992px以上、1200px未満）		 デスクトップ
（1200px以上）
｛prefix｝ xs エキストラスモール sm スモール md ミディアム lg ラージ
指定方法（n は数値） col-xs-n col-sm-n col-md-n col-lg-n

ですので、「パソコンではこうやって表示したいからcol-md-n、スマホではこうやって表示させたいのでcol-xs-n」と設定することでデバイスに応じたデザインが可能になります。

[bootstrap 3の使い方]タイポグラフィについて

bootstrapでは「フォントサイズ」や「行の高さ」などデフォルトで設定されています。

比較の写真です。1枚目がhtmlのみ。2枚目がbootstrapを適応させた際のものです。

このようにbootstrapを適応させるとマージンやフォントも変化するので注意が必要です。

[bootstrap 3の使い方]よく使う機能

ボタン

ボタンもbootstrapのコンポーネントを使用すればすぐに作成できます。

コードは下記の内容を<body>内設置すると使えるようになります。

<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>

<button type="button" class="btn btn-link">Link</button>

フォーム

フォームもbootstrapのコンポーネントを使用すればすぐに作成できます。

以下は一般的によく目にする「ログインフォーム」の写真とそのコードです。

※こちらもボタン同様に<body>内設置すると使えるようになります。

<form>
  <div class="form-group">
    <label for="exampleInputEmail1">Eメールアドレス</label>
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Eメールアドレス">
    <small class="text-muted">あなたのメールは他の誰とも共有しません。</small>
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">パスワード</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="パスワード">
  </div>
  <div class="form-group form-check">
    <input type="checkbox" class="form-check-input" id="exampleCheck1">
    <label class="form-check-label" for="exampleCheck1">保存しておく</label>
  </div>
  <button type="submit" class="btn btn-primary">ログイン</button>
</form>

また、応募フォームなどで画像を添付することもあります。

その場合は、下記のコードを挿入すると「ファイル入力フォーム」が実装できます。

※下記のコードはbootstrap 3のみ作動します。bootstrap 4をお使いの方はこちらを参照ください。

<form>
  <div class="form-group">
    <label for="File">ファイル入力の例</label>
    <input type="file" id="File">
  </div>
</form>

まとめ

ここまでがBootstrap3の基本的な使い方になります

まだまだ紹介しきれなかったコンポーネントやテーマは以下の本家ページに掲載されています

https://getbootstrap.com/docs/3.3/

また、今回紹介したのは旧式でいくつか正常に動作しないことがあるのでコチラの「最新版！bootstrap 4.0 使い方」を閲覧することをオススメします。

それでは最後までご覧いただきありがとうございました。

RELATED POST