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

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

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

【初心者向け】5分でできる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のおすすめコースはこちら