Bootstrap初學筆記1 Modal使用

其實早該開一個HTML/CSS的分類了，只是最近都集中在JS上面，但其實有時間我便會去摸摸Bootstrap，畢竟真的是個很方便的東西，日後也許會買BS Studio來玩玩 反正不貴~!
今天要介紹的是Modal，可以在不切換頁面的情況下藉由彈出視窗顯示你想要的訊息(有點像alert 不過Modal再特殊一些)
實作上我喜歡配合Bootstrap來使用，首先需要copy基本的程式碼(由於目前網誌沒辦法內嵌html結構，暫時使用連結處理)

請參考這邊的連結

在連結內會看到一大串程式碼以及示範的樣式與內容(可以參考這支codepen
以下針對幾個點做解釋:
1.要使用寫好的modal模板，需要利用btn或link做啟動
方法是在btn中的class增加下列的設定
data-toggle="modal" data-target="#你寫好的modal模板"
2. .modal-dialog讓modal的內容有適當的間距與縮排
3. modal-footer 是跳出視窗的底部樣式，注意在這邊新增按鈕時會自動向右靠齊

所以簡單說來要使用modal，首先你必須複製或撰寫modal模板，接著在你想要觸發的按鈕上加入上述的設定，其實弄清楚後就覺得簡單多了，之後在用modal做點實作~!