Bootstrap CDN 順序筆記 (順序錯了就出錯)

如果使用了「BootstrapCDN」(content delivery network)，例如在網站上直接複製貼上以下的程式碼，就要注意幾件事情。

<link crossorigin="anonymous" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" rel="stylesheet"></link>

<scriptsrc="https://code.jquery.com/jquery-3.3.1.slim.min.js"integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"crossorigin="anonymous"></script>

<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>

<script crossorigin="anonymous" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

<script crossorigin="anonymous" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>

要注意的項目如下：
【jquery slim】

上述的範例中，引用了 jquery-3.3.1.slim.min.js 這個套件。這個 slim 版本並非完整的版本。如果使用了 ajax 功能，例如 $.post() 就會得到下例的錯誤訊息，為了解決此問題，建議在 slim 之後，放上完整的 jquery 套件：

Uncaught TypeError: $.post is not a function

【jquery 套件順序】
bootstrap 的 css 與 js 套件一定要在 jquery.min.js 之後，否則會造成部份功能失效。例如 modal('show') 這種元件的 js 功能，會出現如下的錯誤訊息：

Uncaught TypeError: $(...).modal is not a function

然而，jquery.slim.min.js 擺放的位置也必須注意，它必須放在 bootstrap.min.js 之前，否則會出現以下的怪異錯誤：

Cannot read property 'fn' of undefined

上述這個很多網友說這是 bootstrap 4.1.3 的錯誤，但還是提一下。

結論就是，對於前端程式設計師而言 jquery 完整套件建議一定要加，而且位置很重要，以上就是一個可行的範例。