Bootstrap実行時のエラー_モーダルひらけない

モーダルを試してた時にエラーとなったのは、

formのpostが先に走ってしまう現象。

 

<button class=”btn btn-default” data-toggle=”modal” data-target=”#modal-example”>hoge</button>

↓ ↓ 

<button type=”button” class=”btn btn-default” data-toggle=”modal” data-target=”#modal-example”>画像挿入</button>

 

typeにbuttonを指定すると治る。

BootstrapのThemeサンプルのボタン

Bootstrapのサンプルの中のthemeを

実際にcssの呼び出しクラスを変更して試した。

 

まぁ、ボタンだけだが、CSSフレームワークとして、

Bootstrapのcssのクラスを呼び出すだけで、

簡単にリッチなボタンができるのがすごいと思う。

 

<実行結果とhtmlファイルの一部を抜粋>

f:id:shevhome:20151025205826p:plain

f:id:shevhome:20151025205755p:plain

f:id:shevhome:20151025205809p:plain

 

———————————————

 サイズ指定

———————————————

小さい ← サイズ → 大きい

btn-xs btn-sm  指定なし btn-lg 

———————————————

 色指定

———————————————

 なし:btn-default

 青 :btn-primary

 緑 :btn-success

 水色:btn-info

 橙 :btn-danger

 赤 :btn-default

———————————————

 

他のサイズとか色とかあるんだろうか。

サンプルに載ってないだけであるかもしれない。

実際のCSSファイルを時間があるときに覗いてみるのもいいかも。

 

Bootstrapのサンプル

Bootstrapのサンプルに関しては、公式サイトの

f:id:shevhome:20151025203855p:plain

の「downloading the Bootstrap repository」というリンクから

ダウンロードでき、その中の「docs/example」という場所に

サンプルが置いてあるようである。

 

実際にダウンロードしてみると、

f:id:shevhome:20151025204157p:plain

対象のフォルダが存在するので、これを使うと、

実際のサンプルを自分の環境でも動かしながら見ることができる。

 

あとは、このサンプルを見ながら、

1つ1つ色々と試してみたいと思う。

Bootstrapの導入

色々とフロントエンドのフレームワーク

使ってみようと考え、

「Bootstrap」

というCSSフレームワークを導入。

 

導入に関しては、下記の公式サイトからダウンロードを行う。

getbootstrap.com

 

あとは必要なファイルを実行する環境に設置すればオッケー。

公式サイトにもあるが、

  • cssフォルダ
  • jsフォルダ
  • fontsフォルダ

の3つが必要になる。

あとは必要に応じて、HTMLのヘッダーに使うファイルを

設定して使ってあげれば良いらしい。

 

公式サイトにある「Basic template」というサンプルは

f:id:shevhome:20151025203637p:plain

と表示されるだけなので、

あとはサンプルなどを見ながら使って見るのが良いかもしれない。

独学向け(勉強方法)
独学向け(プログラミング)
独学向け(Webデザイン)
独学向け(javaScript)
独学向け(PHP/Laravel)
独学向け(Ruby/Rails)