bootstrap

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>内に張り付けます。

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

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

雛形を使用する場合

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

一行を定義する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>内設置すると使えるようになります。

フォーム

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

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

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

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

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

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

まとめ

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

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

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

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

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