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

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

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

Bootstrapの使い方

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

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

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

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

入力フォームを作る

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

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

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

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

まとめ

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

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

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

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

クライアントサイドはBootstrap、サーバーサイドはPHPを使用して、簡単な登録画面を作成しました。

1. ログインユーザ作成
2. ログイン
3. 商品登録
4. 商品一覧 pic.twitter.com/LPRd3zHXF2

— たけのこ (@takenoko_blog) June 16, 2018

関連記事

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

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

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

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

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

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

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

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

<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>

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

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

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

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

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

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