Takunojiのプログラミング・プレイグラウンド(遊び場)

Javaプログラミングを基本にして、ゲーム作成に必要なことの調査結果、やったら面白そうなことなどを記載します。プログラミングのススメ的なことも記載します。プログラミングで楽しく遊ぶために色々と記載して行きます。

Bootstrap チュートリアル1〜W3schools: はじめの一歩〜

仕事でBootstrapにも触ることになったので学習します。AngularJSとセットになっていました。AngularJSの学習はこちらに記載しています。

早速始めようと思います。

Bootstrap

まずはチュートリアルサイトを参考にして進めていきます。

この参考サイトには「こんな感じですよ」というものを載せて入る様でした。

(コピペで)実装してみると以下の様に表示されました。これはレスポンシブ対応ということです。

f:id:Takunoji:20191012163858p:plain

f:id:Takunoji:20191012163902p:plain

Bootstarp Examples

自分の場合、CSSはあるものを適当にカスタムする様なことしかしてこなかったので「あーする」「こーする」に関しては無頓着だったのですが、そうも言ってられず。。。現在に至る次第です。

イントロダクション

上のリンク先のページはイントロダクションの位置付けであろうと思いいます。「こんな感じ」というのをバシッと見てもらう方が良いということでしょう。

ちょっといじってみる

上のリンク先にはサンプルHTMLが記載されて入るのでコピってすぐに表示できます。

上のキャプチャがそれにあたります。

そして、今回仕事で使用しているものはAngular+Bootstarpなので両方使用できるか試して見ます。興味本位でやって見ました。

f:id:Takunoji:20191012165330p:plain

上の「Hello wanwan」とある部分はAngularJSでテキストボックスに文字を入力したものです。サンプルはこちらのリンクにあります。

このサンプルを書き込んで見ました。

確かに「見た目のデザイン」をやりたがらない自分にとってはとても助かります。

コードでみためを実装できるのが一番良いのですが、それでもCSSで一からやるよりも作業がとても早くできそうです。

 

次回は、このチュートリアルの次ページをやります。

 

でわでわ。。。