たけのこ
という方向けにBootstrapとjQueryを使用して、TODOリストを作成しました。ソースコードを直接貼ってあるので、参考になればと思います。
- クライアントサイドの処理のみ（DB登録処理とかはないです）
- 「追加」ボタンを押したときにエラーチェック
- 「追加」ボタンを押したとき、エラーがなければ一覧にデータを追加
- 一覧の「OK」ボタンを押したとき、対象行を一覧から削除
BootstrapとjQueryを使用して、TODOリストを作成しました。
カレンダーはBootstrap Datepickerを使用しています。作成時間：3.5時間 pic.twitter.com/evGKC3HOzx
— たけのこ (@takenoko_blog) June 21, 2018
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の知識をさらに深めたい方には、UdemyのBootstrap4のコース がおすすめです。
Bootstrapを使用して、おしゃれなサンプルページを5つ作成することができるので、このコースを利用して実際に手を動かせば、かなり実践的な知識を得ることができます。
