Bootstrap　入力フォームと使い方

TOP
コラム
Bootstrap　入力フォームと使

Bootstrapとは

Bootstrapとは、Twitter社が開発したWebサイトを作るためのフレームワークです。BootstrapはいくつかのCSSやJavaScriptからできています。よく使われるスタイルがあらかじめ定義されているため、ルールに従って記述することで簡単にWebサイトを構築することができます。 Bootstrapの利点は簡単にWebサイトの構築ができることだけではなく、Bootstrapを使用することによってパソコンやスマートフォンやタブレットなどそれぞれ画面の幅にあわせたページを表示してくれます。

Bootstrapの使い方

Bootstrapを使用するためにはファイルをダウンロードして、HTMLタグに以下のポイントを記述する必要があります。使用するまでのながれを確認しましょう。

①公式サイトからBootstrapをダウンロード

Bootstrapを使用するためには公式サイトからダウンロードする必要があります。オープンソースで開発されているため誰でも無償で使用することができます。

②HTMLにmetaタグを書き込む

HTMLに2つのmetaタグを書き込む必要があります。

<meta http-equiv="X-UA-Compatible" content="IE=edge">

このタグはインターネットエクスプローラーを使用する場合に、それぞれのバージョンにあった表示をするためのタグです。

<meta name="viewport" content="width=device-width, initial-scale=1">

このタグはスマートフォンなどの画面領域の違う端末に幅やサイズを調節して、表示するためのタグです。

③BootstrapのCSS読み込み・jQuery・BootstrapのJS読み込み

HTMLでCSSを読み込むときと同じくLinkタグを使ってCSSを読み込み、scriptタグを使ってjQueryとBootstrapのJavaScriptを読み込みます。
BootstrapのCSS読み込み

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

jQuery読み込み

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

BootstrapのJS読み込み

<script src="js/bootstrap.min.js"></script>

※jQuery読み込みの後ろで、BootstrapのJavaScriptの読み込みをするようにしましょう。

以上を記述したHTMLファイルは、ダウンロードしたcss・fonts・jsのフォルダと同じ階層に保存しておきましょう。

Bootstrap 入力フォームの使い方

Bootstrapで入力フォームを使うためには3つのルールを守る必要があります。

・ルール1　formタグで囲むこと
・ルール2　入力フォーム一つ一つをform-groupクラスにすること
・ルール3　inputタグをform-controlクラスにすること


<form> 
	<div  class="form-group" >
		<input type="text"  class="form-control" >
	</div>
</ form >

※ inputタグはtext以外でもclass="form-control" を付ける必要があります。

Bootstrapの種類

＜テキストボックス＞

テキストボックスは、文字や数値などを入力するために使用します。 inputタグをtype="text"とすることでテキストボックスを作成できます。


<!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">
    <title>Bootstrap Sample</title>
     <!-- BootstrapのCSS読み込み -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <!-- jQuery読み込み -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <!-- BootstrapのJS読み込み -->
    <script src="js/bootstrap.min.js"></script>
  </head>
  <body style="padding: 50px;">
    <h2>Bootstrap　テキストボックス</h>
    <form>
        <div class="form-group">
            <label>氏名：</label>
            < input type="text" class="form-control" style="width: 50%;">
            <label>メールアドレス</label>
            <input type="text" class="form-control" style="width: 50%;" >
            <label>お問い合わせ</label>
            <input type="text" class="form-control">
        </div>
        <button type="submit" class="btn btn-default">送信</button>
    </form>
  </body>
</html>

＜ボタンについて＞

ボタンは入力フォームではありませんが、セットで使われることが多くあります。ボタンについても簡単に使い方の確認をしておきましょう。

使い方


<button type="button"  class="Bootstrapのクラス名" >ボタン名</button><br>
<input type="button"  class="Bootstrapのクラス名"  value="ボタン名"/>

このように背景色のついたボタンや大きさの違うボタン、横長のボタン、連続するボタンなど、Bootstrapには様々なボタンがあります。クラス名やその他ボタンの種類については公式サイトで確認してみましょう。

