【初心者向け】5分でできるBootstrapの使い方【入力フォーム作成】

たけのこ

Bootstrapって聞いたことはあるけど、どうやったら使えるんだろう?

 

本記事ではBootstrapを使ったことが無い方向けに、次の説明をしています。

  • Bootstrapの使い方
  • テキストボックスを使った入力フォームの作成

Bootstrapの使い方

まずは、Bootstrapの使用方法です。

Bootstrapを使用するためには、BootstrapのCSSとJavaScriptを読み込む必要があります。

下のソースコードをそのままコピペしてhtml形式で保存すれば、Bootstrapを使用することが出来ます

MEMO

9行目でCSSを、18〜20行目でJavascriptを読み込んでいます。

 

保存したhtmlファイルをブラウザで開いて、以下の様に表示されていればBootstrapを使う準備は完了です。

参考 Bootstrap公式ページBootstrap

入力フォームを作る

次は「ラベル」と「テキストボックス」を配置して入力フォームを作成します。

下のソースコードでは、16〜26行目を追加して入力フォームを作成しています。

ポイント
  1. 入力フォームを作成する場合には、まずformタグを作成する
  2. formタグの中に「ラベル+テキストボックス」ごとにform-groupクラスを持つdivタグを作成する
  3. その中にlabelタグとinputタグを入れる。
  4. inputにはform-controlクラスを設定する

 

こちらのソースコードもコピペして、htmlファイルを開きなおしてください。

下の様に表示されていれば入力フォームの完成です。

参考 Bootstrap公式のフォーム作成ページBootstrap

まとめ

公式ページからコードをコピーして貼り付けることで、Bootstrapは簡単に始めることが出来ます。

公式ページにはWebページを作成するための様々なクラスが存在するので、試しながら作成して見てはいかがでしょうか。

僕は最近、Bootstrapのみを使って、以下の様なログイン画面と登録・一覧画面を作成しました。

一覧画面ではmediaクラスを使用しています。


関連記事

ランディングページを作成したい方はこちらもどうぞ。

Bootstrapでランディングページを作りたい人はドットインストールを見よう

今回はBootstrapだけでしたが、次はBootstrapとjQueryを使って簡単なTODOリストを作成する記事を書きました。

こちらもソースコードを貼ってあるので、コピペするだけで実装可能となっています。

【初心者向け】BootstrapとjQueryでTODOリストを作成①

 

(番外編)Gridシステムでレイアウトを整える

直接Bootstrapを使い始めるのに関係ないのですが、Bootstrapでは画面のレイアウトを整えるためのGridシステムが存在します。Gridシステムとは画面の縦のレイアウトを整えるためのクラスで、うまく使うことでレスポンシブにも対応したレイアウトが実現できます。

下のサンプルコードでは、containerクラスの中にcolを持つクラスを3つ記載しているので縦に3分割することになりますが、colは最大で12分割することが可能となっています。

HTML
<div class="container">
    <div class="row">
      <div class="col">1 of 3</div>
      <div class="col">2 of 3</div>
      <div class="col">3 of 3</div>
    </div>
</div>

上のサンプルコードを実装すると、画面レイアウトは下のようなイメージになります。

注意
Gridシステムを使用する時には、上のサンプルコードの様にdivタグのクラスをcontainer>row>colとして使用する必要があります。

また、colにはレスポンシブ対応するために、サイズ別に4種類のクラスが用意されています。下の表のMax container widthよりも大きい画面サイズの時に.col-{?}のクラスが有効になりますので、デバイス毎に画面レイアウトを変更したい時に使用することが出来ます。

参考 Grid system・BootstrapBootstrap

 

この記事を読んだ方におすすめのサイト

Bootstrapの知識をさらに深めたい方には、UdemyのBootstrap4のコース がおすすめです。

Bootstrapを使用して、おしゃれなサンプルページを5つ作成することができるので、このコースを利用して実際に手を動かせば、かなり実践的な知識を得ることができます。

Udemy|Bootstrap4のおすすめコースはこちら