自分の手で未来を創るーlav0

自分のために、誰かのために、今ここにないもの、もっと良くしたいもの、何でも自分の手で創っていく。そして、作ったものを公開していきます

Bootstrapで作ったボタンを編集

前回に引き続き、アプリケーションの色を編集。今回はBootstrapでのボタンの色の検討。ボタンの色もすっきりしていきたいところ。

f:id:kslabo51:20191220203233p:plain

今回参考にさせていただいたサイトは下記の3つ

 

参考サイト

1ページ目、

bootstrap3.cyberlab.info

1)基本的なボタンの設置の仕方

2)サイズの指定

3)ブロックレベル(幅いっぱい)のボタンの設置

4)アクティブボタン(ボタンが押された状態)addClassで押されたあとにクラスをadd

5)無効化ボタン(半透明にいする)機能を付加するにはprop()メソッドなどで付加




2ページ目 

bootstrap3-guide.com

内容的は1ページ目をまとめていただいている感じです。

 

3ページ目 

webnetamemo.com

 

アプリケーション作成

この中で透明なボタンを枠線で色づけるアウトラインという種類がある。

こちらが今回分け合って利用しているBootstrap3に使用できるか試したが

やはり3では使えず。これが一番フィットするなと思ったのでCSSのborderで設定

 

ということで今回の色はこちらで決定(画像は前回の記事と同じ)

 

f:id:kslabo51:20191220201610p:plain