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

たけのこ

BootstrapとjQueryを使いたいんだけど、いまいち使い方が分からないなぁ・・・。

という方向けにBootstrapとjQueryを使用して、TODOリストを作成しました。ソースコードを直接貼ってあるので、参考になればと思います。

実装した機能
  • クライアントサイドの処理のみ(DB登録処理とかはないです)
  • 「追加」ボタンを押したときにエラーチェック
  • 「追加」ボタンを押したとき、エラーがなければ一覧にデータを追加
  • 一覧の「OK」ボタンを押したとき、対象行を一覧から削除

Bootstrapの使い方を知らない方へ

HTML

HTMLのポイントの一つは、35行目のtable-responsiveクラスです。

tableタグをさらにtable-responsiveクラスで囲むことで、横幅が狭まったときに、横スクロールがつきます。

JavaScript

カレンダー機能はBootstrap Datepickerを使用

期限テキストボックスをクリックすると、カレンダーが表示されるようにしています。

この機能はBootstrap Datepickerを使用して実現しています。

下のダウンロード画面からソースコードをダウンロードしましょう。

ダウンロードする

ダウンロードしたフォルダ直下にある「dist」の下の「css」と「js」フォルダから以下のファイルを使用して読み込みましょう。

  • bootstrap-datepicker.min.css
  • bootstrap-datepicker.ja.min.js
  • bootstrap-datepicker.min.js

JavaScriptのソースコード6〜9行目を記載することで、日本語のカレンダーが使用可能になります。

まとめ

ソースコードをみて分からない箇所は、公式ページの説明で理解すると良いと思います。

調べる中で、新しいクラスを知る機会にもつながります。

Bootstrap公式ページへ

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

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

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

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