Bootstrap 3 與 4的差別列表

這邊有一張表可以參考

Differences Between Bootstrap 3 and Bootstrap 4

下載 : Bootstrap 4 GitHub

檔案全文檢索第一步 ：asp.net MVC with apache Solr and mongoDB demo

依據 建構全文檢索的網站 - 架構視意圖，目前簡單實作可以上傳檔案也成功把檔案內文解析出來後連同檔案一起存在 MongoDB內，Demo 如下

bootstrap範例網站

範例網址：bootply    jsfiddle

Template & Theme：Start Bootstrap

這兩個網站有很多的範例可以參考，包含 java script程式碼，css，html的語法，最重要的是可以直接就看到執行結果，非常方便，有興趣的人可以來這邊找到你想要的答案

多個 fullcalendar顯示在同一個網頁注意事項 - 使用 bootstrap tab

參考文件：fullcalendar render















目前使用者希望各別會議的預約能夠獨立顯示，所以我想到的是用 bootstrap tab的方式，
在取得 json event array後動態產生一個 tab和一個 fullcalendar div只顯示單一會議室的 events，
雖然我覺得這樣的作法不好，因為如果有30、40個會議室的話，tab就有 30個，提供這個功能是希望使用者能一眼就看出那個時段比較少的會議室預約，所以比較徧好單一 fullcalendar顯示所有的 events，不同的會議室 event用不同的顏色作區別。

我的作法如下：

Bootstrap Typeahead處理 json格式資料，並更新另一個 input的值

參考文件： Bootstrap typeahead ajax result format - Example

因為 Bootstrap Typeahead的 source是一個字串陣列 (string array)，如果使用者希望可以 source可以是 json string array而且在 typeahead選擇時可以更新另一個 input的值，這一篇文章就可以幫助你，作法如下

1. source 接回的是 json string array
2. 實作 matcher, sorter, highlighter
3. 實作 updater，在這邊就可以用 JSON.parse 處理 obj，再把某個 attribute值指定給特定的input

bootstrap 使用css transform後會造成 nav bar閃爍(flicker)的問題 in chrome

參考文件：Prevent flicker on webkit-transition of webkit-transform

因為實作CSS Animation - 以小米為師時，發現只要移動滑鼠滾輪時，bootstrap nav bar就會一閃一閃的，眼睛很不舒服，可是在 IE 11上就沒這個問題，這是因為 css使用了 -webkit-transform  造成的，解決方式就是在 body內加上 -webkit-backface-visibility : hidden; 即可

$(window).scrollTop() 的值都為 0

因為之前為了要解決一個問題 開啟 bootstrap modal會造成首頁內容左移 (shit to left)，css 設定如下

html {
  overflow: hidden;
  height: 100%;}

因為把 height設為 100%，所以捉取到的值永遠都是 0，但為了作到動畫效果  CSS Animation - 以小米為師   ，所以只好又把它修改回來。

bootstrap model開啟後馬上又自動關閉

相關文章：Bootstrap Modal immediately disappearing

剛好我就是這個原因，因為我是使用 asp.net mvc開發
不小心使用了 script.render載入了兩次 bootstrap.js，後來拿掉後就沒有這個問題了

開啟 bootstrap modal會造成首頁內容左移 (shit to left)

解決方式 Twitter Bootstrap modal pushes html content to the left

主要的作法就是在 css加上如下內容

html {
  overflow: hidden;
  height: 100%;}
body {
  overflow: auto;
  height: 100%;}

/* unset bs3 setting */.modal-open {
 overflow: auto; 
}

ASP.Net MVC 5使用 bootstrap 3 typeahead和 modal實作電話查詢

SweetAlert for Bootstrap - A beautiful replacement for JavaScript's "alert"

連結
SweetAlert 官網
document.querySelector()說明

先把 js, css 加入後，再 javascript 程式碼加上如下程式碼， .sweet-1是指在某個 html元件宣告 class內的名稱，如 button class="btn btn-lg btn-success sweet-1" ，這樣就可以使用 SweetAlert的美麗彈出視窗了

document.querySelector('.sweet-1').onclick = function(){ swal("Here's a message!"); };