閱讀前，建議可以參考Day1：閱讀指南＆為何選擇這個題目？

▌挑戰簡介

• 題目：三十天用Vue.jS打造一個網路商城

• 挑戰內容：以六角學院的「Vue出一個電商網站」＆大陸慕課網（IMOOC）的「Vue2.0+Node.js+MongoDB 全棧打造商城系統」（主要學架設MongoDB）作為主要教材嘗試在30天內打造網路商城

• 本篇性質：純粹學習進度的紀錄，不會有詳細的教學或解釋，因此不適合認真閱讀

▌目標

▌互動式窗 Bootstrap 文件

https://bootstrap.hexschool.com/docs/4.0/components/modal/

▌環境安裝

在main js引用bootstrap套件

import 'bootstrap'    //main.js

環境要安裝 jquery popper.js

npm install --save jquery popper.js

▌貼上 Bootstrap 文件的code

按鈕

• data-toggle="modal" data-target="#exampleModal"會開啟視窗
• data-target="#exampleModal" 當中的ID會指到特定視窗

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  Launch demo modal
</button>

視窗Modal

• 下面這些代碼隨便找地方貼
• id="exampleModal" 是特定視窗的ID

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">×</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>