＜ドロップダウンリスト＞

ドロップダウンリストは複数のリスト化された選択肢の中から選ぶために使われます。 optionタグで選択項目を囲み、更にselectタグでoptionタグを囲むことでドロップダウンリストを作成できます。


〜省略〜
<form>
<h2>Bootstrapのドロップダウンリスト</h2>
      <div class="form-group">
          <br>
          <label>生年月日　　</label>
          <  select  class="form-control" style="display: inline; width: 20%;">
              <  option  >令和</  option  >
              <  option  >平成</  option  >
              <  option  >昭和</  option  >
              <  option  >大正</  option  >
          </  select  >
          <select class="form-control" style="display: inline; width: 20%;">
              <option>1</option>
              <option>2</option>
              <option>3</option>
              <option>4</option>
          </select>
          <label>月</label>
        </select>
          <select class="form-control" style="display: inline; width: 20%;">
              <option>1</option>
              <option>2</option>
              <option>3</option>
              <option>4</option>
          </select>
          <label>日</label>
      </div>
<form>
〜省略〜

＜チェックボックス＞

チェックボックスは複数の選択肢の中からチェックして選択するために使われます。 inputタグをtype="checkbox"とし、クラスをclass="form-check-input"とすることでチェックボックスを作成することができます。


〜省略〜
<form>
<div class="form-group">
        <h4>シグニチャの定義として含まれるものは次の打ちどれですか。4つ選択してください。</h4>
        <br>
          <div class="form-check form-check-inline">
              <  input class="form-check-input" type="checkbox">
              <label class="form-check-label">　A.　引数の型</label>
          </div>
          <div class="form-check form-check-inline">
              <input class="form-check-input" type="checkbox">
              <label class="form-check-label">　B.　引数の数</label>
          </div>
          <div class="form-check form-check-inline">
              <input class="form-check-input" type="checkbox">
              <label class="form-check-label">　C.　引数の並び</label>
          </div>
          <div class="form-check form-check-inline">
              <input class="form-check-input" type="checkbox">
              <label class="form-check-label">　D.　引数の変数名</label>
          </div>
          <div class="form-check form-check-inline">
              <input class="form-check-input" type="checkbox">
              <label class="form-check-label">　E.　戻り値</label>
          </div>
          <div class="form-check form-check-inline">
              <input class="form-check-input" type="checkbox">
              <label class="form-check-label">　F.　メソッドの名前</label>
          </div>
          <div class="form-check form-check-inline">
              <input class="form-check-input" type="checkbox">
              <label class="form-check-label">　G.　装飾子</label>
          </div>
      </div>      
    </form>
〜省略〜

＜ラジオボタン＞

ラジオボタンは複数の選択肢の中から1つだけを選択するために使われます。 inputタグをtype="radio"とし、クラスをclass="form-check-input"とすることでラジオボタンを作成することができます。


〜省略〜
<form>
<div class="form-group">
          <label>性別</label>
          <br>
          <div class="form-check form-check-inline">
              <  input class="form-check-input" type="radio" name="inlineRadioOptions" value="option1">
              <label class="form-check-label" for="inlineRadio1">　男性</label>
          </div>
          <div class="form-check form-check-inline">
              <input class="form-check-input" type="radio" name="inlineRadioOptions" 
 value="option2">
              <label class="form-check-label" for="inlineRadio2">　女性</label>
          </div>
      </div>  
    </form>
〜省略〜

まとめ

いかがだったでしょうか。Bootstrapの入力フォームの使い方について少しでも理解を深めていただければ幸いです。公式ホームページには、入力フォーム以外にも様々な機能の使い方が掲載されています。Bootstrap公式サイト左上の「ドキュメント」→「Components」をクリックすると機能の一覧が表示されます。それぞれを使用する上でのルールやサンプルコードがわかりやすく掲載されているので、ぜひ確認してみてください。

Bootstrap 入力フォームと使い方