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の呼び出しクラスを変更して試した。
まぁ、ボタンだけだが、ＣＳＳフレームワークとして、
Bootstrapのcssのクラスを呼び出すだけで、
簡単にリッチなボタンができるのがすごいと思う。
<実行結果とhtmlファイルの一部を抜粋＞
———————————————
サイズ指定
———————————————
小さい ← サイズ → 大きい
btn-xs btn-sm 指定なし btn-lg
———————————————
色指定
———————————————
なし：btn-default
青 ：btn-primary
緑 ：btn-success
水色：btn-info
橙 ：btn-danger
赤 ：btn-default
———————————————
他のサイズとか色とかあるんだろうか。
サンプルに載ってないだけであるかもしれない。
実際のCSSファイルを時間があるときに覗いてみるのもいいかも。
Bootstrapのサンプル
Bootstrapのサンプルに関しては、公式サイトの
の「downloading the Bootstrap repository」というリンクから
ダウンロードでき、その中の「docs/example」という場所に
サンプルが置いてあるようである。
実際にダウンロードしてみると、
対象のフォルダが存在するので、これを使うと、
実際のサンプルを自分の環境でも動かしながら見ることができる。
あとは、このサンプルを見ながら、
１つ１つ色々と試してみたいと思う。
Bootstrapの導入
色々とフロントエンドのフレームワークを
使ってみようと考え、
「Bootstrap」
導入に関しては、下記の公式サイトからダウンロードを行う。
あとは必要なファイルを実行する環境に設置すればオッケー。
公式サイトにもあるが、
- cssフォルダ
- jsフォルダ
- fontsフォルダ
の３つが必要になる。
あとは必要に応じて、HTMLのヘッダーに使うファイルを
設定して使ってあげれば良いらしい。
公式サイトにある「Basic template」というサンプルは
と表示されるだけなので、
あとはサンプルなどを見ながら使って見るのが良いかもしれない。
ローカル環境(Mac)_002_XAMPPの起動と停止
Lunchpadを開き
「MAMP」をクリックして
管理コンソールを起動します。
===========================================
===========================================
「Start Servers」をクリックすると起動します。
===========================================
===========================================
「Stop Servers」を押すことで停止することができます。
