響應式網頁前端設計

第一階段
加強熟識HTML&CSS

第二階段
學習JavaScript&jQuery

第三階段
Bootstrap協助專案設計

第四階段
w3.css協助專案設計

第五階段
自行開發網站專案設計

第六階段
Pug(Jade)&Sass協助開發效率

=== TSuiling write 2018.07 ===

響應式網頁前端設計【第三階段】Bootstrap協助專案設計

Modal互動視窗的設計

參考:Bootstrap(中)w3schools(英)RUNOOB(中)

Modal互動視窗的設計

<!-- The Modal 設計 =========================== -->

<div class="modal fade" id="myModal">
  <div class="modal-dialog">
    <div class="modal-content">

      <!-- Modal Header =========================== -->
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">×</button>
      </div>

      <!-- Modal body =========================== -->
      <div class="modal-body">
        <p>網站設計模擬練習用<br>
          相關影像資訊來自連結介紹的各網站<br>             
          如有侵權請告知即刻處理</p>
        <p>建議使用 Chrome 瀏覽器</p>
        <p>Copyright © 2015 TopStyle Watch Web<br>          
          Maintain by TS</p>
      </div>

      <!-- Modal footer =========================== -->
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>

    </div>
  </div>
</div>