Bootstrap Table 響應式表格
前言
什麼是 Bootstrap Table?
Bootstrap Table 是建構在 Bootstrap 之上，主要是針對 Table 作用的框架。
所以如果要使用 Bootstrap Table 需要連 Bootstrap 框架也一起引入，畢竟是在 Bootstrap 的基礎上建構的框架，好啦廢話少說，我們直接進實作!
效果展示
實作
首先我們要做的是將一些會用到的 CSS、JS 文件引入到專案裡，接著撰寫一個 Table 元素，最重要的就是在 table 裡新增一個 data-toggle 屬性，屬性值為 table 如此一來就可以吃到 Bootstrap Table 的設定，一個基本的表格就出現了，你可以試著比對有無 data-toggle="table" 在畫面上有什麼差異，如果有甚麼問題也可以參考下面的程式碼。
Data-url
我們不可能每次的資料都是固定寫在 HTML 上的，這時候就可以使用 data-url 屬性來載入 JSON 文件。
範例文件
https://examples.bootstrap-table.com/json/data1.json
這邊需要注意的有兩個地方，首先是 th 裡需要加上 data-field 屬性，屬性值為對應的 JSON key，第二個需要注意的點是我提供的 JSON 範例與你在不同的網域，所以你的請求會被擋掉，我們這邊為求教學方便便直接使用代理請求，不再自行設定，使用方法為在網址前面加上 https://cors-anywhere.herokuapp.com/ ，由於這僅是為了測試方便，還請不要在正式網站上使用。
其他屬性
Bootstrap Table 還有其他好用的屬性，只要短短一行，可以省下你寫幾十行，以下我們一一來介紹。
data-sortable
設為 true 之後就可以針對欄位進行排序，但要注意的是，想要排序的欄位必須在 th 加上 data-sortable="true"，如此一來在表頭的地方就有按鈕可以讓你排序囉。
data-sort-class
這行的作用與 data-sortable 息息相關，旨在於將排序的那欄以灰底來凸顯，方便使用者檢視。
data-pagination
簡單明瞭，就是分頁，還可以調整一頁顯示幾筆喔!
data-search
多一行搜尋列，可以讓使用者搜尋相關資訊。
data-show-search-clear-button
清除按鈕，方便快速清除搜尋條件。
data-show-refresh
假如資料有異動，可以點擊按鈕來重新讀取資料。
data-show-toggle
切換檢視模式，從預設的條列式改為區塊顯示模式。
data-show-columns
調整要顯示甚麼欄位，預設最少需要顯示一欄。
data-show-columns-toggle-all
搭配 data-show-columns 使用，可以一次顯示全部跟取消顯示全部。
後記
Bootstrap Table 還有很多很好用的功能都是這次沒有介紹到的，如果各位有興趣可以再自行探索挖掘其他更好用的功能，那我們這次的分享就到這邊，我們下次再見。
謝謝各位看到這邊，也請各位看倌多多指教與交流。
If I have seen further than others, it is by standing upon the shoulders of giants.
